wardrobe/pages/shouye/index.vue

<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();
			console.log(this.sys)
		},
		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>