|
|
|
@ -1,67 +1,81 @@
|
|
|
|
|
<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 class="containerheadone">
|
|
|
|
|
<Title :id="projectId"></Title>
|
|
|
|
|
<el-button type="primary" size="medium" plain
|
|
|
|
|
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"
|
|
|
|
|
@click="goBack">
|
|
|
|
|
返回
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
|
|
<div id="basic">
|
|
|
|
|
<Basic :id="1"></Basic>
|
|
|
|
|
<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="projectId"></Basic>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 规划信息 -->
|
|
|
|
|
<div id="programme">
|
|
|
|
|
<Programme :id="projectId"></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>
|
|
|
|
|
<!-- 规划信息 -->
|
|
|
|
|
<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 Title from '../components/ProjectDetails/Title.vue';
|
|
|
|
|
import Basic from '../components/ProjectDetails/Basic.vue';
|
|
|
|
|
import Buildings from '../components/ProjectDetails/Buildings.vue';
|
|
|
|
|
import Companyenter from '../components/ProjectDetails/companyenter.vue';
|
|
|
|
@ -76,6 +90,7 @@ import Projectpicturetwo from '../components/ProjectDetails/Projectpicturetwo.vu
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
Title,
|
|
|
|
|
Basic,
|
|
|
|
|
Buildings,
|
|
|
|
|
Companyenter,
|
|
|
|
@ -104,10 +119,23 @@ export default {
|
|
|
|
|
{ id: 'liver', label: '现场实况' },
|
|
|
|
|
{ id: 'memo', label: '项目备忘录' },
|
|
|
|
|
{ id: 'others', label: '其他信息' }
|
|
|
|
|
]
|
|
|
|
|
],
|
|
|
|
|
projectId: null
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.projectId = this.$route.params.id;
|
|
|
|
|
this.loadData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
loadData() {
|
|
|
|
|
// 根据 projectId 加载数据的逻辑
|
|
|
|
|
console.log('Loading data for project ID:', this.projectId);
|
|
|
|
|
// 例如:调用 API 获取项目详情
|
|
|
|
|
// getProjectDetail(this.projectId).then(response => {
|
|
|
|
|
// this.projectDetail = response.data;
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
scrollToSection(id) {
|
|
|
|
|
this.activeSection = id;
|
|
|
|
|
const element = document.getElementById(id);
|
|
|
|
@ -117,6 +145,9 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
scrollToTop() {
|
|
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
|
|
},
|
|
|
|
|
goBack() {
|
|
|
|
|
this.$router.go(-1); // 返回上一个页面
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
@ -133,6 +164,15 @@ export default {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.containerheadone {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
|
|
|
padding: 0 1rem 0 .7rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.containerhead {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
@ -143,7 +183,6 @@ export default {
|
|
|
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.custom-menu {
|
|
|
|
|
margin: 1rem;
|
|
|
|
|
display: flex;
|
|
|
|
|