wardrobe/pages/shouye/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
		<view class="C1b1b1b">
			<tm-search v-model="soso" color="white">
				<template #right>
					<view class="xiangji">
						<image src="/static/img/xiangji.png" mode="widthFix"></image>
					</view>
				</template>
			</tm-search>
			<view class="dingwei">
				<image style="vertical-align: middle;" src="/static/img/dingwei.png" mode="widthFix"></image>
				<text style="vertical-align: middle;" class="text-size-g">北京Beijing</text>
			</view>
		</view>
		<view class="zhuti mt-20">
			<tm-grid :grid="5" :list="list3" :icon-size="140" font-color="white"></tm-grid>
			<tm-sheet class="lunbo">
				<view class="py-10 text-size-g dianz">
					<image src="/static/img/6.png" mode="widthFix"></image>
					<text class="text-white">今日穿搭推荐</text>
				</view>
				<view class="mt-20 text-size-g dianz">
					<view class="text-white">西装夹克高级感穿搭 | 彰显</view>
					<view class="text-white">秋冬复古型男典范</view>
				</view>
				<view class="touxiang mt-20">
					<image src="/static/img/7.png" mode="widthFix"></image>
					<text class="text-white text-size-m">可樂crys</text>
				</view>
				<view class="shoucang mt-20">
					<image src="/static/img/8.png" mode="widthFix" style="margin-right: 15px;"></image>
					<image src="/static/img/9.png" mode="widthFix"></image>
				</view>
			</tm-sheet>
		</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>
		<tm-button theme="white" size="m" @click="shang()">下一张</tm-button>
		<tm-button theme="white" size="m" @click="xia()">上一张</tm-button> -->

	
	</view>
</template>
		
<script>
	import{myRequest} from '@/api/request.js'
	export default {
		data() {
			return {
				soso:'',
				list3:[
					{icon:'/static/img/1.png',text:'预约家政'},
					{icon:'/static/img/2.png',text:'预约服务'},
					{icon:'/static/img/3.png',text:'自助录入'},
					{icon:'/static/img/4.png',text:'鞋服洗护'},
					{icon:'/static/img/5.png',text:'闲置交换'},
				],
				keyword: '',
				top: 60,
				sys: null,
				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() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif
		},
		created() {
			setTimeout(function(){
				if(uni.getStorageSync("token")==""){
					uni.redirectTo({
						url:"/pages/login/index"
					})
				}
			},2000)
			this.sys = uni.getSystemInfoSync();
		},
		methods: {
			shang(){
				this.current=this.current+1;
				this.current1=this.current1+1
			},
			xia(){
				this.current=this.current-1;
				this.current1=this.current1-1
			}
		},
	}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		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;
	}
	// 
	.xiangji image{
		width: 30px;
		height: 22px;
	}
	.suosou image{
		width: 40px;
	}
	/deep/ .icon-search{
		font-size: 23px !important;
		color: #8E8E93 !important;
	}
	/deep/ .tm-search{
		width: 94%;
		margin: 0 auto;
		background-color: #414141 !important;
		border-radius: 10px;
	}
	/deep/ .tm-search .grey-darken-5{
		background-color: #414141 !important;
	}
	.dingwei{
		width: 92%;
		margin: 0 auto;
		margin-top: 20px;
		padding-bottom: 20px;
	}
	.dingwei image{
		width: 20px;
		margin-right: 10px;	
	}
	/deep/ .tm-col{
		width: 20% !important;
	}
	.zhuti{
		padding: 10px;
	}
	/deep/ .lunbo{
		margin:0 !important;
		padding: 8px !important;
		margin-top: 20px !important;
	}
	.dianz image{
		width: 30px;
		vertical-align: middle;
		margin-right: 10px;
	}
	/deep/ .text-size-s span,/deep/ .text-size-g{
		font-size: 15px;
	}
	.touxiang image{
		width: 35px;
		margin-right: 10px;
		vertical-align: middle;
	}
	.shoucang image{
		width: 45px;
	}
</style>