党建网站-支部日常工作、主题教育、文明创建等内容

<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='{
              nav_active: index === findIndex && currentSection === navItem.cmp,
              nav_item: navItem.nav_item,
              nav_other: navItem.nav_other
            }'
          >
            {{ navItem.name }}
          </div>
        </template>
      </div>
    </div>
    <div class='content'>
      <Home id='Home' />
      <Work id='Work' />
      <Life id='Life' />
      <Practice id='Practice' />
      <ThemeEducation id='ThemeEducation' />
      <Civilized id='Civilized' />
      <Brand id='Brand' />
      <Demeanour id='Demeanour' />
      <Honor id='Honor' />
      <StudyEducation id='StudyEducation' />
      <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
        }
      ],
      findIndex: 0,
      currentSection: ''
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    //锚点跳转  参数selector是id选择器(#XX)
    goAnchor(selector, index) {
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth'
      })
      this.findIndex = index
    },
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      const sections = this.componentList.map(item => item.cmp)
      const currentSection = sections.find(section => {
        const sectionElement = document.getElementById(section)
        if (sectionElement) {
          const rect = sectionElement.getBoundingClientRect()
          return rect.top <= windowHeight / 2 && rect.bottom >= windowHeight / 2
        }
        return false
      })
      if (currentSection) {
        this.currentSection = currentSection
      }
    }
  }
}
</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>