更新

src/layout/technical/detail.vue

@@ -0,0 +1,114 @@
+<template>
+  <div id="detail" style="background-color: #F5F5F54f;">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="detailmain">
+          <div class="detailtop">
+            <span>{{ detailinfo.title }}</span>
+          </div>
+          <div class="detailtopleft">
+            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+          </div>
+
+          <div class="detailimage" v-if="detailinfo.picture">
+            <img :src="detailinfo.picture" class="detailimg" />
+          </div>
+          <div class="detailcontext">
+            <p v-html="detailinfo.content"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'detail',
+  props: {
+    newsid: null,
+  },
+  components: {},
+  data: () => {
+    return {
+      img: {
+        top_bg: require('@/assets/live/top_bg.png'),
+        logo: require('@/assets/live/logo.png'),
+        img1: require('@/assets/live/1.jpg'),
+      },
+
+      detailinfo: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...news(['fetch']),
+    async search() {
+      console.log(this.newsid);
+
+      const res = await this.fetch(this.newsid);
+      this.$set(this, `detailinfo`, res.data);
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/style.css';
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.detailmain {
+  min-height: 500px;
+}
+
+.detailtop {
+  padding: 20px 0px;
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: normal;
+  text-align: left;
+  margin: 0;
+  text-align: center;
+  color: #005293;
+}
+
+.detailtopleft {
+  text-align: center;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-size: 16px;
+  color: #666666;
+}
+
+.detailimage {
+  text-align: center;
+  padding: 20px 0 0 0;
+}
+
+.detailimg {
+  width: 500px;
+  height: 300px;
+}
+
+.detailcontext {
+  padding: 20px 40px 60px 40px;
+}
+</style>

src/layout/technical/eduDetail.vue

@@ -0,0 +1,131 @@
+<template>
+  <div id="eduDetail" style="background-color: #F5F5F54f;">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="detailmain">
+          <div class="detailtop">
+            <span>{{ detailinfo.title }}</span>
+          </div>
+          <div class="detailtopleft">
+            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+          </div>
+          <div class="detailimage" v-if="detailinfo.picture">
+            <img :src="detailinfo.picture" class="detailimg" />
+          </div>
+          <div class="detailVideo">
+            <video :src="detailinfo.filepath" controls="controls">
+              您的浏览器不支持 video 标签。
+            </video>
+          </div>
+          <div class="detailcontext">
+            <p v-html="detailinfo.content"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'eduDetail',
+  props: {
+    newsid: null,
+  },
+  components: {},
+  data: () => {
+    return {
+      img: {
+        top_bg: require('@/assets/live/top_bg.png'),
+        logo: require('@/assets/live/logo.png'),
+        img1: require('@/assets/live/1.jpg'),
+      },
+      detailinfo: {},
+      videoUrl: require('@/assets/video.mp4'),
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...news(['fetch']),
+    async search() {
+      console.log(this.newsid);
+
+      const res = await this.fetch(this.newsid);
+      this.$set(this, `detailinfo`, res.data);
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/style.css';
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.detailmain {
+  min-height: 500px;
+}
+
+.detailtop {
+  padding: 20px 0px;
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: normal;
+  text-align: left;
+  margin: 0;
+  text-align: center;
+  color: #005293;
+}
+
+.detailtopleft {
+  text-align: center;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-size: 16px;
+  color: #666666;
+}
+
+.detailimage {
+  text-align: center;
+  padding: 20px 0 0 0;
+}
+.detailVideo {
+  float: left;
+  width: 100%;
+  text-align: center;
+  height: 400px;
+  overflow: hidden;
+  margin: 20px 0;
+}
+.detailVideo video {
+  height: 400px;
+  width: 50%;
+  border: 1px dashed #ccc;
+}
+
+.detailimg {
+  width: 500px;
+  height: 300px;
+}
+
+.detailcontext {
+  padding: 20px 40px 60px 40px;
+}
+</style>

src/layout/technical/semDetail.vue

@@ -0,0 +1,319 @@
+<template>
+  <div id="semDetail">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="one">
+            <el-image :src="gongqiuImage"></el-image>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col :span="24" class="twoTop">
+              <el-col :span="3" class="left">
+                浏览次数：1
+              </el-col>
+              <el-col :span="21" class="right"> [专题] {{ detail.title }} </el-col>
+            </el-col>
+            <el-col :span="24" class="twoInfo">
+              <el-col :span="24" class="list">
+                <el-col :span="3" class="left">
+                  <el-col :span="24" class="leftTop">
+                    会员名称
+                  </el-col>
+                  <el-col :span="24" class="leftDown">
+                    <el-image :src="squareImage"></el-image>
+                    <el-col :span="24" class="jobname">
+                      {{ detail.uname }}
+                    </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="21" class="right">
+                  <el-col :span="24" class="date">
+                    <i class="el-icon-user icon"></i>
+                    <span>文章发表于{{ detail.meta | getDate }}</span>
+                    <span>1楼</span>
+                  </el-col>
+                  <el-col :span="24" class="info">
+                    <p v-html="detail.content"></p>
+                  </el-col>
+                  <el-col :span="24" class="jubao">
+                    <span>举报</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                <el-col :span="3" class="left">
+                  <el-col :span="24" class="leftTop">
+                    会员名称
+                  </el-col>
+                  <el-col :span="24" class="leftDown">
+                    <el-image :src="squareImage"></el-image>
+                    <el-col :span="24" class="jobname">
+                      {{ item.uname }}
+                    </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="21" class="right">
+                  <el-col :span="24" class="date">
+                    <i class="el-icon-user icon"></i>
+                    <span>评论发布于{{ item.meta | getDate }}</span>
+                    <span>{{ index + 2 }}楼</span>
+                  </el-col>
+                  <el-col :span="24" class="info">
+                    <p v-html="item.content"></p>
+                  </el-col>
+                  <el-col :span="24" class="jubao">
+                    <span>举报</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="twoPage">
+              <page :total="total" :limit="limit" position="right" @query="search"></page>
+            </el-col>
+            <el-col :span="24" class="twoInput">
+              <el-col :span="3" class="left"> </el-col>
+              <el-col :span="21" class="right">
+                <el-col :span="24" class="waneditor">
+                  <wang-editor v-model="form.content" ref="editor"></wang-editor>
+                </el-col>
+                <el-col :span="24" class="btn">
+                  <el-button type="primary" @click="submit">发表评论</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import wangEditor from '@/components/wang-editor.vue';
+import page from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: comment } = createNamespacedHelpers('comment');
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'semDetail',
+  props: {
+    newsid: null,
+  },
+  components: { page, wangEditor },
+  data: () => ({
+    gongqiuImage: require('@/assets/live/111.png'),
+    squareImage: require('@/assets/live/222.png'),
+    detail: {},
+    list: [{ name: 'dsadas' }],
+    total: 0,
+    form: {},
+    inputInfo: '',
+    limit: 10,
+  }),
+  created() {
+    this.search();
+    this.searchinfo();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  methods: {
+    ...news(['fetch']),
+    ...comment({ commentquery: 'query', commentCreate: 'create', commentUpdate: 'update' }),
+    async searchinfo() {
+      let id = this.newsid;
+      console.log(id);
+      const res = await this.fetch(id);
+      this.$set(this, `detail`, res.data);
+    },
+    async search({ skip = 0, limit = this.limit, newsid = this.id } = { skip: 0, limit: this.limit }) {
+      let res = await this.commentquery({ skip, limit, newsid });
+      console.log(res);
+      this.$set(this, `list`, res.data);
+      this.$set(this, `total`, res.total);
+    },
+    async submit() {
+      this.form.newsid = this.newsid;
+      this.form.uid = this.user.uid;
+      let data = this.form;
+      let res = await this.commentCreate(data);
+      console.log(res);
+      this.$checkRes(res, '评论成功', '评论失败');
+      this.search();
+    },
+  },
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.main {
+  float: left;
+  width: 100%;
+  min-height: 600px;
+  margin: 30px 0;
+}
+.main .one {
+  float: left;
+  width: 100%;
+  height: 160px;
+  margin: 0 0 30px 0;
+}
+.main .two {
+  float: left;
+  width: 100%;
+}
+.main .two .twoTop {
+  float: left;
+  width: 100%;
+  height: 60px;
+}
+
+.main .two .twoTop .left {
+  float: left;
+  height: 60px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 18px;
+  color: #00316e;
+  background: #a5d2f5;
+  border-bottom: 10px solid #044b79;
+}
+.main .two .twoTop .right {
+  float: left;
+  height: 60px;
+  line-height: 50px;
+  padding: 0 15px;
+  font-size: 20px;
+  color: #023658;
+  border-bottom: 10px solid #5096d2;
+}
+.main .two .twoInfo {
+  float: left;
+  width: 100%;
+}
+.main .two .twoInfo .left {
+  background: #5096d2;
+  border-bottom: 10px solid #044b79;
+}
+.main .two .twoInfo .left .leftTop {
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  color: #fff;
+  font-size: 22px;
+  border-bottom: 1px dashed #ccc;
+}
+.main .two .twoInfo .left .leftDown {
+  height: 420px;
+}
+.main .two .twoInfo .left .leftDown .el-image {
+  margin: 40px 18px;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+.main .two .twoInfo .left .leftDown .jobname {
+  text-align: center;
+  font-size: 22px;
+  color: #fffcae;
+}
+.main .two .twoInfo .right {
+  padding: 0 20px;
+}
+.main .two .twoInfo .right .date {
+  padding: 0 20px;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px dashed #ccc;
+}
+.main .two .twoInfo .right .date .icon {
+  font-size: 30px;
+  color: #b6dd59;
+}
+.main .two .twoInfo .right .date span:nth-child(2) {
+  font-size: 20px;
+  padding: 0px 10px;
+  position: relative;
+  top: -2px;
+}
+.main .two .twoInfo .right .date span:last-child {
+  font-size: 20px;
+  float: right;
+}
+.main .two .twoInfo .right .info {
+  height: 300px;
+  border: 2px solid #044b79;
+  border-radius: 10px;
+  margin: 30px 0;
+  padding: 20px;
+}
+.main .two .twoInfo .right .info p {
+  font-size: 20px;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 8;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-height: 33px;
+  height: 260px;
+}
+.main .two .twoInfo .right .jubao {
+  height: 70px;
+  line-height: 60px;
+  border-top: 1px dashed #ff8b0f;
+  border-bottom: 10px solid #5096d2;
+}
+.main .two .twoInfo .right .jubao span {
+  float: right;
+  color: #ff0000;
+  font-size: 20px;
+}
+.main .two .twoPage {
+  margin: 20px 0;
+}
+.main .two .twoInput {
+  height: 270px;
+  border: 2px solid #5096d2;
+}
+.main .two .twoInput .left {
+  height: 266px;
+  background-color: #5096d2;
+}
+.main .two .twoInput .right {
+  padding: 20px 20px 0 20px;
+}
+/deep/.main .two .twoInput .right .waneditor .w-e-text-container {
+  height: 140px !important;
+}
+.main .two .twoInput .right .btn {
+  margin: 10px 0;
+}
+/deep/.main .two .twoInput .right .btn .el-button {
+  margin: 10px 0;
+}
+</style>

src/views/technical/index.vue

@@ -17,7 +17,9 @@
           <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
             <p>{{ item.publish_time }}</p>
             <p>
-              <span @click="$router.push({ path: '/live/semDetail', query: { id: item.id } })" class="textOver">{{ item.title }}</span>
+              <span @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 2, column_name: '专题研讨' } })" class="textOver">{{
+                item.title
+              }}</span>
               <span>{{ item.titlejj }}</span>
             </p>
           </el-col>
@@ -38,7 +40,9 @@
         <el-col :span="23" class="infoRight">
           <el-col class="infoRightList" :span="24" v-for="(item, index) in jishuList" :key="index">
             <p>
-              <span class="textOver" @click="$router.push({ path: '/live/detail', query: { id: item.id } })">{{ item.title }}</span
+              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '专家问诊' } })">{{
+                item.title
+              }}</span
               ><span class="textOver">{{ item.publish_time }}</span>
             </p>
           </el-col>
