样式修改

pages/index/index.vue

@@ -12,7 +12,8 @@
 			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
 			<view style="height: 98rpx;"></view>
 		</view>
-		<view class="topCont" :style="{background:'#'+themeColor}">
+		<view class="topCont" :style="{background:'#'+themeColor}"></view>
+		   <view style="padding: 8rpx 20rpx;margin-top: -110rpx;">
 			<!-- 有车 -->
 			<view class="carBox" v-if="carInfo">
 				<view class="carBox2">
@@ -207,15 +208,15 @@
 					</view> -->
 					<view class="goodsTab " :class="{goodsACt:tabIndex==index}" v-for="(item,index) in navigationList">
 						<view @click="tabFn(index,item.showType,item.id)">{{item.title}}</view>
-		
-						<image v-if="tabIndex==index" class="activeGoodsIcon" src="../../static/img2/activeGoods.png" mode=""></image>
+		                <image v-if="tabIndex==index" class="activeGoodsIcon" src="../../static/img2/tab.svg" mode=""></image>
+						<!-- <image v-if="tabIndex==index" class="activeGoodsIcon" src="http://dmsphoto.66km.com.cn/thFiles/DABE4EFB-5699-4515-A4D4-59AF13F8D2F4.png" mode=""></image> -->
 					</view>
 					
 				</view>
 				<view class="goodsLIneBox byBox" v-if="tabType==1">
 					<view class="goodsLine" @click="goMaintain(item)" v-for="(item,index) in byList">
 						<view class="goodsLeft">
-							<image src="http://dmsphoto.66km.com.cn/thFiles/A117F813-4778-4EE8-B374-54D38363EC1C.png" mode="" v-if="item.showType.indexOf(1)!=-1" class="byTj"></image>
+							<image src="http://dmsphoto.66km.com.cn/thFiles/F4CEDFE9-CF9F-41C5-B2BC-0EE00D9EA455.png" mode="" v-if="item.showType.indexOf(1)!=-1" class="byTj"></image>
 							<image class="goodsIcon" v-if="item.mainImgUrl" :src="item.mainImgUrl" mode=""></image>
 							<image class="goodsIcon" v-else src="../../static/timg/noimg.png" mode=""></image>
 						</view>
@@ -237,7 +238,9 @@
 										<view class="goodsPriceBox" v-for="(v,i) in item.packageItems" v-if="v.isDefault==1">
 											<span class="goodsPrice11">￥</span>
 											<span class="goodsPrice22">{{v.price}}</span>
-											<span class="goodsPrice33">/次¥{{v.money}}</span>
+											<span class="goodsPrice33">/次
+											  <span style="padding-left: 10rpx;">¥{{v.money}}</span>
+											</span>
 										</view>
 									</view>
 									<view class="goodsCRight">
@@ -246,8 +249,8 @@
 								</view>
 								<view class="goodsKbox">
 								    <view class="goosK1" v-if="item.showOilType">{{item.showOilType}}</view>
-									<view class="goosK2" v-if="item.showOilLevel">机油等级|{{item.showOilLevel}}</view>
-									<view class="goosK2" v-if="item.showFit">适配粘度|{{item.showFit}}</view> 
+									<view class="goosK2" v-if="item.showOilLevel">机油等级 | {{item.showOilLevel}}</view>
+									<view class="goosK2" v-if="item.showFit">适配粘度 | {{item.showFit}}</view> 
 								</view>
 							</view>
 						</view>
