支部网站 - 首页, 支部日常工作, 领导干部过双重组织生活, 一月一课一片一实践, 主题教育, 文明创建, 党建品牌, 支部风采, 荣誉功勋, 学习教育

<template>
  <div class="main">
    <div class="navback">
      <div class="nav">
        <template v-for="(navItem, index) in componentList">
          <div
            @click.prevent="goAnchor(navItem.id, index)"
            :key="navItem.id"
            :class="{\n              nav_active: index === currentSection,\n              nav_item: navItem.nav_item,\n              nav_other: navItem.nav_other\n            }"
          >
            {{ navItem.name }}
          </div>
        </template>
      </div>
    </div>
    <div class="content">
      <div id="Home" class="section">
        <Home />
      </div>
      <div id="Work" class="section">
        <Work />
      </div>
      <div id="Life" class="section">
        <Life />
      </div>
      <div id="Practice" class="section">
        <Practice />
      </div>
      <div id="ThemeEducation" class="section">
        <ThemeEducation />
      </div>
      <div id="Civilized" class="section">
        <Civilized />
      </div>
      <div id="Brand" class="section">
        <Brand />
      </div>
      <div id="Demeanour" class="section">
        <Demeanour />
      </div>
      <div id="Honor" class="section">
        <Honor />
      </div>
      <div id="StudyEducation" class="section">
        <StudyEducation />
      </div>
      <Footer />
    </div>
  </div>
</template>
<script>
import Home from '@/views/main/home/main-home.vue'
import Work from '@/views/main/work/main-work.vue'
import Life from '@/views/main/life/main-life.vue'
import Practice from '@/views/main/practice/main-practice.vue'
import ThemeEducation from '@/views/main/themeEducation/main-themeEducation.vue'
import Civilized from '@/views/main/civilized/main-civilized.vue'
import Brand from '@/views/main/brand/main-brand.vue'
import Demeanour from '@/views/main/demeanour/main-demeanour.vue'
import Honor from '@/views/main/honor/main-honor.vue'
import StudyEducation from '@/views/main/studyEducation/main-studyEducation.vue'
import Footer from '@/views/footer/footer-index.vue'

export default {
  components: {
    Home,
    Work,
    Life,
    Practice,
    ThemeEducation,
    Civilized,
    Brand,
    Demeanour,
    Honor,
    StudyEducation,
    Footer
  },
  data() {
    return {
      componentList: [
        {
          cmp: 'Home',
          name: '首页',
          id: '#Home',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'Work',
          name: '支部日常工作',
          id: '#Work',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'Life',
          name: '领导干部过双重组织生活',
          id: '#Life',
          nav_item: true,
          nav_other: true
        },
        {
          cmp: 'Practice',
          name: '一月一课一片一实践',
          id: '#Practice',
          nav_item: true,
          nav_other: true
        },
        {
          cmp: 'ThemeEducation',
          name: '主题教育',
          id: '#ThemeEducation',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'Civilized',
          name: '文明创建',
          id: '#Civilized',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'Brand',
          name: '党建品牌',
          id: '#Brand',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'Demeanour',
          name: '支部风采',
          id: '#Demeanour',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'Honor',
          name: '荣誉功勋',
          id: '#Honor',
          nav_item: true,
          nav_other: false
        },
        {
          cmp: 'StudyEducation',
          name: '学习教育',
          id: '#StudyEducation',
          nav_item: true,
          nav_other: false
        }
      ],
      currentSection: 0
    }
  },
  mounted() {
    const options = {
      threshold: 0.5 // 可见性阈值，当元素可见度超过50%时触发回调函数
    }
    const observer = new IntersectionObserver(this.handleObserver, options)
    const sections = document.querySelectorAll('.section') // 将每个页面部分的class设置为.section
    sections.forEach(section => observer.observe(section))
  },
  methods: {
    handleObserver(entries) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id = '#' + entry.target.id
          const sectionIndex = this.componentList.findIndex(item => item.id === id)
          if (sectionIndex !== -1) {
            this.currentSection = sectionIndex
          }
        }
      })
    },
    goAnchor(selector, index) {
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth'
      })
      this.currentSection = index
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/public_module.scss';
.main {
  width: 1;
  height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}
.navback {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #d30000;
}
.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  width: 1920px;

  .nav_item {
    @include flex-center;
    flex: 1;
    font-size: 20px;
    font-weight: 400;
    line-height: 60px;
    cursor: pointer;
    color: #ffffff;
  }
  .nav_item:hover {
    background: #a60000;
  }
  .nav_active {
    background: #a60000;
  }
  .nav_other {
    flex: 2;
  }
}
.content {
  // width: 1920px;
  width: 100vw;
  height: calc(100vh - 156px) !important;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #f4f2f2;
}
</style>