横向标签铺满样式调整

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

@@ -46,7 +46,7 @@
       :class="[
         'defaultTabsStyle',
         'defaultTabsStyle' + componentIndex,
-        tabStyle == 1 ? 'tabStyle1' : 'tabStyle2',
+        'tabStyle' + tabStyle,
         stickyTop ? 'stickyTop' : '',
         'tabLayout' + tabLayout,
       ]"
@@ -68,7 +68,7 @@
             <banner :datas="item1"></banner>
           </div>
           <div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
-            <goods-list :class="['goodsListItem']" :datas="item1"></goods-list>
+            <goods-list class="goodsListItem" :datas="item1"></goods-list>
           </div>
           <div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
             <area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
@@ -569,11 +569,8 @@ export default {
 
   .tabStyle1 {
     .van-tabs__line {
-      height: auto;
-      bottom: 4px;
-      top:4px;
-      left: 8px;
-      right: 8px;
+      height: 30px;
+      bottom: 6px;
       border-radius: 38px;
     }
   }
@@ -614,8 +611,8 @@ export default {
       content: "";
       position:absolute;
       bottom: 4px;
-      left: 8px;
-      right: 8px;
+      left: 0;
+      right: 0;
       top: 4px;
       border-radius: 34px;
       background: var(--default-tab-background-bolor);
@@ -635,8 +632,8 @@ export default {
       content: "";
       position:absolute;
       bottom: 4px;
-      left: 8px;
-      right: 8px;
+      left: 0;
+      right: 0;
       height: 4px;
       background: var(--default-tab-underline-color);
       z-index: -1;

static/vant/tabs/index.wxml

@@ -20,7 +20,7 @@
         style="{{ color ? 'border-color: ' + color : '' }}"
       >
         <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
-          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
+          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle(linePosition,{ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"

static/vant/tabs/index.wxs

@@ -57,11 +57,14 @@ function trackStyle(data) {
   });
 }
 
-function lineStyle(data) {
+function lineStyle(linePosition,data) {
+  // 横向标签平铺模式缩短宽度
+  var lineWidth = linePosition == 3?(data.lineWidth - 32):data.lineWidth
+  var lineOffsetLeft = linePosition == 3 ? (data.lineOffsetLeft + 16) : data.lineOffsetLeft
   return style({
-    width: utils.addUnit(data.lineWidth - 32),
-    transform: 'translateX(' + (data.lineOffsetLeft +16) + 'px)',
-    '-webkit-transform': 'translateX(' + (data.lineOffsetLeft + 16) + 'px)',
+    width: utils.addUnit(lineWidth),
+    transform: 'translateX(' + lineOffsetLeft + 'px)',
+    '-webkit-transform': 'translateX(' + lineOffsetLeft + 'px)',
     'background-color': data.color,
     height: data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
     'border-radius':
@@ -80,5 +83,3 @@ module.exports = {
   lineStyle: lineStyle,
   navStyle: navStyle,
 };
-
-