更新

src/router/index.js

@@ -51,6 +51,15 @@ const routes = [
     meta: { title: '交流互动', subSite: true },
     component: () => import('../views/communication/index.vue'),
   },
+
+  //交流互动列表详情
+
+  {
+    path: '/communication/list',
+    meta: { title: '交流互动列表详情', subSite: true },
+    component: () => import('../views/communication/list.vue'),
+  },
+
   //成果展示
   {
     path: '/achievement/index',

src/views/communication/list.vue

@@ -0,0 +1,260 @@
+<template>
+  <div id="listDetail">
+    <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="top">
+                <i class="el-icon-s-unfold"></i>
+                <span>交流互动</span>
+              </el-col>
+              <el-col :span="24" class="menu">
+                <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="displays == '0'">
+                <el-col :span="24" class="one">
+                  <span></span>
+                  <span>{{ columnName }}</span>
+                </el-col>
+                <el-col :span="24" class="list">
+                  <span v-if="columnName == '专题研讨'">
+                    <topicList :list="list" :total="total" @detailBtn="detailBtn"></topicList>
+                  </span>
+
+                  <span v-else-if="columnName == '技术问答'">
+                    <technologyList :list="list" :total="total" @detailBtn="detailBtn"></technologyList>
+                  </span>
+                  <span v-else-if="columnName == '行业研究'">
+                    <industryList :list="list" :total="total" @detailBtn="detailBtn"></industryList>
+                  </span>
+                  <span v-else-if="columnName == '科技培训'">
+                    <scienceList :list="list" :total="total" @detailBtn="detailBtn"></scienceList>
+                  </span>
+                </el-col>
+              </span>
+              <span v-else>
+                <span v-if="columnName == '专题研讨'">
+                  <topicDetail :details="details"></topicDetail>
+                </span>
+                <span v-else-if="columnName == '技术问答'">
+                  <technologyDetail :details="details"></technologyDetail>
+                </span>
+                <span v-else-if="columnName == '行业研究'">
+                  <industryDetail :details="details"></industryDetail>
+                </span>
+                <span v-else-if="columnName == '科技培训'">
+                  <scienceDetail :details="details"></scienceDetail>
+                </span>
+              </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 menus from '@/layout/common/menus.vue';
+import foot from '@/layout/common/foot.vue';
+
+import technologyList from './parts/technologyList.vue';
+import technologyDetail from './parts/technologyDetail.vue';
+import industryList from './parts/industryList.vue';
+import industryDetail from './parts/industryDetail.vue';
+import topicList from './parts/topicList.vue';
+import topicDetail from './parts/topicDetail.vue';
+import scienceList from './parts/scienceList.vue';
+import scienceDetail from './parts/scienceDetail.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'listDetail',
+  props: {},
+  components: {
+    top,
+    menus,
+    foot,
+    topicList,
+    topicDetail,
+    technologyDetail,
+    technologyList,
+    industryList,
+    industryDetail,
+    scienceList,
+    scienceDetail,
+  },
+  data: function() {
+    return {
+      menuList: [{ name: '专题研讨' }, { name: '技术问答' }, { name: '行业研究' }, { name: '科技培训' }],
+      menuColor: 'rgb(5,73,130)',
+      menuIndex: '0',
+      columnName: '',
+      displays: '0',
+      // 列表
+      list: [
+        {
+          title: '标题',
+          date: '2020-02-02',
+        },
+        {
+          title: '十四数据',
+          date: '2020-02-02',
+        },
+      ],
+      // 总数
+      total: 10,
+      // 详情
+      details: {
+        title: '信息标题',
+        source: '信息部',
+        date: '2020-02-02',
+        content: '信息内容',
+      },
+    };
+  },
+  created() {
+    this.changeColumn();
+  },
+  methods: {
+    // 选择栏目
+    changeColumn() {
+      if (this.col_name == '专题研讨') {
+        this.menuIndex = 0;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+        this.$set(this, `displays`, this.display);
+      } else if (this.col_name == '技术问答') {
+        this.menuIndex = 1;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+        this.$set(this, `displays`, this.display);
+      } else if (this.col_name == '行业研究') {
+        this.menuIndex = 2;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+        this.$set(this, `displays`, this.display);
+      } else if (this.col_name == '科技培训') {
+        this.menuIndex = 3;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+        this.$set(this, `displays`, this.display);
+      }
+    },
+    // 点击选择菜单
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(5,73,130)';
+      this.$set(this, `displays`, 0);
+    },
+    // 点击详情
+    detailBtn(id) {
+      this.$set(this, `displays`, 1);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    display() {
+      return this.$route.query.display;
+    },
+    col_name() {
+      return this.$route.query.col_name;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  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;
+      }
+      .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;
+      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;
+        }
+      }
+    }
+  }
+  .foot {
+    height: 135px;
+  }
+}
+</style>

