梯形Tab栏（卡片式）

最新推荐文章于 2024-12-05 15:53:02 发布

煮豆燃豆萁~

最新推荐文章于 2024-12-05 15:53:02 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html javascript

原文链接：https://blog.youkuaiyun.com/qq_43074624/article/details/134170697

<div class="crm-tab-bar" ref="tabBarRef">
        <!-- 左侧 -->
            <div class="tab-bar-item-left" @click="changeTab(0)" :class="{ 'table-active': loginBox == 0}">
                <div class="rect"></div>
                <div class="rhomb" :class ="{ 'transform-active': loginBox == 1,'tot-radius':loginBox == 0,'bot-radius': loginBox == 1}" ></div>
                <div class="title">登录</div>
            </div>
            <!-- 右侧 -->
            <div class="tab-bar-item-right" @click="changeTab(1)" :class="{ 'table-active': loginBox == 1}">
                <div class="rect"></div>
                <div class="rhomb" :class ="{ 'transform-active': loginBox == 1,'tot-radius':loginBox == 1,'bot-radius': loginBox == 0}"></div>
                <div class="title">注册</div>
            </div>
            <!-- 标题下的横线 -->
            <div class="tabs-line" :style="style1"></div>
        </div>
<!-- 内容 -->
        <div class="content"></div>

.crm-tab-bar {
        margin-top: 30px;
        position: relative;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        height: 62px;
        justify-content: space-between;
        align-items:flex-end;
        .tab-bar-item-left {
            border: none;
            width: 50%;
            height: 52px;
            position: relative;
            display: flex;
            align-items: end;
            background: linear-gradient(to top,#fff 50%,transparent 51%,transparent 100%);
            .rect {
                position: absolute;
                width: 80%;
                height: inherit;
                border-radius: 10px 10px 0px 0px !important;
                background: linear-gradient(to top,#eee,#2ba4ff);
                color: #000;
                top: 0;
                bottom: 0;
                left: 0;
            }
            .rhomb {
                border: none;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 50%;
                height: inherit;
                border-radius: 10px;
                background: linear-gradient(to top,#eee,#2ba4ff);
                transform: skewX(20deg);
            }
        }
        .tab-bar-item-right {
            border: none;
            width: 50%;
            height: 52px;
            position: relative;
            display: flex;
            align-items:end;
            background: linear-gradient(to top,#fff 50%,transparent 51%,transparent 100%);
            .rect {
                position: absolute;
                width: 80%;
                height: inherit;
                border-radius: 10px 10px 0px 0px !important;
                background: linear-gradient(to top,#eee,#2ba4ff);
                color: #000;
                top: 0;
                bottom: 0;
                right: 0;
            }
            .rhomb {
                border: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width:50%;
                height: inherit;
                background: linear-gradient(to top,#eee,#2ba4ff);
                border-radius: 10px;
                transform: skewX(28deg);
            }
        }
    }
    .transform-active{
        transform: skewX(-28deg) !important;
    }
    .tot-radius{
        border-radius: 10px 10px 0px 0px !important;
        z-index:8;
    }
    .bot-radius{
        border-radius: 0px 0px 10px 10px !important;
        z-index:6;
    }
    .title {
        width: 100%;
        height: 52px;
        position: absolute;
        z-index: 9;
        line-height: 52px;
        text-align: center;
    }
    .tabs-line {
        position: absolute;
        width: 40px;
        height: 4px;
        background-color: #2ba4ff;
        transform: translateX(85px) translateX(-50%);
        transition-duration: 0.3s;
        z-index:9;
    }
    .table-active {
        height: 64px !important;
        .rect {
            background: #fff !important;
        }
        .rhomb {
            background: #fff !important;
        }
    }
    .content{
        width: 100%;
        height: 100%;
        background: #fff;
    }
    .van-field__label {
        width: 56px;
    }
    .fontSize14 {
            font-size: 14px;
            z-index: 999;
    }
    .marginTop25 {
        margin-top: 25px !important;
    }
    .margin20 {
        margin: 20px 0 !important;
    }
    .captcha {
        transform: translateY(-3px);
        background-color: #2ba4ff;
        border: 1px solid #2ba4ff;
        border-radius: 25px;
        margin-right: 10px;
        /deep/.van-button__text {
            font-size: 12px !important;
        }
    }