ui”

git commit -m ui”

pages/user/index.vue

@@ -132,17 +132,19 @@
 							<!-- <view class="progress"></view> -->
 
 							<view class="progress">
+								<view class="line"></view>
 								<view v-for="(item,index) in sign" :key="index"
-									:class="signNum >= index+ 1?'item active':'item'">
-									<view class="line"></view>
-									<view class="right">
-										<!-- 已签到图标 -->
+									:class="signNum >= index+ 1?'img-item active':'img-item'">
+									<view class="top">
+
 										<image v-if="signNum >= index+ 1" src="/static/images/right_org.png" mode="">
 										</image>
 										<!-- 未签到图标 -->
 										<image v-else src="/static/images/right_org_ling.png" mode=""></image>
-										<text class="text">第{{ item.day }}天</text>
 									</view>
+
+
+									<text class="text">第{{ item.day }}天</text>
 								</view>
 							</view>
 							<image class="button" mode="widthFix" src="/static/images/check_in.png"></image>
@@ -248,12 +250,12 @@
 								<image src="../../static/images/mycoupon.png" mode=""></image>
 								<text class="text">领券中心</text>
 							</view>
-							
+
 							<view class="item no-marin-bottom" @click="openH5(1)">
 								<image src="../../static/images/service_file.png" mode=""></image>
 								<text class="text">用户协议</text>
 							</view>
-							
+
 							<view class="item no-marin-bottom">
 								<image src="../../static/images/customer1.png" mode=""></image>
 								<text class="text">专属客服</text>
@@ -537,7 +539,7 @@
 		width: 100%;
 		height: 532rpx;
 		position: relative;