@@ -1626,7 +1629,8 @@
 }
 .contBox{
 	padding: 20rpx;
-	margin-top: 160rpx;
+	padding-top: 10rpx;
+	/* margin-top: 164rpx; */
 /* 	margin-top: -200rpx; */
 }
 .swiper2{
@@ -1649,25 +1653,28 @@
 	/* padding: 12rpx 15rpx; */
 }
 .activeGoodsIcon{
-	width: 55rpx;height: 19rpx;margin-top: 10rpx;
+	width: 55rpx;height: 19rpx;
+	margin: 0 auto;
+	margin-top: 8rpx;
+		margin-bottom: 20rpx;
+		    display: block;
 }
 .goodsTabBox{
 	display: flex;
 }
 .goodsTab{
 	text-align: center;
-	font-weight: 400;
-	font-size: 28rpx;
+	font-weight: 600;
+	font-size: 30rpx;
 	color: #8B8B8B;
-	line-height: 40rpx;
 	padding-right: 50rpx;
 }
 .goodsBox{
-	margin-top: 20rpx;
+	margin-top: 30rpx;
 }
 .goodsACt{
-	font-weight: 500;
-	font-size: 28rpx;
+	font-weight: 600;
+	font-size: 30rpx;
 	color: #222222;
 }
 .goodsLine{
@@ -1675,14 +1682,14 @@
 	padding: 24rpx;margin-bottom: 20rpx;
 }
 .goodsIcon{
-	width: 246rpx;border-radius: 12rpx;
-	height: 246rpx;
+	width: 230rpx;border-radius: 12rpx;
+	height: 230rpx;display: block;
 }
 .goodsLine{
 	display: flex;
 }
 .byBox .goodsName{
-	font-weight: 500;
+	font-weight: 600;
 	font-size: 28rpx;
 	color: #222222;
 	line-height: 40rpx;
@@ -1692,7 +1699,7 @@
 	width: 438rpx;
 	display: flex;
 	 flex-direction: column;
-	/* justify-content: space-between; */
+	 justify-content: space-between; 
 }
 .goodsRb{
 	padding-top: 16rpx;
@@ -1700,19 +1707,23 @@
 .goodsMs{
 	font-weight: 500;padding-top: 5rpx;
 	font-size: 20rpx;
-	color: #8B8B8B;
+	color: #5B5B5B;
 	line-height: 28rpx;
+	white-space: nowrap;      /* 确保文本在一行内显示 */
+	  overflow: hidden;         /* 超出容器部分隐藏 */
+	  text-overflow: ellipsis;
+	  width: 410rpx;
 }
 .goodsCBox{
 	display: flex;justify-content: space-between;
 }
 .goodsTitle{
-	height: 25rpx;line-height: 25rpx;font-size: 18rpx;
-color: #EC0F0A;padding: 0 10rpx;
-	background: #FEE6E5;
+	height: 30rpx;line-height: 32rpx;font-size: 20rpx;
+    color: #EC0F0A;padding: 0 10rpx;
+	background: #fbf1f0;border-radius: 6rpx;
 }
 .goodsCRight{
-	width: 147rpx;
+	width: 142rpx;
 	height: 58rpx;
 	background: #EC0F0A;
 	border-radius: 29rpx;
@@ -1722,7 +1733,7 @@ color: #EC0F0A;padding: 0 10rpx;
     color: #FFFFFF;
 }
 .goodsPriceBox{
-	line-height: 45rpx;
+/* 	padding-bottom: 10rpx; */
 	font-size: 22rpx;
 	color: #8B8B8B;
 }
@@ -1740,13 +1751,15 @@ color: #EC0F0A;padding: 0 10rpx;
 	display: flex;flex-wrap: wrap;
 }
 .goosK1 {
-	height: 25rpx;line-height: 25rpx;padding: 0 8rpx;
+	height: 25rpx;line-height: 27rpx;padding: 0 8rpx;
 	border: 1rpx solid #EC0F0A;font-size: 18rpx;
 color: #EC0F0A;margin-right: 10rpx; border-radius: 6rpx;
+margin-top: 10rpx;
 }
 .goosK2{
-	height: 25rpx;line-height: 25rpx;padding: 0 8rpx;color: #34B084;
+	height: 25rpx;line-height: 27rpx;padding: 0 8rpx;color: #34B084;
 	border: 1rpx solid #34B084;font-size: 18rpx;border-radius: 6rpx;
+	margin-right: 10rpx;margin-top: 10rpx;
 }
 .carAddImage{
 	width: 91rpx;height: 123rpx;
@@ -2029,7 +2042,7 @@ color: #EC0F0A;margin-right: 10rpx; border-radius: 6rpx;
 	}
 	.swiper-itemTk{
 		display: flex;
-		justify-content: flex-end;
+		justify-content: center;
 		flex-direction: column;
 		align-items: center;
 		height: 50vh;
@@ -2109,7 +2122,7 @@ color: #EC0F0A;margin-right: 10rpx; border-radius: 6rpx;
 	}
 	.goodsPrice33{
 		font-size: 22rpx;
-		color: #8B8B8B;padding-left: 10rpx;
+		color: #8B8B8B;
 	}
 	.goodsPrice4{
 		font-size: 24rpx;
@@ -2223,7 +2236,7 @@ color: #EC0F0A;margin-right: 10rpx; border-radius: 6rpx;
 	}
 	.goodsTwoLine{
 		background: #FFFFFF;width: 341rpx;
-		margin-top: 20rpx;
+		margin-bottom: 20rpx;
 		padding-bottom: 20rpx;
 		border-radius: 16rpx;
 		overflow: hidden;

pages/subPack/maintain.vue

@@ -255,9 +255,11 @@
 			},
 			qingdan(){
 				this.tkShow=true;
+				
 			},
 			qdTkclose(){
 			  this.tkShow=false	
+			 
 			},
 			clearAll(){
 				this.list.forEach(item=>{
@@ -266,6 +268,8 @@
 					})
 				})
 				 this.itemDefault=''
