android-cloud-H5/pages/transferDuration/index.vue

<template>
    <div :style="{ 'height': '100vh', 'background': '#1c1c1e' }">
        <div class="transfer-duration">
            <div class="transfer-duration-title">转移时长</div>
            <div class="transfer-duration-tabs">
                <!-- <div class="transfer-duration-tabs_item active">123456</div>
                <div class="transfer-duration-tabs_item">1432123</div> -->
                <div v-for="item in tabs" :key="item.key" :class="['transfer-duration-tabs_item', { active: tabsActive === item.key }]" @click="changeTabs(item.key)">
                    <img :src="tabsActive === item.key ? item.activeIcon : item.icon" alt=""
                        class="transfer-duration-tabs_item-icon">
                    {{ item.name }}
                </div>
                <div :class="['transfer-duration-tabs_item pab', { active: tabsActive === 'transferRecord' }]"></div>
            </div>
            <div class="transfer-duration-com" :key="tabsActive">
                <components :is="tabsActive" :token="token" />
            </div>
        </div>
    </div>
</template>

<script>
const transferRecord = () => import('./components/transferRecord.vue')
const tansferDuration = () => import('./components/tansferDuration.vue')
export default {
    auth: false,
    name: 'transferDuration',
    data() {
        return {
            tabs: [{
                name: '转移时长',
                key: 'tansferDuration',
                icon: require('@/assets/image/transferDuration/tansferDuration.png'),
                activeIcon: require('@/assets/image/transferDuration/activeTansferDuration.png')
            }, {
                name: '转移记录',
                key: 'transferRecord',
                icon: require('@/assets/image/transferDuration/transferRecord.png'),
                activeIcon: require('@/assets/image/transferDuration/activeTransferRecord.png')
            }],
            tabsActive: 'tansferDuration',
            token: ''
        }
    },
    components: { transferRecord, tansferDuration },
    head: {
        title: '转移时长',
    },
    created() {
        this.token = this.$route.query.token
    },
    methods: {
        changeTabs(key) {
            this.tabsActive = key
        }
    }
}
</script>

<style lang="scss" scoped>
.transfer-duration {
    font-family: PingFangSC, PingFang SC;
    color: #C0C1C4;
    display: flex;
    flex-direction: column;
    // padding: 16px 16px 0;
    font-size: 14px;
    font-weight: bold;
    // overflow: hidden;
    height: 100%;

    .transfer-duration-title {
        font-size: 18px;
        padding: 0 26px;
        line-height: 40px;
        font-weight: 500;
    }

    .transfer-duration-tabs {
        height: 48px;
        margin: 0 16px;
        background: #363636;
        border-radius: 8px;
        box-sizing: border-box;
        position: relative;
        padding: 0 10px;
        display: flex;
        align-items: center;
        z-index: 1;

        .transfer-duration-tabs_item {
            height: 40px;
            border-radius: 8px;
            width: 159px;
            text-align: center;
            line-height: 40px;
            position: relative;
            z-index: 1;
            &.pab {
                position: absolute;
                background: linear-gradient(180deg, #575759 0%, #2C2C2D 100%);
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
                z-index: -1;
                transition: all .5s;
                &.active{
                    transform: translateX(159px);
                }
            }

            .transfer-duration-tabs_item-icon {
                width: 14px;
                height: 14px;
                vertical-align: middle;
                margin-bottom: 3px;
            }

            &.active {
                color: #fff;
            }
        }
    }

    .transfer-duration-com {
        margin-top: 16px;
        flex: 1;
        overflow-y: auto;
    }
}
</style>