Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-test into master

src/views/market/marketlists.vue

@@ -278,6 +278,7 @@ export default {
         this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
       }
     },
+    // 名字查询
     searchData({ name, columnName }) {
       this.searchInfo({ columnName, name });
     },

src/views/technical/list copy.vue

@@ -0,0 +1,377 @@
+<template>
+  <div id="list">
+    <el-col :span="24" class="main">
+      <el-col :span="5" class="menu">
+        <el-image :src="squareImage"></el-image>
+        <span>Menu</span>
+        <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 :span="19" class="info" v-if="display == 1">
+        <el-col v-if="menuIndex == '0'" class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver" @click="clickzhuanti(item.id)">{{ item.title }}</span>
+              <span>{{ item.titlejj }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col v-if="menuIndex == '1'" class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in exportList" :key="index">
+            <p>
+              <span class="textOver" @click="clickjishu(item.id)">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col v-if="menuIndex == '2'" class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
+            <p>
+              <span class="textOver" @click="clickhangye(item.id)">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col v-if="menuIndex == '3'" class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver" @click="clickjiaoyu(item.id)">{{ item.title }}</span>
+              <span>{{ item.titlejj }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="pageSize"
+            layout="total,prev, pager, next, jumper"
+            :total="pageTotal"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col :span="19" v-if="display == 2" class="info">
+        <semDetail :newsid="newsid"></semDetail>
+      </el-col>
+      <el-col :span="19" v-if="display == 3" class="info">
+        <detail :newsid="newsid"></detail>
+      </el-col>
+      <el-col :span="19" v-if="display == 4" class="info">
+        <eduDetail :newsid="newsid"></eduDetail>
+      </el-col>
+      <el-col :span="19" v-if="display == 5" class="info">
+        <luyanDetail :newsid="newsid"></luyanDetail>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import semDetail from '@/layout/technical/semDetail.vue';
+import detail from '@/layout/technical/detail.vue';
+import eduDetail from '@/layout/technical/eduDetail.vue';
+import luyanDetail from '@/layout/technical/luyanDetail.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+export default {
+  name: 'list',
+  props: {},
+  components: {
+    semDetail,
+    detail,
+    eduDetail,
+    luyanDetail,
+  },
+  data: () => ({
+    newsid: '',
+    display: '1',
+    squareImage: require('@/assets/live/square_big.png'),
+    menuList: [{ name: '专家问诊' }, { name: '行业研究' }, { name: '嘉宾访谈' }, { name: '项目路演' }],
+    menuIndex: '0',
+    menuName: '专题研讨',
+    menuColor: 'rgb(254, 149, 14)',
+    currentPage: 1,
+    pageTotal: 0,
+    pageSize: 10,
+    limit: 10,
+    zhuantiList: [],
+    exportList: [],
+    hangyeList: [],
+    jiaoyuList: [],
+  }),
+  created() {
+    this.searchList();
+    this.search();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+
+  methods: {
+    ...news(['query']),
+    ...newsguidance({ danceQuery: 'query' }),
+    ...newsroadshow({ adshowQuery: 'query' }),
+    async searchList({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.$route.query.column_name == '专家问诊') {
+        this.changeMenu(this.$route.query.column_name, 0);
+      } else if (this.$route.query.column_name == '行业研究') {
+        this.changeMenu(this.$route.query.column_name, 1);
+      } else if (this.$route.query.column_name == '嘉宾访谈') {
+        this.changeMenu(this.$route.query.column_name, 2);
+      } else if (this.$route.query.column_name == '项目路演') {
+        this.changeMenu(this.$route.query.column_name, 3);
+      }
+    },
+    async changeMenu(name, index) {
+      this.menuIndex = index;
+      this.menuColor = 'rgb(254, 149, 14)';
+      this.menuName = name;
+      this.initList({ name });
+    },
+    async initList({ name, skip = 0, limit = 10, ...info } = {}) {
+      this.display = 1;
+      let res = [];
+      if (name == '专家问诊') {
+        this.pageSize = 5;
+        res = await this.query({ skip, limit, column_name: '专家问诊', ...info });
+        this.$set(this, `zhuantiList`, res.data);
+      } else if (name == '行业研究') {
+        this.pageSize = 10;
+        res = await this.query({ skip, limit, column_name: '行业研究', ...info });
+        this.$set(this, `exportList`, res.data);
+      } else if (name == '嘉宾访谈') {
+        this.pageSize = 10;
+        res = await this.danceQuery({ skip, limit, column_name: '嘉宾访谈', ...info });
+        this.$set(this, `hangyeList`, res.data);
+      } else if (name == '项目路演') {
+        this.pageSize = 5;
+        res = await this.adshowQuery({ skip, limit, column_name: '项目路演', ...info });
+        this.$set(this, `jiaoyuList`, res.data);
+      }
+      this.$set(this, `pageTotal`, res.total);
+    },
+    handleCurrentChange(val) {
+      const name = this.menuName;
+      if (name == '专题研讨' || name == '教育培训') {
+        this.limit = 5;
+      }
+      this.initList({ name: name, skip: (val - 1) * this.limit, limit: this.limit });
+    },
+    async search() {
+      this.display = this.$route.query.display;
+      this.newsid = this.id;
+    },
+    clickzhuanti(id) {
+      this.display = '3';
+      this.newsid = id;
+    },
+    clickjishu(id) {
+      this.display = '3';
+      this.newsid = id;
+    },
+    clickhangye(id) {
+      this.display = '4';
+      this.newsid = id;
+    },
+
+    clickjiaoyu(id) {
+      this.display = '5';
+      this.newsid = id;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  // width: 80%;
+  width: 1200px;
+  margin: 0 auto;
+  float: none;
+}
+.menu {
+  float: left;
+  min-height: 600px;
+  width: 20%;
+  background: no-repeat bottom right;
+  background-image: url(../../assets/live/menu_back.jpg);
+  margin: 30px 0;
+  padding: 10px 0 0 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px #bbbaba;
+}
+.menu .el-image {
+  width: 30px;
+  display: inline-table;
+  margin: 10px 5px;
+}
+.menu span {
+  font-size: 24px;
+  color: #92959a;
+  font-weight: 600;
+  margin-left: 3px;
+  position: relative;
+  top: 10px;
+}
+.menuList p {
+  line-height: 60px;
+  font-size: 18px;
+  cursor: pointer;
+  border-bottom: 1px solid #2d64b3;
+  color: #044b79;
+  font-weight: 600;
+}
+.info {
+  width: 77%;
+  float: right;
+  margin: 30px 0 30px 2px;
+  min-height: 600px;
+  box-shadow: 0 0 10px #2d64b3;
+  overflow: hidden;
+  right: 0px;
+  background: #ffffff;
+}
+.leftInfo {
+  height: 500px;
+  overflow: hidden;
+}
+.leftTop {
+  font-size: 18px;
+  width: 96%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px;
+  font-weight: 600;
+  color: #22529a;
+}
+.infoLeftList {
+  float: left;
+  width: 95%;
+  border-bottom: 1px dashed #ccc;
+  padding: 10px 0 10px 10px;
+  height: 87px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList:hover p:last-child span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+  cursor: pointer;
+}
+.infoLeftList p:first-child {
+  float: left;
+  width: 20%;
+  font-size: 15px;
+  background: #044b79;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  padding: 4px 0px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList p:last-child {
+  float: right;
+  width: 70%;
+  padding: 0 0 0 10px;
+}
+.infoLeftList p:last-child span:first-child {
+  float: left;
+  width: 90%;
+  font-size: 18px;
+}
+.infoLeftList p:last-child span:last-child {
+  float: left;
+  width: 90%;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 5px 0 0 0;
+  color: #666;
+}
+.page {
+  text-align: center;
+  margin: 10px 0;
+}
+.infoRightList {
+  float: left;
+  width: 95%;
+  padding: 7px 0;
+  margin: 0 0 0 5px;
+}
+.infoRightList:nth-child(6) {
+  border-bottom: 1px solid #ccc;
+  padding: 0 0 17px 0;
+}
+.infoRightList:nth-child(7) {
+  padding: 15px 0 0 0;
+}
+.infoRightList:nth-child(11) {
+  border-bottom: 1px solid #ccc;
+  padding: 0 0 15px 0;
+}
+.infoRightList:hover p span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+  cursor: pointer;
+}
+.infoRightList p {
+  font-size: 18px;
+}
+.infoRightList p span:first-child {
+  display: inline-block;
+  width: 70%;
+  margin: 0 20px 0 10px;
+}
+.infoRightList p span:last-child {
+  display: inline-block;
+  width: 21%;
+  text-align: center;
+  font-size: 16px;
+}
+</style>

src/views/technical/list.vue

@@ -1,377 +1,195 @@
 <template>
   <div id="list">
-    <el-col :span="24" class="main">
-      <el-col :span="5" class="menu">
-        <el-image :src="squareImage"></el-image>
-        <span>Menu</span>
-        <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 :span="19" class="info" v-if="display == 1">
-        <el-col v-if="menuIndex == '0'" class="leftInfo">
-          <el-col :span="24" class="leftTop">
-            <span>|</span> <span>{{ menuName }}</span>
-          </el-col>
-          <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
-            <p>{{ item.publish_time }}</p>
-            <p>
-              <span class="textOver" @click="clickzhuanti(item.id)">{{ item.title }}</span>
-              <span>{{ item.titlejj }}</span>
-            </p>
-          </el-col>
-        </el-col>
-        <el-col v-if="menuIndex == '1'" class="leftInfo">
-          <el-col :span="24" class="leftTop">
-            <span>|</span> <span>{{ menuName }}</span>
-          </el-col>
-          <el-col class="infoRightList" :span="24" v-for="(item, index) in exportList" :key="index">
-            <p>
-              <span class="textOver" @click="clickjishu(item.id)">{{ item.title }}</span
-              ><span class="textOver">{{ item.publish_time }}</span>
-            </p>
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="menu">
+            <el-image :src="squareImage"></el-image>
+            <span class="menuTitle">Menu</span>
+            <el-col :span="24" class="menuList" 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 v-if="menuIndex == '2'" class="leftInfo">
-          <el-col :span="24" class="leftTop">
-            <span>|</span> <span>{{ menuName }}</span>
+          <el-col :span="18" class="listInfo">
+            <span v-if="display == 'list'">
+              <span v-if="column_name == '专家问诊'">
+                专家问诊
+              </span>
+              <span v-else-if="column_name == '行业研究'">
+                行业研究
+              </span>
+              <span v-else-if="column_name == '嘉宾访谈'">
+                嘉宾访谈
+              </span>
+              <span v-else-if="column_name == '项目路演'">
+                项目路演
+              </span>
+            </span>
+            <span v-else>
+              <span v-if="column_name == '专家问诊'">
+                <el-col :span="24" style="text-align:right;">
+                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
+                </el-col>
+                <el-col :span="24">
+                  专家问诊
+                </el-col>
+              </span>
+              <span v-else-if="column_name == '行业研究'">
+                <el-col :span="24" style="text-align:right;">
+                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
+                </el-col>
+                <el-col :span="24">
+                  行业研究
+                </el-col>
+              </span>
+              <span v-else-if="column_name == '嘉宾访谈'">
+                <el-col :span="24" style="text-align:right;">
+                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
+                </el-col>
+                <el-col :span="24">
+                  嘉宾访谈
+                </el-col>
+              </span>
+              <span v-else-if="column_name == '项目路演'">
+                <el-col :span="24" style="text-align:right;">
+                  <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
+                </el-col>
+                <el-col :span="24">
+                  项目路演
+                </el-col>
+              </span>
+            </span>
           </el-col>
-          <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
-            <p>
-              <span class="textOver" @click="clickhangye(item.id)">{{ item.title }}</span
-              ><span class="textOver">{{ item.publish_time }}</span>
-            </p>
-          </el-col>
-        </el-col>
-        <el-col v-if="menuIndex == '3'" class="leftInfo">
-          <el-col :span="24" class="leftTop">
-            <span>|</span> <span>{{ menuName }}</span>
-          </el-col>
-          <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
-            <p>{{ item.publish_time }}</p>
-            <p>
-              <span class="textOver" @click="clickjiaoyu(item.id)">{{ item.title }}</span>
-              <span>{{ item.titlejj }}</span>
-            </p>
-          </el-col>
-        </el-col>
-        <el-col class="page">
-          <el-pagination
-            background
-            @current-change="handleCurrentChange"
-            :current-page.sync="currentPage"
-            :page-size="pageSize"
-            layout="total,prev, pager, next, jumper"
-            :total="pageTotal"
-          >
-          </el-pagination>
-        </el-col>
-      </el-col>
-      <el-col :span="19" v-if="display == 2" class="info">
-        <semDetail :newsid="newsid"></semDetail>
+        </div>
       </el-col>
-      <el-col :span="19" v-if="display == 3" class="info">
-        <detail :newsid="newsid"></detail>
-      </el-col>
-      <el-col :span="19" v-if="display == 4" class="info">
-        <eduDetail :newsid="newsid"></eduDetail>
-      </el-col>
-      <el-col :span="19" v-if="display == 5" class="info">
-        <luyanDetail :newsid="newsid"></luyanDetail>
-      </el-col>
-    </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import _ from 'lodash';
-import semDetail from '@/layout/technical/semDetail.vue';
-import detail from '@/layout/technical/detail.vue';
-import eduDetail from '@/layout/technical/eduDetail.vue';
-import luyanDetail from '@/layout/technical/luyanDetail.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: news } = createNamespacedHelpers('news');
-const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
-const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
 export default {
   name: 'list',
   props: {},
-  components: {
-    semDetail,
-    detail,
-    eduDetail,
-    luyanDetail,
+  components: {},
+  data: function() {
+    return {
+      squareImage: require('@/assets/live/square_big.png'),
+      // 菜单
+      menuList: [{ name: '专家问诊' }, { name: '行业研究' }, { name: '嘉宾访谈' }, { name: '项目路演' }],
+      menuIndex: '0',
+      menuColor: 'rgb(254, 149, 14)',
+      // 右侧显示
+      // list:列表，detail:详情
+      display: 'list',
+      // 右侧头部栏目
+      column_name: '专家问诊',
+    };
   },
-  data: () => ({
-    newsid: '',
-    display: '1',
-    squareImage: require('@/assets/live/square_big.png'),
-    menuList: [{ name: '专家问诊' }, { name: '行业研究' }, { name: '嘉宾访谈' }, { name: '项目路演' }],
-    menuIndex: '0',
-    menuName: '专题研讨',
-    menuColor: 'rgb(254, 149, 14)',
-    currentPage: 1,
-    pageTotal: 0,
-    pageSize: 10,
-    limit: 10,
-    zhuantiList: [],
-    exportList: [],
-    hangyeList: [],
-    jiaoyuList: [],
-  }),
   created() {
-    this.searchList();
-    this.search();
-  },
-  computed: {
-    id() {
-      return this.$route.query.id;
-    },
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
+    this.searchColumn();
   },
-
   methods: {
-    ...news(['query']),
-    ...newsguidance({ danceQuery: 'query' }),
-    ...newsroadshow({ adshowQuery: 'query' }),
-    async searchList({ skip = 0, limit = 10, ...info } = {}) {
-      if (this.$route.query.column_name == '专家问诊') {
-        this.changeMenu(this.$route.query.column_name, 0);
-      } else if (this.$route.query.column_name == '行业研究') {
-        this.changeMenu(this.$route.query.column_name, 1);
-      } else if (this.$route.query.column_name == '嘉宾访谈') {
-        this.changeMenu(this.$route.query.column_name, 2);
-      } else if (this.$route.query.column_name == '项目路演') {
-        this.changeMenu(this.$route.query.column_name, 3);
+    // 查询栏目，列表，详情
+    async searchColumn() {
+      if (this.type == 1) {
+        this.changeMenu(this.columnName, 0);
+      } else if (this.type == 2) {
+        this.changeMenu(this.columnName, 1);
+      } else if (this.type == 3) {
+        this.changeMenu(this.columnName, 2);
+      } else if (this.type == 4) {
+        this.changeMenu(this.columnName, 3);
+      }
+      if (this.id) {
+        this.display = 'detail';
+        // 查看详情
+        this.searchDetail(this.columnName, this.id);
+      } else {
+        this.display = 'list';
       }
     },
-    async changeMenu(name, index) {
+    // 选择菜单
+    changeMenu(columnName, index) {
+      this.display = 'list';
+      this.column_name = columnName;
       this.menuIndex = index;
       this.menuColor = 'rgb(254, 149, 14)';
-      this.menuName = name;
-      this.initList({ name });
+      this.searchInfo({ columnName });
     },
-    async initList({ name, skip = 0, limit = 10, ...info } = {}) {
-      this.display = 1;
-      let res = [];
-      if (name == '专家问诊') {
-        this.pageSize = 5;
-        res = await this.query({ skip, limit, column_name: '专家问诊', ...info });
-        this.$set(this, `zhuantiList`, res.data);
-      } else if (name == '行业研究') {
-        this.pageSize = 10;
-        res = await this.query({ skip, limit, column_name: '行业研究', ...info });
-        this.$set(this, `exportList`, res.data);
-      } else if (name == '嘉宾访谈') {
-        this.pageSize = 10;
-        res = await this.danceQuery({ skip, limit, column_name: '嘉宾访谈', ...info });
-        this.$set(this, `hangyeList`, res.data);
-      } else if (name == '项目路演') {
-        this.pageSize = 5;
-        res = await this.adshowQuery({ skip, limit, column_name: '项目路演', ...info });
-        this.$set(this, `jiaoyuList`, res.data);
-      }
-      this.$set(this, `pageTotal`, res.total);
+    // 查看列表
+    async searchInfo({ skip = 0, columnName, name, ...info } = {}) {},
+    // 查看详情
+    async searchDetail(columnName, id) {},
+    // 点击查看详情
+    clickDetail({ column_name, id }) {
+      this.$set(this, `column_name`, column_name);
+      this.display = 'detail';
+      this.searchDetail(column_name, id);
     },
-    handleCurrentChange(val) {
-      const name = this.menuName;
-      if (name == '专题研讨' || name == '教育培训') {
-        this.limit = 5;
-      }
-      this.initList({ name: name, skip: (val - 1) * this.limit, limit: this.limit });
-    },
-    async search() {
-      this.display = this.$route.query.display;
-      this.newsid = this.id;
-    },
-    clickzhuanti(id) {
-      this.display = '3';
-      this.newsid = id;
-    },
-    clickjishu(id) {
-      this.display = '3';
-      this.newsid = id;
+  },
+  computed: {
+    ...mapState(['user']),
+    type() {
+      return this.$route.query.type;
     },
-    clickhangye(id) {
-      this.display = '4';
-      this.newsid = id;
+    columnName() {
+      return this.$route.query.column_name;
     },
-
-    clickjiaoyu(id) {
-      this.display = '5';
-      this.newsid = id;
+    id() {
+      return this.$route.query.id;
     },
   },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.main {
-  // width: 80%;
+.w_1200 {
   width: 1200px;
   margin: 0 auto;
-  float: none;
-}
-.menu {
-  float: left;
-  min-height: 600px;
-  width: 20%;
-  background: no-repeat bottom right;
-  background-image: url(../../assets/live/menu_back.jpg);
-  margin: 30px 0;
-  padding: 10px 0 0 10px;
-  box-sizing: border-box;
-  box-shadow: 0 0 10px #bbbaba;
-}
-.menu .el-image {
-  width: 30px;
-  display: inline-table;
-  margin: 10px 5px;
-}
-.menu span {
-  font-size: 24px;
-  color: #92959a;
-  font-weight: 600;
-  margin-left: 3px;
-  position: relative;
-  top: 10px;
-}
-.menuList p {
-  line-height: 60px;
-  font-size: 18px;
-  cursor: pointer;
-  border-bottom: 1px solid #2d64b3;
-  color: #044b79;
-  font-weight: 600;
-}
-.info {
-  width: 77%;
-  float: right;
-  margin: 30px 0 30px 2px;
-  min-height: 600px;
-  box-shadow: 0 0 10px #2d64b3;
-  overflow: hidden;
-  right: 0px;
-  background: #ffffff;
-}
-.leftInfo {
-  height: 500px;
-  overflow: hidden;
-}
-.leftTop {
-  font-size: 18px;
-  width: 96%;
-  height: 41px;
-  line-height: 35px;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  bottom: 1px;
-  margin: 10px;
-  font-weight: 600;
-  color: #22529a;
-}
-.infoLeftList {
-  float: left;
-  width: 95%;
-  border-bottom: 1px dashed #ccc;
-  padding: 10px 0 10px 10px;
-  height: 87px;
-  margin: 0 0 0 5px;
-}
-.infoLeftList:hover p:last-child span:first-child {
-  -webkit-transform: translateY(-3px);
-  -ms-transform: translateY(-3px);
-  transform: translateY(-3px);
-  -webkit-box-shadow: 0 0 6px #999;
-  box-shadow: 0 0 6px #999;
-  -webkit-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-  color: #005293;
-  cursor: pointer;
 }
-.infoLeftList p:first-child {
-  float: left;
-  width: 20%;
-  font-size: 15px;
-  background: #044b79;
-  text-align: center;
-  color: #fff;
-  font-weight: bold;
-  padding: 4px 0px;
-  margin: 0 0 0 5px;
-}
-.infoLeftList p:last-child {
-  float: right;
-  width: 70%;
-  padding: 0 0 0 10px;
-}
-.infoLeftList p:last-child span:first-child {
-  float: left;
-  width: 90%;
-  font-size: 18px;
-}
-.infoLeftList p:last-child span:last-child {
-  float: left;
-  width: 90%;
-  font-size: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  margin: 5px 0 0 0;
-  color: #666;
-}
-.page {
-  text-align: center;
-  margin: 10px 0;
-}
-.infoRightList {
-  float: left;
-  width: 95%;
-  padding: 7px 0;
-  margin: 0 0 0 5px;
-}
-.infoRightList:nth-child(6) {
-  border-bottom: 1px solid #ccc;
-  padding: 0 0 17px 0;
-}
-.infoRightList:nth-child(7) {
-  padding: 15px 0 0 0;
-}
-.infoRightList:nth-child(11) {
-  border-bottom: 1px solid #ccc;
-  padding: 0 0 15px 0;
-}
-.infoRightList:hover p span:first-child {
-  -webkit-transform: translateY(-3px);
-  -ms-transform: translateY(-3px);
-  transform: translateY(-3px);
-  -webkit-box-shadow: 0 0 6px #999;
-  box-shadow: 0 0 6px #999;
-  -webkit-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-  color: #005293;
-  cursor: pointer;
-}
-.infoRightList p {
-  font-size: 18px;
-}
-.infoRightList p span:first-child {
-  display: inline-block;
-  width: 70%;
-  margin: 0 20px 0 10px;
-}
-.infoRightList p span:last-child {
-  display: inline-block;
-  width: 21%;
-  text-align: center;
-  font-size: 16px;
+.main {
+  margin: 15px 0;
+  .menu {
+    height: 600px;
+    overflow: hidden;
+    padding: 15px 10px;
+    background: no-repeat 100% 100%;
+    background-image: url('~@/assets/live/menu_back.jpg');
+    box-sizing: border-box;
+    box-shadow: 0 0 10px #bbbaba;
+    .menuTitle {
+      font-size: 24px;
+      color: #92959a;
+      font-weight: bold;
+      position: relative;
+      top: -10px;
+      left: 10px;
+    }
+    .menuList {
+      height: 60px;
+      line-height: 60px;
+      border-bottom: 1px solid #2d64b3;
+      p {
+        font-weight: bold;
+        font-size: 18px;
+        color: #044b79;
+      }
+    }
+    .menuList:hover {
+      cursor: pointer;
+    }
+  }
+  .listInfo {
+    float: right;
+    width: 78%;
+    min-height: 600px;
+    overflow: hidden;
+    box-shadow: 0 0 10px #2d64b3;
+    padding: 10px;
+  }
 }
 </style>