MTP2.0_WEB/src/layout/components/bottom.vue

<template>
    <section
        :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']"
    >
        <CapitalInfo class="capital-info-container"></CapitalInfo>
        <main>
            <firstMenu :list="orderList" :value="'title'" @selectMenu="selectMenu">
                <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
            </firstMenu>
            <div v-show="isShowBottom">
                <component :is="componentId" v-if="componentId"></component>
            </div>
        </main>
    </section>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue';
import CapitalInfo from '@/common/components/capitalInfo/index.vue';
import firstMenu from '@/common/components/firstMenu/index.vue';
import thirdMenu from '@/common/components/thirdMenu/index.vue';
import quoteTable from '@/common/components/quoteTable/index.vue';
import { OperationTabMenu } from '@/services/go/commonService/interface';
import { handleOrderData } from '@/common/setup/order/orderData';
import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
import { handleShowBottom, getShowBottomValue } from '@/common/config/constrolBottom';

export default defineComponent({
    name: 'layout-top',
    components: {
        CapitalInfo,
        firstMenu,
        quoteTable,
        thirdMenu,
        [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/order/spot_warran/index.vue')),
        [enumOrderComponents.funding_information]: defineAsyncComponent(() => import('@/views/order/funding_information/index.vue')),
        [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/order/performance_information/index.vue')),
        [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/order/pre_sale_warehouse_receipt/index.vue')),
    },
    setup() {
        const { orderList, componentId } = handleOrderData();
        // 切换组件
        function selectMenu(value: OperationTabMenu) {
            componentId.value = value.code as enumOrderComponents;
        }
        return {
            selectMenu,
            componentId,
            orderList,
            isShowBottom: getShowBottomValue(),
            getShowBottomValue,
            handleShowBottom,
        };
    },
});
</script>
<style lang="less">
.layout-bottom-all {
    height: 330px;
}
.layout-bottom-hidden {
    height: 40px;
}
.layout-bottom {
    display: flex;
    width: 100%;
    transition: height 0.5s;
    overflow: hidden;
    .capital-info-container {
        width: 180px;
        border-right: 1px solid @m-black2;
    }
    main {
        max-width: calc(100% - 180px);
        flex: 1;
        .flex;
        flex-direction: column;
        background: rgb(14, 14, 15);
        position: relative;
        .conditionIcon {
            font-size: 16px;
            color: @m-grey1;
            width: 16px;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
            &:hover {
                color: rgba(@m-grey1, 0.8);
            }
        }
    }
}
</style>