Merge branch 'master' of http://git.cc-lotus.info/count/webnew-count

src/layout/achievement/cooperation.vue

@@ -7,7 +7,7 @@
     <el-col>
       <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
         <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index"
-          ><span slot="title" @click="clickUrl(item.title)">{{ item.title }}</span></el-menu-item
+          ><span slot="title" @click="clickUrl(item.title, index)" :style="`color:${menuIndex == index ? color : ''}`">{{ item.title }}</span></el-menu-item
         >
       </el-menu>
     </el-col>
@@ -20,24 +20,34 @@ export default {
   props: {},
   components: {},
   data: () => ({
+    menuIndex: '',
+    color: 'rgb(5,73,130)',
     src: require('@/assets/achieveCenter.png'),
     liebiaoList: [{ title: '超算联盟' }, { title: '国家网格' }, { title: '教学中心' }, { title: '创业基地' }, { title: '软件中心' }],
   }),
   created() {},
   computed: {},
   methods: {
-    clickUrl(title) {
+    clickUrl(title, index) {
       if (title == '超算联盟') {
-        this.$router.push({ path: '/achievement/supercomputing', query: { name: '超算联盟' } });
+        this.menuIndex = index;
+
+        this.color = 'red';
       } else if (title == '国家网格') {
-        this.$router.push({ path: '/achievement/country', query: { name: '国家网格' } });
+        this.menuIndex = index;
+        this.color = 'red';
       } else if (title == '教学中心') {
-        this.$router.push({ path: '/achievement/teaching', query: { name: '教学中心' } });
+        this.menuIndex = index;
+        this.color = 'red';
       } else if (title == '创业基地') {
-        this.$router.push({ path: '/achievement/entrepreneurship', query: { name: '创业基地' } });
+        this.menuIndex = index;
+        this.color = 'red';
       } else if (title == '软件中心') {
-        this.$router.push({ path: '/achievement/software', query: { name: '软件中心' } });
+        this.menuIndex = index;
+        this.color = 'red';
       }
+
+      this.$emit('leftdaohang', title);
     },
     handleOpen(key, keyPath) {
       console.log(key, keyPath);

src/layout/achievement/seminar.vue

@@ -7,7 +7,7 @@
     <el-col>
       <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
         <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index"
-          ><span slot="title" @click="clickUrl(item.title)">{{ item.title }}</span></el-menu-item
+          ><span slot="title" @click="clickUrl(item.title, index)" :style="`color:${menuIndex == index ? color : ''}`">{{ item.title }}</span></el-menu-item
         >
       </el-menu>
     </el-col>
@@ -20,23 +20,25 @@ export default {
   props: {},
   components: {},
   data: () => ({
+    menuIndex: '0',
+    color: 'red',
     src: require('@/assets/achieveCenter.png'),
     liebiaoList: [{ title: '平台建设' }, { title: '项目成果' }, { title: '知识产权' }, { title: '科技支撑' }],
   }),
   created() {},
   computed: {},
   methods: {
-    clickUrl(title) {
-      console.log(title);
+    clickUrl(title, index) {
       if (title == '平台建设') {
-        this.$router.push({ path: '/achievement/index', query: { name: '平台建设' } });
+        this.menuIndex = index;
       } else if (title == '项目成果') {
-        this.$router.push({ path: '/achievement/project', query: { name: '项目成果' } });
+        this.menuIndex = index;
       } else if (title == '知识产权') {
-        this.$router.push({ path: '/achievement/knowledge', query: { name: '知识产权' } });
+        this.menuIndex = index;
       } else if (title == '科技支撑') {
-        this.$router.push({ path: '/achievement/technology', query: { name: '科技支撑' } });
+        this.menuIndex = index;
       }
+      this.$emit('leftdaohang', title);
     },
     handleOpen(key, keyPath) {
       console.log(key, keyPath);

src/router/index.js

@@ -51,65 +51,12 @@ const routes = [
     meta: { title: '交流互动', subSite: true },
     component: () => import('../views/communication/index.vue'),
   },
-  //成果展示第一项
+  //成果展示
   {
     path: '/achievement/index',
     name: '平台建设',
     component: () => import('../views/achievement/index.vue'),
   },
-  //成果展示-项目成果
-  {
-    path: '/achievement/project',
-    name: '项目成果',
-    component: () => import('../views/achievement/project.vue'),
-  },
-  //成果展示-知识产权
-  {
-    path: '/achievement/knowledge',
-    name: '知识产权',
-    component: () => import('../views/achievement/knowledge.vue'),
-  },
-
-  //成果展示-科技支撑
-  {
-    path: '/achievement/technology',
-    name: '科技支撑',
-    component: () => import('../views/achievement/technology.vue'),
-  },
-
-  //成果展示-超算联盟
-  {
-    path: '/achievement/supercomputing',
-    name: '超算联盟',
-    component: () => import('../views/achievement/supercomputing.vue'),
-  },
-
-  //成果展示-国家网格
-  {
-    path: '/achievement/country',
-    name: '国家网格',
-    component: () => import('../views/achievement/country.vue'),
-  },
-
-  //成果展示-教学中心
-  {
-    path: '/achievement/teaching',
-    name: '教学中心',
-    component: () => import('../views/achievement/teaching.vue'),
-  },
-  //成果展示-创业基地
-  {
-    path: '/achievement/entrepreneurship',
-    name: '创业基地',
-    component: () => import('../views/achievement/entrepreneurship.vue'),
-  },
-
-  //成果展示-软件中心
-  {
-    path: '/achievement/software',
-    name: '软件中心',
-    component: () => import('../views/achievement/software.vue'),
-  },
 
   // 党建学苑
   {
@@ -117,6 +64,12 @@ const routes = [
     name: '党建学苑',
     component: () => import('../views/partisan/index.vue'),
   },
+  // 个人中心
+  {
+    path: '/pcenter/index',
+    name: '个人中心',
+    component: () => import('../views/pcenter/index.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/achievement/country.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <countryList :list="list" :total="total" @detailBtn="detailBtn"></countryList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <countryDetail :details="details"></countryDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import countryDetail from './parts/countryDetail.vue';
-import countryList from './parts/countryList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, countryList, cooperation, countryDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/entrepreneurship.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <entrepreneurshipList :list="list" :total="total" @detailBtn="detailBtn"></entrepreneurshipList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <entrepreneurshipDetail :details="details"></entrepreneurshipDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import entrepreneurshipDetail from './parts/entrepreneurshipDetail.vue';
-import entrepreneurshipList from './parts/entrepreneurshipList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, entrepreneurshipList, cooperation, entrepreneurshipDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/index.vue

@@ -14,10 +14,10 @@
           <div class="w_1200">
             <el-col :span="5" class="left">
               <el-col :span="24" class="leftone">
-                <seminar></seminar>
+                <seminar @leftdaohang="leftdaohang"></seminar>
               </el-col>
               <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
+                <cooperation @leftdaohang="leftdaohang"> </cooperation>
               </el-col>
             </el-col>
             <el-col :span="19" class="context">
@@ -28,11 +28,65 @@
                     <span>{{ columnName }}</span>
                   </el-col>
                   <el-col :span="24" class="list">
-                    <achievementsList :list="list" :total="total" @detailBtn="detailBtn"></achievementsList>
+                    <span v-if="columnName == '平台建设'">
+                      <achievementsList :list="list" :total="total" @detailBtn="detailBtn"></achievementsList>
+                    </span>
+                    <span v-else-if="columnName == '项目成果'">
+                      <projectList :list="list" :total="total" @detailBtn="detailBtn"></projectList>
+                    </span>
+                    <span v-else-if="columnName == '知识产权'">
+                      <knowledgeList :list="list" :total="total" @detailBtn="detailBtn"></knowledgeList>
+                    </span>
+                    <span v-else-if="columnName == '科技支撑'">
+                      <technologyList :list="list" :total="total" @detailBtn="detailBtn"></technologyList>
+                    </span>
+                    <span v-else-if="columnName == '超算联盟'">
+                      <supercomputingList :list="list" :total="total" @detailBtn="detailBtn"></supercomputingList>
+                    </span>
+                    <span v-else-if="columnName == '国家网格'">
+                      <countryList :list="list" :total="total" @detailBtn="detailBtn"></countryList>
+                    </span>
+                    <span v-else-if="columnName == '教学中心'">
+                      <teachingList :list="list" :total="total" @detailBtn="detailBtn"></teachingList>
+                    </span>
+                    <span v-else-if="columnName == '创业基地'">
+                      <entrepreneurshipList :list="list" :total="total" @detailBtn="detailBtn"></entrepreneurshipList>
+                    </span>
+                    <span v-else-if="columnName == '软件中心'">
+                      <softwareList :list="list" :total="total" @detailBtn="detailBtn"></softwareList>
+                    </span>
                   </el-col>
                 </span>
                 <span v-else>
-                  <achievementsDetail :details="details"></achievementsDetail>
+                  <achievementsDetail :details="details">
+                    <span v-if="columnName == '平台建设'">
+                      <achievementsDetail :details="details"></achievementsDetail>
+                    </span>
+                    <span v-else-if="columnName == '项目成果'">
+                      <projectDetail :details="details"></projectDetail>
+                    </span>
+                    <span v-else-if="columnName == '知识产权'">
+                      <knowledgeDetail :details="details"></knowledgeDetail>
+                    </span>
+                    <span v-else-if="columnName == '科技支撑'">
+                      <technologyDetail :details="details"></technologyDetail>
+                    </span>
+                    <span v-else-if="columnName == '超算联盟'">
+                      <supercomputingDetail :details="details"></supercomputingDetail>
+                    </span>
+                    <span v-else-if="columnName == '国家网格'">
+                      <countryDetail :details="details"></countryDetail>
+                    </span>
+                    <span v-else-if="columnName == '教学中心'">
+                      <teachingDetail :details="details"></teachingDetail>
+                    </span>
+                    <span v-else-if="columnName == '创业基地'">
+                      <entrepreneurshipDetail :details="details"></entrepreneurshipDetail>
+                    </span>
+                    <span v-else-if="columnName == '软件中心'">
+                      <softwareDetail :details="details"></softwareDetail>
+                    </span>
+                  </achievementsDetail>
                 </span>
               </el-col>
             </el-col>
@@ -53,14 +107,56 @@ import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
 import seminar from '@/layout/achievement/seminar.vue';
-import achievementsDetail from '@/layout/achievement/achievementsDetail.vue';
-import achievementsList from '@/layout/achievement/achievementsList.vue';
+import achievementsDetail from './parts/achievementsDetail.vue';
+import achievementsList from './parts/achievementsList.vue';
+import knowledgeDetail from './parts/knowledgeDetail.vue';
+import knowledgeList from './parts/knowledgeList.vue';
+import projectList from './parts/projectList.vue';
+import projectDetail from './parts/projectDetail.vue';
+import technologyList from './parts/technologyList.vue';
+import technologyDetail from './parts/technologyDetail.vue';
+import supercomputingList from './parts/supercomputingList.vue';
+import supercomputingDetail from './parts/supercomputingDetail.vue';
+import countryList from './parts/countryList.vue';
+import countryDetail from './parts/countryDetail.vue';
+
+import teachingList from './parts/teachingList.vue';
+import teachingDetail from './parts/teachingDetail.vue';
+
+import entrepreneurshipList from './parts/entrepreneurshipList.vue';
+import entrepreneurshipDetail from './parts/entrepreneurshipDetail.vue';
+import softwareList from './parts/softwareList.vue';
+import softwareDetail from './parts/softwareDetail.vue';
 import cooperation from '@/layout/achievement/cooperation.vue';
 
 export default {
   name: 'index',
   props: {},
-  components: { top, menus, foot, seminar, achievementsList, cooperation, achievementsDetail },
+  components: {
+    top,
+    menus,
+    foot,
+    seminar,
+    achievementsList,
+    cooperation,
+    achievementsDetail,
+    projectList,
+    projectDetail,
+    knowledgeList,
+    knowledgeDetail,
+    technologyList,
+    technologyDetail,
+    supercomputingList,
+    supercomputingDetail,
+    countryList,
+    countryDetail,
+    teachingList,
+    teachingDetail,
+    entrepreneurshipList,
+    entrepreneurshipDetail,
+    softwareList,
+    softwareDetail,
+  },
   data: () => ({
     displays: '0',
     columnName: '平台建设',
@@ -86,9 +182,15 @@ export default {
   created() {},
   computed: {},
   methods: {
-    async detailBtn() {
+    async detailBtn(id) {
+      console.log(id);
+
       this.$set(this, `displays`, 1);
     },
+    async leftdaohang(title) {
+      this.$set(this, `displays`, 0);
+      this.$set(this, `columnName`, title);
+    },
   },
 };
 </script>

src/views/achievement/knowledge.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <knowledgeList :list="list" :total="total" @detailBtn="detailBtn"></knowledgeList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <knowledgeDetail :details="details"></knowledgeDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import knowledgeDetail from './parts/knowledgeDetail.vue';
-import knowledgeList from './parts/knowledgeList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, knowledgeList, cooperation, knowledgeDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/parts/achievementsDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="achievementsDetail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <h3>{{ details.title }}</h3>
+        <div>
+          <span>文章来源:{{ details.source }}</span>
+          <span>时间:{{ details.date }}</span>
+        </div>
+        <p>{{ details.content }}</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'achievementsDetail',
+  props: {
+    details: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 20px 0;
+  h3 {
+    font-size: 24px;
+    color: #005293;
+    text-align: center;
+  }
+  div {
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    padding: 0 0 40px 0;
+    margin: 0 0 20px 0;
+    span {
+      color: #666666;
+      padding: 0 10px;
+    }
+  }
+}
+</style>

src/views/achievement/parts/achievementsList.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="newsList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="list" @click.native="detailBtn(item.id)" v-for="(item, index) in list" :key="index">
+          <span></span>
+          <span class="textOver">{{ item.title }}</span>
+          <span>{{ item.date }}</span>
+        </el-col>
+        <el-col :span="24" class="page">
+          <pagination :total="total"></pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import pagination from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'newsList',
+  props: {
+    list: null,
+    total: null,
+  },
+  components: {
+    pagination,
+  },
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    detailBtn(id) {
+      this.$emit('detailBtn', id);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  .list {
+    padding: 0 0 7px 0;
+
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 4px;
+      background: #ccc;
+      margin: 0px 10px 7px 0px;
+    }
+    span:nth-child(2) {
+      display: inline-block;
+      font-size: 16px;
+      color: #555555;
+      font-family: '微软雅黑';
+      width: 85%;
+      margin: 0 30px 0 0;
+    }
+    span:last-child {
+      display: inline-block;
+      width: 90px;
+      font-size: 16px;
+      color: #a8abb7;
+      font-family: '微软雅黑';
+      text-align: right;
+    }
+  }
+  .page {
+    height: 50px;
+  }
+}
+</style>

src/views/achievement/project.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <projectList :list="list" :total="total" @detailBtn="detailBtn"></projectList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <projectDetail :details="details"></projectDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import projectDetail from './parts/projectDetail.vue';
-import projectList from './parts/projectList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, projectList, cooperation, projectDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/software.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <softwareList :list="list" :total="total" @detailBtn="detailBtn"></softwareList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <softwareDetail :details="details"></softwareDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import softwareDetail from './parts/softwareDetail.vue';
-import softwareList from './parts/softwareList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, softwareList, cooperation, softwareDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/supercomputing.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <supercomputingList :list="list" :total="total" @detailBtn="detailBtn"></supercomputingList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <supercomputingDetail :details="details"></supercomputingDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import supercomputingDetail from './parts/supercomputingDetail.vue';
-import supercomputingList from './parts/supercomputingList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, supercomputingList, cooperation, supercomputingDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/teaching.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <teachingList :list="list" :total="total" @detailBtn="detailBtn"></teachingList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <teachingDetail :details="details"></teachingDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import teachingDetail from './parts/teachingDetail.vue';
-import teachingList from './parts/teachingList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, teachingList, cooperation, teachingDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/achievement/technology.vue

@@ -1,154 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
-          <top></top>
-        </el-col>
-        <el-col :span="24" class="menu">
-          <div class="w_1200">
-            <menus></menus>
-          </div>
-        </el-col>
-        <el-col :span="24" class="main">
-          <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="leftone">
-                <seminar></seminar>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                <cooperation> </cooperation>
-              </el-col>
-            </el-col>
-            <el-col :span="19" class="context">
-              <el-col :span="18" class="right">
-                <span v-if="displays == '0'">
-                  <el-col :span="24" class="one">
-                    <span></span>
-                    <span>{{ columnName }}</span>
-                  </el-col>
-                  <el-col :span="24" class="list">
-                    <technologyList :list="list" :total="total" @detailBtn="detailBtn"></technologyList>
-                  </el-col>
-                </span>
-                <span v-else>
-                  <technologyDetail :details="details"></technologyDetail>
-                </span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <div class="w_1200">
-            <foot></foot>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/common/top.vue';
-import menus from '@/layout/common/menus.vue';
-import foot from '@/layout/common/foot.vue';
-import seminar from '@/layout/achievement/seminar.vue';
-import technologyDetail from './parts/technologyDetail.vue';
-import technologyList from './parts/technologyList.vue';
-import cooperation from '@/layout/achievement/cooperation.vue';
-
-export default {
-  name: 'index',
-  props: {},
-  components: { top, menus, foot, seminar, technologyList, cooperation, technologyDetail },
-  data: () => ({
-    displays: '0',
-    columnName: '',
-    total: 1,
-    details: {},
-    list: [
-      {
-        title: '新标题',
-        date: '2020-02-02',
-      },
-      {
-        title: '16条数据',
-        date: '2020-02-02',
-      },
-    ],
-    details: {
-      title: '新信息标题',
-      source: '信息部',
-      date: '2020-02-02',
-      content: '信息内容',
-    },
-  }),
-  created() {
-    this.search();
-  },
-  computed: {
-    name() {
-      return this.$route.query.name;
-    },
-  },
-  methods: {
-    async detailBtn() {
-      this.$set(this, `displays`, 1);
-    },
-    async search() {
-      this.$set(this, `columnName`, this.name);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  min-height: 670px;
-  overflow: hidden;
-  margin: 10px 0;
-  .left {
-    margin: 0 10px 0 0;
-    .leftone {
-      background: #fff;
-    }
-    .lefttwo {
-      background-color: #fff;
-    }
-  }
-
-  .right {
-    width: 100%;
-    min-height: 600px;
-    background: #fff;
-    padding: 0 20px;
-    .one {
-      height: 35px;
-      margin: 20px 0;
-      border-bottom: 1px dashed #ccc;
-      span:first-child {
-        display: inline-block;
-        width: 4px;
-        height: 20px;
-        background: #005293;
-        margin: 0 10px -3px 0;
-      }
-      span:nth-child(2) {
-        font-size: 20px;
-        color: #005293;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .context {
-    width: 78%;
-    min-height: 670px;
-    background: #fff;
-  }
-}
-</style>

src/views/pcenter/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <top></top>
+        </el-col>
+        <el-col :span="24" class="main">
+          <div class="w_1200">
+            <el-col :span="5" class="left">
+              <el-col :span="24" class="top">
+                <i class="el-icon-s-unfold"></i>
+                <span>个人中心</span>
+              </el-col>
+              <el-col :span="24" class="menus">
+                <!-- <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
+                    {{ item.name }}
+                  </p>
+                </el-col> -->
+                <el-menu :default-active="num" @select="selectMenu" text-color="black" active-text-color="#044b79">
+                  <el-menu-item index="1">
+                    <template slot="title">
+                      <span>基本信息</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="2">
+                    <template slot="title">
+                      <span>需求管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="3">
+                    <template slot="title">
+                      <span>信息管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="4">
+                    <template slot="title">
+                      <span>人员管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="5">
+                    <template slot="title">
+                      <span>部门管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="6">
+                    <template slot="title">
+                      <span>职务管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="7">
+                    <template slot="title">
+                      <span>修改密码</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="8">
+                    <template slot="title">
+                      <span>退出登录</span>
+                    </template>
+                  </el-menu-item>
+                </el-menu>
+              </el-col>
+            </el-col>
+            <el-col :span="18" class="right">
+              <span v-if="columnName == '基本信息'">
+                基本信息
+              </span>
+              <span v-else-if="columnName == '需求管理'">
+                需求管理
+              </span>
+              <span v-else-if="columnName == '信息管理'">
+                信息管理
+              </span>
+              <span v-else-if="columnName == '人员管理'">
+                人员管理
+              </span>
+              <span v-else-if="columnName == '部门管理'">
+                部门管理
+              </span>
+              <span v-else-if="columnName == '职务管理'">
+                职务管理
+              </span>
+              <span v-else-if="columnName == '修改密码'">
+                修改密码
+              </span>
+              <span v-else-if="columnName == '退出登录'">
+                退出登录
+              </span>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <div class="w_1200">
+            <foot></foot>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/common/top.vue';
+import foot from '@/layout/common/foot.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    top,
+    foot,
+  },
+  data: function() {
+    return {
+      columnName: '基本信息',
+      num: '1',
+    };
+  },
+  created() {
+    this.selectMenu();
+  },
+  methods: {
+    // 选择栏目
+    selectMenu(key) {
+      if (key == 1) {
+        this.columnName = '基本信息';
+        console.log(this.columnName);
+      } else if (key == 2) {
+        this.columnName = '需求管理';
+      } else if (key == 3) {
+        this.columnName = '信息管理';
+      } else if (key == 4) {
+        this.columnName = '人员管理';
+      } else if (key == 5) {
+        this.columnName = '部门管理';
+      } else if (key == 6) {
+        this.columnName = '职务管理';
+      } else if (key == 7) {
+        this.columnName = '修改密码';
+      } else if (key == 8) {
+        this.columnName = '退出登录';
+      }
+    },
+    // 点击选择菜单
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(5,73,130)';
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.style {
+  .menu {
+    height: 70px;
+    margin: 0 0 10px 0;
+  }
+  .main {
+    min-height: 600px;
+    margin: 0 0 10px 0;
+    .left {
+      min-height: 600px;
+      background: #fff;
+      margin: 0 10px 0 0;
+      .top {
+        height: 60px;
+        line-height: 60px;
+        background-color: #054982;
+        color: #fff;
+        font-size: 25px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+      }
+      /deep/.el-menu-item {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border-bottom: 1px solid #ccc;
+        span {
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+    }
+    .right {
+      width: 78%;
+      min-height: 600px;
+      background: #fff;
+    }
+  }
+  .foot {
+    height: 135px;
+  }
+}
+</style>

src/views/service/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index">
+  <div id="detail">
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="top">
@@ -12,7 +12,45 @@
         </el-col>
         <el-col :span="24" class="main">
           <div class="w_1200">
-            <serviceList></serviceList>
+            <el-col :span="5" class="left">
+              <el-col :span="24" class="top">
+                <i class="el-icon-s-unfold"></i>
+                <span>计算服务</span>
+              </el-col>
+              <el-col :span="24" class="menus">
+                <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
+                    {{ item.name }}
+                  </p>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="18" class="right">
+              <span v-if="columnName == '资源介绍'">
+                资源介绍
+              </span>
+              <span v-else-if="columnName == '账号申请'">
+                账号申请
+              </span>
+              <span v-else-if="columnName == '计算登录'">
+                计算登录
+              </span>
+              <span v-else-if="columnName == '应用领域'">
+                应用领域
+              </span>
+              <span v-else-if="columnName == '应用案例'">
+                应用案例
+              </span>
+              <span v-else-if="columnName == '运行动态'">
+                运行动态
+              </span>
+              <span v-else-if="columnName == '超算讲堂'">
+                超算讲堂
+              </span>
+              <span v-else-if="columnName == 'AI社区'">
+                AI社区
+              </span>
+            </el-col>
           </div>
         </el-col>
         <el-col :span="24" class="foot">
@@ -29,24 +67,84 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
-import serviceList from '@/layout/service/serviceList.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'index',
+  name: 'detail',
   props: {},
   components: {
     top,
     menus,
     foot,
-    serviceList, //服务列表
   },
   data: function() {
-    return {};
+    return {
+      menuList: [
+        { name: '资源介绍' },
+        { name: '账号申请' },
+        { name: '计算登录' },
+        { name: '应用领域' },
+        { name: '应用案例' },
+        { name: '运行动态' },
+        { name: '超算讲堂' },
+        { name: 'AI社区' },
+      ],
+      menuColor: 'rgb(5,73,130)',
+      menuIndex: '0',
+      columnName: '',
+    };
+  },
+  created() {
+    this.changeColumn();
+  },
+  methods: {
+    // 选择栏目
+    changeColumn() {
+      if (this.col_name == '资源介绍') {
+        this.menuIndex = 0;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '账号申请') {
+        this.menuIndex = 1;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '计算登录') {
+        this.menuIndex = 2;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '应用领域') {
+        this.menuIndex = 3;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '应用案例') {
+        this.menuIndex = 4;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '运行动态') {
+        this.menuIndex = 5;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '超算讲堂') {
+        this.menuIndex = 6;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == 'AI社区') {
+        this.menuIndex = 7;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      }
+    },
+    // 点击选择菜单
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(5,73,130)';
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
+    col_name() {
+      return this.$route.query.title;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -68,8 +166,38 @@ export default {
     margin: 0 0 10px 0;
   }
   .main {
-    // min-height: 600px;
+    min-height: 600px;
     margin: 0 0 10px 0;
+    .left {
+      min-height: 600px;
+      background: #fff;
+      margin: 0 10px 0 0;
+      .top {
+        height: 60px;
+        line-height: 60px;
+        background-color: #054982;
+        color: #fff;
+        font-size: 25px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+      }
+      .menuList {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border-bottom: 1px solid #ccc;
+        p {
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+    }
+    .right {
+      width: 78%;
+      min-height: 600px;
+      background: #fff;
+    }
   }
   .foot {
     height: 135px;