@@ -62,7 +66,9 @@
         <el-col :span="24" class="infoLeft">
           <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
             <p>
-              <span class="textOver" @click="$router.push({ path: '/live/detail', query: { id: item.id } })">{{ item.title }}</span
+              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '行业研究' } })">{{
+                item.title
+              }}</span
               ><span class="textOver">{{ item.publish_time }}</span>
             </p>
           </el-col>
@@ -84,7 +90,9 @@
           <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
             <p>{{ item.publish_time }}</p>
             <p>
-              <span class="textOver" @click="$router.push({ path: '/live/eduDetail', query: { id: item.id } })">{{ item.title }}</span>
+              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 4, column_name: '教育培训' } })">{{
+                item.title
+              }}</span>
               <span>{{ item.titlejj }}</span>
             </p>
           </el-col>
@@ -148,7 +156,7 @@ export default {
       }
     },
     turnToList(column_name) {
-      this.$router.push({ path: '/technical/list', query: { column_name: column_name } });
+      this.$router.push({ path: '/technical/list', query: { column_name: column_name, display: 1 } });
     },
   },
 };

src/views/technical/list.vue

@@ -8,7 +8,7 @@
           <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
         </el-col>
       </el-col>
-      <el-col :span="19" class="info">
+      <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>
@@ -67,19 +67,38 @@
           </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>
   </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 { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: news } = createNamespacedHelpers('news');
 export default {
   name: 'list',
   props: {},
-  components: {},
+  components: {
+    semDetail,
+    detail,
+    eduDetail,
+  },
   data: () => ({
+    newsid: '',
+    display: '1',
     squareImage: require('@/assets/live/square_big.png'),
     menuList: [{ name: '专题研讨' }, { name: '专家问诊' }, { name: '行业研究' }, { name: '教育培训' }],
     menuIndex: '0',
@@ -96,8 +115,16 @@ export default {
   }),
   created() {
     this.searchList();
+    this.search();
   },
   computed: {
+    id() {
+      return this.$route.query.id;
+    },
+
+    // display() {
+    //   return this.$route.query.display;
+    // },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -126,6 +153,7 @@ export default {
       this.initList({ name });
     },
     async initList({ name, skip = 0, limit = 10, ...info } = {}) {
+      this.display = 1;
       let res = [];
       if (name == '专题研讨') {
         this.pageSize = 5;
@@ -151,18 +179,30 @@ export default {
       }
       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.$router.push({ path: '/live/semDetail', query: { id: id } });
+      // this.$router.push({ path: '/live/semDetail', query: { id: id } });
+      this.display = '2';
+      this.newsid = id;
+      console.log(this.display);
     },
     clickjishu(id) {
-      this.$router.push({ path: '/live/detail', query: { id: id } });
+      this.display = '3';
+      this.newsid = id;
     },
     clickhangye(id) {
-      this.$router.push({ path: '/live/detail', query: { id: id } });
+      this.display = '3';
+      this.newsid = id;
     },
 
     clickjiaoyu(id) {
-      this.$router.push({ path: '/live/eduDetail', query: { id: id } });
+      this.display = '4';
+      this.newsid = id;
     },
   },
 };
@@ -210,7 +250,7 @@ export default {
   width: 77%;
   float: right;
   margin: 30px 0 30px 2px;
-  height: 585px;
+  min-height: 585px;
   box-shadow: 0 0 10px #2d64b3;
   overflow: hidden;
   right: 0px;

src/views/technical/orderlist.vue

@@ -0,0 +1,334 @@
+<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">
+        <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 jishuList" :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>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'list',
+  props: {},
+  components: {},
+  data: () => ({
+    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: [],
+    jishuList: [],
+    hangyeList: [],
+    jiaoyuList: [],
+  }),
+  created() {
+    this.searchList();
+  },
+  computed: {
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+
+  methods: {
+    ...news(['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 } = {}) {
+      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 == '专家问诊') {
+        res = await this.query({ skip, limit, column_name: '专家问诊', ...info });
+        this.$set(this, `jishuList`, res.data);
+      } else if (name == '行业研究') {
+        res = await this.query({ skip, limit, column_name: '行业研究', ...info });
+        this.$set(this, `hangyeList`, res.data);
+      } else if (name == '教育培训') {
+        this.pageSize = 5;
+        res = await this.query({ 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 });
+    },
+    clickzhuanti(id) {
+      this.$router.push({ path: '/live/semDetail', query: { id: id } });
+    },
+    clickjishu(id) {
+      this.$router.push({ path: '/live/detail', query: { id: id } });
+    },
+    clickhangye(id) {
+      this.$router.push({ path: '/live/detail', query: { id: id } });
+    },
+
+    clickjiaoyu(id) {
+      this.$router.push({ path: '/live/eduDetail', query: { id: id } });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 80%;
+  margin: 0 auto;
+  float: none;
+}
+.menu {
+  float: left;
+  height: 450px;
+  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;
+  height: 585px;
+  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>