款式委托页面编写完成

src/pages/home/styleEntrustment.vue

@@ -2,13 +2,184 @@
 	<!-- 款式委托 -->
 	<view class="">
 		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="款式委托">
-			<view class="ab" v-slot="right">
-				<view class="message-box right-item"><u-icon name="chat" size="38"></u-icon></view>
-			</view>
+			<template v-slot:right>
+				<view class="u-m-r-24"><u-icon name="search" size="38"></u-icon></view>
+			</template>
 		</u-navbar>
+		<view>
+			<!-- 总数 -->
+			<view class="u-m-b-30 entrus_sum u-flex justify-around text-center">
+				<view class="">
+					<view class="color_FA5353">123</view>
+					<view class="color_AF8D66">异常</view>
+				</view>
+				<view class="split_line"></view>
+				<view class="">
+					<view class="">123</view>
+					<view class="color_AF8D66">待寄样</view>
+				</view>
+				<view class="split_line"></view>
+				<view class="">
+					<view class="">123</view>
+					<view class="color_AF8D66">待选款</view>
+				</view>
+			</view>
+			<!-- tabs -->
+			<u-sticky class="bd_rad"><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_rad 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></script>
-
-<style></style>
+<script>
+export default {
+	data() {
+		return {
+			current: 0,
+			list: [
+				{
+					name: '全部'
+				},
+				{
+					name: '异常'
+				},
+				{
+					name: '待发布'
+				},
+				{
+					name: '待接单'
+				},
+				{
+					name: '已接单'
+				},
+				{
+					name: '已寄样'
+				},
+				{
+					name: '待选款'
+				},
+				{
+					name: '已结束'
+				}
+			]
+		};
+	},
+	methods: {
+		change(index) {
+			this.current = index;
+		}
+	}
+};
+</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>
+.entrus_sum {
+	height: 164rpx;
+	border-radius: 20rpx;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 15px;
+	line-height: 1.8;
+}
+.bd_rad {
+	border-radius: 10rpx 10rpx 0 0;
+	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;
+	margin: auto;
+	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>