wardrobe/pages/dapei/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="搭配" :shadow="0" :showback="true"></tm-menubars>
		<view class="C1b1b1b pb-20">
			<tm-tabs align="left" class="qiehuan1" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
		</view>
		<!-- 天气 -->
		<scroll-view class="scroll-view_H" scroll-x="true">
			<view class="scroll-view-item_H">
				<image class="chuanda" src="/static/img/107.png" mode="widthFix"></image>
				<view class="mt-20 text-align-center">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">16°c~20°c</text>
					<text class="text-size-s ml-15">星期一</text>
				</view>
				<view class="bianji" @click="dapei(1)">编辑穿搭</view>
			</view>
			<view class="scroll-view-item_H">
				<view class="chuanda">
					<view class="text-white text-size-lg">南京市</view>
					<view class="text-size-lg mt-15 text-weight-b" style="color: #FFCC00;">8°C</view>
					<view class="text-white text-size-lg mt-15">局部地区降雨</view>
					<view class="text-gray text-size-lg mt-10">最低0°c 最高9°c</view>
				</view>
				<view class="mt-20 text-align-center">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">16°c~20°c</text>
					<text class="text-size-s ml-15">星期一</text>
				</view>
				<view class="bianji" @click="dapei(2)">添加穿搭</view>
			</view>
			<view class="scroll-view-item_H">
				<image class="chuanda" src="/static/img/107.png" mode="widthFix"></image>
				<view class="mt-20 text-align-center">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">16°c~20°c</text>
					<text class="text-size-s ml-15">星期一</text>
				</view>
				<view class="bianji" @click="dapei(1)">编辑穿搭</view>
			</view>
		</scroll-view>
		<div class="zhuti">
			<!-- 衣橱 -->
			<tm-sheet class="yichu" style="margin-bottom: 40px !important;">
				<tm-tabs class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndex1" :list="list1" range-key="title"></tm-tabs>
				<view class="yiguicla black pa-6 ma-4 fl" v-for="(item,index) in quanbuList" @click="zidingyi(2)">
					<image :src="item.src" mode="widthFix"></image>
					<view class="text-size-m mt-20 mb-20 ml-10">{{item.text}}</view>
				</view>
				<view style="clear: both;" class="more ma-30 pt-40" @click="gengmore()">
					<image src="/static/img/30.png" mode="widthFix"></image>
					<text class="text-size-s">下拉加载更多~</text>
				</view>
			</tm-sheet>
			<tm-button :round="24" class="sao" block @click="zidingyi(1)">自定义搭配</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			list:[ '预约穿搭'],
			list1:['时尚','商务'],
			activeIndex:0,
			activeIndex1:0,
			quanbuList:[{
				src:'/static/img/44.png',
				text:'日常穿搭',
			},{
				src:'/static/img/44.png',
				text:'日常穿搭',
			},{
				src:'/static/img/44.png',
				text:'日常穿搭',
			},{
				src:'/static/img/44.png',
				text:'日常穿搭',
			},{
				src:'/static/img/44.png',
				text:'日常穿搭',
			},{
				src:'/static/img/44.png',
				text:'日常穿搭',
			}],
			chooseindex:-1
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		dapei(type){
			if(type==1){
				uni.navigateTo({
					url: "/pages/zidingyi/index?off="+type,
				})
			}else{
				uni.navigateTo({
					url: "/pages/dapeizidingyi/index",
				})
			}
			
		},
		gengmore(){
			
		},
		zidingyi(off){
			uni.navigateTo({
				url: "/pages/zidingyi/index?off="+off,
			})
		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	.chuanda{width: 100%;height: 144px;}
	.taiyang{width: 25px;}
	.bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
	text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		background: #1B1B1B;
		padding-bottom: 15px;
	}
	.scroll-view-item {
		height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 150px;
		text-align: center;
		font-size: 36rpx;
		margin-left: 10px;
		background: #0D0D0D;
		padding: 6px;
		border-radius: 10px;
	}
	.yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
	/deep/ .qiehuan .text-white{
		font-size: 14px;
		background: #303440;
		height: 28px;
		vertical-align: middle;
		line-height: 28px;
		border-radius: 20px;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 17%;
	}
	/deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
	.yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
	.yiguicla{width: 47%;border-radius: 10px;}
	.more{text-align: center;}
	.more image{margin-right: 10px;vertical-align: middle;width: 30px;}
	.fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
	border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
	.sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
</style>