细节

pages/cart/index.vue

@@ -20,8 +20,10 @@
 		<!-- 购物车商品列表 -->
 		<view v-if="list.length" class="cart-list">
 			<view class="cart-item" v-for="(item, index) in list" :key="index">
-				<view v-if="storeVersion == 1 && item.goods.merchant_id > 0 && item.goods.merchant" class="merchant-name" @click="toShop(item)">
-					<image :src="item.goods.merchant.logoImage && item.goods.merchant.logoImage[0].external_url" mode="aspectFill"></image>
+				<view v-if="storeVersion == 1 && item.goods.merchant_id > 0 && item.goods.merchant"
+					class="merchant-name" @click="toShop(item)">
+					<image :src="item.goods.merchant.logoImage && item.goods.merchant.logoImage[0].external_url"
+						mode="aspectFill"></image>
 					<text>{{ item.goods.merchant.shop_name }}</text>
 					<image src="@/static/arrow-right.png" mode="aspectFill"></image>
 				</view>
@@ -302,7 +304,9 @@
 		methods: {
 			getSuggest() {
 				// 获取推荐商品
-				Api.recommendedNew({ page: this.recommendPage++ }).then(res => {
+				Api.recommendedNew({
+					page: this.recommendPage++
+				}).then(res => {
 					console.log(res);
 					let arr = res.data.goodsList.data
 					if (arr && arr.length > 0) {
@@ -540,22 +544,30 @@
 			margin: 0rpx 0 20rpx 0;
 
 			.pic {
+				position: relative;
 				width: 100%;
 				align-items: center;
 				display: flex;
-				height: 256rpx;
+				overflow: hidden;
+				width: 100%;
+				height: 0;
+				padding-bottom: 100%;
 				overflow: hidden;
 
 				image {
 					width: 100%;
 					height: 100%;
-			
+					object-fit: cover;
+					position: absolute;
+					left: 0;
+					top: 0
 				}
 			}
 
 			.goodsInfo {
 				margin-bottom: 12rpx;
 				height: 60rpx;
+
 				.title {
 					display: flex;
 					align-items: center;
@@ -628,6 +640,7 @@
 				}
 			}
 		}
+
 		.finished {
 			font-size: 28rpx;
 			line-height: 100rpx;
@@ -680,21 +693,25 @@
 		border-radius: 12rpx;
 		padding: 30rpx 16rpx;
 		margin-bottom: 24rpx;
+
 		.merchant-name {
 			font-size: 30rpx;
 			color: #333;
 			font-weight: bold;
+
 			>text {
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
 				max-width: calc(100% - 73rpx);
 			}
+
 			>image {
 				margin-left: 10rpx;
 				width: 13rpx;
 				height: 24rpx;
 				flex-shrink: 0;
+
 				&:first-child {
 					width: 40rpx;
 					height: 40rpx;
@@ -702,6 +719,7 @@
 				}
 			}
 		}
+
 		>view {
 			display: flex;
 			align-items: center;

pages/index/index.vue

@@ -697,7 +697,7 @@
 						}
 					})
 					// #endif
-				}else{
+				} else {
 					this.$toast('暂不支持企业微信客服')
 				}
 			},
@@ -2047,16 +2047,23 @@
 					margin: 0rpx 0 20rpx 0;
 
 					.pic {
+						position: relative;
 						width: 100%;
 						align-items: center;
 						display: flex;
-						height: 256rpx;
+						overflow: hidden;
+						width: 100%;
+						height: 0;
+						padding-bottom: 100%;
 						overflow: hidden;
 
 						image {
 							width: 100%;
 							height: 100%;
-
+							object-fit: cover;
+							position: absolute;
+							left: 0;
+							top: 0
 						}
 					}
 

pages/user/index.vue

@@ -1387,16 +1387,23 @@
 			margin: 0 0 20rpx 0;
 
 			.pic {
+				position: relative;
 				width: 100%;
 				align-items: center;
 				display: flex;
-				height: 256rpx;
+				overflow: hidden;
+				width: 100%;
+				height: 0;
+				padding-bottom: 100%;
 				overflow: hidden;
 
 				image {
 					width: 100%;
 					height: 100%;
-
+					object-fit: cover;
+					position: absolute;
+					left: 0;
+					top: 0
 				}
 			}