Gyyq-Upstairs/src/views/manage-info/index.vue

<template>
    <div class="containerbody">
        <!-- 目录 -->
        <div class="containerhead">
            <el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection" class="custom-menu">
                <el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id" class="custom-menu-item">
                    {{ item.label }}
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 基本信息 -->
        <div id="basic">
            <Basic :id="1"></Basic>
        </div>
        <!-- 规划信息 -->
        <div id="programme">
            <Programme :id="1"></Programme>
        </div>
        <!-- 建筑信息 -->
        <div id="buildings">
            <Buildings></Buildings>
        </div>
        <!-- 要素模型信息 -->
        <div id="models">
            <Models></Models>
        </div>
        <!-- 月度进展信息 -->
        <div id="months">
            <Months></Months>
        </div>
        <!-- 企业入驻信息 -->
        <div id="companyenter">
            <Companyenter></Companyenter>
        </div>
        <!-- 项目画像 -->
        <div id="projectpicture">
            <Projectpicture></Projectpicture>
        </div>
        <!-- 项目图例 -->
        <div id="projectpicturetwo">
            <Projectpicturetwo></Projectpicturetwo>
        </div>
        <!-- 项目巡礼 -->
        <div id="projectgift">
            <Projectgift></Projectgift>
        </div>
        <!-- 现场实况 -->
        <div id="liver">
            <Liver></Liver>
        </div>
        <!-- 项目备忘录 -->
        <div id="memo">
            <Memo></Memo>
        </div>
        <!-- 其他信息 -->
        <div id="others">
            <Memo></Memo>
        </div>
        <!-- 返回顶部 -->
        <!-- <el-backtop target=".backtop"></el-backtop> -->
    </div>
</template>

<script>
import Basic from '../components/ProjectDetails/Basic.vue';
import Buildings from '../components/ProjectDetails/Buildings.vue';
import Companyenter from '../components/ProjectDetails/companyenter.vue';
import Liver from '../components/ProjectDetails/Liver.vue';
import Memo from '../components/ProjectDetails/Memo.vue';
import Models from '../components/ProjectDetails/Models.vue';
import Months from '../components/ProjectDetails/Months.vue';
import Programme from '../components/ProjectDetails/Programme.vue';
import Projectgift from '../components/ProjectDetails/Projectgift.vue';
import Projectpicture from '../components/ProjectDetails/Projectpicture.vue';
import Projectpicturetwo from '../components/ProjectDetails/Projectpicturetwo.vue';

export default {
    components: {
        Basic,
        Buildings,
        Companyenter,
        Liver,
        Memo,
        Models,
        Months,
        Programme,
        Projectgift,
        Projectpicture,
        Projectpicturetwo
    },
    data() {
        return {
            activeSection: 'basic',
            sections: [
                { id: 'basic', label: '基本信息' },
                { id: 'programme', label: '规划信息' },
                { id: 'buildings', label: '建筑信息' },
                { id: 'models', label: '要素模型信息' },
                { id: 'months', label: '月度进展信息' },
                { id: 'companyenter', label: '企业入驻信息' },
                { id: 'projectpicture', label: '项目画像' },
                { id: 'projectpicturetwo', label: '项目图例' },
                { id: 'projectgift', label: '项目巡礼' },
                { id: 'liver', label: '现场实况' },
                { id: 'memo', label: '项目备忘录' },
                { id: 'others', label: '其他信息' }
            ]
        };
    },
    methods: {
        scrollToSection(id) {
            this.activeSection = id;
            const element = document.getElementById(id);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
        },
        scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }
};
</script>

<style scoped>
.containerbody {
    height: auto;
    padding: .3rem .5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: auto;
}

.containerhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}


.custom-menu {
    margin: 1rem;
    display: flex;
    gap: 1rem;
    border: none;
}

.custom-menu-item {
    color: #3D424C;
    width: 7.25rem;
    height: 2rem;
    background: #F4F7FE;
    border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 高亮 */
.custom-menu-item.is-active {
    background-color: #2B62F1;
    color: #fff !important;
}

/* 悬停 */
.custom-menu-item:hover {
    background-color: #2B62F1;
    color: #fff !important;
}

/* 默认的下划线 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: #2B62F1;
    border-bottom: none;
}
</style>