html-标签页

<template>
  <div class="pos-frame">

    <div class="pos h100">
      <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">VIP Zone</label>

          <input type="radio" id="tab3" name="tabGroup1" class="tab">
          <label for="tab3">F1</label>

           
        <input type="radio" id="tab4" name="tabGroup1" class="tab">
          <label for="tab4">F2</label>
          <!-- 内容区域 1-->
          <div class="tab__content">
             <span>1</span>
          </div>
            <!-- 内容区域 2-->
          <div class="tab__content">
             <span>2</span>
          </div>
           <!-- 内容区域 3-->
          <div class="tab__content">
            <span>3</span>
          </div>
           <!-- 内容区域 4-->
          <div class="tab__content">
            <span>4</span>
          </div>

          <div class="label_line">

          </div>

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

<script>
export default{

}
</script>

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

.pos-frame {
  position: relative;
  padding: 5px;
  width: calc(100% - 10px);
  height: 100% ;
}



.pos .pos-right .tab-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 31px;
  height: calc(100% - 300px);
  max-width: 100%;
  border-radius: 6px;
  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 .pos-right .tab {
  display: none;
}

.pos .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;
}

.pos .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;
}

.pos .pos-right .tab:checked:nth-of-type(3)~.tab__content:nth-of-type(3) {
  position: relative;
  top: 0;
  z-index: 100;
  display: block;
  text-shadow: 0 0 0;
  opacity: 1;
}

.pos .pos-right .tab:checked:nth-of-type(4)~.tab__content:nth-of-type(4) {
  position: relative;
  top: 0;
  z-index: 100;
  display: block;
  text-shadow: 0 0 0;
  opacity: 1;
}

.pos .pos-right .tab:checked:nth-of-type(1)~.label_line {
  background-color: #6a81bb;
}




.pos .pos-right .tab:checked:nth-of-type(2)~.label_line {
  left: 25%;
  z-index: 102;
  background-color: #56a1cd;
}


.pos .pos-right .tab:checked:nth-of-type(3)~.label_line {
  left: 50%;
  z-index: 102;
  background-color: #83bfe1;
}

.pos .pos-right .tab:checked:nth-of-type(4)~.label_line {
  left: 69%;
  z-index: 102;
  background-color: #bbd9eb;
}



.pos .pos-right .tab:checked + label {
  z-index: 100 !important;
  cursor: default;
  color: #c5f70e;
}





.pos .pos-right .tab:first-of-type:not(:last-of-type)+label {
  left: 0;
  z-index: 99;
}



//lable2
.pos .pos-right .tab:nth-of-type(2):not(:last-of-type)+label {
  left: 25%;
  z-index: 98;
  background-color:#56a1cd;
}

//lable3
.pos .pos-right .tab:nth-of-type(3):not(:last-of-type)+label {
  left: 50%;
  z-index: 97;
  background-color: #83bfe1;
}

// //lable4
.pos .pos-right .tab:last-of-type:not(:first-of-type)+label {
  left: 69%;
  z-index: 96;
  background-color: #bbd9eb;
}




.pos .pos-right .tab:first-of-type:not(:last-of-type)+label {
  left: 0;
  z-index: 99;
}

.pos .pos-right .tab:checked+label {
  z-index: 100 !important;
  cursor: default;
}

.pos .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 .pos-right .tab__content {
  position: absolute;
  left: 0;
  z-index: -1;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  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 .pos-right .label_line {
  position: absolute;
  top: 25px;
  z-index: 101;
  width: 100%;
  height: 10px;
}

.pos .pos-right .label_line2 {
  position: absolute;
  top: 25px;
  z-index: 100;
  width: 100%;
  height: 10px;
   background-color: #6a81bb;
}