横向标签

build/webpack.dev.conf.js

@@ -82,15 +82,15 @@ module.exports = merge(baseWebpackConfig, {
     //   inject: true
     // }),
     new FriendlyErrorsPlugin(),
-    // new UglifyJsPlugin({
-    //   sourceMap: true,
-    //   uglifyOptions: {
-    //     compress: {
-    //       warnings: false,
-    //       drop_console: true,
-    //       pure_funcs: ['console.log']
-    //     }
-    //   }
-    // })
+    new UglifyJsPlugin({
+      sourceMap: true,
+      uglifyOptions: {
+        compress: {
+          warnings: false,
+          drop_console: true,
+          pure_funcs: ['console.log']
+        }
+      }
+    })
   ]
 })

src/App.vue

@@ -15,8 +15,8 @@ export default {
     console.log(extConfig, "-----------extConfig");
     if (JSON.stringify(extConfig) == "{}") {
       let shopItem = {
-        development: { mixid: "ssa", "shopid": 2342}, //五粮液uat
-        // development: { mixid: "antgood", "shopid": 67},
+        // development: { mixid: "ssa", "shopid": 2342}, //五粮液uat
+        development: { mixid: "antgood", "shopid": 67},
         // production: { "mixid":"qiyeCT", "shopid": 1045 }, // 道可
         // production: { "mixid":"metasense_doctors", "shopid": 1238 }, // 册为医护端
         production: { "mixid":"3QqsFT", "shopid": 1337 },

src/components/basicTool/transverse-label/index.vue

@@ -9,7 +9,13 @@
       '--select-tab-text-size':selectTabTextSize+'px',
       '--select-tab-background-color':selectTabBackgroundColor,
       '--select-tab-underline-color':selectTabUnderlineColor,
-      '--tab-background-color':tabBackgroundColor
+      '--tab-background-color':tabBackgroundColor,
+      '--main-label-default-font-size':mainLabelDefaultFontSize+'px',
+      '--main-label-default-color':mainLabelDefaultColor,
+      '--default-title-is-bold':defaultTitleIsBold?'500':'',
+      '--main-label-select-font-size':mainLabelSelectFontSize+'px',
+      '--main-label-select-color':mainLabelSelectColor,
+      '--select-title-is-bold':selectTitleIsBold?'500':''
     }"
   >
     <!-- v-if="tabSlideArrow==1&&isScroll" -->
@@ -19,6 +25,7 @@
       :class="[
         'floatArrow' + componentIndex,
         tabSlideArrow == 1 && tabList.length>5 ? '' : 'hideArrow',
+        'floatArrowTabStyle' + tabStyle2
       ]"
     >
       <div class="left" @click="moveTab(-1)">
@@ -44,9 +51,11 @@
       :title-inactive-color="defaultTabTextColor"
       :line-position="tabLayout"
       :line-length-type="tabStyle==2?tabUnderline:1"
+      :datas="datas"
       :class="[
         'defaultTabsStyle',
         'defaultTabsStyle' + componentIndex,
+        'newTabStyle' + tabStyle2,
         'tabStyle' + tabStyle,
         stickyTop ? 'stickyTop' : '',
         'tabLayout' + tabLayout,
@@ -257,6 +266,10 @@ export default {
       },
     },
     tabStyle() {
+      let tabStyle = this.datas.componentData.tabStyle;
+      return tabStyle == 3 ? 1 : tabStyle;
+    },
+    tabStyle2() {
       return this.datas.componentData.tabStyle;
     },
     stickyTop() {
@@ -376,6 +389,24 @@ export default {
         return "var(--main-color)";
       }
     },
+    mainLabelDefaultFontSize() {
+      return this.datas.componentData.mainLabelDefaultFontSize || 12;
+    },
+    mainLabelDefaultColor() {
+      return this.datas.componentData.mainLabelDefaultColor;
+    },
+    defaultTitleIsBold() {
+      return this.datas.componentData.defaultTitleIsBold;
+    },
+    mainLabelSelectFontSize() {
+      return this.datas.componentData.mainLabelSelectFontSize || 12;
+    },
+    mainLabelSelectColor() {
+      return this.datas.componentData.mainLabelSelectColor;
+    },
+    selectTitleIsBold() {
+      return this.datas.componentData.selectTitleIsBold;
+    },
   },
   watch: {
     active() {
@@ -559,6 +590,7 @@ export default {
 }
 </style>
 <style lang="scss">
+$wrapWidth: 50px;
 .transverse-label {
   .van-tab {
     // padding: 0;
@@ -593,6 +625,9 @@ export default {
       }
     }
   }
+  .floatArrowTabStyle3{
+    height: $wrapWidth;
+  }
   .hideArrow {
     opacity: 0;
     z-index: -9999;
@@ -621,6 +656,33 @@ export default {
       bottom: 4px;
     }
   }
+  // 样式三
+  .newTabStyle3{
+    .van-tabs__wrap{
+      // height: $wrapWidth;
+    }
+    .mainLabel{
+      height: 22px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--main-label-default-color)!important;
+      font-size: var(--main-label-default-font-size)!important;
+      font-weight: var(--default-title-is-bold)!important;
+    }
+    .mainLabel2{
+      line-height: 20px;
+    }
+    .selectMainLabel{
+      color: var(--main-label-select-color)!important;
+      font-size: var(--main-label-select-font-size)!important;
+      font-weight: var(--select-title-is-bold)!important;
+    }
+    .van-tabs__line{
+      height: 20px;
+      bottom: 0;
+    }
+  }
   .stickyTop {
     .van-tabs__wrap {
       position: sticky;

static/nativeComponents/TimeLimitedDiscount/index.wxss

@@ -57,7 +57,7 @@
   -o-border-radius: 6rpx;
 }
 .endTimedot {
-  padding: 0 10rpx;
+  padding-right: 10rpx;
 }
 .style2 {
   padding: 14px;

static/vant/tabs/index.js

@@ -34,6 +34,7 @@ VantComponent({
     titleActiveColor: String,
     titleInactiveColor: String,
     color: String,
+    datas: Object,
     animated: {
       type: Boolean,
       observer() {

static/vant/tabs/index.wxml

@@ -29,9 +29,14 @@
             style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
             bind:tap="onTap"
           >
-            <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
-              <view>主标签</view>
+            <view class="mainLabel {{index === currentIndex? 'selectMainLabel' : ''}}" wx:if="{{datas.componentData.tabStyle ==3}}">{{item.title}}</view>
+            <view class="{{ ellipsis ? 'van-ellipsis' : '' }} mainLabel2" style="{{ item.titleStyle }}">
+              <view wx:if="{{datas.componentData.tabStyle ==3}}">
+                {{ datas.componentData.tabList[index].subTitle }}
+              </view>
+              <view wx:else>
                 {{ item.title }}
+              </view>
               <van-info
                 wx:if="{{ item.info !== null || item.dot }}"
                 info="{{ item.info }}"