<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;

}