Bladeren bron

img 文字对齐

hwq 4 jaren geleden
bovenliggende
commit
b982812645
2 gewijzigde bestanden met toevoegingen van 84 en 43 verwijderingen
  1. 77 37
      pages/index/index.vue
  2. 7 6
      pages/user/user.vue

+ 77 - 37
pages/index/index.vue

@@ -16,7 +16,7 @@
 			<view class="titleNview-placing"></view>
 			<!-- 背景色区域 -->
 			<!-- <view class="titleNview-background" :style="{ backgroundColor: '#5DBC7C' }"></view> -->
-			<view class="titleNview-background" :style="{ backgroundColor: '#efe9df' }"></view>
+			<view class="titleNview-background" ></view>
 			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
 				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
 			</swiper>
@@ -82,11 +82,11 @@
 				<view class="left-wrapper"><image src="../../static/img/spimg1.jpg" mode="scaleToFill"></image></view>
 				<view class="right-wrapper">
 					<view class="right-title">湿热肝上火气肺痰煲汤材料</view>
-					<view class="right-addr">
-						<view class="shop-img"><image src="../../static/img/shop.png" mode=""></image></view>
-						<view class="shop-name">子臣台州旗舰店</view>
-						<view class="point-img"><image src="../../static/img/point.png" mode=""></image></view>
-						<view class="point-disc">200m</view>
+					<view class="ex-addr">
+						<image src="../../static/img/shop.png" mode="" class="name-img"></image>
+						子臣台州旗舰店
+						<image src="../../static/img/point.png" mode="" class="point-img"></image>
+						200m
 					</view>
 					<view class="right-bottom">
 						<view class="sp-price">
@@ -102,11 +102,11 @@
 				<view class="left-wrapper"><image src="../../static/img/spimg1.jpg" mode="scaleToFill"></image></view>
 				<view class="right-wrapper">
 					<view class="right-title">湿热肝上火气肺痰煲汤材料</view>
-					<view class="right-addr">
-						<view class="shop-img"><image src="../../static/img/shop.png" mode=""></image></view>
-						<view class="shop-name">子臣台州旗舰店</view>
-						<view class="point-img"><image src="../../static/img/point.png" mode=""></image></view>
-						<view class="point-disc">200m</view>
+					<view class="ex-addr">
+						<image src="../../static/img/shop.png" mode="" class="name-img"></image>
+						子臣台州旗舰店
+						<image src="../../static/img/point.png" mode="" class="point-img"></image>
+						200m
 					</view>
 					<view class="right-bottom">
 						<view class="sp-price">
@@ -122,11 +122,11 @@
 				<view class="left-wrapper"><image src="../../static/img/spimg1.jpg" mode="scaleToFill"></image></view>
 				<view class="right-wrapper">
 					<view class="right-title">湿热肝上火气肺痰煲汤材料</view>
-					<view class="right-addr">
-						<view class="shop-img"><image src="../../static/img/shop.png" mode=""></image></view>
-						<view class="shop-name">子臣台州旗舰店</view>
-						<view class="point-img"><image src="../../static/img/point.png" mode=""></image></view>
-						<view class="point-disc">200m</view>
+					<view class="ex-addr">
+						<image src="../../static/img/shop.png" mode="" class="name-img"></image>
+						子臣台州旗舰店
+						<image src="../../static/img/point.png" mode="" class="point-img"></image>
+						200m
 					</view>
 					<view class="right-bottom">
 						<view class="sp-price">
@@ -150,15 +150,33 @@
 				<view class="exgood-title">湿热肝上火气肺痰煲湿热肝上火气肺痰煲</view>
 				<view class="ex-addr">
 					<image src="../../static/img/shop.png" mode="" class="name-img"></image>
-					  子臣台州旗舰店
+					子臣台州旗舰店
 					<image src="../../static/img/point.png" mode="" class="point-img"></image>
-					 200m
+					200m
 				</view>
 				<view class="ex-price">
 					¥26+20
 					<text class="tx1">积分</text>
 					<text class="tx2">¥99</text>
 				</view>
+				<view class="bg"></view>
+			</view>
+
+			<view class="exgood-wrapper">
+				<view class="ex-img-wrapper"><image src="../../static/img/ex1.jpg" mode=""></image></view>
+				<view class="exgood-title">湿热肝上火气肺痰煲湿热肝上火气肺痰煲</view>
+				<view class="ex-addr">
+					<image src="../../static/img/shop.png" mode="" class="name-img"></image>
+					子臣台州旗舰店
+					<image src="../../static/img/point.png" mode="" class="point-img"></image>
+					200m
+				</view>
+				<view class="ex-price">
+					¥26+20
+					<text class="tx1">积分</text>
+					<text class="tx2">¥99</text>
+				</view>
+				<view class="bg"></view>
 			</view>
 		</view>
 		<!-- 分类 -->
