|
@@ -1,74 +1,15 @@
|
|
<template>
|
|
<template>
|
|
<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
<tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
|
|
<tm-menubars title="" :shadow="0" :showback="false"></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>
|
|
|
|
|
|
+ <tm-swiper :previmage="false" :noSwiping="true" width="400" :current="current" :margin="32" :autoplay="false" :list="list"></tm-swiper>
|
|
|
|
+ <tm-button theme="white" size="m" @click="shang()">下一张</tm-button>
|
|
|
|
+ <tm-button theme="white" size="m" @click="xia()">上一张</tm-button>
|
|
|
|
+ <view class="bbb">
|
|
|
|
+ <tm-swiper :notouch="true" :disable-touch="true" class="aaa" :current="current1" :autoplay="false" dot-model="rect" :indicator-dots="true" :list="list"></tm-swiper>
|
|
</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']">
|
|
|
|
- <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>
|
|
|
|
|
|
+ <tm-button theme="white" size="m" @click="shang()">下一张</tm-button>
|
|
|
|
+ <tm-button theme="white" size="m" @click="xia()">上一张</tm-button>
|
|
|
|
+
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
@@ -78,79 +19,20 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- test: true,
|
|
|
|
- show: false,
|
|
|
|
keyword: '',
|
|
keyword: '',
|
|
top: 60,
|
|
top: 60,
|
|
- flootBootm: 0,
|
|
|
|
- time: '2022/3/27',
|
|
|
|
- ver: '1.2.30',
|
|
|
|
sys: null,
|
|
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: '体验相关'
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
|
|
+ list:[
|
|
|
|
+ 'https://picsum.photos/800?jv=34',
|
|
|
|
+ 'https://picsum.photos/800?jv=74',
|
|
|
|
+ 'https://picsum.photos/800?jv=3',
|
|
|
|
+ 'https://picsum.photos/800?jv=5',
|
|
|
|
+ 'https://picsum.photos/800?jv=74',
|
|
|
|
+ 'https://picsum.photos/800?jv=3',
|
|
|
|
+ 'https://picsum.photos/800?jv=5'
|
|
|
|
+ ],
|
|
|
|
+ current:0,
|
|
|
|
+ current1:0
|
|
};
|
|
};
|
|
},
|
|
},
|
|
onLoad() {
|
|
onLoad() {
|
|
@@ -169,23 +51,14 @@
|
|
this.sys = uni.getSystemInfoSync();
|
|
this.sys = uni.getSystemInfoSync();
|
|
},
|
|
},
|
|
methods: {
|
|
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();
|
|
|
|
|
|
+ shang(){
|
|
|
|
+ this.current=this.current+1;
|
|
|
|
+ this.current1=this.current1+1
|
|
},
|
|
},
|
|
|
|
+ xia(){
|
|
|
|
+ this.current=this.current-1;
|
|
|
|
+ this.current1=this.current1-1
|
|
|
|
+ }
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -194,4 +67,13 @@
|
|
/deep/ .tm-menubars .body{
|
|
/deep/ .tm-menubars .body{
|
|
background-color: #1b1b1b !important;
|
|
background-color: #1b1b1b !important;
|
|
}
|
|
}
|
|
|
|
+ /deep/ .aaa uni-image{
|
|
|
|
+ width: 100px !important;
|
|
|
|
+ height: 100px !important;
|
|
|
|
+ }
|
|
|
|
+ /deep/ .aaa uni-swiper-item{
|
|
|
|
+ width: 100px !important;
|
|
|
|
+ height: 100px !important;
|
|
|
|
+ padding: 0 10px !important;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|