admin_home/src/layout/components/template/componentMenu.vue

<template>
    <div :class="['componentMenuBox', this.$store.state.template.componentMenuStatus == 0 ? 'componentMenuBoxHide' : '']" id="componentMenuBox">
        <div class="floatArrow">
            <span class="el-icon-arrow-left" @click="setComponentMenuStatus(0)" v-if="this.$store.state.template.componentMenuStatus == 1"></span>
            <span class="el-icon-arrow-right" @click="setComponentMenuStatus(1)" v-if="this.$store.state.template.componentMenuStatus == 0"></span>
        </div>
        <div class="componentMenuTitle">
            <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
            <div v-if="this.$store.state.template.pageStatus == 2">频道页可选板块：</div>
            <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
            <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
            <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
            <div v-if="this.$store.state.template.pageStatus == 6">底部列表页可选板块：</div>
            <div v-if="this.$store.state.template.pageStatus == 7">底部详情页可选板块：</div>
        </div>
        <div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <!--首页通栏-->
                <div v-if="this.$store.state.template.pageStatus == 1">
                    <indexSector/>
                </div>
                <!--频道通栏-->
                <div v-if="this.$store.state.template.pageStatus == 2">
                    <classSector/>
                </div>
                <!--列表通栏-->
                <div v-if="this.$store.state.template.pageStatus == 3">
                    <listSector/>
                </div>
                <!--详情通栏-->
                <div v-if="this.$store.state.template.pageStatus == 4">
                    <articleSector/>
                </div>
                <!--搜索通栏-->
                <div v-if="this.$store.state.template.pageStatus == 5">
                    <searchSector/>
                </div>
                <!--底部列表通栏-->
                <div v-if="this.$store.state.template.pageStatus == 6">
                    <sectorList/>
                </div>
                <!--底部详情通栏-->
                <div v-if="this.$store.state.template.pageStatus == 7">
                    <sectorArticle/>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import indexSector from './pages/index/sector.vue';
import classSector from './pages/class/sector.vue';
import listSector from './pages/list/sector.vue';
import articleSector from './pages/article/sector.vue';
import searchSector from './pages/search/sector.vue';
import sectorList from './pages/about/sectorList.vue';
import sectorArticle from './pages/about/sectorArticle.vue';

export default {
    name: 'componentMenu',
    components:{
        indexSector,
        classSector,
        listSector,
        articleSector,
        searchSector,
        sectorList,
        sectorArticle
    },
    props: {
        
    },
    data() {
        return {
            data: null
        }
    },
    methods: {
        setComponentMenuStatus(data) {
            this.$store.commit('template/setComponentMenuStatus', data);
        }
    }
}
</script>

<style scoped lang="less">
.componentMenuBox {
    .floatArrow {
        position: absolute;
        top: 50%;
        right: -16px;
        width: 40px;
        height: 40px;
        background: #2F2F2F;
        border-radius: 50%;
        font-size: 18px;
        color:#fff;
        line-height:40px;
        cursor: pointer;
        color: #c7c7c7;
        box-sizing: border-box;
        padding-left: 16px;
    }
    transition: width 0.28s;
    width: 220px !important;
    background: #2F2F2F;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    .sectorBox {
        height: 100%;
    }
    .el-scrollbar {
        height: calc(100vh - 60px);
    }
    .componentMenuTitle {
        padding: 37px 0 30px 0;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        div {
            border-left: 3px solid #5570F1;
            padding-left: 25px;
        }
    }
}
.componentMenuBoxHide {
    width: 10px !important;
    .componentMenuTitle {
        display: none;
    }
    .el-scrollbar {
        display: none;
    }
}
</style>