样式修改

pages/index/goodsDetail.vue

@@ -14,10 +14,13 @@
 			</swiper>
 	  	</view>
 		<!-- <view class="name" v-if="loading">{{info.name}} | {{info.specificationModel}} | {{info.partsCode}}</view> -->
-		<view class="name">附属型号：{{info.brand}} {{info.factoryNumber}}</view>
-		<view class="goodsMs">电池型号：{{info.specificationModel}}</view>
-		<view class="goodsMs">系列：{{info.GeneralpurposeName}}  <span class="englishname" v-if="info.englishname">{{info.englishname}}</span> </view>
-		<view class="goodsMs" v-if="info.carmodelremark">适用车型：{{info.carmodelremark}}</view>
+		<view class="msBox">
+			<view class="name">附属型号：{{info.brand}} {{info.factoryNumber}}</view>
+			<view class="goodsMs"> <span class="dian"></span> 电池型号：{{info.specificationModel}}</view>
+			<view class="goodsMs"> <span class="dian"></span> 系列：{{info.GeneralpurposeName}}  <span class="englishname" v-if="info.englishname">{{info.englishname}}</span> </view>
+			<view class="goodsMs" v-if="info.carmodelremark"><span class="dian"></span> 适用车型：{{info.carmodelremark}}</view>
+		</view>
+		
 		<view style="height: 30rpx;background: #F4F5F7;" v-if="html"></view>
 		<view class="detail" v-if="html">
 			<view class="datailTitle">商品详情</view>
@@ -112,10 +115,12 @@
 }
 .name{
 	font-weight: 500;
-	color: #1A1A1A;
+	color: #254A90;
 	line-height: 40rpx;
 	font-size: 28rpx;
-	padding: 30rpx 24rpx;
+	padding: 20rpx 24rpx;
+	padding-bottom: 6rpx;
+
 }
 
 .detail img{
@@ -129,15 +134,32 @@
 	 width: 750rpx;
 }
 .goodsMs{
-	padding: 15rpx 24rpx;
+	padding: 10rpx 24rpx;
 	font-size: 26rpx;
 	color: #222222;
+	display: flex;
 }
 .englishname{
 	padding: 0 6rpx;
 	border-radius: 8rpx;
-	border:1px solid #254A90;
+	/* border:1px solid #254A90; */
 	margin-left: 10rpx;
 	display: inline-block;
+	background: #254A90;
+	color: #ffffff;
+}
+.msBox{
+	background: #F8F8F8;
+	    padding-bottom: 10rpx;
+
+}
+.dian{
+	display: inline-block;
+	width: 10rpx;
+	height: 10rpx;
+	background: #A3A3A3;
+	border-radius: 6rpx;
+	margin-top: 14rpx;
+	margin-right: 6rpx;
 }
 </style>

pages/index/goodsList.vue

@@ -10,7 +10,7 @@
 					<view class="historylinecar">{{optdata.value}}</view>
 					<view class="historyLineVin" v-if="optdata.isVin==1"><!--  -->
 					     <view style="display: flex; padding-top: 16rpx;">
-							 <view class="vinms">VIN</view>
+							 <view class="vinms">VIN:</view>
 							 <view class="vinNum">{{optdata.vin}}</view>
 						 </view>
 						
@@ -400,12 +400,12 @@
 	}
 	.box {
 		padding: 0 24rpx;
-		background: #ffffff;
+		background: #254A90;
 	}
 
 	.historylinecarImg{
-		width: 54rpx;
-		height: 54rpx;
+		width: 90rpx;
+		height: 90rpx;
 	}
 	.historyLogoBox{
 			display: flex;align-items: center;
@@ -415,9 +415,9 @@
 	.historylinecar {
 		font-weight: 500;
 		font-size: 26rpx;
-		color: #1A1A1A;
+		color: #FFFFFF;
 		line-height: 46rpx;
-		width: 636rpx;
+		width: 600rpx;
 	}
 
 	.historyLine {
@@ -503,27 +503,31 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 		/* display: flex;justify-content: space-between;flex-wrap: wrap; */
 	}
 	.historyLineVin{
-		display: flex;background: #ffffff;justify-content: space-between;
+		display: flex;justify-content: space-between;
 	}
 	.historyLineCar{
 		display: flex;justify-content: space-between;
 	}
 	.vinNum{
 		font-weight: 400;font-size: 26rpx;padding-left: 10rpx;
-		color: #999999;line-height: 30rpx;
+		color: #FFFFFF;line-height: 30rpx;
 	}
 	.vinms{
-		width: 38rpx;
-		height: 26rpx;
+		/* width: 38rpx;
+		height: 26rpx; */
 	/* 	background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%); */
-		border-radius: 4rpx;
+		/* border-radius: 4rpx;
 		text-align: center;
 		line-height: 26rpx;
 		font-weight: 600;
 		color: #FFFFFF;
 		font-size: 18rpx;
-		margin-top: 2rpx;
-		 background: #254A90;
+		margin-top: 2rpx; */
+		/* background: #254A90; */
+		    font-weight: 400;
+		    font-size: 26rpx;
+		    color: #FFFFFF;
+		    line-height: 30rpx;
 	}
 	.ruleListSpan{
 		font-weight: 400;
@@ -553,11 +557,11 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 	.topBtn{
 		font-weight: 400;
 		font-size: 26rpx;
-		color: #254A90;
+		color: #FFFFFF;
 		width: 180rpx;
 		height: 56rpx;
 		border-radius: 28rpx;
-		border: 1px solid #254A90;
+		border: 1px solid #FFFFFF;
 		line-height: 56rpx;
 		text-align: center;
 		margin-right: 30rpx;
@@ -565,7 +569,7 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 	.copyVin{
 		font-weight: 400;
 		font-size: 26rpx;
-		color:#3F90F7;
+		color:#FFFFFF;
 		width: 62rpx;
 		height: 34rpx;
 		line-height: 34rpx;
@@ -598,9 +602,9 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
 		padding-top: 10rpx;
 	}
 	.brandActive{
-		background: rgba(37,74,144,0.08);
+		background: #254A90;
 		border-radius: 6rpx;
-		color: #254A90;
+		color: #FFFFFF;
 	}
 .glActive{
 	background: #ffffff;
@@ -644,8 +648,10 @@ color: #E60006;
 .englishname{
 	padding: 0 6rpx;
 	border-radius: 8rpx;
-	border:1px solid #254A90;
+	/* border:1px solid #254A90; */
 	margin-left: 10rpx;
 	display: inline-block;
+	background: #254A90;
+	color: #ffffff;
 }
 </style>