zoukankan      html  css  js  c++  java
  • 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;
       calc(100% - 10px);
      height: 100% ;
    }
    
    
    
    .pos .pos-right .tab-wrap {
      position: relative;
      overflow: hidden;
      padding-top: 31px;
      height: calc(100% - 300px);
      max- 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;
       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;
       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;
       100%;
      height: 10px;
    }
    
    .pos .pos-right .label_line2 {
      position: absolute;
      top: 25px;
      z-index: 100;
       100%;
      height: 10px;
       background-color: #6a81bb;
    }

  • 相关阅读:
    Delphi XE5 android 蓝牙通讯传输
    Delphi XE5 android toast
    Delphi XE5 android openurl(转)
    Delphi XE5 如何设计并使用FireMonkeyStyle(转)
    Delphi XE5 android 捕获几个事件
    Delphi XE5 android listview
    Delphi XE5 android 黑屏的临时解决办法
    Delphi XE5 android popumenu
    Delphi XE5 android 获取网络状态
    Delphi XE5 android 获取电池电量
  • 原文地址:https://www.cnblogs.com/huanhuan55/p/9935216.html
Copyright © 2011-2022 走看看