标签页

<template>

      <div class="pos-right">

        <div class="tab-wrap">
          <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
          <label class="lable1" for="tab1">Information</label>
          <input type="radio" id="tab2" name="tabGroup1" class="tab">
          <label class="lable2" for="tab2">Member Info</label>
          <input type="radio" id="tab3" name="tabGroup1" class="tab">

          <!-- 内容区域 1-->
          <div class="tab__content">
             <span>1</span>
          </div>
            <!-- 内容区域 2-->
          <div class="tab__content">
             <span>2</span>
          </div>

          <div class="label_line">

          </div>

          <div class="label_line2">
        
          </div>
        </div>
      </div>

    

</template>

<script>
export default {};
</script>

<style lang="scss">
@import "./lable.scss";
</style>

   .pos-right .tab-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 32px;
    background: transparent;
    background-color: #fff;
    list-style: none;
    -webkit-transition: 0.3s box-shadow ease;
    transition: 0.3s box-shadow ease;
  }
  .pos-right {
    position: relative;
    float: left;
    width: 300px;
    height: 100%;
  }
  
  
 .pos-right .tab {
    display: none;
  }
  
   .pos-right .tab:checked:nth-of-type(1)~.tab__content:nth-of-type(1) {
    position: relative;
    top: 0;
    z-index: 100;
    display: block;
    text-shadow: 0 0 0;
    opacity: 1;
    height: 320px;
  }
  
   .pos-right .tab:checked:nth-of-type(2)~.tab__content:nth-of-type(2) {
    position: relative;
    top: 0;
    z-index: 100;
    display: block;
    text-shadow: 0 0 0;
    opacity: 1;
    height: 320px;
  }
  

   .pos-right .tab:checked:nth-of-type(1)~.label_line {
    background-color:#6a81bb;;
    width: 304px;
  }
   .pos-right .tab:checked:nth-of-type(2)~.label_line {
    left: 27%;
    z-index: 102;
    width: 222px;
    background-color: #56a1cd;
  }
   .pos-right .tab:checked + label {
    z-index: 100 !important;
    cursor: default;
    color: #c5f70e;
  }
   .pos-right .tab:first-of-type:not(:last-of-type)+label {
    left: 0;
    z-index: 99;
    padding-top: 3px;
    font-weight: 700;
  }
  //lable2
   .pos-right .tab:nth-of-type(2):not(:last-of-type)+label {
    left: 27%;
    z-index: 98;
    width: 90px;
    background-color:#56a1cd;
    padding-top: 3px;
    font-weight: 700;
  }
   .pos-right .tab:first-of-type:not(:last-of-type)+label {
    left: 0;
    z-index: 99;
  }
  
   .pos-right .tab:checked+label {
    z-index: 100 !important;
    cursor: default;
  }
  
   .pos-right .tab+label {
    position: absolute;
    top: 0;
    display: block;
    box-sizing: border-box;
    width: 28%;
    height: 29px;
    border-radius: 8px 8px 0 0;
    background-color: #f2f2f2;
    background-color: #6a81bb;
    box-shadow: 10px 0px 5px rgba(0, 0, 0, .2);
    color:#ffffff;
    font-weight: 500;
    text-align: center;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
    -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
   .pos-right .tab__content {
    position: absolute;
    left: 0;
    z-index: -1;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    width:288px;
    height: calc(100% - 12px);
    // border-bottom-left-radius: 5px;
    // border-bottom-right-radius: 5px;
    border: 6px solid #6a81bb;  //label1的样式
    background-color: transparent;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
  
   .pos-right .label_line {
    position: absolute;
    top: 25px;
    z-index: 101;
    height: 10px;
    border-top-right-radius: 10px;
    width: 220px;
  }
  
  // .pos .pos-right .label_line2 {
  //   background-color: red;
  //   position: absolute;
  //   top: 25px;
  //   z-index: 100;
  //   height: 5px;
  //   width: 320px;
  //   //background-color: #6a81bb;
  //   border-top-right-radius: 10px;
  //   border-bottom-right-radius: 5px;
  // }