wardrobe/pages/yifu/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">
			<view style="width: 90%;margin:0 auto;">
				<tm-tabs align="left" class="qiehuan1" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
			</view>
			<image class="touxiang" src="/static/img/63.png" mode="widthFix"></image>
		</view>
		<div class="zhuti" style="padding-bottom:60px !important;">
			<view class="text-align-center text-size-lg">新款冬季羽绒服</view>
			<view class="text-align-center text-size-s mt-10 text-gray">蓬松、轻盈、温暖</view>
			<tm-sheet class="kuang" style="padding-bottom: 30px !important;">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;position: relative;">
					<view class="text-white text-align-center pt-20">衣物参数</view>
					<view class="fr mr-20 xiugai" @click="xiugaiFun()">
						<image src="/static/img/64.png" mode="widthFix"></image>
						<text>修改</text>
					</view>
					<view class="you black mt-30">
						<tm-input :disabled="xianshi" title="衣长" v-model="reqData.username" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="上市年份" v-model="reqData.height" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="颜色" v-model="reqData.weight" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="尺码" v-model="reqData.username" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="品牌" v-model="reqData.height" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="主材含量" v-model="reqData.weight" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="适用对象" v-model="reqData.weight" align="right"></tm-input>
					</view>
				</view>
			</tm-sheet>
			<tm-sheet class="kuang">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;">
					<view class="text-white text-align-center pt-20">类似衣物</view>
					<view class="yiguicla black pa-6 ma-4 fl mb-20" v-for="item in quanbuList" @click="yifu()">
						<image :src="item.src" mode="widthFix"></image>
						<view class="text-align-center text-size-m mt-8">{{item.text}}</view>
						<view class="text-align-center text-size-m mt-6 mb-6">{{item.type}}</view>
					</view>
					<view style="clear: both;"></view>
				</view>
			</tm-sheet>
			<tm-sheet class="kuang">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;">
					<view class="text-white text-align-center pt-20">品牌信息</view>
					<tm-listitem
						class="pb-20"
						:left-icon-size="100"
						value="100件商品"
						title="巴黎世家"
						label="只此一瞬,狂爱一生"
						left-icon="../../static/img/65.png"
						show-left-icon
					></tm-listitem>
				</view>
			</tm-sheet>
			<tm-button :round="24" class="sao mb-40" block>出库</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			xianshi:true,
			list:[ '商品介绍','搭配方案'],
			activeIndex:0,
			reqData:{
				username:'1',
				height:'1',
				weight:'1',
			},
			quanbuList:[{
				src:'/static/img/45.png',
				text:'NEO CITY 涂鸦',
				type:'手提包'
			},{
				src:'/static/img/46.png',
				text:'满印迷你标识',
				type:'围巾'
			},{
				src:'/static/img/47.png',
				text:'大号版型夹克',
				type:'新品'
			}]
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		xiugaiFun(){
			this.xianshi=false;
		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .zhuti{padding: 10px 10px;}
	/deep/ .kuang{margin:0 !important;padding: 0px !important;}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	.touxiang{width: 100%;display: block;margin-top: 10px;}
	.xiugai image{width: 18px;vertical-align: middle;margin-right:5px;}
	.xiugai text{vertical-align: middle;}
	.xiugai{position: absolute;right:5px;top:10px;}
	.you{border-radius: 10px;padding:10px;width: 88%;margin:0 auto;margin-top:20px;}
	/deep/ .you .grey-darken-5{
		background-color: #0d0d0d!important;
		padding: 0px !important;
	}
	/deep/ .you .text-red{color: white;}
	/deep/ .tan .active{background-color: #AAAAAA !important;}
	/deep/ .tan .tm-poups .grey-darken-5{background-color: gray !important;}
	/deep/ .tan uni-input{text-align: right;}
	/deep/ .you .border-grey-darken-4-b-1 {
	    border-bottom: solid 1px #313131 !important;
	}
	.yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
	.yiguicla{width: 30%;border-radius: 10px;}
	.sao{width: 88%;margin:0 auto;margin-top:40px;}
	/deep/ .mx-32{margin:0px !important;margin-top:15px !important;}
</style>