@@ -1543,13 +1561,10 @@ page {
 				width: 192rpx;
 				height: 231rpx;
 				margin: 0 42rpx 0 0;
-				// padding: 0 10rpx;
-				// background-color: #009688;
 				flex-shrink: 0;
 				.image-wrapper {
 					width: 192rpx;
 					height: 150rpx;
-					// background: #e5e5e5;
 					border-radius: 10rpx;
 					overflow: hidden;
 					image {
@@ -1559,8 +1574,6 @@ page {
 					}
 				}
 				.good-title {
-					// width: 174rpx;
-					// height: 25rpx;
 					padding: 15rpx 0rpx 0rpx 6rpx;
 					font-size: 26rpx;
 					font-weight: 500;
@@ -1668,6 +1681,26 @@ page {
 					color: #dcb876;
 				}
 			}
+			.ex-addr {
+				margin-top: 16rpx;
+				padding-left: 22rpx;
+				height: 22rpx;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #dcb876;
+				image {
+					height: 22rpx;
+				}
+				.name-img {
+					// vertical-align: ;
+					width: 26rpx;
+					margin: 0 4rpx -3rpx 0;
+				}
+				.point-img {
+					width: 16rpx;
+					margin: 0 4rpx -3rpx 14rpx;
+				}
+			}
 			.right-bottom {
 				margin-top: 47rpx;
 				// justify-items: flex-end;
@@ -1714,15 +1747,17 @@ page {
 	}
 }
 .exchange-wrapper {
-	width: 100%;
+	width: 696rpx;
 	// height: 100rpx;
-	margin: 37rpx 0 39rpx;
-	padding: 0 27rpx;
+	margin: 37rpx auto 39rpx;
+	// padding: 0 27rpx;
+	display: flex;
+	justify-content: space-between;
+	position: relative;
 	.exgood-wrapper {
 		width: 342rpx;
 		height: 540rpx;
-		background-image: url(../../static/img/bg3.png);
-		background-size: 100% 100%;
+		box-shadow: 0px 4px 18px 0px rgba(144, 27, 33, 0.13);
 		.ex-img-wrapper {
 			width: 342rpx;
 			height: 338rpx;
@@ -1747,44 +1782,49 @@ page {
 			height: 22rpx;
 			font-size: 22rpx;
 			font-weight: 500;
-			color: #DCB876;
+			color: #dcb876;
 			image {
 				height: 22rpx;
 			}
 			.name-img {
 				width: 26rpx;
-				margin: 0 4rpx 0 0;
+				margin: 0 4rpx -3rpx 0;
 			}
 			.point-img {
 				width: 16rpx;
-				margin: 0 4rpx 0 14rpx;
+				margin: 0 4rpx -3rpx 14rpx;
 			}
 		}
 		.ex-price {
 			margin-top: 17rpx;
 			padding-left: 22rpx;
-			// height: 30rpx;
 			font-size: 36rpx;
 			font-weight: bold;
-			color: #901B21;
-			vertical-align:bottom;
-			// line-height: 35rpx;
+			color: #901b21;
+			vertical-align: bottom;
 			.tx1 {
 				font-size: 24rpx;
 				vertical-align: baseline;
 				position: relative;
 				top: -2rpx;
-				// line-height: 20rpx;
 			}
 			.tx2 {
 				margin-left: 9rpx;
 				font-size: 26rpx;
 				font-weight: 500;
 				text-decoration: line-through;
-				color: #9D9D9D;
+				color: #9d9d9d;
 				line-height: 35rpx;
 			}
 		}
+		.bg {
+			position: absolute;
+			top: 0;
+			width: 342rpx;
+			height: 540rpx;
+			background-image: url(../../static/img/bg3.png);
+			background-size: 100% 100%;
+		}
 	}
 }
 </style>

+ 7 - 6
pages/user/user.vue

@@ -46,16 +46,17 @@
 
 				<view class="tj-sction">
 					<view class="tj-item" @click="navTo('/pages/money/wallet')">
+						<text>我的余额</text>
 						<text class="num">{{ userInfo.now_money || '0.00' }}</text>
-						<text>余额</text>
-					</view>
-					<view class="tj-item" @click="navTo('/pages/user/award')">
-						<text class="num">{{ userInfo.brokerage_price || '0.00' }}</text>
-						<text>佣金</text>
 					</view>
 					<view class="tj-item" @click="navTo('/pages/user/scoreAccumulate')">
+						<text>我的积分</text>
 						<text class="num">{{ userInfo.integral || '0.00' }}</text>
-						<text>积分</text>
+					</view>
+					<view class="tj-item" @click="navTo('/pages/user/award')">
+						<text>我的推广</text>
+						<!-- <text>我的佣金</text> -->
+						<text class="num">{{ userInfo.brokerage_price || '0.00' }}</text>
 					</view>
 				</view>
 				<!-- 订单 -->