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

<template>
    <div :style="{ 'height': '100vh' }">
        <div class="transfer-duration">
            <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>
            <div class="transfer-duration-com" :key="tabsActive">
                <components :is="tabsActive" />
            </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',
        }
    },
    components: { transferRecord, tansferDuration },
    head: {
        title: '转移时长',
    },
    mounted() {
    },
    methods: {
        changeTabs(key) {
            this.tabsActive = key
        }
    }
}
</script>

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

    .transfer-duration-tabs {
        height: 48px;
        margin: 16px 16px 0;
        background: #363636;
        border-radius: 8px;
        box-sizing: border-box;

        padding: 0 10px;
        display: flex;
        align-items: center;

        .transfer-duration-tabs_item {
            height: 40px;
            border-radius: 8px;
            flex: 1;
            text-align: center;
            line-height: 40px;

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

            &.active {
                color: #fff;
                background: linear-gradient(180deg, #575759 0%, #2C2C2D 100%);
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
            }
        }
    }

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