src/views/communication/parts/industryDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="newsDetail">
+    <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: 'newsDetail',
+  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/communication/parts/industryList.vue

@@ -0,0 +1,83 @@
+<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/communication/parts/right.vue

@@ -12,13 +12,13 @@
                   class="zhuantiList"
                   v-for="(item, index) in ztytList"
                   :key="index"
-                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                  @click="$router.push({ path: '/communication/list', query: { col_name: '专题研讨', id: 'id', display: '1' } })"
                 >
                   <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
                   <el-col :span="4" class="date textOver">{{ item.date }}</el-col>
                 </li>
               </ul>
-              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="morezt()">查看更多</el-link></el-col>
             </el-col>
           </el-tab-pane>
           <el-tab-pane>
@@ -30,13 +30,13 @@
                   class="zhuantiList"
                   v-for="(item, index) in jswdList"
                   :key="index"
-                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                  @click="$router.push({ path: '/communication/list', query: { col_name: '技术问答', id: 'id', display: '1' } })"
                 >
                   <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
                   <el-col :span="4" class="date textOver">{{ item.date }}</el-col>
                 </li>
               </ul>
-              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="morejishu()">查看更多</el-link></el-col>
             </el-col>
           </el-tab-pane>
           <el-tab-pane>
@@ -48,13 +48,13 @@
                   class="zhuantiList"
                   v-for="(item, index) in hyyjList"
                   :key="index"
-                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                  @click="$router.push({ path: '/communication/list', query: { col_name: '行业研究', id: 'id', display: '1' } })"
                 >
                   <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
                   <el-col :span="4" class="date textOver">{{ item.date }}</el-col>
                 </li>
               </ul>
-              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="morehangye()">查看更多</el-link></el-col>
             </el-col>
           </el-tab-pane>
           <el-tab-pane>
@@ -65,13 +65,13 @@
                   class="zhuantiList"
                   v-for="(item, index) in kjpxList"
                   :key="index"
-                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                  @click="$router.push({ path: '/communication/list', query: { col_name: '科技培训', id: 'id', display: '1' } })"
                 >
                   <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
                   <el-col :span="4" class="date textOver">{{ item.date }}</el-col>
                 </li>
               </ul>
-              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="morekeji()">查看更多</el-link></el-col>
             </el-col>
           </el-tab-pane>
         </el-tabs>
@@ -94,8 +94,18 @@ export default {
   created() {},
   computed: {},
   methods: {
-    moreClick() {
-      this.$router.push({ path: '/service/servicelist' });
+    morezt() {
+      this.$router.push({ path: '/communication/list', query: { col_name: '专题研讨', display: '0' } });
+    },
+
+    morejishu() {
+      this.$router.push({ path: '/communication/list', query: { col_name: '技术问答', display: '0' } });
+    },
+    morehangye() {
+      this.$router.push({ path: '/communication/list', query: { col_name: '行业研究', display: '0' } });
+    },
+    morekeji() {
+      this.$router.push({ path: '/communication/list', query: { col_name: '科技培训', display: '0' } });
     },
   },
 };
@@ -146,8 +156,6 @@ li {
   color: #054982;
 }
 
-.list {
-}
 .list ul {
   min-height: 30px;
   max-height: 583px;

src/views/communication/parts/scienceDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="newsDetail">
+    <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: 'newsDetail',
+  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/communication/parts/scienceList.vue

@@ -0,0 +1,83 @@
+<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/communication/parts/technologyDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="newsDetail">
+    <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: 'newsDetail',
+  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/communication/parts/technologyList.vue

@@ -0,0 +1,83 @@
+<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/communication/parts/topicDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="newsDetail">
+    <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: 'newsDetail',
+  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/communication/parts/topicList.vue

@@ -0,0 +1,83 @@
+<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>