优化

mallApp/src/pages/home/category.vue

@@ -52,7 +52,7 @@
           <view class="goods-det">
             <view class="goods-det-top">
               <view class="goods-name">{{ items.name }}</view>
-              <view class="goods-sales"></view>
+              <view class="goods-sales">已售 {{ items.sold }}</view>
             </view>
             <view class="goods-price">￥{{ items.price?parseFloat(items.price):0 }}</view>
             <view class="buy-btn">购买</view>
@@ -78,7 +78,7 @@
             <view class="goods-det">
               <view class="goods-det-top">
                 <view class="goods-name">{{ items.name }}</view>
-                <view class="goods-sales"></view>
+                <view class="goods-sales">已售 {{ items.sold }}</view>
               </view>
               <view class="goods-price">￥{{ items.price?parseFloat(items.price):0 }}</view>
               <view class="buy-btn">购买</view>
@@ -524,10 +524,17 @@ page {
         font-size: 28upx;
         position: relative;
         width: calc(100% - 240upx);
+        height: 200upx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         .goods-det-top {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
           .goods-name {
             font-size: 32upx;
-            margin-bottom: 10upx;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
@@ -535,13 +542,24 @@ page {
             line-clamp: 2;
             -webkit-box-orient: vertical;
             word-break: break-all;
+            height: 90upx; /* 固定高度，能容纳两行文字 */
+            line-height: 45upx;
+          }
+          .goods-sales {
+            font-size: 24upx;
+            color: #999;
+            height: 34upx;
+            line-height: 34upx;
+            margin-top: auto; /* 确保销量信息始终在底部 */
           }
         }
         .goods-price {
           font-size: 32upx;
-          margin-top: 50upx;
           color: $mainColor;
           font-weight: bold;
+          height: 45upx;
+          line-height: 45upx;
+          margin-top: 15upx;
         }
       }
     }

mallApp/src/pages/home/mall.vue

@@ -56,32 +56,17 @@
     </scroll-view>
 
     <!-- 搜索结果展示区域 -->
-    <scroll-view
-      v-if="isSearchMode"
-      scroll-y
-      class="right-box"
-      @scrolltolower="reachBottom"
-    >
+    <scroll-view v-if="isSearchMode" scroll-y class="right-box" @scrolltolower="reachBottom" >
       <view class="page-view" v-if="!$util.isEmpty(list.data)">
-        <view
-          class="goods-list"
-          v-for="items in list.data"
-          :key="items.id"
-          @click="toBuy(items)"
-        >
+        <view class="goods-list" v-for="items in list.data" :key="items.id" @click="toBuy(items)" >
           <view class="img-blo">
             <image :src="items.smallCover" mode="aspectFill"></image>
           </view>
           <view class="goods-det">
             <view class="goods-det-top">
               <view class="goods-name">{{ items.name }}</view>
-              <view class="goods-sales"></view>
+              <view class="goods-sales">已售 {{ items.sold }}</view>
             </view>
-            <view
-              class="goods-price"
-              style="color: #867c7c; font-weight: normal; font-size: 24upx"
-              >销量 {{ items.totalSold }}</view
-            >
             <view class="buy-btn">选这个</view>
           </view>
         </view>
@@ -93,32 +78,17 @@
 
     <!-- 分类商品展示区域 -->
     <block v-for="(item, index) in tabbar" :key="index">
-      <scroll-view
-        scroll-y
-        class="right-box"
-        @scrolltolower="reachBottom"
-        v-if="!isSearchMode && currentTab == index"
-      >
+      <scroll-view scroll-y class="right-box" @scrolltolower="reachBottom" v-if="!isSearchMode && currentTab == index" >
         <view class="page-view" v-if="!$util.isEmpty(list.data)">
-          <view
-            class="goods-list"
-            v-for="items in list.data"
-            :key="items.id"
-            @click="toBuy(items)"
-          >
+          <view class="goods-list" v-for="items in list.data" :key="items.id" @click="toBuy(items)" >
             <view class="img-blo">
               <image :src="items.smallCover" mode="aspectFill"></image>
             </view>
             <view class="goods-det">
               <view class="goods-det-top">
                 <view class="goods-name">{{ items.name }}</view>
-                <view class="goods-sales"></view>
+                <view class="goods-sales">已售 {{ items.sold }}</view>
               </view>
-              <view
-                class="goods-price"
-                style="color: #867c7c; font-weight: normal; font-size: 24upx"
-                >销量 {{ items.totalSold }}</view
-              >
               <view class="buy-btn">选这个</view>
             </view>
           </view>
@@ -580,10 +550,17 @@ page {
         font-size: 28upx;
         position: relative;
         width: calc(100% - 240upx);
+        height: 160upx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         .goods-det-top {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
           .goods-name {
             font-size: 32upx;
-            margin-bottom: 10upx;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
@@ -591,6 +568,15 @@ page {
             line-clamp: 2;
             -webkit-box-orient: vertical;
             word-break: break-all;
+            height: 90upx; /* 固定高度，能容纳两行文字 */
+            line-height: 45upx;
+          }
+          .goods-sales {
+            font-size: 24upx;
+            color: #999;
+            height: 34upx;
+            line-height: 34upx;
+            margin-top: auto; /* 确保销量信息始终在底部 */
           }
         }
         .goods-price {
@@ -765,6 +751,6 @@ page {
   font-size: 32upx;
   position: absolute;
   right: 30upx;
-  top: 120upx;
+  top: 110upx;
 }
 </style>