web系统框架初步搭建

src/views/EnterpriseAppeal/index.vue

 <template>
-  <div>企业诉求</div>
+  <div>
+    <HomeSearch />
+    <nav-list :list="navList" :current-menu="'/EnterpriseAppeal/index'"/>
+    <div class="policyDirect-content">
+      企业诉求
+    </div>
+  </div>
 </template>
 
 <script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
+  }
 }
 </script>
 

src/views/OneClickService/index.vue

 <template>
   <div>
-    一键办事
+    <HomeSearch />
+    <nav-list :list="navList" :current-menu="'/OneClickService/index'"/>
+    <div class="policyDirect-content">
+      一键办事
+    </div>
   </div>
 </template>
 
 <script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
+  }
 }
 </script>
 

src/views/PolicyDirect/index.vue

 <template>
-  <div>政策直达</div>
+  <div>
+    <HomeSearch />
+    <nav-list :list="navList" :current-menu="'/PolicyDirect/index'"/>
+    <div class="policyDirect-content">
+      政策直达
+    </div>
+  </div>
 </template>
 
 <script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
+  }
 }
 </script>
 

src/views/ServiceShare/index.vue

 <template>
-  <div>服务共享</div>
+  <div>
+    <HomeSearch />
+    <nav-list :list="navList" :current-menu="'/ServiceShare/index'"/>
+    <div class="policyDirect-content">
+      服务共享
+    </div>
+  </div>
 </template>
 
 <script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
+  }
 }
 </script>
 

src/views/activityInformation/index.vue

 <template>
   <div>
-    活动信息
+    <HomeSearch />
+    <nav-list :list="navList" :current-menu="'/activityInformation/index'"/>
+    <div class="policyDirect-content">
+      活动信息
+    </div>
   </div>
 </template>
 
 <script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
+  }
 }
 </script>
 

src/views/homePage/components/NavList/index.vue

+<template>
+  <div class="sf-nav-list">
+    <ul class="sf-menu">
+      <li
+        v-for="(menu, index) in list"
+        :key="index"
+        :class="{'sf-menu-item': true, 'sf-menu-item__active': currentMenu === menu.path}"
+        @click.stop="currentMenuChange(menu)"
+      >{{ menu.menuName }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NavList',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    currentMenu: {
+      type: String,
+      default() {
+        return '/homePage/index'
+      }
+    }
+  },
+  data() {
+    return {
+      // currentMenu: '/'
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    currentMenuChange({ path, query }) {
+      this.$router.push({
+        path,
+        query
+      }, (s) => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sf-nav-list {
+  background: linear-gradient(180deg, #21ADF3 0%, #018FD6 100%);
+  .sf-menu {
+    overflow: hidden;
+    list-style: none;
+    font-size: 19px;
+    color: #333333;
+    padding: 0;
+    display: flex;
+    width: 1200px;
+    margin: 0 auto;
+    justify-content: flex-start;
+    .sf-menu-item {
+      cursor: pointer;
+      display: block;
+      letter-spacing: 1px;
+      font-weight: 500;
+      float: left;
+      height: 50px;
+      line-height: 50px;
+      background: linear-gradient(180deg, #21ADF3 0%, #018FD6 100%);
+      padding: 0 25px;
+      color: #FFFFFF;
+      width: 149px;
+      text-align: center;
+    }
+    .sf-menu-item:not(:last-of-type){
+      border-right: 1px solid rgba(255, 255, 255, 0.7490196078431373);
+    }
+    .sf-menu-item.sf-menu-item__active {
+      background: #FFFFFF;
+      color: #018FD6;
+      font-weight: bold;
+      border-top: 3px solid rgba(220, 25, 25, 1);
+    }
+  }
+}
+</style>

src/views/homePage/index.vue

 <template>
   <div>
     <HomeSearch />
+    <nav-list :list="navList" />
+    <div class="home-content">
+      首页
+    </div>
   </div>
 </template>
 
 <script>
 import HomeSearch from './components/searchHome/index'
+import NavList from './components/NavList/index'
 export default {
   name: 'Index',
   components: {
-    HomeSearch
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
   }
 }
 </script>

src/views/tool/index.vue

 <template>
-  <div>工具</div>
+  <div>
+    <HomeSearch />
+    <nav-list :list="navList" :current-menu="'/tool/index'"/>
+    <div class="policyDirect-content">
+      工具
+    </div>
+  </div>
 </template>
 
 <script>
+import HomeSearch from '@/views/homePage/components/searchHome/index'
+import NavList from '@/views/homePage/components/NavList/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch,
+    NavList
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    navList() {
+      const navArray = [
+        { menuName: '首页', path: '/homePage/index', query: { }},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: { }},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: { }},
+        { menuName: '一键办事', path: '/OneClickService/index', query: { }},
+        { menuName: '活动信息', path: '/activityInformation/index', query: { }},
+        { menuName: '工具', path: '/tool/index', query: { }}
+      ]
+      return navArray
+    }
+  }
 }
 </script>