<template>
	<!-- 款式委托 -->
	<view class="" style="position: relative;">
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="款式委托">
			<template v-slot:right>
				<view class="u-m-r-24"><u-icon name="search" size="38"></u-icon></view>
			</template>
		</u-navbar>
		<view class="bg_img"></view>
		<view class="content">
			<!-- 总数 -->
			<view class="u-m-b-30 entrus_sum u-flex justify-around text-center">
				<view class="" @click="tabsCli(1)">
					<view class="color_FA5353 u-font-48 hs-weight-500">123</view>
					<view class="color_AF8D66 u-font-28 hs-weight-500">异常</view>
				</view>
				<view class="split_line"></view>
				<view class="" @click="tabsCli(5)">
					<view class="u-font-48 hs-weight-500">123</view>
					<view class="color_AF8D66 u-font-28 hs-weight-500">待寄样</view>
				</view>
				<view class="split_line"></view>
				<view class="" @click="tabsCli(6)">
					<view class="u-font-48 hs-weight-500">123</view>
					<view class="color_AF8D66 u-font-28 hs-weight-500">待选款</view>
				</view>
			</view>
			<!-- tabs -->
			<u-sticky class="bd_rad" style="background: #fff;">
				<u-tabs :list="list" font-size="28" :show-bar="false" active-color="#AF8D66" :current="current" @change="change"></u-tabs>
			</u-sticky>
			<!-- list -->
			<view class="u-m-t-20 u-m-l-30 u-m-r-30 u-m-b-20">
				<!-- v-for -->
				<view class="u-m-b-20 posi_rela bd_rad1 u-p-30" v-for="(item, index) in 3" style="background: #fff;">
					<view class="u-m-b-30 u-flex justify-between">
						<view class="entrus_list_title u-font-32">加厚荷兰绒绒布布料</view>
						<view class="u-font-28">2天无人接单</view>
					</view>
					<view class="dis_flex">
						<image style="width: 160rpx;height:160rpx;" src="@/static/images/home/1@2x.png" mode=""></image>
						<view class="u-m-l-20">
							<view class="u-m-b-10">
								<span class="color_00004">发布日期</span>
								<span class="u-m-l-20">2021-12-01</span>
							</view>
							<view class="">
								<span class="color_00004">截止日期</span>
								<span class="u-m-l-20">2021-12-01</span>
							</view>
						</view>
					</view>
					<view class="u-m-t-30 bd_split_line"></view>
					<view class="text-right">
						<view class="u-m-t-30 u-m-l-10 btn">拆单</view>
						<view class="u-m-t-30 u-m-l-10 btn">拆单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			list: [
				{
					name: '全部'
				},
				{
					name: '异常'
				},
				{
					name: '待发布'
				},
				{
					name: '待接单'
				},
				{
					name: '已接单'
				},
				{
					name: '已寄样'
				},
				{
					name: '待选款'
				},
				{
					name: '已结束'
				}
			]
		};
	},
	methods: {
		change(index) {
			this.current = index;
		},
		tabsCli(v){
			this.current = v
		}
	}
};
</script>
<style>
.color_AF8D66 {
	color: #af8d66;
}
.color_FA5353 {
	color: #fa5353;
}
.color_00004 {
	color: rgba(0, 0, 0, 0.4);
}
.dis_flex {
	display: flex;
}
.posi_rela {
	position: relative;
}
</style>
<style lang="scss" scoped>
.bg_img {
	position: absolute;
	top: 0;
	width: 100%;
	height: 220px;
	background-image: url(../../static/images/home/entrustment@2x.png);
}
.content {
	position: absolute;
	top: 220rpx;
	width: 100%;
}
.entrus_sum {
	height: 164rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.8);
	margin: 15px;
	line-height: 1.5;
}
.bd_rad {
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;
}
.bd_rad1 {
	border-radius: 10rpx;
	overflow: hidden;
}
.entrus_list_title {
	&::before {
		content: '';
		display: inline-block;
		width: 8rpx;
		height: 32rpx;
		background: #af8d66;
		border-radius: 6rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
}
.btn {
	width: 160rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	border: 1px solid #333333;
	border-radius: 44rpx;
	display: inline-block;
}
.split_line {
	height: 70rpx;
	line-height: 70rpx;
	width: 1rpx;
	background: rgba(68, 53, 37, 0.2);
}
.bd_split_line {
	width: 100%;
	border-top: 1px solid #f6f6f6;
	padding: 0 20rpx;
	position: relative;
	&::before {
		content: ' ';
		position: absolute;
		left: -45rpx;
		top: -15rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		background: #f6f6f6;
		border-radius: 100rpx;
	}
	&::after {
		content: ' ';
		position: absolute;
		right: -45rpx;
		top: -15rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		background: #f6f6f6;
		border-radius: 100rpx;
	}
}
</style>
