consumer模块完成度95%,优化安卓端界面和小程序测试8
This commit is contained in:
@@ -131,11 +131,13 @@
|
||||
class="recommend-item"
|
||||
@click="navigateToProduct(product)"
|
||||
>
|
||||
<image
|
||||
class="recommend-image"
|
||||
:src="product.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="recommend-image-wrapper">
|
||||
<image
|
||||
class="recommend-image"
|
||||
:src="product.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<text class="recommend-name" :lines="2">{{ product.name }}</text>
|
||||
<view class="recommend-bottom">
|
||||
<text class="recommend-price">¥{{ product.price }}</text>
|
||||
@@ -1400,16 +1402,24 @@ const goToCheckout = () => {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.recommend-image {
|
||||
.recommend-image-wrapper {
|
||||
width: 100%;
|
||||
height: 170px; /* 显式高度 */
|
||||
/* aspect-ratio: 1; REMOVED */
|
||||
/* object-fit: cover; REMOVED */
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.recommend-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.recommend-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
@@ -1455,6 +1465,37 @@ const goToCheckout = () => {
|
||||
}
|
||||
|
||||
/* 响应式布局优化 */
|
||||
@media screen and (max-width: 414px) {
|
||||
.recommend-item {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) and (max-width: 768px) {
|
||||
.recommend-item {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
||||
.recommend-item {
|
||||
width: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) and (max-width: 1399px) {
|
||||
.recommend-item {
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
.recommend-item {
|
||||
width: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 保留原有的媒体查询用于其他样式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.cart-list,
|
||||
.recommend-section {
|
||||
@@ -1467,10 +1508,6 @@ const goToCheckout = () => {
|
||||
/* gap: 16px; REMOVED */
|
||||
/* Flex 布局参数调整在下方 update */
|
||||
}
|
||||
.recommend-item {
|
||||
width: 23%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
@@ -1597,13 +1634,9 @@ const goToCheckout = () => {
|
||||
/* grid-template-columns: repeat(5, 1fr); REMOVED */
|
||||
/* gap: 20px; REMOVED */
|
||||
}
|
||||
.recommend-item {
|
||||
width: 18%; /* 5列 */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.recommend-image {
|
||||
height: 200px; /* 强制高度 */
|
||||
.recommend-image-wrapper {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
/* 底部结算栏优化 */
|
||||
@@ -1638,9 +1671,6 @@ const goToCheckout = () => {
|
||||
.recommend-list {
|
||||
/* grid-template-columns: repeat(6, 1fr); REMOVED */
|
||||
}
|
||||
.recommend-item {
|
||||
width: 15%; /* 6 columns approx */
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
width: 1400px;
|
||||
|
||||
@@ -85,11 +85,13 @@
|
||||
class="product-card"
|
||||
@click="navigateToProduct(product)"
|
||||
>
|
||||
<image
|
||||
class="product-image"
|
||||
:src="product.main_image_url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="product-image-wrapper">
|
||||
<image
|
||||
class="product-image"
|
||||
:src="product.main_image_url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<text class="product-name" :lines="2">{{ product.name }}</text>
|
||||
<view class="product-bottom">
|
||||
<text class="product-price">¥{{ product.base_price ?? product.price ?? 0 }}</text>
|
||||
@@ -1053,14 +1055,24 @@ function onScan(): void {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
.product-image-wrapper {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
@@ -1276,8 +1288,8 @@ function onScan(): void {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 100px;
|
||||
.product-image-wrapper {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
@@ -1451,7 +1463,7 @@ function onScan(): void {
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-spec {
|
||||
@@ -1517,8 +1529,8 @@ function onScan(): void {
|
||||
margin: 1.5%;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 180px;
|
||||
.product-image-wrapper {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
@@ -1526,7 +1538,7 @@ function onScan(): void {
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 17px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-spec {
|
||||
|
||||
@@ -200,11 +200,13 @@
|
||||
class="product-card"
|
||||
@click="navigateToProduct(product)"
|
||||
>
|
||||
<image
|
||||
class="product-image"
|
||||
:src="product.main_image_url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="product-image-wrapper">
|
||||
<image
|
||||
class="product-image"
|
||||
:src="product.main_image_url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<text class="product-name" :lines="2">{{ product.name }}</text>
|
||||
<view class="product-bottom">
|
||||
<text class="product-price">¥{{ product.price }}</text>
|
||||
@@ -1756,7 +1758,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
/* gap: 10px; removed for uniapp-x support */
|
||||
justify-content: space-between; /* use space-between instead of gap */
|
||||
margin-top: 20px;
|
||||
min-height: 500px; /* 确保有足够高度触发滚动 */
|
||||
min-height: 500px; /* 确保 highlighting 触发滚动 */
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -1770,14 +1772,24 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
.product-image-wrapper {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
@@ -1996,10 +2008,14 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
|
||||
.product-image-container {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.product-image-container .product-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
@@ -2313,6 +2329,10 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
/* column-gap: 8px; removed */
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.recommend-grid .recommend-product {
|
||||
width: 48%;
|
||||
margin: 0 1% 8px 1%;
|
||||
@@ -2334,9 +2354,8 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-image,
|
||||
.product-image-container {
|
||||
height: 140px; /* 稍微减小图片高度适配双列 */
|
||||
.product-image-wrapper {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
/* 手机端商品卡片极简模式(热销 & 推荐) */
|
||||
@@ -2359,11 +2378,11 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
padding: 6px; /* 极小内边距 */
|
||||
}
|
||||
|
||||
.hot-products .product-image,
|
||||
.hot-products .product-image-wrapper,
|
||||
.hot-products .product-image-container,
|
||||
.smart-recommend .product-image,
|
||||
.smart-recommend .product-image-wrapper,
|
||||
.smart-recommend .product-image-container {
|
||||
height: 110px; /* 进一步减小图片高度 */
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.hot-products .product-name,
|
||||
@@ -2485,6 +2504,10 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
/* column-count: 2; removed */
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.recommend-grid .recommend-product {
|
||||
width: 47%;
|
||||
}
|
||||
@@ -2549,9 +2572,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
}
|
||||
|
||||
.product-card {
|
||||
/* width: calc((100% - 20px) / 3); */
|
||||
width: 32%; /* Fallback for calc */
|
||||
/* margin-right: 1.33%; */
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.recommend-grid .recommend-product {
|
||||
@@ -2587,9 +2608,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
}
|
||||
|
||||
.product-card {
|
||||
/* width: calc((100% - 30px) / 4); */
|
||||
width: 23%;
|
||||
/* margin-right: 2%; */
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.recommend-grid .recommend-product {
|
||||
@@ -2616,9 +2635,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
|
||||
}
|
||||
|
||||
.product-card {
|
||||
/* width: calc((100% - 30px) / 4); */
|
||||
width: 23%;
|
||||
/* margin-right: 2%; */
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
.recommend-grid .recommend-product {
|
||||
|
||||
Reference in New Issue
Block a user