fix(tabs): 完善卡片和默认类型的位置切换

example/docs/zh-CN/components/tab.md

@@ -42,7 +42,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-tab type="brief" v-model="current2" tabPosition = "right">
+  <lay-tab type="brief" v-model="current2">
     <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
     <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
   </lay-tab>
@@ -236,7 +236,12 @@ export default {
       <lay-button type="default" size="sm" @click = "tabPosition = 'top'">top</lay-button>
       <lay-button type="default" size="sm" @click = "tabPosition = 'bottom'">bottom</lay-button>
   </lay-button-group>
-  <lay-tab type="brief" v-model="current7" :tabPosition = "tabPosition">
+  <lay-button-group>
+      <lay-button type="default" size="sm" @click = "tabType = ''">默认</lay-button>
+      <lay-button type="default" size="sm" @click = "tabType = 'brief'">简约</lay-button>
+      <lay-button type="default" size="sm" @click = "tabType = 'card'">卡片</lay-button>
+  </lay-button-group>
+  <lay-tab :type="tabType" v-model="current7" :tabPosition = "tabPosition">
     <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
     <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
     <lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
@@ -252,10 +257,12 @@ export default {
 
     const current7 = ref("1");
     const tabPosition = ref("left");
+    const tabType = ref("brief");
 
     return {
       current2,
-      tabPosition
+      tabPosition,
+      tabType
     }
   }
 }

src/component/tab/index.less

@@ -76,6 +76,7 @@
   border: none;
   border-radius: 0;
   border-right: 2px solid @global-checked-color;
+  margin-left: 1px;
 }
 
 .layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
@@ -83,15 +84,16 @@
   border: none;
   border-radius: 0;
   border-left: 2px solid @global-checked-color;
+  margin-right: 1px;
 }
 
-// .layui-tab-title.is-right li{
+.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title{
-//   border-left: 2px solid @global-neutral-color-6;
+  border-left: 1px solid @global-neutral-color-3;
-// }
+}
 
-// .layui-tab-title.is-left li{
+.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title{
-//   border-right: 2px solid @global-neutral-color-6;
+  border-right: 1px solid @global-neutral-color-3;
-// }
+}
 
 /** 位置结束*/
 
@@ -120,6 +122,16 @@
   pointer-events: none;
 }
 
+.layui-tab-title.is-left .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-right-color: #FFF;
+}
+
+.layui-tab-title.is-right .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-left-color: #FFF;
+}
+
 .layui-tab-bar {
   position: absolute;
   right: 0;
@@ -236,15 +248,32 @@
   margin-left: -1px;
 }
 
+.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left li,
+.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right li{
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
 .layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
   background-color: #fff;
 }
 
-.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this:after {
+.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top .layui-this:after {
-  border-top: none;
+  border: 1px solid @global-neutral-color-3;
-  border-width: 1px;
   border-bottom-color: #fff;
 }
+.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-top-color: #fff;
+}
+.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-right-color: #fff;
+}
+.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right .layui-this:after {
+  border: 1px solid @global-neutral-color-3;
+  border-left-color: #fff;
+}
 
 .layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
   height: 40px;