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

零售端-底部导航菜单图标调整

ouyang 1 день назад
Родитель
Сommit
0440b3d935

+ 25 - 10
mallApp/src/pages/home/components/shop-tab-bar.vue

@@ -11,10 +11,14 @@
       @tap="onTabTap(item)"
     >
       <view class="tab-icon-wrap">
-        <sprite-icon
-          :name="current === item.key ? item.activeIcon : item.icon"
-          :size="50"
-        />
+        <!-- 四个 Tab 均用 iconfont:未选中线框,选中实心 -->
+        <text
+          class="iconfont tab-iconfont"
+          :class="[
+            current === item.key ? item.activeIcon : item.icon,
+            { 'tab-iconfont-active': current === item.key }
+          ]"
+        ></text>
         <view class="tab-badge" v-if="item.key === 'cart' && cartCount > 0">
           <text class="tab-badge-text">{{ cartCount > 99 ? '99+' : cartCount }}</text>
         </view>
@@ -58,10 +62,10 @@ export default {
   data() {
     return {
       tabList: [
-        { key: 'home', label: '首页', icon: 'icon-home', activeIcon: 'icon-home-active' },
-        { key: 'category', label: '分类', icon: 'icon-category', activeIcon: 'icon-category-active' },
-        { key: 'cart', label: '购物车', icon: 'icon-cart', activeIcon: 'icon-cart-active' },
-        { key: 'order', label: '订单', icon: 'icon-order', activeIcon: 'icon-order-active' }
+        { key: 'home', label: '首页', iconType: 'iconfont', icon: 'iconhome1', activeIcon: 'iconhomefill' },
+        { key: 'category', label: '分类', iconType: 'iconfont', icon: 'iconevaluate', activeIcon: 'iconevaluate_fill' },
+        { key: 'cart', label: '购物车', iconType: 'iconfont', icon: 'iconcart', activeIcon: 'iconcart_fill_light' },
+        { key: 'order', label: '订单', iconType: 'iconfont', icon: 'iconorder', activeIcon: 'iconorder_fill' }
       ]
     }
   },
@@ -159,13 +163,24 @@ export default {
 
 .tab-icon-wrap {
   position: relative;
-  width: 44upx;
-  height: 44upx;
+  /* 相对原 50upx 放大 1/3 */
+  width: 67upx;
+  height: 67upx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.tab-iconfont {
+  font-size: 59upx;
+  color: #999;
+  line-height: 1;
+}
+
+.tab-iconfont-active {
+  color: #ff4757;
+}
+
 .tab-badge {
   position: absolute;
   top: -8upx;

+ 8 - 7
mallApp/src/pages/home/recent.vue

@@ -137,7 +137,8 @@
               >
                 <text class="iconfont icondianpuweixuanzhong enter-icon"></text>
                 <text class="enter-text">进入店铺</text>
-                <text class="enter-arrow">›</text>
+                <!-- 右箭头用 iconfont,避免字符 › 在各端字号/对齐不一致 -->
+                <text class="iconfont iconxiangyou enter-arrow"></text>
               </view>
             </view>
 
@@ -803,7 +804,7 @@ page {
   .summary-balance,
   .summary-enter {
     flex: 1;
-    min-height: 115upx;
+    min-height: 125upx;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -824,10 +825,10 @@ page {
       color: $mainColor1;
     }
 
+    /* 待结(负余额):金额用主色警示,标签仍用深色便于阅读 */
     &.is-debt {
-      .balance-label,
       .balance-value {
-        color: #ef4444;
+        color: $mainColor;
       }
     }
   }
@@ -869,11 +870,11 @@ page {
   }
 
   .enter-arrow {
-    margin-left: 4upx;
+    margin-left: 30upx;
+    flex-shrink: 0;
     color: $mainColor1;
-    font-size: 32upx;
+    font-size: 24upx;
     line-height: 1;
-    font-weight: 400;
   }
 
   /* 四列快捷:上图标下文案,竖线分隔,无灰底按钮块 */

+ 56 - 6
mallApp/src/static/iconfont/iconfont.css

@@ -1,12 +1,12 @@
 @font-face {
   font-family: 'iconfont';  /* project id 1525256 / hash fccrkfc081c */
   /* fonts live in app-mall/web/iconfont;当前开发域 http 可访问 */
- src: url('http://api.shop.theflorist.cn/iconfont/iconfont.eot?t=1787794165716'); /* IE9 */
- src: url('http://api.shop.theflorist.cn/iconfont/iconfont.eot?t=1787794165716#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	  url('http://api.shop.theflorist.cn/iconfont/iconfont.woff2?t=1787794165716') format('woff2'),
-	  url('http://api.shop.theflorist.cn/iconfont/iconfont.woff?t=1787794165716') format('woff'),
-	  url('http://api.shop.theflorist.cn/iconfont/iconfont.ttf?t=1787794165716') format('truetype'),
-	  url('http://api.shop.theflorist.cn/iconfont/iconfont.svg?t=1787794165716#iconfont') format('svg');
+ src: url('http://api.shop.theflorist.cn/iconfont/iconfont.eot?t=202608271004'); /* IE9 */
+ src: url('http://api.shop.theflorist.cn/iconfont/iconfont.eot?t=202608271004#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	  url('http://api.shop.theflorist.cn/iconfont/iconfont.woff2?t=202608271004') format('woff2'),
+	  url('http://api.shop.theflorist.cn/iconfont/iconfont.woff?t=202608271004') format('woff'),
+	  url('http://api.shop.theflorist.cn/iconfont/iconfont.ttf?t=202608271004') format('truetype'),
+	  url('http://api.shop.theflorist.cn/iconfont/iconfont.svg?t=202608271004#iconfont') format('svg');
 }
 
 .iconfont {
@@ -16,6 +16,56 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+
+.iconorder_fill:before {
+  content: "\e714";
+}
+
+.iconorder:before {
+  content: "\e713";
+}
+
+.iconcart:before {
+  content: "\e6af";
+}
+
+.iconhome1:before {
+  content: "\e6b8";
+}
+
+.iconhomefill:before {
+  content: "\e6bb";
+}
+
+.iconmessage:before {
+  content: "\e6bc";
+}
+
+.iconmessagefill:before {
+  content: "\e779";
+}
+
+.iconmy:before {
+  content: "\e78b";
+}
+
+.iconmyfill:before {
+  content: "\e78c";
+}
+
+.iconcart_fill_light:before {
+  content: "\e7e7";
+}
+
+.iconevaluate:before {
+  content: "\e672";
+}
+
+.iconevaluate_fill:before {
+  content: "\e7f0";
+}
+
 .iconyuechaxun:before {
   content: "\e66e";
 }

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


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


+ 203 - 6
开发http/mallApp/src/static/iconfont/iconfont.css

@@ -16,13 +16,82 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.iconjiantouxia:before {
-  content: "\e61a";
+.iconorder_fill:before {
+  content: "\e714";
+}
+
+.iconorder:before {
+  content: "\e713";
+}
+
+.iconcart:before {
+  content: "\e6af";
+}
+
+.iconhome1:before {
+  content: "\e6b8";
+}
+
+.iconhomefill:before {
+  content: "\e6bb";
+}
+
+.iconmessage:before {
+  content: "\e6bc";
+}
+
+.iconmessagefill:before {
+  content: "\e779";
+}
+
+.iconmy:before {
+  content: "\e78b";
+}
+
+.iconmyfill:before {
+  content: "\e78c";
+}
+
+.iconcart_fill_light:before {
+  content: "\e7e7";
+}
+
+.iconevaluate:before {
+  content: "\e672";
+}
+
+.iconevaluate_fill:before {
+  content: "\e7f0";
+}
+
+.iconyuechaxun:before {
+  content: "\e66e";
+}
+
+.iconfenhong:before {
+  content: "\e612";
+}
+
+.iconkefu1:before {
+  content: "\e646";
+}
+
+.iconhuiyuanquanyi1:before {
+  content: "\e60e";
+}
+
+.iconcachu:before {
+  content: "\e7e6";
+}
+
+.iconjihuo:before {
+  content: "\e601";
 }
 
 .iconmingxi1:before {
   content: "\e7e5";
 }
+
 .iconjian:before {
   content: "\e7e3";
 }
@@ -31,6 +100,138 @@
   content: "\e7e4";
 }
 
+.iconqiehuan1:before {
+  content: "\e7e2";
+}
+
+.iconqishouyinying:before {
+  content: "\e7e1";
+}
+
+.iconxiayi:before {
+  content: "\e7de";
+}
+
+.iconshangyi:before {
+  content: "\e7e0";
+}
+
+.iconyiruku:before {
+  content: "\e7df";
+}
+
+.iconyikaidian:before {
+  content: "\e7d7";
+}
+
+.icondianhua1:before {
+  content: "\e7d9";
+}
+
+.iconshoukuanma1:before {
+  content: "\e7d8";
+}
+
+.icondaichuku:before {
+  content: "\e7da";
+}
+
+.iconyichuku:before {
+  content: "\e7db";
+}
+
+.iconyiquxiao:before {
+  content: "\e7dc";
+}
+
+.icondairuku:before {
+  content: "\e7dd";
+}
+
+.iconshoukuanma:before {
+  content: "\e600";
+}
+
+.icongouwuche:before {
+  content: "\e7d5";
+}
+
+.iconjianqu:before {
+  content: "\e7d3";
+}
+
+.icontianjia:before {
+  content: "\e7d4";
+}
+
+.iconsearch1:before {
+  content: "\e7d6";
+}
+
+.icondingdanweixuanzhong1:before {
+  content: "\e7c9";
+}
+
+.icondianpuweixuanzhong:before {
+  content: "\e7ca";
+}
+
+.iconwodeweixuanzhong:before {
+  content: "\e7cb";
+}
+
+.iconyingyongweixuanzhong:before {
+  content: "\e7cc";
+}
+
+.icondianpuxuanzhong:before {
+  content: "\e7cd";
+}
+
+.icondingdanxuanzhong1:before {
+  content: "\e7ce";
+}
+
+.iconwodexuanzhong:before {
+  content: "\e7cf";
+}
+
+.iconkehuweixuanzhong1:before {
+  content: "\e7d0";
+}
+
+.iconyingyongxuanzhong:before {
+  content: "\e7d1";
+}
+
+.iconkehuxuanzhong1:before {
+  content: "\e7d2";
+}
+
+.iconxiaochengxu2:before {
+  content: "\e78d";
+}
+
+.iconmeituan:before {
+  content: "\e78e";
+}
+
+.iconzhangshangcaifuyemianshoujiban344:before {
+  content: "\e632";
+}
+
+.iconwaimai:before {
+  content: "\e692";
+}
+
+.iconxiaochengxu1:before {
+  content: "\e619";
+}
+
+.iconjiantouxia:before {
+  content: "\e61a";
+}
+
 .iconshenheweitongguo:before {
   content: "\e774";
 }
@@ -298,7 +499,3 @@
 .iconyishiyong:before {
   content: "\e73c";
 }
-
-.icongouwuche:before {
-  content: "\e7d5";
-}

+ 48 - 0
开发https/mallApp/src/static/iconfont/iconfont.css

@@ -16,6 +16,54 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.iconorder_fill:before {
+  content: "\e714";
+}
+
+.iconorder:before {
+  content: "\e713";
+}
+
+.iconcart:before {
+  content: "\e6af";
+}
+
+.iconhome1:before {
+  content: "\e6b8";
+}
+
+.iconhomefill:before {
+  content: "\e6bb";
+}
+
+.iconmessage:before {
+  content: "\e6bc";
+}
+
+.iconmessagefill:before {
+  content: "\e779";
+}
+
+.iconmy:before {
+  content: "\e78b";
+}
+
+.iconmyfill:before {
+  content: "\e78c";
+}
+
+.iconcart_fill_light:before {
+  content: "\e7e7";
+}
+
+.iconevaluate:before {
+  content: "\e672";
+}
+
+.iconevaluate_fill:before {
+  content: "\e7f0";
+}
+
 .iconyuechaxun:before {
   content: "\e66e";
 }