From 80e36d89d0ab7544227ee264be3ae8d459ee371f Mon Sep 17 00:00:00 2001
From: "Mr.jiang" <714156421@qq.com>
Date: Tue, 20 Aug 2024 16:57:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A5=B3=E6=80=A7=E4=B8=93=E5=8C=BA=20?=
 =?UTF-8?q?=E5=8A=A0=E4=BE=A7=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue   |  33 +--
 pages/my/fuwuxiangm.vue | 595 ++++++++++++++++++++++++----------------
 2 files changed, 374 insertions(+), 254 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 47743b9..3efd62b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -162,7 +162,6 @@
 					<view class="index-taocan-view-nav" v-for="item in felNav" :key="item.id" @click="chengFel(item)">
 						<view class="index-taocan-view-nav-s">
 							<span class="index-taocan-view-nav-text" :class="[currentTabFl==item.id?'activeL':'activeH']">{{item.name}}</span>
-							<span class="index-taocan-view-nav-jie" :class="[currentTabFl==item.id?'activeXL':'activeXH']">{{item.content}}</span>
 						</view>
 						<view class="fenjie"></view>
 					</view>
@@ -343,23 +342,19 @@
 				tjData:[],
 				felNav:[{
 						id:1,
-						content: '大家常买',
-						name: '热门精选'
+						name: '大家常买'
 					},
 					{
 						id:2,
-						content: '优惠提前享',
-						name: '推荐套餐'
+						name: '行业大拿'
 					},
 					{
 						id:3,
-						name: '专业培训',
-						content: '特色专业'
+						name: '女性专区',
 					},
 					{
 						id:4,
-						name: '更多优惠',
-						content: '更多'
+						name: '全部项目',
 					},
 				],
 				scrollLeft:0,
