Просмотр исходного кода

零售端,店铺首页样式、底部导航菜单调整

ouyang 14 часов назад
Родитель
Сommit
732b296e32

+ 45 - 30
mallApp/src/components/home/activitySection.vue

@@ -1,6 +1,7 @@
 <!--
   店铺首页-秒杀专区/团购专区
   按 layoutCols(1/2/3) 渲染活动商品,含倒计时;秒杀按钮为「立即抢购」,团购按钮为「去开团」;
+  1 列:左图、中文案/价格、右按钮独立列垂直居中;2/3 列:价格与按钮同行;
   仅在活动有效期内(startTime~endTime)展示,未开始或结束后整块隐藏;
   秒杀点击跳商品详情;团购点击跳团购详情页(开团/参团入口);
   无价格秒杀商品只展示活动价,原价为 0 时不画划线价
@@ -33,7 +34,7 @@
       <text class="activity-subtitle">{{ data.subtitle || (isGroupBuy ? '多人拼团更实惠' : '每日精选 限时特惠') }}</text>
     </view>
 
-    <!-- 1排1列:左图右文,底部价格与按钮同行 -->
+    <!-- 1排1列:左图、中文案/价格、右按钮独立一列并垂直居中 -->
     <view v-if="cols === 1" class="list-1">
       <view v-for="g in displayGoods" :key="g.id" class="row-card" @click="goDetail(g)">
         <!-- 横向小图只显示 140upx,按 180px 取缩略图 -->
@@ -41,18 +42,17 @@
         <view class="row-content">
           <text class="row-name">{{ g.name }}</text>
           <text class="row-desc">{{ isGroupBuy ? (g.groupSize + '人团') : '限时特惠' }}</text>
-          <view class="row-bottom">
-            <view class="row-price-wrap">
-              <text class="price">¥{{ formatPrice(g.price) }}</text>
-              <text v-if="Number(g.originPrice) > 0" class="origin-price">¥{{ formatPrice(g.originPrice) }}</text>
-            </view>
-            <view class="action-btn">
-              {{ actionText }}
-              <!-- 自定义 SVG 组件 margin-top 可能无效,包一层 view 下移 4upx 与文字视觉对齐 -->
-              <view class="action-btn-icon">
-                <zui-svg-icon icon="general-right" :width="14" :height="14" color="#fff"></zui-svg-icon>
-              </view>
-            </view>
+          <view class="row-price-wrap">
+            <text class="price">¥{{ formatPrice(g.price) }}</text>
+            <text v-if="Number(g.originPrice) > 0" class="origin-price">¥{{ formatPrice(g.originPrice) }}</text>
+          </view>
+        </view>
+        <!-- 最右独立列,靠 row-card 的 align-items:center 相对整卡垂直居中 -->
+        <view class="action-btn">
+          {{ actionText }}
+          <!-- 自定义 SVG 组件 margin-top 可能无效,包一层 view 下移 4upx 与文字视觉对齐 -->
+          <view class="action-btn-icon">
+            <zui-svg-icon icon="general-right" :width="14" :height="14" color="#fff"></zui-svg-icon>
           </view>
         </view>
       </view>
@@ -66,11 +66,14 @@
           <view v-if="isGroupBuy" class="group-badge">{{ g.groupSize }}人团</view>
         </view>
         <text class="grid-name">{{ g.name }}</text>
-        <view class="grid-price-row">
-          <text class="price">¥{{ formatPrice(g.price) }}</text>
-          <text v-if="cols === 2 && Number(g.originPrice) > 0" class="origin-price">¥{{ formatPrice(g.originPrice) }}</text>
+        <!-- 价格与抢购按钮同一行、垂直居中(对齐单列 row-bottom) -->
+        <view class="grid-bottom">
+          <view class="grid-price-row">
+            <text class="price">¥{{ formatPrice(g.price) }}</text>
+            <text v-if="cols === 2 && Number(g.originPrice) > 0" class="origin-price">¥{{ formatPrice(g.originPrice) }}</text>
+          </view>
+          <view class="grid-btn">{{ actionText }}<text v-if="cols === 2"> ></text></view>
         </view>
-        <view class="grid-btn">{{ actionText }}<text v-if="cols === 2"> ></text></view>
       </view>
     </view>
   </view>
@@ -343,9 +346,10 @@ export default {
   color: #999;
 }
 
