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>
          <!-- 内容区域 -->
          <div class="tab__content">
             <span></span>
          </div>
            <!-- 内容区域 -->
          <div class="tab__content">
             <span></span>
          </div>
           <!-- 内容区域 -->
          <div class="tab__content">
            <span></span>
          </div>
           <!-- 内容区域 -->
          <div class="tab__content">
            <span></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(% - 10px);
  height: % ;
}

.pos .pos-right .tab-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 31px;
  height: calc(% - 300px);
  max-width: %;
  border-radius: 6px;
  background: transparent;
  background-color: #fff;
  list-style: none;
  -webkit-transition: .3s box-shadow ease;
  transition: .3s box-shadow ease;
}
.pos-right {
  position: relative;
  float: left;
  width: 300px;
  height: %;
}

.pos .pos-right .tab {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pos .pos-right .tab+label {
  position: absolute;
  top: ;
  display: block;
  box-sizing: border-box;
  width: %;
  height: 29px;
  border-radius: 8px 8px  ;
  background-color: #f2f2f2;
  background-color: #6a81bb;
  box-shadow: 10px 0px 5px rgba(, , , .);
  color:#ffffff;
  font-weight: ;
  text-align: center;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 25px;
  cursor: pointer;
  -webkit-transition: .3s background-color ease, .3s box-shadow ease;
  transition: .3s background-color ease, .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: ;
  z-index: -;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(% - 12px);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 6px solid #6a81bb;  //label1的样式
  background-color: transparent;
  background-color: #fff;
  opacity: ;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

.pos .pos-right .label_line {
  position: absolute;
  top: 25px;
  z-index: ;
  width: %;
  height: 10px;
}

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