+				 this.qdNum=0
+				 this.totalPrice=0
 			},
 			delitemDefault(){
 				this.list.forEach(item=>{
@@ -274,6 +278,8 @@
 					})
 				})
 				 this.itemDefault=''
+				 this.qdNum=0
+				 this.totalPrice=0
 			},
 			selectItem(v,item){
 				this.list.forEach(item=>{

pages/subPack/maintainItem.vue

@@ -13,6 +13,15 @@
  	</swiper>
  </view>
  <view class="shopCont">
+	 <view style="display: flex;padding-left: 24rpx;">
+		<view v-if="itemDefault.salesLabel==1" class="biaoqian">活动价</view>
+		<view v-if="itemDefault.salesLabel==2" class="biaoqian">促销价</view>
+		<view v-if="itemDefault.salesLabel==3" class="biaoqian">特价</view>
+		<view v-if="itemDefault.salesLabel==4" class="biaoqian">限量抢购</view>
+		<view v-if="itemDefault.salesLabel==5" class="biaoqian">{{itemDefault.salesLabelCustom}}</view>
+			 
+	 </view>
+	
  	<view class="shopCtop">
  		<view class="goodsPrice" >
  			<view class="goodsPrice2">￥</view>
@@ -45,17 +54,17 @@
  
  
  <view class="buyBOx">
-	 <view class="buyLine" @click="ckCar">
+	 <view class="buyLine" @click="ckCar" style="padding-bottom: 10rpx;">
 		 <view class="buyTitle">已选车型</view>
 		 <view class="buyData" style="display: flex;">
 			 <view class="carModelLine">   {{carInfo.carModel?carInfo.carModel:''}}</view>
 		
-		   <image class="jtIcon" src="../../static/timg/jthei.png" mode=""></image>
+		   <image class="jtIcon" src="../../static/img2/byjt.png" mode=""></image>
 		 </view>
 	 </view>
 	 <view class="carTis" v-if="isRecommend!='true'">此套餐可能与爱车不适配</view>
-	 <view class="buyLine">
-	 		 <view class="buyTitle">商品规格</view>
+	 <view class="buyLine" style="padding: 6rpx 24rpx;">
+	 		 <view class="buyTitle" style="line-height: 52rpx;">商品规格</view>
 			 <view class="guigeBox">
 				 <scroll-view scroll-x="true" enable-flex="true" class="buyData guigeBox2">
 					 
@@ -69,8 +78,8 @@
 			 </view>
 	 		
 	 </view>
-	 <view class="buyLine">
-	 		 <view class="buyTitle">商品数量</view>
+	 <view class="buyLine" style="padding: 10rpx 24rpx;">
+	 		 <view class="buyTitle" style="line-height: 44rpx;">商品数量</view>
 	 		 <view class="buyData">
 				 <view class="numJsbox">
 				 	<view class="numJj" @click="calculation(1)">-</view>
@@ -89,7 +98,7 @@
 	 		 <view class="buyTitle">可用门店</view>
 	 		 <view class="buyData" v-if="itemDefault.packTimeShopName=='全部'">全部门店</view>
 			 <view @click="keyongFn" class="buyData " style="display: flex;" v-else>{{itemDefault.packTimeShopName.split(',').length}}个门店可用
-			   <image src="../../static/img2/hjt.png" mode="" class="hjt"></image>
+			   <image src="../../static/img2/byjt.png" mode="" class="hjt"></image>
 			 </view>
 	 </view>
  </view>
@@ -153,21 +162,35 @@
  			 <image class="tkImg" v-else src="../../static/timg/noimg.png" mode="" ></image>
  			 <view class="tkNameBox">
  				 <view class="tkName">{{detail.title}}</view>
+				 <view style="display: flex;padding-bottom: 24rpx;">
+				 		<view v-if="itemDefault.salesLabel==1" class="biaoqian">活动价</view>
+				 		<view v-if="itemDefault.salesLabel==2" class="biaoqian">促销价</view>
+				 		<view v-if="itemDefault.salesLabel==3" class="biaoqian">特价</view>
+				 		<view v-if="itemDefault.salesLabel==4" class="biaoqian">限量抢购</view>
+				 		<view v-if="itemDefault.salesLabel==5" class="biaoqian">{{itemDefault.salesLabelCustom}}</view>
+				 			 
+				 </view>
  				 <view class="goodsPrice">
  				 	<view class="goodsPrice2">￥</view>
  				 	<view class="goodsPrice3">{{itemDefault.money}}</view>
- 				 	<view class="goodsPrice4" >原价：¥{{itemDefault.crossedPrice}}</view>
+ 				 	<view class="goodsPrice4" v-if="itemDefault.showCrossedPrice==1">原价：¥{{itemDefault.crossedPrice}}</view>
  				 </view>
  				 
  			 </view>
  			 <image class="chahao" src="../../static/img2/chahao.png" mode=""  @click="closeTk"></image>
  		 </view>
+		
  		 <view class="buyLine">
  		 		 <view class="buyTitle">商品规格</view>
- 		 		 <view class="buyData">
- 		 				 <view class="goodsGuige activeGuige" style="margin-right: 24rpx;">{{itemDefault.title}}</view>
- 		 				<!-- <view class="goodsGuige">保养套餐卡</view> -->
- 		 			 </view>
+ 		 		<view class="guigeBox">
+		 <scroll-view scroll-x="true" enable-flex="true" class="buyData guigeBox2">
+							 <view class="goodsGuige" @click="goodsGuige(item)"
+							 :class="{activeGuige:item.id==itemDefault.id}" v-if="item.isShow==1"
+							  v-for="(item,index) in detail.packageItems">{{item.title}}</view>
+			
+		 </scroll-view>
+ 		 						 
+ 		 		</view>
  		 </view>
  		 <view class="buyLine">
  		 		 <view class="buyTitle">商品数量</view>
@@ -437,7 +460,7 @@
 	font-size: 28rpx;
 	font-weight: 400;
 	color: #EC0F0A;
-	padding-top: 10rpx;
+	padding-top: 16rpx;
 	
 }
 
@@ -450,7 +473,7 @@
 	font-size: 24rpx;
 	font-weight: 400;
 	color: #999999;
-	padding-top: 14rpx;
+	padding-top: 20rpx;
 	text-decoration:line-through; 
 	padding-left: 10rpx;
 }
@@ -491,9 +514,9 @@
 .goodsMs{
 	font-size: 18rpx;
 	color: #FF063A;
-	padding: 4rpx 8rpx;
+	padding: 2rpx 8rpx;
 	border-radius: 6rpx;
-	border: 1px solid #FF063A;
+	border: 1rpx solid #FF063A;
 	margin-right: 16rpx;
 }
 .timeBox{
@@ -511,7 +534,11 @@ color: #666666;padding-top: 6rpx;
 line-height: 33rpx;
 }
 .jtIcon{
-	width: 24rpx;height: 24rpx;margin-top: 6rpx;
+margin-top: 8rpx;
+    width: 12rpx;
+    height: 22rpx;
+	    margin-left: 6rpx;
+
 }
 .buyLine{
 	display: flex;justify-content: space-between;
@@ -520,14 +547,14 @@ color: #666E80;
 }
 .buyBOx{
 	background: #FFFFFF;margin-top: 20rpx;
-	
+	padding: 15rpx 0;
 }
 .buyData{
 	color: #222222;display: flex;
 }
 .goodsGuige{
 /* 	width: 150rpx; */
-	height: 50rpx;line-height: 48rpx;
+	height: 50rpx;line-height: 50rpx;
 	background: #F6F6F6;
 	border-radius: 5rpx;
 	font-size: 24rpx;
@@ -579,8 +606,8 @@ color: #666E80;
 	color: #333333;
 	font-size: 24rpx;
 	margin: 0 4rpx;
-	border-left:1px solid #C0C0C0;
-	border-right:1px solid #C0C0C0;
+	border-left:1px solid #dddddd;
+	border-right:1px solid #dddddd;
 }
 .goodsnumInput{
 	width: 44rpx;
@@ -603,16 +630,18 @@ color: #666E80;
 	color: #999999;
 }
 .numJsbox{
-	border: 1px solid #C0C0C0;
+	border: 1px solid #dddddd;
 	border-radius: 6rpx;
 }
 .mealBox{
 	background: #FFFFFF;
 	padding: 20rpx 24rpx;
 	margin-top: 20rpx;
+	font-size: 26rpx;
 }
 .fwlcTitle{
-	color: #666666;font-size: 30rpx;font-weight: 500;
+	font-size: 26rpx;padding-bottom: 24rpx;
+	    color: #666E80;
 }
 .mealTop{
 	display: flex;
@@ -674,16 +703,17 @@ color: #666E80;
 	line-height: 38rpx;
 }
 .goodsDetailTitle{
-	color: #666666;
-	font-size: 30rpx;
-	font-weight: 500;
+	font-size: 26rpx;
+	color: #666E80;
+	
 	background: #FFFFFF;
-	padding: 20rpx 24rpx;
+	padding-bottom: 24rpx;
 }
 .goodsDetail{
-	margin-top: 20rpx;
-	padding-bottom: 30rpx;
+	padding: 20rpx;
 	background: #FFFFFF;
+	font-size: 26rpx;
+	margin-top: 20rpx;
 }
 .goodsDetail img{
 	width: 750rpx;
@@ -777,6 +807,14 @@ color: #666E80;
 	font-size: 30rpx;
 	color: #222222;
 	line-height: 42rpx;
+	font-weight: 500;
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;				
+	text-overflow: ellipsis;		
+	display: -webkit-box;			
+	-webkit-line-clamp: 2;		
+	line-clamp: 2;					
+	-webkit-box-orient: vertical;
 }
 .tkNameBox{
 	padding-left: 24rpx;width: 500rpx;
@@ -851,7 +889,7 @@ color: #666E80;
 }
 .tkBottom{
 	width: 750rpx;
-	height: 146rpx;
+	padding-top: 30rpx;
 	background: #FFFFFF;
 	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
 	padding-bottom: constant(safe-area-inset-bottom);
@@ -900,5 +938,16 @@ button{
 	
 	height: 100%;
 	}
-
+.biaoqian{
+	background: #FF0035;
+	border-radius: 24rpx 24rpx 25rpx 0rpx;
+	padding: 4rpx 16rpx;
+	font-size: 22rpx;
+	color: #FFFFFF;
+	margin-top: 24rpx;
+	margin-bottom: -15rpx;
+}
+.tkNameBox .biaoqian{
+	margin-top: 16rpx;margin-bottom: -18rpx;
+}
 </style>

pages/subPack/maintainSubmit.vue

@@ -46,7 +46,7 @@
 	 
  </view>
  
-<view style="height: 150rpx;"></view>
+<view style="height: 200rpx;"></view>
  
  <view class="bottom">
 	 <view class="bleft">
@@ -234,8 +234,8 @@
 	line-height: 40rpx;
 }
 .buyType{
-	min-width: 106rpx;text-align: center;
-	height: 32rpx;line-height: 32rpx;
+	padding: 0 8rpx;text-align: center;
+	height: 32rpx;line-height: 34rpx;
 	border-radius: 5rpx;
 	border: 1px solid #FF0035;font-size: 22rpx;
 color: #FF0035;
@@ -262,9 +262,13 @@ margin-top: 10rpx;
 	background: #FFFFFF;
 	padding: 20rpx 24rpx;
 	margin-top: 20rpx;
+	font-size: 26rpx;
+	color: #666666;
+	    border-radius: 16rpx;
 }
 .fwlcTitle{
 	color: #333333;font-size: 30rpx;font-weight: 500;
+	padding-bottom: 20rpx;
 }
 .mealTop{
 	display: flex;
@@ -341,9 +345,10 @@ border-radius: 16rpx;
 	position: fixed;
 	width: 100%;
 	padding:30rpx 0;
-	/* padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom); */
+   padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom); 
 	left: 0;bottom: 0;
+	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153, 153, 153, 0.2);
 }
 .bleft{
 	font-weight: 500;

static/img2/tab.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="55px" height="19px" viewBox="0 0 55 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>路径 10</title>
+    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="home-有车有牌" transform="translate(-37.000000, -1273.000000)" fill="#FCD903" fill-rule="nonzero">
+            <polygon id="路径-10" points="37.8190408 1273.70688 64.7530563 1291.40192 91.6870718 1273.70688 64.6329033 1279.60293"></polygon>
+        </g>
+    </g>
+</svg>