ijijin-view/vue/less/TabHead.less

vuejs UI components, from ijijin.

// tab栏头部

.vu-tab-head{
    width: 100%;
    background-color: #fff;
    
    // 按钮激活的样式
    .z-active {
        color: #fe5d4e;
        border-bottom: 2px solid #fe5d4e;
    }
}
// 列表
.vu-tab-head-list {
    position: relative;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    &:after {
        position: absolute;
        bottom: -1px;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background-color: #e2e2e2;
        -webkit-transform: scale(1, 0.5);
        transform: scale(1, 0.5);
    }
}

// 列表项
.vu-tab-head-item {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
}

// 列表项按钮
.vu-tab-head-item-btn {
    padding: 3vw 0;
    max-height: 100%;
    width: 18.66vw;
    font-size: 3.73vw;
    background-color: #fff;
    border-bottom: 2px solid transparent;
}