-/* 1排1列:左图 + 右侧标题/描述/价格按钮 */
+/* 1排1列:左图 + 中文案/价格 + 右按钮独立列(整卡垂直居中) */
 .row-card {
   display: flex;
+  flex-direction: row;
   align-items: center;
   padding: 16upx 0;
   border-bottom: 1px solid #f5f5f5;
@@ -390,18 +394,12 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.row-bottom {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 12upx;
-}
 .row-price-wrap {
   display: flex;
+  flex-direction: row;
   align-items: baseline;
-  flex: 1;
+  margin-top: 12upx;
   min-width: 0;
-  margin-right: 12upx;
 }
 .row-price-wrap .price {
   font-size: 36upx;
@@ -416,9 +414,11 @@ export default {
 }
 .action-btn {
   display: flex;
+  flex-direction: row;
   align-items: center;
   flex-shrink: 0;
-  padding: 18upx 24upx;
+  margin-left: 16upx;
+  padding: 10upx 24upx;
   font-size: 26upx;
   color: #fff;
   background: linear-gradient(135deg, #FF8FA3, #FF4D6D);
@@ -493,16 +493,31 @@ export default {
 }
 .grid-price-row {
   display: flex;
+  flex-direction: row;
   align-items: center;
+  flex: 1;
+  min-width: 0;
+  margin-right: 8upx;
+}
+.grid-price-row .price {
+  margin-right: 6upx;
+}
+.grid-bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   margin-top: 6upx;
 }
 .grid-btn {
-  margin-top: 10upx;
-  padding: 13upx 0;
+  flex-shrink: 0;
+  padding: 8upx 16upx;
   text-align: center;
-  font-size: 24upx;
+  font-size: 22upx;
   color: #fff;
   background: linear-gradient(135deg, #FF8FA3, #FF4D6D);
   border-radius: 28upx;
+  white-space: nowrap;
+  box-sizing: border-box;
 }
 </style>

+ 2 - 2
mallApp/src/pages.json

@@ -197,8 +197,8 @@
             },
             {
                 "pagePath": "pages/home/message",
-                "iconPath": "static/tabbar/order.png",
-                "selectedIconPath": "static/tabbar/order-active.png",
+                "iconPath": "static/tabbar/message.png",
+                "selectedIconPath": "static/tabbar/message-active.png",
                 "text": "消息"
             },
             {

BIN
mallApp/src/static/tabbar/home-active.png


BIN
mallApp/src/static/tabbar/home.png


BIN
mallApp/src/static/tabbar/mine-active.png


BIN
mallApp/src/static/tabbar/mine.png


BIN
mallApp/src/static/tabbar/order-active.png


BIN
mallApp/src/static/tabbar/order.png


+ 9 - 12
mallApp/src/utils/mainIndexSprite.js

@@ -16,7 +16,7 @@ const DEFAULT_SHEET_KEY = "main";
  */
 export const SPRITE_SHEETS = {
   main: {
-    path: "/hhb/sprite_icon/main-index.webp?time=26082017",
+    path: "/hhb/sprite_icon/main-index.webp?time=26082416",
     width: 500,
     height: 500,
     icons: {
@@ -42,17 +42,14 @@ export const SPRITE_SHEETS = {
       "fanghu-yuan": { x: 282, y: 182, w: 42, h: 50 },
       "youhuiquan-yellow": { x: 344, y: 184, w: 50, h: 50 },
       "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
-      "icon-home": { x: 274, y: 102, w: 52, h: 52 },
-      "icon-home-active": { x: 274, y: 102, w: 52, h: 52 },
-      "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
-	  "icon-home": { x: 7, y: 245, w: 50, h: 50 },
-	  "icon-home-active": { x: 60, y: 245, w: 50, h: 50 },
-	  "icon-category": { x: 116, y: 245, w: 50, h: 50 },
-	  "icon-category-active": { x: 176, y: 245, w: 50, h: 50 },
-	  "icon-cart": { x: 243, y: 245, w: 50, h: 50 },
-	  "icon-cart-active": { x: 299, y: 245, w: 50, h: 50 },
-	  "icon-order": { x: 359, y: 245, w: 50, h: 50 },
-	  "icon-order-active": { x: 409, y: 245, w: 50, h: 50 },
+	  "icon-home": { x: 3, y: 244, w: 53, h: 52 },
+	  "icon-home-active": { x: 56, y: 242, w: 53, h: 52 },
+	  "icon-category": { x: 111, y: 244, w: 53, h: 52 },
+	  "icon-category-active": { x: 164,y: 244, w: 53, h: 52 },
+	  "icon-cart": { x: 217, y: 244, w: 53, h: 52 },
+	  "icon-cart-active": { x: 270, y: 244, w: 53, h: 52 },
+	  "icon-order": { x: 323, y: 244, w: 53, h: 52 },
+	  "icon-order-active": { x: 376, y: 244, w: 53, h: 52 },
 	  "cart-delete": { x: 7, y: 298 , w: 46, h: 52 },//购物车-删除
 	  "notice": { x: 216, y: 15 , w: 31, h: 31 },//公告通知
 	  "xiangyou-pink": { x: 277, y: 17, w: 17, h: 27 },//向右-粉色