consumer模块完成度95%,优化安卓端界面和小程序测试8

This commit is contained in:
cyh666666
2026-03-18 16:56:56 +08:00
parent a77efe0484
commit 2d48e4c5d3
826 changed files with 2172 additions and 3209 deletions

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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 {