@@ -1127,23 +1122,23 @@
 			},
 			chengFel(item){//大家常买。。。 导航切换
 				this.currentTabFl=item.id;
-				if(this.currentTabFl=='1'){
+				if(this.currentTabFl=='1'){//大家常买
 					this.remen()
-				}else if(this.currentTabFl=='2'){
+				}else if(this.currentTabFl=='2'){//行业大拿
 					this.tjtaocan()
-				}else if(this.currentTabFl=='3'){
+				}else if(this.currentTabFl=='3'){//女性专区
 					uni.navigateTo({
 						url:'/pages/my/fuwuxiangm'
 					})
-				}else{
+				}else{//全部项目
 					uni.navigateTo({
 						url:'/pages/my/fuwuGengduo'
 					})
 				}
 			},
-			tjtaocan(){//推荐套餐
-				this.$Request.get("/app/massage/package/findPage", {
-					type:'104',
+			tjtaocan(){//行业大拿
+				this.$Request.get("/app/artificer/selectArtificerList", {
+					isGoods:1,
 					page:'1',
 					limit:'4'
 				}).then(res => {
@@ -1157,10 +1152,8 @@
 					}
 				});
 			},
-			remen(){//热门精选
-				this.$Request.get("/app/artificer/selectMassageTypePage", {
-					by: '3',
-					status:'1',
+			remen(){//大家常买
+				this.$Request.get("/app/massage/package/findPackageAndMassagePage", {
 					page:'1',
 					limit:'4'
 				}).then(res => {
diff --git a/pages/my/fuwuxiangm.vue b/pages/my/fuwuxiangm.vue
index eabd876..1b35b0d 100644
--- a/pages/my/fuwuxiangm.vue
+++ b/pages/my/fuwuxiangm.vue
@@ -1,85 +1,107 @@
 <!-- 自定义下拉刷新与上拉加载演示(vue) -->
 <template>
 	<view class="content-view">
-	<z-paging ref="paging" v-model="dataList" @query="queryList">
-		<template #top>
-			<view class="service-head-top">
-				<view class="service-head-top-left">
-					<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
-					<span>服务项目</span>
-				</view>
-				<view>
-					<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input" @clear="clear">
-					</uni-search-bar>
-					<view class="search-btn" @click="searchBtn">
-						<image style="width:30rpx; height:30rpx; margin-right: 10rpx;" src="../../static/search.png"></image>
-						 搜索
+		<z-paging ref="paging" v-model="dataList" @query="queryList">
+			<template #top>
+				<view class="service-head-top">
+					<view class="service-head-top-left">
+						<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
+						<span>服务项目</span>
+					</view>
+					<view>
+						<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue"
+							@input="input" @clear="clear">
+						</uni-search-bar>
+						<view class="search-btn" @click="searchBtn">
+							<image style="width:30rpx; height:30rpx; margin-right: 10rpx;"
+								src="../../static/search.png"></image>
+							搜索
+						</view>
 					</view>
 				</view>
-			</view>
-			<view class="fenlei">
-				<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
-			</view>
-		</template>
-		<template #loadingMoreNoMore >
-			<custom-nomore />
-		</template>
-		<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
-			<view class="item-img">
-				<image :src="item.massageImg" mode=""></image>
-			</view>
-			<view class="item-view">
-				<view class="view-cata">
-					<span class="item-view-title">{{item.title}}</span>
-					<!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> -->
-				</view>
-				<view class="item-view-bottom-qian">
-					<span></span>
-					<span>￥{{item.price}}</span>
-					<span>￥{{item.oldPrice}}</span>
-				</view>
-				<view class="flex" style="margin-top: 10rpx;">
-					<view class="shop_label" v-if="item.tagsData!=''">
-						<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
+				
+			</template>
+			<template #loadingMoreNoMore>
+				<custom-nomore />
+			</template>
+			<!-- 右侧商品 -->
+				<!-- 主体部分 -->
+				<view class="body">
+					<!-- 左侧分类 -->
+					<view class="leftTab">
+						<scroll-view scroll-y="true" class="tabBox">
+							<block v-for="(item,index) in tabList" :key="index">
+								<view class="tabItem" :class="tabCurrent == index?'tabActive':''" @click="changeTab(index,item)">
+									{{item.value}}
+								</view>
+							</block>
+						</scroll-view>
 					</view>
-					<view class="shop_label" v-else>
-						<span>助眠解压</span>
+					<!-- 右侧商品 -->
+					<view class="rightGoods">
+						<!-- <view class="title">{{productTitle}}</view> -->
+						<view class="item" v-for="(item,index) in dataList" :key="index+'2'" @click="itemClick(item)">
+							<view class="item-img">
+								<image :src="item.massageImg" mode=""></image>
+							</view>
+							<view class="item-view">
+								<view class="view-cata">
+									<span class="item-view-title">{{item.title}}</span>
+									<!-- <span class="xiaoer item-view-biao">{{item.classifyName}}</span> -->
+								</view>
+								<view class="item-view-bottom-qian">
+									<span></span>
+									<span>￥{{item.price}}</span>
+									<span>￥{{item.oldPrice}}</span>
+								</view>
+								<view class="flex" style="margin-top: 10rpx;">
+									<view class="shop_label" v-if="item.tagsData!=''">
+										<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
+									</view>
+									<view class="shop_label" v-else>
+										<span>助眠解压</span>
+									</view>
+								</view>
+								<view class="item-view-bottom">
+									<view class="item-view-xiangmu">
+										<span>已售</span><span>{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span>
+									</view>
+									<view class="item-view-bottom-btn">
+										查看
+									</view>
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
-				<view class="item-view-bottom">
-					<view class="item-view-xiangmu">
-						<span>已售</span><span>{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span>
-					</view>
-					<view class="item-view-bottom-btn">
-						查看
-					</view>
-				</view>
-			</view>
-		</view>
-	</z-paging>
-</view>
+		</z-paging>
+	</view>
 </template>
 <script>
 	export default {
 		data() {
 			return {
-				loadingType:0,
+				loadingType: 0,
 				myId: '',
 				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
 				dataList: [],
 				tabList: [],
-				typeData:'105',
+				typeData: '105',
 				tabIndex: 0,
-				searchValue:'',
-				serviceTrue:true,
-				page:1,
-				limit:10,
-				titleNmae:'',
-				classifyId:'',
-				tagsData:[]
+				searchValue: '',
+				serviceTrue: true,
+				page: 1,
+				limit: 10,
+				titleNmae: '',
+				classifyId: '',
+				tagsData: [],
+				// 分类列表
+				tabCurrent: 0,
+				productTitle: '氧气罐',
+				fromStore: false, //为真 从门店来
 			}
 		},
-		onLoad(){
+		onLoad() {
 			this.myId = uni.getStorageSync('userId')
 			this.tabNav()
 		},
@@ -101,29 +123,31 @@
 			// 		},1000)
 			// 	}
 			// },
-			tabNav(){
+			tabNav() {
 				let data = {
-						  type: "服务类型",
-						}
+					type: "服务类型",
+					remark:'女性专区'
+				}
 				this.$Request.get('/app/dict/list', data).then(res => {
 					if (res.code == 0) {
-						this.tabList=res.data;
-						this.classifyId=res.data[0].id;
+						this.tabList = res.data;
+						this.classifyId=res.data[0].id,
+						this.productTitle = this.tabList[0].value
 						this.page = 1;
 						this.dataList = []
 						this.getData()
 					}
 				})
 			},
-			input(res) {//搜索 输入框
-				this.searchValue=res;
+			input(res) { //搜索 输入框
+				this.searchValue = res;
 			},
-			searchBtn(){//搜索按钮
-				if(this.searchValue!=""){
+			searchBtn() { //搜索按钮
+				if (this.searchValue != "") {
 					this.getData()
 				}
 			},
-			getData(){
+			getData() {
 				// this.$Request.get("/app/artificer/selectMassageTypePage", {
 				// 	by: '3',
 				// 	status:'1',
@@ -143,36 +167,38 @@
 				// 		}
 				// 	}
 				// });
-        this.$refs.paging.reload(true);
+				this.$refs.paging.reload(true);
 			},
-      queryList(pageNo, pageSize) {
-        const params = {
-          page: pageNo,
-          limit: pageSize,
-          by: '3',
-          status:'1',
-          classifyId:this.classifyId,
-          title:this.searchValue
-        }
-        this.$Request.get('/app/artificer/selectMassageTypePage',params).then(res => {
-          for(var i=0;i<res.data.list.length;i++){
-            res.data.list[i].tagsData=res.data.list[i].labels.split(',');
-          }
-          this.$refs.paging.complete(res.data.list);
-        }).catch(res => {
-          this.$refs.paging.complete(false);
-        })
-      },
-			changeClick(index,item){
-				this.classifyId=item.id
-				this.searchValue=''
+			queryList(pageNo, pageSize) {
+				const params = {
+					page: pageNo,
+					limit: pageSize,
+					by: '3',
+					status: '1',
+					classifyId: this.classifyId,
+					title: this.searchValue
+				}
+				this.$Request.get('/app/artificer/selectMassageTypePage', params).then(res => {
+					for (var i = 0; i < res.data.list.length; i++) {
+						res.data.list[i].tagsData = res.data.list[i].labels.split(',');
+					}
+					this.$refs.paging.complete(res.data.list);
+				}).catch(res => {
+					this.$refs.paging.complete(false);
+				})
+			},
+			changeTab(index,item) {
+				this.tabCurrent = index
+				this.productTitle = this.tabList[index].value
+				this.classifyId = item.id
+				this.searchValue = ''
 				this.page = 1;
 				this.dataList = []
 				this.getData()
 			},
-			backImg(){//返回上一页
+			backImg() { //返回上一页
 				uni.reLaunch({
-					url:'/pages/index/index'
+					url: '/pages/index/index'
 				})
 			},
 			clear(res) {
@@ -180,30 +206,90 @@
 			},
 			itemClick(item) {
 				uni.navigateTo({
-					url:'/pages/my/fuwuDateil?id='+item.massageTypeId+'&limit='+this.limit+'&page='+this.page+'&name='+'index'+'&isCanCoupon='+item.isCanCoupon
+					url: '/pages/my/fuwuDateil?id=' + item.massageTypeId + '&limit=' + this.limit + '&page=' + this
+						.page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
 				})
 			}
 		}
 	}
 </script>
 
-<style scoped>
-	.tab-view{
+<style lang="scss" scoped>
+	.body {
+		height: 100vh;
+		display: flex;
+		justify-content: space-between;
+	
+		.leftTab {
+			width: 177rpx;
+			height: 100%;
+			background: #ffffff;
+			border-radius: 0px 15rpx 0px 0px;
+			padding: 24rpx 11rpx;
+			box-sizing: border-box;
+	
+			.tabBox {
+				height: 100%;
+	
+				.tabItem {
+					text-align: center;
+					padding: 14rpx 0;
+					border-radius: 60rpx;
+					color: #464646;
+					font-size: 26rpx;
+					font-weight: bold;
+					margin-bottom: 20rpx;
+				}
+	
+				.tabActive {
+					background: #60B347;
+					color: #ffffff;
+				}
+			}
+		}
+	
+		.rightGoods {
+			width: 573rpx;
+			height: 100%;
+			padding: 0 16rpx 27rpx;
+			box-sizing: border-box;
+	
+			.whiteBox {
+				height: 100%;
+				background: #ffffff;
+				border-radius: 15rpx;
+				padding: 0 25rpx;
+				box-sizing: border-box;
+				.title {
+					height: 77rpx;
+					line-height: 77rpx;
+					color: #2D2D2D;
+					font-size: 26rpx;
+					font-weight: bold;
+				}
+	
+				
+			}
+		}
+	}
+	.tab-view {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		position: fixed;
 		z-index: 999;
-		background:#fff linear-gradient(60deg,rgba(115, 212, 183, 0.2),rgba(227, 251, 244, 0.1),rgba(193, 236, 223, 0.35));
-		border-bottom:1rpx solid #c4ede1;
+		background: #fff linear-gradient(60deg, rgba(115, 212, 183, 0.2), rgba(227, 251, 244, 0.1), rgba(193, 236, 223, 0.35));
+		border-bottom: 1rpx solid #c4ede1;
 		padding-top: 6rpx;
 	}
-	.shop_label{
+
+	.shop_label {
 		display: flex;
 		flex-wrap: wrap;
 		margin-top: 4rpx;
 	}
-	.shop_label span{
+
+	.shop_label span {
 		background: linear-gradient(90deg, #ffefde, #fff7ef);
 		height: 34rpx;
 		line-height: 34rpx;
@@ -214,23 +300,27 @@
 		margin-bottom: 8rpx;
 		color: #f68607;
 	}
-	/deep/.z-tabs-item-title{
+
+	/deep/.z-tabs-item-title {
 		color: #222;
 	}
-	/deep/.refresh-body .content{
-	}
-	/deep/.refresh-body{
+
+	/deep/.refresh-body .content {}
+
+	/deep/.refresh-body {
 		height: 100% !important;
 		border-top: 2px solid #f7f7f7;
 		margin: 80px 0px;
 	}
-	.content-view{
+
+	.content-view {
 		width: 100%;
 		height: 100vh;
 		overflow: hidden;
 		background-color: #f7f7f7;
 	}
-	.item-view-bottom-btn{
+
+	.item-view-bottom-btn {
 		text-align: center;
 		width: 131rpx;
 		height: 55rpx;
@@ -241,122 +331,141 @@
 		font-size: 28rpx;
 		color: #FFFFFF;
 	}
-	.item-view-bottom-qian span:nth-child(5){
-    font-size: 28rpx;
-     color: #848484;
-     text-decoration-line: line-through;
-  }
-  .item-view-bottom-qian span:nth-child(4){
-    font-size: 28rpx;
-    color: #848484;
-    text-decoration-line: line-through;
-  }
-  .item-view-bottom-qian span:nth-child(3){
-    font-size: 28rpx;
-    color: #848484;
-    text-decoration-line: line-through;
-    margin-left: 5px;
-  }
-	.item-view-bottom-qian span:nth-child(2){
-		 font-weight: bold !important;
-		 font-size: 36.81rpx !important;
-		  color: #FF6000 !important;
-	}
-  .item-view-bottom-qian span:nth-child(1){
-    font-weight: 400;
-    font-size: 28rpx;
-    color: #FF6000;
-  }
-  .item-view-bottom-qian{
-    margin-top: 2px;
-  }
 
-	.item-view-bottom{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+	.item-view-bottom-qian span:nth-child(5) {
+		font-size: 28rpx;
+		color: #848484;
+		text-decoration-line: line-through;
 	}
-	.item-view-jianjie{
+
+	.item-view-bottom-qian span:nth-child(4) {
+		font-size: 28rpx;
+		color: #848484;
+		text-decoration-line: line-through;
+	}
+
+	.item-view-bottom-qian span:nth-child(3) {
+		font-size: 28rpx;
+		color: #848484;
+		text-decoration-line: line-through;
+		margin-left: 5px;
+	}
+
+	.item-view-bottom-qian span:nth-child(2) {
+		font-weight: bold !important;
+		font-size: 36.81rpx !important;
+		color: #FF6000 !important;
+	}
+
+	.item-view-bottom-qian span:nth-child(1) {
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #FF6000;
+	}
+
+	.item-view-bottom-qian {
+		margin-top: 2px;
+	}
+
+	.item-view-bottom {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.item-view-jianjie {
 		font-weight: 400;
 		font-size: 24rpx;
 		color: #999;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
+		-webkit-line-clamp: 2;
+		/* 显示的行数，可以根据需要修改 */
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.item-view-biao{
+
+	.item-view-biao {
 		border-radius: 15rpx 3rpx 15rpx 3rpx;
 	}
-	.tuina{
-		background-color:#d1f2df;
+
+	.tuina {
+		background-color: #d1f2df;
 		color: #17984d;
 	}
-	.xiaoer{
+
+	.xiaoer {
 		width: 120rpx;
 		height: 35rpx;
 		line-height: 35rpx;
 		text-align: center;
-		background-color:#f1f8d7;
+		background-color: #f1f8d7;
 		color: #58b314;
 		font-size: 20rpx;
 	}
-	.taishi{
-		background-color:#e5d5c6;
+
+	.taishi {
+		background-color: #e5d5c6;
 		color: #805d39;
 	}
-	.kangfu{
-		background-color:#fcf3da;
+
+	.kangfu {
+		background-color: #fcf3da;
 		color: #ff8600;
 	}
 
-	.item-view-xiangmu span:nth-child(2){
-    font-weight: normal;
-    color: #333333;
-    font-size: 30rpx;
+	.item-view-xiangmu span:nth-child(2) {
+		font-weight: normal;
+		color: #333333;
+		font-size: 30rpx;
 	}
-  .item-view-xiangmu span:nth-child(1){
-    font-weight: normal;
-    color: #666666;
-    margin-right: 5rpx;
-    font-size: 30rpx;
-  }
-	.item-view-xiangmu{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    font-weight: 400;
-    font-size: 25rpx;
-    align-items: flex-end;
+
+	.item-view-xiangmu span:nth-child(1) {
+		font-weight: normal;
+		color: #666666;
+		margin-right: 5rpx;
+		font-size: 30rpx;
 	}
-	.item-view-title{
-	width: 76%;
-	font-weight: bold;
-	font-size: 32rpx;
-	color: #333333;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+
+	.item-view-xiangmu {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		font-weight: 400;
+		font-size: 25rpx;
+		align-items: flex-end;
 	}
-	.item-view{
-	width:60%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	justify-content: space-between;
-	padding:5rpx 0;
+
+	.item-view-title {
+		width: 76%;
+		font-weight: bold;
+		font-size: 32rpx;
+		color: #333333;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
-	.item-img{
-	width: 240rpx;
-	height: 200rpx;
-	border-radius: 14rpx;
-	position: relative;
+
+	.item-view {
+		width: 60%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		justify-content: space-between;
+		padding: 5rpx 0;
 	}
-	.img-span{
+
+	.item-img {
+		width: 240rpx;
+		height: 200rpx;
+		border-radius: 14rpx;
+		position: relative;
+	}
+
+	.img-span {
 		padding: 2px 5px;
 		font-weight: 400;
 		font-size: 8px;
@@ -369,23 +478,25 @@
 		margin-bottom: 5px;
 		margin-right: 5px;
 	}
-	.item-img image{
+
+	.item-img image {
 		width: 100%;
 		height: 100%;
 		border-radius: 14rpx;
-		}
-   .item {
-   	width: 100%;
-   	margin: 0 auto ;
-   	display: flex;
-   	flex-direction: row;
-   	justify-content: space-between;
-   	/*height: 140px;*/
-   	background: #FFFFFF;
-   	border-radius: 21rpx;
-   	margin-top:10px;
-   	align-items: center;
-   	padding:20rpx;
+	}
+
+	.item {
+		width: 100%;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		/*height: 140px;*/
+		background: #FFFFFF;
+		border-radius: 21rpx;
+		margin-top: 10px;
+		align-items: center;
+		padding: 20rpx;
 	}
 
 	.item-detail {
@@ -404,21 +515,25 @@
 		width: 100%;
 		background-color: #eeeeee;
 	}
-	/deep/.zp-paging-container{
+
+	/deep/.zp-paging-container {
 		background-color: #f7f7f7;
-		width:100%;
+		width: 100%;
 	}
-	/deep/.zp-paging-container-content{
+
+	/deep/.zp-paging-container-content {
 		width: 95%;
 		margin: 0 auto;
 	}
-	.fenlei{
+
+	.fenlei {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
 	}
-	.index-fenl-title{
+
+	.index-fenl-title {
 		width: 81rpx;
 		text-align: center;
 		position: relative;
@@ -427,37 +542,43 @@
 		align-items: center;
 		font-weight: bold;
 		font-size: 34rpx;
-		color:#019C88;
+		color: #019C88;
 	}
-	.index-fenl-title-bottom{
+
+	.index-fenl-title-bottom {
 		position: absolute;
 		bottom: 0;
 		margin-bottom: 0px;
 		width: 81rpx;
 		height: 14rpx;
 		border-radius: 7rpx;
-		background: linear-gradient(-48deg,rgba(1, 156, 136, 0.35),rgba(45, 196, 142, 0.35));
+		background: linear-gradient(-48deg, rgba(1, 156, 136, 0.35), rgba(45, 196, 142, 0.35));
 	}
-	/deep/.uni-searchbar__cancel{
+
+	/deep/.uni-searchbar__cancel {
 		display: none;
 	}
-	.search-btn{
+
+	.search-btn {
 		text-align: center;
 		color: #019c88;
 		font-weight: bold;
 		position: absolute;
-		right:40rpx;
+		right: 40rpx;
 		top: 20rpx;
 		font-size: 30rpx;
 		display: flex;
 		align-items: center;
 	}
-	/deep/.uni-searchbar__box-icon-search,.search-btn{
+
+	/deep/.uni-searchbar__box-icon-search,
+	.search-btn {
 		width: 110rpx;
 		height: 50rpx;
 	}
-	/deep/.uni-searchbar__box{
-		height:34px;
+
+	/deep/.uni-searchbar__box {
+		height: 34px;
 		border-radius: 30px !important;
 		background-color: #fff !important;
 		border: 1px solid #09a28a;
@@ -466,43 +587,49 @@
 		flex-flow: row-reverse;
 		position: relative;
 	}
-	/deep/.uni-searchbar{
-		width:250px;
+
+	/deep/.uni-searchbar {
+		width: 250px;
 		border-radius: 31rpx;
 		padding-right: 24rpx;
 	}
-	.service-head-top-left image{
+
+	.service-head-top-left image {
 		width: 20px;
 		height: 20rpx;
-		margin-right:5px;
+		margin-right: 5px;
 		margin-left: 10rpx;
 	}
-	.service-head-top-left span{
+
+	.service-head-top-left span {
 		width: 180rpx;
 		height: 60rpx;
-		background:url('../../static/images/headline.png') 0rpx 26rpx;
+		background: url('../../static/images/headline.png') 0rpx 26rpx;
 		background-repeat: no-repeat;
 		font-weight: bold;
 		font-size: 34rpx;
 		color: #171717;
 		margin-top: 14rpx;
 	}
-	.service-head-top-left{
+
+	.service-head-top-left {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
 	}
-	.service-head-top{
-		height:90rpx;
+
+	.service-head-top {
+		height: 90rpx;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		}
-	.view-cata{
+	}
+
+	.view-cata {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
-</style>
+</style>
\ No newline at end of file