gengxin

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

@@ -39,65 +39,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'),
-  },
 
   // 党建学苑
   {

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>