-		background: radial-gradient( 60% 60% at 70% 11%, #C5EFEA 0%, rgba(245,246,246,0) 100%);
+		background: radial-gradient(60% 60% at 70% 11%, #C5EFEA 0%, rgba(245, 246, 246, 0) 100%);
 		// background-image: url(../../static/images/personl_top_bg.png);
 		// background-image: url(../../static/images/red_bg.png);
 		// background-image: url(../../static/images/viewer_top.png);
@@ -876,7 +878,6 @@
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				margin: 18rpx 0;
 
 				.left {
 					font-weight: 600;
@@ -907,63 +908,69 @@
 				display: flex;
 				align-items: center;
 				flex-direction: column;
-				padding: 34rpx 32rpx 32rpx;
+				padding: 34rpx 0 32rpx;
 
 				.progress {
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
-					// margin-top: 40upx;
+					position: relative;
+					z-index: 1;
 
-					.item {
+					.line {
+						position: absolute;
+						top: 20rpx;
+						width: 100%;
+						width: calc(100% - 30rpx);
+						left: 10rpx;
+						height: 4upx;
+						background: #F6CDA7;
+						border-radius: 2upx;
+						z-index: 1;
+					}
+
+					.img-item {
 						display: flex;
+						flex-direction: column;
 						justify-content: center;
+						margin-right: 34rpx;
+						align-items: center;
 
-						.right {
+						&:last-child {
+							margin-right: 0;
+						}
+
+						.top {
 							display: flex;
-							flex-direction: column;
 							align-items: center;
-							justify-content: center;
 
 							image {
 								width: 44upx;
 								height: 44upx;
-								margin-bottom: 20upx;
+								background-color: #ffffff;
+								position: relative;
+								z-index: 3;
 							}
 
-							.text {
-								font-size: 24upx;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #FF7511;
-								line-height: 1;
-								white-space: nowrap;
-							}
 						}
 
-						.line {
-							width: 34upx;
-							height: 4upx;
-							background: #F6CDA7;
-							border-radius: 2upx;
-							margin-top: 22upx;
+						.text {
+							font-size: 24upx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #FF7511;
+							line-height: 1;
+							white-space: nowrap;
+							margin-top: 16rpx;
 						}
 
-						&:first-child {
-							.line {
-								display: none;
-							}
-						}
 
-						&.active {
-							.line {
-								background: #FF8E3C;
-							}
-						}
+
 					}
 				}
 
 				.button {
+					margin-top: 40rpx;
 					width: 598rpx;
 				}
 			}
@@ -977,7 +984,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-flex-direction: column;
+		flex-direction: column;
+
 		.used-tools {
 			margin-top: 20rpx;
 			box-sizing: border-box;

pages_shopping/shopping/productDetails.vue

@@ -251,6 +251,24 @@
 					<image class="w48 h48" src="/static/images/more_arrow.png"></image>
 				</view>
 			</view>
+			<view class="life-list">
+				<view class="item">
+					<image class="play" src="/static/image/video_icon.png"></image>
+					<image src="/static/images/img.png"></image>
+				</view>
+				<view class="item">
+					<image class="play" src="/static/image/video_icon.png"></image>
+					<image src="/static/images/img.png"></image>
+				</view>
+				<view class="item">
+					<image class="play" src="/static/image/video_icon.png"></image>
+					<image src="/static/images/img.png"></image>
+				</view>
+				<view class="item">
+					<image class="play" src="/static/image/video_icon.png"></image>
+					<image src="/static/images/img.png"></image>
+				</view>
+			</view>
 		</view>
 
 		<!-- 功效 -->
@@ -304,13 +322,16 @@
 							mode="aspectFill"></image>
 					</view>
 					<view class="info-text">
+						<view class="product-name">云南白药气雾剂</view>
 						<view class="price">
-							<text class="unit">¥</text>
-							<text class="num">{{ productValueSelect.price.toFixed(2) }}</text>
+							<text class="title">会员价</text>
+							<text class="unit">¥</text><text
+								class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
 						</view>
 						<view class="desc-box">
-							<text class="text">已选：{{ productValueSelect.sku }}</text>
-							<text class="text">库存{{ productValueSelect.stock?'充足':'售罄' }}</text>
+							<text class="text">月售2456件</text>
+							<!-- <text class="text">已选：{{ productValueSelect.sku }}</text>
+							<text class="text">库存{{ productValueSelect.stock?'充足':'售罄' }}</text> -->
 						</view>
 					</view>
 				</view>
@@ -341,7 +362,7 @@
 					</view>
 				</view>
 				<button :class="isSubmitting?'btnsel sub-btn':'sub-btn'" :disabled="isSubmitting"
-					@click="submit">{{ isSubmitting ? '订单生成中...' : '立即购买' }}</button>
+					@click="submit">{{ isSubmitting ? '订单生成中...' : '确定' }}</button>
 			</view>
 		</popupBottom>
 		<view class="loadding" v-if="loadding==true">
@@ -447,6 +468,13 @@
 
 		},
 		methods: {
+			splitPrice(price) {
+				const priceStr = parseFloat(price).toFixed(2).toString();
+				return {
+					integer: priceStr.split('.')[0],
+					decimal: priceStr.split('.')[1]
+				};
+			},
 			getDicts: function() {
 				getDicts().then(
 					res => {
@@ -1381,6 +1409,27 @@
 		}
 	}
 
+	.life-box {
+		margin: 0 24rpx;
+		padding: 0 24rpx 24rpx;
+		background: #ffffff;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+		.life-list {
+			.item {
+				position: relative;
+
+				.play {
+					position: absolute;
+					top: 20rpx;
+					right: 20rpx;
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+		}
+	}
+
 	.effect {
 		box-sizing: border-box;
 		padding: 20rpx 30rpx;
@@ -1538,35 +1587,38 @@
 				}
 			}
 
+			.product-name {
+				font-weight: 600;
+				font-size: 32rpx;
+				color: #333333;
+			}
+
 			.info-text {
 				height: 200rpx;
 				display: flex;
 				flex-direction: column;
-				justify-content: space-between;
 
 				.price {
-					display: flex;
-					align-items: flex-end;
+					margin-top: 16rpx;
+					font-weight: 600;
+					font-size: 26rpx;
+					color: #FA341E;
+					font-size: 26rpx;
 
-					.unit {
-						font-size: 32rpx;
-						font-family: PingFang SC;
-						font-weight: bold;
-						color: #FF6633;
-						line-height: 1.2;
-						margin-right: 10rpx;
+					.title {
+						font-weight: 500;
+						font-size: 24rpx;
+						color: #FF5030;
+						margin-right: 8rpx;
 					}
 
-					.num {
-						font-size: 50rpx;
-						font-family: PingFang SC;
-						font-weight: bold;
-						color: #FF6633;
-						line-height: 1;
+					.bold {
+						font-size: 48upx;
 					}
 				}
 
 				.desc-box {
+					margin-top: 16rpx;
 					display: flex;
 					flex-direction: column;
 					padding-bottom: 9rpx;
@@ -1605,23 +1657,19 @@
 
 				.item {
 					box-sizing: border-box;
-					height: 64rpx;
-					padding: 0 30rpx;
-					line-height: 64rpx;
+					padding: 12rpx 24rpx;
 					font-size: 28rpx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #111111;
-					background: #F7F7F7;
-					border: 1px solid #F7F7F7;
-					border-radius: 32rpx;
-					margin-right: 20rpx;
+					color: #333333;
+					background: #F5F7FA;
+					border-radius: 28rpx 28rpx 28rpx 28rpx;
+					margin-right: 24rpx;
 					margin-bottom: 30rpx;
 
 					&.active {
-						background: #F1FFFE;
-						border: 1px solid #8AD5CE;
-						color: #2BC7B9;
+						font-size: 24rpx;
+						color: #02B176;
+						background: #EBFAF6;
+						border: 2rpx solid #02B176;
 					}
 				}
 			}
@@ -1647,8 +1695,7 @@
 				.img-box {
 					width: 60rpx;
 					height: 60rpx;
-					// border-radius: 4rpx;
-					border: 1px solid #dddddd;
+
 					display: flex;
 					align-items: center;
 					justify-content: center;
@@ -1667,11 +1714,8 @@
 					font-family: PingFang SC;
 					font-weight: 500;
 					color: #111111;
-					// border-radius: 4rpx;
-					border-top: 1px solid #dddddd;
-					border-bottom: 1px solid #dddddd;
+					background: #F5F7FA;
 					text-align: center;
-					// margin: 0 16rpx;
 				}
 			}
 		}
@@ -1685,10 +1729,9 @@
 			font-family: PingFang SC;
 			font-weight: bold;
 			color: #FFFFFF;
-			background: #2BC7B9;
 			border-radius: 44rpx;
 			margin-top: 30rpx;
-			// margin-bottom: 30rpx;
+			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
 
 		}
 	}