相关页面上传

src/pages.json

@@ -64,7 +64,7 @@
 				"navigationStyle": "custom"
 			}
 
-		},{
+		}, {
 			"path": "pages/designCommissioned/splitItem",
 			"style": {
 				"navigationBarTitleText": "完善信息",
@@ -73,6 +73,97 @@
 				"navigationStyle": "custom"
 			}
 
+		}, {
+			"path": "pages/home/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		}, {
+			"path": "pages/home/search",
+			"style": {
+				"navigationBarTitleText": "搜索",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		}, {
+			"path": "pages/home/fabricList",
+			"style": {
+				"navigationBarTitleText": "我的面料",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		}, {
+			"path": "pages/home/fabricDetails",
+			"style": {
+				"navigationBarTitleText": "面料详情",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		}, {
+			"path": "pages/home/styleDetails",
+			"style": {
+				"navigationBarTitleText": "款式详情",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		}, {
+			"path": "pages/home/sampleConfirmation",
+			"style": {
+				"navigationBarTitleText": "寄样确认",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		}, {
+			"path": "pages/home/styleEntrustment",
+			"style": {
+				"navigationBarTitleText": "款式委托",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
 		}
 	],
 	"globalStyle": {

src/pages/home/components/fabricTitle.vue

+<template>
+	<view>
+		<view class="home_con_content_order u-m-t-30" v-for="item in tableData">
+			<image style="width: 100%;height: 160rpx;" src="../../../static/images/home/1@2x.png" mode=""></image>
+			<view class="order_tit">
+				<view class="u-flex justify-between u-font-32">
+					<span class="color_DDA973 ov_hiden">加厚荷兰绒绒布布料备份加厚荷兰绒绒布布料备份</span>
+					<span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span>
+				</view>
+				<view class="u-font-24 u-m-t-20 color_6F6F72">
+					<span class="u-m-r-10">针织</span>
+					|
+					<span class="u-m-l-10 u-m-r-10">180cm</span>
+					|
+					<span class="u-m-l-10">100%面备份面备份面备份面备份面备份面备份面备份面备份</span>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		tableData: {
+			type: Array,
+			default: []
+		}
+	},
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../index.css';
+.home_con_content_order {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 160rpx;
+	border-radius: 8rpx;
+	overflow: hidden;
+	.order_tit {
+		position: absolute;
+		width: 75%;
+		right: 0;
+		flex-direction: column;
+		display: flex;
+		justify-content: center;
+		padding: 20rpx;
+		flex: 1;
+		height: 100%;
+		background: rgba(17, 21, 30, 0.5);
+	}
+}
+</style>

src/pages/home/fabricDetails.vue

+<template>
+	<view class="ps_relative">
+		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="面料详情"></u-navbar>
+		<!-- 背景图 -->
+		<view class="back_img"></view>
+		<view class="content u-p-30">
+			<!-- 面料基本信息 -->
+			<view class="fabric_tit u-p-30">
+				<view class="color_DDA973 u-font-32">加厚荷兰绒绒布布料</view>
+				<view class="u-font-24 u-m-t-20 color_fff08">
+					<span class="u-m-r-10">针织</span>
+					|
+					<span class="u-m-l-10 u-m-r-10">180cm</span>
+					|
+					<span class="u-m-l-10">100%面备份面备份</span>
+				</view>
+				<view class="u-m-t-20"><image v-for="item in 3" class="img_120 u-m-r-30" src="../../static/images/home/1.png" mode=""></image></view>
+			</view>
+			<!-- 建模信息 -->
+			<view class="modeling_tit u-p-30">
+				<view class="tit_date u-font-32">
+					<span class="u-font-28 ft-wt-700">建模委托信息</span>
+					<span class="u-font-24">
+						2021年12月12日
+						<u-icon size="28" class="u-m-l-5" color="#ccc" name="arrow-right"></u-icon>
+					</span>
+				</view>
+				<view class="ds_flex jt_con_center fx_dir_column ht_136">
+					<view class="ds_flex">
+						<span class="width_30 color_00004">检测服务商</span>
+						<span class="flex-sub">上海天飞智慧科技有限公司</span>
+					</view>
+					<view class="ds_flex u-m-t-8">
+						<span class="width_30 color_00004">项目价格</span>
+						<span class="flex-sub">1200.32元</span>
+					</view>
+				</view>
+			</view>
+			<!-- 检测委托信息 -->
+			<view class="modeling_tit bd_rad_8 u-m-t-30 u-p-30">
+				<view class="tit_date">
+					<span class="u-font-28 ft-wt-700">检测委托信息</span>
+					<span class="u-font-24">
+						2021年12月12日
+						<u-icon size="28" class="u-m-l-5" color="#ccc" name="arrow-right"></u-icon>
+					</span>
+				</view>
+				<view class="ds_flex jt_con_center fx_dir_column ht_136">
+					<view class="ds_flex">
+						<span class="width_30 color_00004">检测服务商</span>
+						<span class="flex-sub">上海天飞智慧科技有限公司</span>
+					</view>
+					<view class="ds_flex u-m-t-8">
+						<span class="width_30 color_00004">项目价格</span>
+						<span class="flex-sub">1200.32元</span>
+					</view>
+				</view>
+			</view>
+			<!-- 已提交款式 -->
+			<view class="modeling_tit bd_rad_8 u-m-t-30 u-p-30">
+				<view class="u-font-28 ft-wt-700 u-m-b-24">已提交款式</view>
+				<u-search bg-color="#fff" border-color="#ececec" placeholder="请输入面料名称" :show-action="false" v-model="searchFabric"></u-search>
+				<view class="ds_flex fx_wrap jt_con_sp_between txt_center">
+					<view @click="seeStyleDetails(item)" v-for="(item, index) in tableList" class="u-m-t-30">
+						<image class="bd_dashed img_300" src="../../static/images/home/yanyi1@2x.png" mode=""></image>
+						<view class="u-font-24">卡其色长款风衣</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			searchFabric: '',
+			tableList: [1, 2, 3, 4, 5]
+		};
+	},
+	methods: {
+		seeStyleDetails(item) {
+			this.$Router.push('/pages/home/styleDetails');
+		}
+	}
+};
+</script>
+<style>
+.width_30 {
+	width: 30%;
+}
+.ht_136 {
+	height: 136rpx;
+}
+.color_DDA973 {
+	color: #dda973;
+}
+.color_6F6F72 {
+	color: #6f6f72;
+}
+.color_fff08 {
+	color: rgba(255, 255, 255, 0.8);
+}
+.color_00004 {
+	color: rgba(0, 0, 0, 0.4);
+}
+.ft-wt-700 {
+	font-weight: 700;
+}
+.background_fff {
+	background: #fff;
+}
+.ds_flex {
+	display: flex;
+}
+.fx_wrap {
+	flex-wrap: wrap;
+}
+.fx_dir_column {
+	flex-direction: column;
+}
+.jt_con_center {
+	justify-content: center;
+}
+.jt_con_sp_between {
+	justify-content: space-between;
+}
+.bd_rad_8 {
+	border-radius: 8rpx !important;
+}
+.txt_center {
+	text-align: center;
+}
+.ps_relative {
+	position: relative;
+}
+.ps_absolute {
+	position: absolute;
+}
+.bd_dashed {
+	position: relative;
+}
+.bd_dashed:after {
+	border-width: 1px;
+}
+.bd_dashed-bottom:after,
+.bd_dashed-left:after,
+.bd_dashed-right:after,
+.bd_dashed-top-bottom:after,
+.bd_dashed-top:after,
+.bd_dashed:after {
+	content: ' ';
+	position: absolute;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	transform-origin: 0 0;
+	width: 199.8%;
+	height: 199.7%;
+	transform: scale(0.5, 0.5);
+	border: 1px dashed #e4e7ed;
+	z-index: 2;
+}
+</style>
+<style scoped lang="scss">
+.fabric_tit {
+	height: 284rpx;
+	width: 100%;
+	border-radius: 8rpx 8rpx 0 0;
+	background: rgba(0, 0, 0, 0.6);
+}
+.modeling_tit {
+	width: 100%;
+	background: #fff;
+	border-radius: 0 0 8rpx 8rpx;
+}
+.tit_date {
+	width: 100%;
+	height: 88rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1rpx solid #ccc;
+}
+.content {
+	position: absolute;
+	top: 200rpx;
+}
+.back_img {
+	position: absolute;
+	width: 100%;
+	height: 600rpx;
+	background-image: url(../../static/images/home/exhibition.png);
+}
+.img_120 {
+	width: 120rpx;
+	height: 120rpx;
+}
+.img_300 {
+	width: 300rpx;
+	height: 300rpx;
+}
+</style>

src/pages/home/fabricList.vue

+<template>
+	<view class="">
+		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="我的面料"></u-navbar>
+		<view class="content background_fff u-p-30">
+			<!-- 正文内容 -->
+			<u-sticky offset-top="15">
+				<u-search class="" bg-color="#fff" border-color="#ececec" placeholder="请输入面料名称" :show-action="false" v-model="search"></u-search>
+			</u-sticky>
+			<view><fabricTitle :tableData="table"></fabricTitle></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import fabricTitle from './components/fabricTitle.vue';
+export default {
+	components: { fabricTitle },
+	data() {
+		return {
+			search: '',
+			table: [1, 2, 3, 4]
+		};
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.background_fff {
+	background: #fff;
+}
+</style>

src/pages/home/index.css

+.width_30 {
+	width: 30%;
+}
+
+.ht_136 {
+	height: 136rpx;
+}
+
+.ft-size-24 {
+	font-size: 24rpx;
+}
+
+.ft-size-28 {
+	font-size: 28rpx;
+}
+
+.ft-size-32 {
+	font-size: 32rpx;
+}
+
+.color_DDA973 {
+	color: #dda973;
+}
+
+.color_6F6F72 {
+	color: #6f6f72;
+}
+
+.color_fff08 {
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.color_00004 {
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.ft-wt-700 {
+	font-weight: 700;
+}
+
+.bg_fff {
+	background: #fff;
+}
+
+.ds_flex {
+	display: flex;
+}
+
+.fx_wrap {
+	flex-wrap: wrap;
+}
+
+.fx_dir_column {
+	flex-direction: column;
+}
+
+.jt_con_center {
+	justify-content: center;
+}
+
+.jt_con_sp_between {
+	justify-content: space-between;
+}
+
+.bd_rad_8 {
+	border-radius: 8rpx !important;
+}
+
+.txt_center {
+	text-align: center;
+}
+
+.ps_relative {
+	position: relative;
+}
+
+.ps_absolute {
+	position: absolute;
+}
+
+.bd_dashed {
+	position: relative;
+}
+
+.bd_dashed:after {
+	border-width: 1px;
+}
+
+.bd_dashed-bottom:after,
+.bd_dashed-left:after,
+.bd_dashed-right:after,
+.bd_dashed-top-bottom:after,
+.bd_dashed-top:after,
+.bd_dashed:after {
+	content: ' ';
+	position: absolute;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	transform-origin: 0 0;
+	width: 199.8%;
+	height: 199.7%;
+	transform: scale(0.5, 0.5);
+	border: 1px dashed #e4e7ed;
+	z-index: 2;
+}
+
+.ov_hiden {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

src/pages/home/index.vue

+<template>
+	<view>
+		<!-- 展示图 -->
+		<view class="home_top">
+			<image src="../../static/images/home/exhibition@2x.png" style="width: 100%;height: 100%;" mode=""></image>
+			<view class="home_top_out">
+				<view class="out"><image style="width: 100%;height: 100%;" src="../../static/images/home/zuojiantou@2x.png" mode=""></image></view>
+				<view @click="searchCli" class="search"><image style="width: 100%;height: 100%;" src="../../static/images/home/search@2x.png" mode=""></image></view>
+			</view>
+		</view>
+		<!-- 按钮 -->
+		<view class="home_btn">
+			<view class="" v-for="item in buts">
+				<image class="img" :src="item.img" mode=""></image>
+				<view class="u-m-t-8">{{ item.name }}</view>
+			</view>
+		</view>
+		<!-- 提示信息 -->
+		<view class="u-m-t-20 tips background_d5aa7a u-font-28">
+			<view>
+				12个委托单
+				<span class="color_fff">等待确认寄样，请尽快确认！</span>
+			</view>
+			<view class="color_fff btn" @click="sampleConfirm">寄样确认</view>
+		</view>
+		<!-- 具体内容  我的面料 -->
+		<view class="home_con u-m-t-20">
+			<view class="home_con_tit">
+				<view class="">
+					<span class="u-font-32">我的面料</span>
+					<span class="color_000 u-font-24">My fabric</span>
+				</view>
+				<view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view>
+			</view>
+			<view class="home_con_fabric">
+				<view class="home_con_content u-m-t-24" @click="detailFabric(item)" v-for="item in fiabricList">
+					<view class="home_con_content_font ov_hiden">{{ item.name }}</view>
+				</view>
+			</view>
+		</view>
+		<!-- 具体内容  我的订单 -->
+		<view class="home_con u-m-t-20">
+			<view class="home_con_tit">
+				<view class="">
+					<span class="u-font-32">我的订单</span>
+					<span class="color_000 u-font-24">My order</span>
+				</view>
+				<view class="u-font-24 color_d5aa7a">查看更多</view>
+			</view>
+			<view class="home_con_order">
+				<view class="home_con_content_order u-m-t-24" v-for="item in 2">
+					<image style="width: 160rpx;height: 160rpx;" src="../../static/images/home/2.png" mode=""></image>
+					<view class="order_tit">
+						<view class="u-font-32">加厚荷兰绒绒布布料备份</view>
+						<view class="u-font-24 u-m-t-20">
+							<span>针织</span>
+							｜
+							<span>180cm</span>
+							｜
+							<span>100%面备份</span>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			fiabricList: [
+				{
+					name: '加厚荷兰绒绒布布料布布料布布料布'
+				},
+				{
+					name: '加厚荷兰绒绒布布料布布料布'
+				},
+				{
+					name: '加厚荷兰绒绒布布料布布料布'
+				},
+				{
+					name: '加厚荷兰绒绒布布料布'
+				}
+			],
+			buts: [
+				{
+					name: '面料建模',
+					img: '../../static/images/home/fabricModeling@2x.png'
+				},
+				{
+					name: '款式委托',
+					img: '../../static/images/home/styleEntrustment@2x.png'
+				},
+				{
+					name: '检测委托',
+					img: '../../static/images/home/styleManageme@2x.png'
+				},
+				{
+					name: '款式管理',
+					img: '../../static/images/home/testCommission@2x.png'
+				}
+			]
+		};
+	},
+	methods: {
+		searchCli() {
+			this.$Router.push('/pages/home/search');
+		},
+		seeFabric() {
+			this.$Router.push('/pages/home/fabricList');
+		},
+		detailFabric(data) {
+			this.$Router.push('/pages/home/fabricDetails');
+		},
+		sampleConfirm() {
+			this.$Router.push('/pages/home/sampleConfirmation');
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.home_top {
+	position: relative;
+	width: 100%;
+	height: 486rpx;
+	.home_top_out {
+		position: absolute;
+		top: 20rpx;
+		width: 100%;
+		padding: 0 20rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.out {
+			width: 32rpx;
+			height: 32rpx;
+		}
+		.search {
+			width: 60rpx;
+			height: 60rpx;
+		}
+	}
+}
+.tips {
+	display: flex;
+	height: 80rpx;
+	align-items: center;
+	justify-content: space-around;
+	padding: 0 20rpx;
+}
+.home_btn {
+	width: 100%;
+	height: 180rpx;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	text-align: center;
+	background: #fff;
+}
+.home_con {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 30rpx;
+	background: #fff;
+	.home_con_tit {
+		width: 100%;
+		height: 44rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-end;
+	}
+	.home_con_fabric {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.home_con_order {
+		// display: flex;
+		// flex-wrap: wrap;
+		// justify-content: space-between;
+	}
+}
+.home_con_content {
+	position: relative;
+	width: 48%;
+	height: 160rpx;
+	border-radius: 8rpx;
+	overflow: hidden;
+	background-image: url(../../static/images/home/1@2x.png);
+	.home_con_content_font {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: 60rpx;
+		line-height: 60rpx;
+		box-sizing: border-box;
+		padding: 0 10rpx;
+		background: rgba(255, 255, 255, 0.8);
+	}
+}
+.home_con_content_order {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 160rpx;
+	border-radius: 8rpx;
+	overflow: hidden;
+	.order_tit {
+		flex-direction: column;
+		display: flex;
+		justify-content: center;
+		padding: 20rpx;
+		flex: 1;
+		height: 100%;
+		background: rgba(172, 166, 166, 0.5);
+	}
+}
+.ov_hiden {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.btn {
+	line-height: 50rpx;
+	text-align: center;
+	width: 120rpx;
+	height: 50rpx;
+	border: 1rpx solid #fff;
+}
+.img {
+	width: 56rpx;
+	height: 56rpx;
+}
+.color_000 {
+	color: rgba(0, 0, 0, 0.2);
+}
+.color_d5aa7a {
+	color: #d5aa7a;
+}
+.color_dda973 {
+	color: #dda973;
+}
+.color_fff {
+	color: #fff;
+}
+.background_d5aa7a {
+	background: #d5aa7a;
+}
+</style>

src/pages/home/sampleConfirmation.vue

+<template>
+	<view class="ps_relative">
+		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="寄样确认"></u-navbar>
+		<view class="content">
+			<view class="bg_fff sample_sum">
+				<view @click="previousCli" :class="{ color_ccc: sum == 1 }">上一个</view>
+				<view class="">{{ sum }}/{{ total }}</view>
+				<view @click="nextCli" :class="{ color_ccc: sum == total }">下一个</view>
+			</view>
+			<!-- 内容 -->
+			<!--  style="border-radius: 20rpx;" -->
+			<view class="u-m-20 bg_fff" style="border-radius: 20rpx;">
+				<view class="sample_title u-p-l-30 u-p-r-30">
+					<span class="u-font-32">委托单信息</span>
+					<span class="u-font-28">委托发布日期：2021-12-11</span>
+				</view>
+				<view class="bd_split_line"></view>
+				<view class="sample_info u-p-l-30 u-p-r-30 u-p-b-30">
+					<view class="u-font-32 u-m-t-24 u-m-b-20">寄样信息</view>
+					<view class="u_flex justify-center flex-direction">
+						<view class="ds_flex u-m-t-10">
+							<view class="width_30 color_00004">联系人</view>
+							<view class="flex-sub">小明</view>
+						</view>
+						<view class="ds_flex u-m-t-10">
+							<view class="width_30 color_00004">手机号</view>
+							<view class="flex-sub">15757159237</view>
+						</view>
+						<view class="ds_flex u-m-t-10">
+							<view class="width_30 color_00004">寄样地址</view>
+							<view class="flex-sub">广州市海珠区天天街道众生创汇蓝天大厦b</view>
+						</view>
+					</view>
+					<view class="">
+						<view class="u-border-top u-font-32 u-m-t-24 u-p-t-24">
+							<span class="u-font-28">所选面料</span>
+							<span class="u-font-24 color_DDA973">（新建面料，已同步面料建模）</span>
+						</view>
+						<fabricTitle :tableData="tableData"></fabricTitle>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import fabricTitle from './components/fabricTitle.vue';
+export default {
+	components: { fabricTitle },
+	data() {
+		return {
+			// 总数
+			total: 12,
+			// 当前数
+			sum: 12,
+			tableData: [1]
+		};
+	},
+	methods: {
+		previousCli() {
+			if (this.sum == 1) return;
+			this.sum == --this.sum;
+		},
+		nextCli() {
+			if (this.sum == this.total) return;
+			this.sum == ++this.sum;
+		}
+	}
+};
+</script>
+<style>
+.bg_fff {
+	background: #fff;
+}
+.color_ccc {
+	color: #ccc;
+}
+</style>
+<style lang="scss" scoped>
+@import './index.css';
+.sample_sum {
+	display: flex;
+	justify-content: space-around;
+	height: 70rpx;
+	align-items: center;
+}
+.sample_title {
+	height: 100rpx;
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+}
+.bd_top {
+	border-top: 1px solid #f6f6f6;
+}
+.bd_split_line {
+	width: 90%;
+	border-top: 1px solid #f6f6f6;
+	margin: auto;
+	position: relative;
+	&::before {
+		content: ' ';
+		position: absolute;
+		left: -50rpx;
+		top: -15rpx;
+		display: block;
+		width: 30rpx;
+		height: 30rpx;
+		background: #f6f6f6;
+		border-radius: 100rpx;
+	}
+	&::after {
+		content: ' ';
+		position: absolute;
+		right: -50rpx;
+		top: -15rpx;
+		display: block;
+		width: 30rpx;
+		height: 30rpx;
+		background: #f6f6f6;
+		border-radius: 100rpx;
+	}
+}
+</style>

src/pages/home/search.vue

+<template>
+	<!-- 搜索界面 -->
+	<view class="">
+		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="">
+			<view class="slot-wrap">
+				<view class="search-wrap"><u-search bg-color="#fff" border-color="#d5aa7a" placeholder="请输入面料名称" :show-action="false" v-model="value"></u-search></view>
+			</view>
+		</u-navbar>
+		<!-- 列表 -->
+		<view class="home_con_order">
+			<!-- <fabricTitle :tableData="[1]"></fabricTitle> -->
+			<view class="home_con_content_order u-m-t-30" v-for="item in 12">
+				<image style="width: 160rpx;height: 160rpx;" src="../../static/images/home/2.png" mode=""></image>
+				<view class="order_tit">
+					<view class="u-font-32">加厚荷兰绒绒布布料备份</view>
+					<view class="u-font-24 u-m-t-20 color_6F6F72">
+						<span class="u-m-r-10">针织</span>
+						|
+						<span class="u-m-l-10 u-m-r-10">180cm</span>
+						|
+						<span class="u-m-l-10">100%面备份面备份面备份面备份面备份面备份面备份面备份</span>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import fabricTitle from './components/fabricTitle.vue';
+export default {
+	components: {
+		fabricTitle
+	},
+	data() {
+		return {
+			value: ''
+		};
+	},
+	methods: {
+		outCli() {
+			this.$router.push('/pages/home/index');
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.slot-wrap {
+	display: flex;
+	align-items: center;
+	flex: 1;
+}
+.search-wrap {
+	margin: 0 20rpx;
+	flex: 1;
+}
+.home_con_order {
+	padding: 0 30rpx;
+}
+.home_con_content_order {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 160rpx;
+	border-radius: 8rpx;
+	overflow: hidden;
+	.order_tit {
+		flex-direction: column;
+		display: flex;
+		justify-content: center;
+		padding: 20rpx;
+		flex: 1;
+		height: 100%;
+		background: rgba(172, 166, 166, 0.5);
+	}
+}
+</style>

src/pages/home/styleDetails.vue

+<template>
+	<view class="">
+		<!-- TODO 小程序轮播可能会出现问题  但是大概率不会发布小程序 -->
+		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="款式详情"></u-navbar>
+		<view class="content">
+			<u-swiper mode="number" height="750" :autoplay="false" :list="list" :title="true" indicator-pos="bottomRight"></u-swiper>
+			<view class="u-m-t-30 bg_fff u-p-l-30 u-p-r-30">
+				<view class="style_tit u-border-bottom">
+					<view class="color_AF8D66 u-font-32">卡其色长款风衣</view>
+					<view class="u-font-24 u-m-t-10 color_6F6F72">
+						<span class="u-m-r-10">针织</span>
+						|
+						<span class="u-m-l-10 u-m-r-10">180cm</span>
+						|
+						<span class="u-m-l-10">100%面备份面备份备份</span>
+					</view>
+				</view>
+				<view class="u-flex justify-center flex-direction ht_196">
+					<view class="ds_flex u-m-t-10" style="width: 100%;">
+						<span class="width_30 color_00004">上传日期</span>
+						<span class="flex-sub">2021-12-12</span>
+					</view>
+					<view class="ds_flex u-m-t-10" style="width: 100%;">
+						<span class="width_30 color_00004">设计描述</span>
+						<span class="flex-sub">还可以还可以还可以吧还可以还可以还可以</span>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			list: [
+				{
+					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+					title: '昨夜星辰昨夜风，画楼西畔桂堂东画楼西畔桂堂东画楼西畔桂堂东画楼西畔桂堂东'
+				},
+				{
+					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+					title: '身无彩凤双飞翼，心有灵犀一点通'
+				},
+				{
+					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+				}
+			]
+		};
+	}
+};
+</script>
+<style>
+.width_30 {
+	width: 30%;
+}
+.ht_196 {
+	height: 196rpx;
+}
+.ds_flex {
+	display: flex;
+}
+.fx_wrap {
+	flex-wrap: wrap;
+}
+.jt_con_sp_between {
+	justify-content: space-between;
+}
+.color_AF8D66 {
+	color: #af8d66;
+}
+.bg_fff {
+	background: #fff;
+}
+.color_00004 {
+	color: rgba(0, 0, 0, 0.4);
+}
+.color_6F6F72 {
+	color: #6f6f72;
+}
+</style>
+<style scoped lang="scss">
+.style_tit {
+	height: 140rpx;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+}
+.bd_bottom {
+}
+::v-deep .u-swiper-title {
+	width: 86%;
+	padding-bottom: 12rpx !important;
+}
+</style>

src/pages/home/styleEntrustment.vue

+<template>
+	<!-- 款式委托 -->
+	<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>
+		</u-navbar>
+	</view>
+</template>
+
+<script></script>
+
+<style></style>