<template>
    <section class="homeRTGT">
        <div class="htaTitle">
            <span class="TitleName"><i></i><strong>棰嗗鍐崇瓥</strong></span>
        </div>    
        <div class="htaBox">
            <ul class="RTleaderUl">
                <li @click='leaderli("/ojt/01")'><img src="~@/assets/images/RTImgs/娌荤悊浣撶郴@2x.png"><em>娌荤悊浣撶郴</em></li>
                <li @click='leaderli("/ojt/02")'><img src="~@/assets/images/RTImgs/椤圭洰绠＄悊@2x.png"><em>椤圭洰绠＄悊</em></li>
                <li @click='leaderli("/ojt/03")'><img src="~@/assets/images/RTImgs/鍩虹璁炬柦@2x.png"><em>鍩虹璁炬柦</em></li>
                <li @click='leaderli("/ojt/04")'><img src="~@/assets/images/RTImgs/搴旂敤绯荤粺@2x.png"><em>搴旂敤绯荤粺</em></li>
                <li @click='leaderli("/ojt/05")'><img src="~@/assets/images/RTImgs/缃戠粶瀹夊叏@2x.png"><em>缃戠粶瀹夊叏</em></li>
                <li @click='leaderli("/ojt/06")'><img src="~@/assets/images/RTImgs/鏅鸿兘鎸囨暟@2x.png"><em>鏅鸿兘鎸囨暟</em></li>
            </ul>
        </div>
    </section>
</template>
<script>
export default {
    data(){
        return{
          titleArr:[
           
          ],
          inx:0,
          params:{//鎼滅储鏉′欢
            pageIndex:1,
            pageSize:3,
            total:0
          },
          type:1,
          tableData:[],
          tableData2:[],
          tableData3:[]
        }
    },
    mounted() {
        
    },
    methods: {
        leaderli(url){            
            window.open('//'+location.hostname+':8002'+url)
        }
    },
}
</script>
<style lang="scss" scoped>
.homeRTGT{
    display: flex; 
    flex-direction: column;
    background: #fff;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    .htaTitle{
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px;
        display: flex;
        align-items: center;
        .TitleName{
            display: flex;
            align-items: center;
            margin-right: 40px;
            i{
                width: 2px;
                height: 18px;
                background: #0E71FF;
                margin-right:4px;
            }
            strong{color: rgba(0, 0, 0, 0.85);font-size: 16px;}
        }
        .TitleTab{
          flex:1;
          em{
              margin-right: 15px;
              font-size: 16px;
              padding-bottom:16px;
              cursor: pointer;
              &.active{
                 border-bottom: 2px solid #0076f6;  
                 color: #0076f6;
              }
          }
        }
        .more{
            flex-wrap: 150px;
            font-size: 14px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.45);
             display: flex;
            align-items: center;
        }
    }
    .htaBox{
        padding: 16px 0 16px 16px;        
    }
    .scrollbarClass{
        .el-scrollbar__wrap{
            overflow: scroll!important;
            height: calc(100% + 20px)!important; //澶氬嚭鏉ョ殑20px鏄í鍚戞粴鍔ㄦ潯榛樿鐨勬牱寮�       
        }
        .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;;}
    }
}

.RTleaderUl{
    display: flex;
    li{
        flex:1;
        background: #000;
        border-radius:10px;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
        img{width: 100%;}
        em{
            position: absolute;
            background: rgba(0,0,0,0.5);
            left: 0;
            bottom: 0;
            width: 100%;
            height: 24px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            font-size: 12px;
        }
    }
}
</style>