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

<template>
    <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 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 class="bottombox" id="others">
                <Others></Others>
            </div>
            <!-- 返回顶部 -->
            <!-- <el-backtop target=".backtop"></el-backtop> -->
        </div>
    </div>
    <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>
</template>

<script>
<<<<<<< HEAD
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';
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';
import Others from '../components/ProjectDetails/Others.vue';

export default {
    components: {
        Title,
        Basic,
        Buildings,
        Companyenter,
        Liver,
        Memo,
        Models,
        Months,
        Programme,
        Projectgift,
        Projectpicture,
        Projectpicturetwo,
        Others
=======
import Title from "../components/ProjectDetails/Title.vue";
import Basic from "../components/ProjectDetails/Basic.vue";
import Buildings from "../components/ProjectDetails/Buildings.vue";
import Companyenter from "@/views/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: {
    Title,
    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: "其他信息" },
      ],
      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;
      // });
>>>>>>> d52b2ef1097bb2a46437bfad1ac2fb21ed4ffd25
    },
    scrollToSection(id) {
      this.activeSection = id;
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    goBack() {
      this.$router.go(-1); // 返回上一个页面
    },
  },
};
</script>

<style scoped>
.containerbody {
  height: auto;
  padding: 0.3rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  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 0.7rem;
}

.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;
}
<<<<<<< HEAD
.bottombox{
    margin-bottom: 1rem;
}
</style>
=======
</style>
>>>>>>> d52b2ef1097bb2a46437bfad1ac2fb21ed4ffd25