|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <view :style="{ minHeight: sys.windowHeight + 'px' }"
|
|
|
+ :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text ']">
|
|
|
+ <tm-menubars color="primary" title="tm-vuetify" :shadow="0" :showback="false">
|
|
|
+ <template #left>
|
|
|
+ <view class="pl-24">
|
|
|
+ <tm-images :width="86" src="static/logowhite.png"></tm-images>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </tm-menubars>
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <view class="fixed fulled overflow" style="z-index: 8;">
|
|
|
+ <tm-search @confirm="openSearch" v-model="keyword" suffixIcon=" " :showRight="false" :fllowTheme="false"
|
|
|
+ color="white" :bg-color="$tm.vx.state().tmVuetify.color || 'primary'"
|
|
|
+ :insertColor="$tm.vx.state().tmVuetify.color || 'primary'" :round="4" placeholder="组件中英文名的关键词"
|
|
|
+ :shadow="0">
|
|
|
+ <template #suffixIcon>
|
|
|
+ <view @click="openSearch">
|
|
|
+ <tm-tags dense color="primary" model="text">搜索组件</tm-tags>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </tm-search>
|
|
|
+ </view>
|
|
|
+ <view style="height: 84rpx;"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view :class="[$tm.vx.state().tmVuetify.black ? 'black' : $tm.vx.state().tmVuetify.color || 'primary']">
|
|
|
+ <view class=" py-32" style=""
|
|
|
+ :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : $tm.vx.state().tmVuetify.color || 'primary']">
|
|
|
+ <!-- <navigator url="gonggao" class=" text-align-center text-white pb-12 flex-center mx-32" style="vertical-align: middle;">
|
|
|
+ <text class="pr-32 text-weight-b text-size-s">来自作者的一条公告>></text>
|
|
|
+ </navigator> -->
|
|
|
+ <view class="text-size-s text-align-center text-white opacity-8">
|
|
|
+ <text class="pr-24 ">当前版本:{{ ver }}</text>
|
|
|
+ <text>更新时间:{{ time }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pt-14 pb-n10 round-t-8" :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text ']">
|
|
|
+ <view class="ma-32 flex-between flex-wrap ">
|
|
|
+ <view @click="openUrl(item.url)" v-for="(item, index) in list" :key="index"
|
|
|
+ class=" round-10 mb-n10 shadow-24" style="width: 48%;"
|
|
|
+ :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : 'white']">
|
|
|
+ <view class="flex-center flex-col px-32 py-n12">
|
|
|
+ <tm-icons :color="$tm.vx.state().tmVuetify.color || 'primary'" :size="130"
|
|
|
+ :name="item.icon"></tm-icons>
|
|
|
+ <view class="text-size-lg text-weight-b">{{ item.title }}</view>
|
|
|
+ <view class="text-size-s py-12 text-align-center">{{ item.label }}</view>
|
|
|
+ <view>
|
|
|
+ <!-- <tm-tags color="grey" size="g" model="text">{{ item.btn }}</tm-tags> -->
|
|
|
+ <tm-button :round="12" text size="s">
|
|
|
+ <view class="flex-center px-10 vertical-align-middle" style="line-height: 0;">
|
|
|
+ <text class="pr-10">{{ item.btn }}</text>
|
|
|
+ <tm-icons :fllowTheme="true" style="line-height: 0;" dense size="20"
|
|
|
+ name="icon-angle-right"></tm-icons>
|
|
|
+ </view>
|
|
|
+ </tm-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-center">
|
|
|
+ <tm-images :width="60" src="static/logo_great.png"></tm-images>
|
|
|
+ </view>
|
|
|
+ <view class="py-24 px-0 text-size-xs text-grey-lighten-1 text mx-32 text-align-center">
|
|
|
+ 本UI经过细致打磨,并且还在不断的细化中,让它成为高效率、高颜值、高覆盖率的组件库,需要各方努力贡献。
|
|
|
+ <view>请不要盗版,可免费使用。</view>
|
|
|
+ <view class=" text-weight-b" :class="[`text-${$tm.vx.state().tmVuetify.color || 'primary'}`]">
|
|
|
+ 用户Q群:
|
|
|
+ <text selectable>18593916</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <tm-dialog v-model="show" title="提醒"
|
|
|
+ content="因小程序大小限制,本demo页面过大,主体导入的js超过2mb,对于分包已无作用,因此如需查询相关demo请前往H5预览,一定是兼容小程序的,不用担心."></tm-dialog>
|
|
|
+ <tm-flotbutton :safe="true" color="bg-gradient-primary-accent-b" @click="imte"
|
|
|
+ :icon="$tm.vx.state().tmVuetify.black ? 'icon-lightbulb-fill' : 'icon-lightbulb'"
|
|
|
+ :label="$tm.vx.state().tmVuetify.black ? '亮色' : '暗黑'" :show-text="true" :offset="[16, bottom]">
|
|
|
+ </tm-flotbutton>
|
|
|
+
|
|
|
+ <view style="height: 150rpx;" @click="show=true"></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import{myRequest} from '@/api/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ test: true,
|
|
|
+ show: false,
|
|
|
+ keyword: '',
|
|
|
+ top: 60,
|
|
|
+ flootBootm: 0,
|
|
|
+ time: '2022/3/27',
|
|
|
+ ver: '1.2.30',
|
|
|
+ sys: null,
|
|
|
+ bottom: 0,
|
|
|
+ list: [{
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/com.png?v=2',
|
|
|
+ title: '基础组件',
|
|
|
+ label: '提供了基础组件90+',
|
|
|
+ url: '/subpages/com/index',
|
|
|
+ btn: '预览组件'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/theme.png?v=2',
|
|
|
+ title: '主题切换',
|
|
|
+ label: '暗黑,其它主题切换',
|
|
|
+ url: 'themechange',
|
|
|
+ btn: '前往体验'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/com.png?v=2',
|
|
|
+ title: 'render',
|
|
|
+ label: 'canvas渲染引擎',
|
|
|
+ url: '/pages/index/crender',
|
|
|
+ btn: '1.0正式版'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/css.png?v=2',
|
|
|
+ title: '预设样式库',
|
|
|
+ label: '零CSS写应用',
|
|
|
+ url: '/subpages/csspage/csspage',
|
|
|
+ btn: '预览相关'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/lottie.png?v=2',
|
|
|
+ title: 'lottie动画',
|
|
|
+ label: '提供了对lottie的封装',
|
|
|
+ url: '/subpages/lottie/index',
|
|
|
+ btn: '前往体验'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/echarts.png?v=2',
|
|
|
+ title: 'Echarts',
|
|
|
+ label: '对百度图表的封装',
|
|
|
+ url: '/subpages/echarts/index',
|
|
|
+ btn: '前往体验'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/yewu.png?v=2',
|
|
|
+ title: '业务组件',
|
|
|
+ label: '提供了相关行业的组件',
|
|
|
+ url: '/subpages/food/index',
|
|
|
+ btn: '预览相关'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/moban.png?v=2',
|
|
|
+ title: '页面模板',
|
|
|
+ label: '相关行业的页面模板',
|
|
|
+ url: '/subpages/moban/index',
|
|
|
+ btn: '预览模板'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://jx2d.cn/yuwuimages/120/game.png?v=2',
|
|
|
+ title: '游戏抽奖',
|
|
|
+ label: '转盘|老虎机|九宫格等',
|
|
|
+ url: '/subpages/yewu/index',
|
|
|
+ btn: '体验相关'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // #ifdef MP
|
|
|
+ this.top = uni.upx2px(150);
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.sys = uni.getSystemInfoSync();
|
|
|
+ myRequest({
|
|
|
+ url: "/api/login/sendCode?mobile=17721029919",
|
|
|
+ method:'get',
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSearch() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'search?key=' + this.keyword
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openUrl(url) {
|
|
|
+ let t = this;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url,
|
|
|
+ fail: e => {
|
|
|
+ t.show = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ imte() {
|
|
|
+ this.$tm.theme.setBlack();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+</style>
|