样式修改

pages/index/goodsList.vue

@@ -125,6 +125,8 @@
               this.optdata=opt;
 			  if(this.optdata.type){
 				  this.type=this.optdata.type
+				  this.leftIndex=this.type
+				  this.componentCode=this.leftData[this.type].componentCode
 			  }
 			  this.queryMaintainPartList()
 			  this.queryOilInfoByGroupID()
@@ -402,11 +404,11 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 	.topBtn{
 		font-weight: 400;
 		font-size: 26rpx;
-		color: #F19D01;
+		color: #E60006;
 		width: 180rpx;
 		height: 56rpx;
 		border-radius: 28rpx;
-		border: 1px solid #F19D01;
+		border: 1px solid #E60006;
 		line-height: 56rpx;
 		text-align: center;
 		margin-right: 30rpx;

pages/index/index.vue

@@ -117,21 +117,21 @@
 			 			 		<view class="productTitle">产品列表</view>
 			 					<view class="productLinBox">
 			 						<view class="productLine" @click="goCarModelType(1)">
-			 							<image class="productImg" src="/static/img/and.png" mode=""></image>
-			 							<view class="productTxt" >阿诺德</view>
+			 							<image class="productImg" src="/static/img/dhxq.png" mode=""></image>
+			 							<view class="productTxt" >点火线圈</view>
 			 						</view>
-			 						<view class="productLine" @click="goCarModelType(2)">
-			 							<image class="productImg" src="/static/img/hy.png" mode=""></image>
-			 							<view class="productTxt" >鸿雁</view>
+			 						<view style="margin-left: 100rpx;" class="productLine" @click="goCarModelType(2)">
+			 							<image class="productImg" src="/static/img/hhs.png" mode=""></image>
+			 							<view class="productTxt" >火花塞</view>
 			 						</view>
-			 						<view class="productLine" @click="goCarModelType(3)">
+			 						<!-- <view class="productLine" @click="goCarModelType(3)">
 			 							<image class="productImg" src="/static/img/sg.png" mode=""></image>
 			 							<view class="productTxt" >三冠</view>
 			 						</view>
 			 						<view class="productLine" @click="goCarModelType(4)">
 			 							<image class="productImg" src="/static/img/wsk.png" mode=""></image>
 			 							<view class="productTxt" >威斯康</view>
-			 						</view>
+			 						</view> -->
 			 					</view>
 			 			 </view>
 			 			 
@@ -475,10 +475,10 @@ margin-top: 20rpx;
 	line-height: 40rpx;
 }
 .productLinBox{
-	display: flex;justify-content: space-between;
+	display: flex;/* justify-content: space-between; */
 }
 .productImg{
-	width: 125rpx;height: 44rpx;
+	width: 90rpx;height: 90rpx;
 }
 .productLine{
 	text-align: center;

pages/index/sgoodsList.vue

@@ -12,8 +12,16 @@
 			  	搜索
 			  </view>
 	</view>
+	<view style="height: 20rpx;background: #F4F5F7;"></view>
 		<view class="cont">
-			
+			<view class="goosLeft">
+				<view class="goodsLefeLine" :class="{glActive:leftIndex==index}"
+				 @click="leftFn(index,item)" v-for="(item,index) in leftData">
+					<view class="leftKK" v-if="leftIndex==index"></view>
+					<view v-else  class="leftKK2"></view>
+					<view class="glName">{{item.name}}</view>
+				</view>
+			</view>
 			<view class="jiyouBox" v-if="loading">
 				
 				<view class="jylineBox">
@@ -59,6 +67,13 @@
 			   spec:'',
 			   modelRemarkNum:1,
 			   oldMaintainPartList:'',
+			   componentCode:'',
+			   leftData:[
+				   {name:'全部',componentCode:''},
+				   {name:'点火线圈',componentCode:'003001'},
+				   {name:'火花塞',componentCode:'003003'},
+			   ],
+			   leftIndex:0,
 			}
 		},
 		onLoad(opt) {
@@ -213,6 +228,8 @@
 
 	.cont {
 		/* padding: 30rpx 24rpx; */
+		display: flex;
+		/* margin-top: 20rpx; */
 	}
 	.toplineImg{
 		width: 35rpx;
@@ -382,7 +399,7 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 	}
 	.sTopBox{
 		display: flex;padding: 30rpx 24rpx;
-		padding-bottom: 0;
+		padding-bottom: 20rpx;
 	}
 	.searchBtn{
 		font-weight: 400;font-size: 28rpx;padding-left: 24rpx;
@@ -406,4 +423,42 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 	.simg{
 		width: 36rpx;height: 34rpx;margin-top: 23rpx;margin-left:30rpx;
 	}
+.goosLeft{
+		width: 190rpx;
+		font-size: 26rpx;
+		color: #3C3C3C;
+		background: #F6F6F6;
+	}
+	.goodscont{
+		display: flex;margin-top: 20rpx;
+		min-height: calc(100vh - 450rpx);
+	}
+.goodsLefeLine{
+	display: flex;justify-content: center;
+	padding: 22rpx 0;
+}
+.glActive{
+	background: #ffffff;
+}
+.glActive .glName{
+font-weight: 500;
+font-size: 26rpx;
+color: #E60006;
+/* border-left:4rpx solid #E60006; */
+}
+.leftKK{
+	background: #E60006;
+	width: 6rpx ;
+	height: 24rpx;
+	border-radius: 4rpx;
+	margin-top: 6rpx;
+	overflow: hidden;
+}
+.leftKK2{
+	width: 4rpx ;
+}
+.glName{
+	width: 170rpx;text-align: center;
+	font-size: 26rpx;
+}
 </style>