11

src/router/index.js

@@ -22,10 +22,22 @@ const routes = [
   },
   {
     path: '/live/detail',
-    name: 'live_detail',
-    meta: { title: '直播详情', isleftarrow: true },
+    name: 'detail',
+    meta: { title: '视频详情', isleftarrow: true },
     component: () => import('../views/live/detail.vue'),
   },
+  {
+    path: '/live/personalDetail',
+    name: 'personalDetail',
+    meta: { title: '人才招聘详情', isleftarrow: true },
+    component: () => import('../views/live/personalDetail.vue'),
+  },
+  {
+    path: '/live/exportsDetail',
+    name: 'exportsDetail',
+    meta: { title: '专家培训详情', isleftarrow: true },
+    component: () => import('../views/live/exportsDetail.vue'),
+  },
   // 科技超市
   {
     path: '/market/index',

src/views/live/exportsDetail.vue

@@ -0,0 +1,535 @@
+<template>
+  <div id="roomDetail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="video">
+            <el-link :underline="false" class="back" @click="back()"><i class="el-icon-arrow-left"></i></el-link>
+            <el-col :span="24" class="videoone" v-if="videodock.file_path != null || ''">
+              <video :src="videodock.file_path" autoplay="" controls="controls">
+                您的浏览器不支持 video 标签。
+              </video>
+            </el-col>
+            <el-col :span="24" class="videotwo" v-else>
+              <!-- {{ videodock.videointro }} -->
+              祝贺吉林省高新技术成果发布会暨中科院进吉林高新技术成果发布会成功召开
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="chat">
+            <van-tabs v-model="chatactive" type="card" animated>
+              <van-tab title="图文直播">
+                <el-col class="list" v-for="(item, index) in lunboList" :key="index">
+                  <el-col :span="3" class="image">
+                    <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
+                  </el-col>
+                  <el-col :span="21" class="other">
+                    <el-col :span="24" class="one">
+                      <span>{{ item.name }}</span>
+                      <span>{{ item.date }}</span>
+                    </el-col>
+                    <el-col :span="24" class="two">
+                      <p class="hywl">
+                        <span>欢迎</span>
+                        <span>{{ item.name }}</span>
+                        <span>位临现场</span>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                      </p>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </van-tab>
+              <van-tab title="公共聊天">
+                <chat></chat>
+              </van-tab>
+            </van-tabs>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// 图文直播
+import textVideo from '@/components/parts/textVideo.vue';
+// 公共聊天
+import chat from '@/components/parts/chat.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import videoDetail2 from './parts/videoDetail2.vue';
+import moment from 'moment';
+export default {
+  name: 'videoDetail2',
+  props: {},
+  components: {
+    // textVideo,
+    chat,
+  },
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      // 视频信息
+      videodock: {},
+      //展会详情
+      dockinfo: [],
+      // 聊天
+      chatactive: 0,
+      // 图文直播
+      lunboList: [
+        { login_name: '顾红伟', date: '10:00', content: '信息内容' },
+        { name: '顾红伟', date: '10:00', content: '信息内容' },
+      ],
+      // 科技超市
+      marketactive: 0,
+      expertimage: require('@/assets/222.png'),
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      touxiang: require('@/assets/touxiang.png'),
+      hand: require('@/assets/flower2.gif'),
+      //招聘信息
+      zpxxList: [
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+      ],
+      //正式岗位
+      zsgwList: [
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+      ],
+      //实习岗位
+      sxList: [
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+      ],
+      sx: require('@/assets/sx.png'),
+    };
+  },
+  created() {},
+  methods: {
+    async searchvideo() {
+      if (this.dock_id) {
+        let res = await this.dockFetch(this.dock_id);
+        if (this.$checkRes(res)) {
+          // 对接会详情
+          this.$set(this, `videodock`, res.data);
+        }
+      }
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/live/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+.main {
+  // 视频
+  .video {
+    height: 215px;
+    overflow: hidden;
+    .back {
+      position: fixed;
+      z-index: 999;
+      i {
+        font-size: 30px;
+        font-weight: bold;
+        margin: 5px 0 0px 5px;
+        color: #409eff;
+      }
+    }
+    .videoone {
+      height: 215px;
+      overflow: hidden;
+      video {
+        width: 100%;
+      }
+    }
+    .videotwo {
+      background: url('~@/assets/directBack.png');
+      background-size: 100% 100%;
+      height: 215px;
+      overflow: hidden;
+      text-align: center;
+      color: #fff;
+      font-size: 20px;
+      padding: 15% 3%;
+    }
+  }
+  // 聊天
+  .chat {
+    margin: 15px 0 0 0;
+    height: 400px;
+    overflow: hidden;
+    .list {
+      padding: 10px 0;
+      border-bottom: 1px dashed #ccc;
+      .image {
+        text-align: center;
+      }
+      .other {
+        .one {
+          span:nth-child(1) {
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+          }
+          span:nth-child(2) {
+            display: inline-block;
+            margin: 0 0 0 15px;
+            color: #ccc;
+          }
+        }
+        .two {
+          margin: 5px 0 0 0;
+          color: #000;
+          .zh {
+            min-height: 20px;
+            font-size: 15px;
+            padding: 5px;
+            border-radius: 5px;
+            background: #ea4235;
+          }
+          .hywl {
+            min-height: 20px;
+            font-size: 15px;
+            padding: 5px;
+            border-radius: 5px;
+            background: #245efe5f;
+            .hand {
+              width: 12px;
+              top: 3px;
+              left: 5px;
+              margin: 0px 0 0 5px;
+            }
+          }
+          .remark {
+            min-height: 20px;
+            font-size: 15px;
+            padding: 5px;
+            border-radius: 5px;
+            background: #cccccc5f;
+          }
+        }
+      }
+    }
+    // 主办方
+    .company {
+      margin: 15px 0 0 0;
+      .name {
+        margin: 0 0 20px 0;
+        padding: 0 10px;
+        p {
+          text-align: center;
+          color: #409eff;
+        }
+        p:nth-child(1) {
+          font-family: cursive;
+          font-size: 30px;
+          font-weight: bolder;
+          text-shadow: 5px 5px 2px #ccc;
+        }
+        p:nth-child(2) {
+          padding: 10px 0 0 0;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  // 科技超市
+  .market {
+    margin: 15px 0 0 0;
+    .one {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 102px;
+      .list {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .name {
+          font-size: 18px;
+          font-weight: bolder;
+        }
+        .name:hover {
+          color: #409eff;
+        }
+        .textOver {
+          font-size: 16px;
+          color: #666;
+          padding: 5px 0 0 0;
+        }
+        .date {
+          text-align: right;
+        }
+      }
+    }
+    .two {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 102px;
+      .list {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          text-align: right;
+          font-size: 16px;
+        }
+        .other {
+          padding: 2px 0 1px 0;
+          font-size: 16px;
+          span {
+            display: inline-block;
+            width: 50%;
+          }
+        }
+      }
+      .zsgwList:hover {
+        cursor: pointer;
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+    .three {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 92px;
+      .list {
+        padding: 5px 0px;
+        border-bottom: 1px dashed #ccc;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .info1 {
+          padding: 6px 0px 1px 20px;
+          .other {
+            margin-top: 5px;
+            .fldy {
+              margin-top: 5px;
+            }
+          }
+          .name {
+            font-size: 18px;
+            font-weight: bolder;
+          }
+        }
+        .field {
+          margin-top: 8px;
+          font-size: 16px;
+          color: #666;
+        }
+        .image {
+          margin-top: 5px;
+          .el-image {
+            border-radius: 90%;
+          }
+        }
+        .info1 {
+          padding: 6px 0px 1px 20px;
+        }
+      }
+    }
+  }
+}
+// 标签样式重定义
+/deep/.van-tab {
+  font-size: 16px;
+}
+/deep/.van-tabs--card > .van-tabs__wrap {
+  height: 35px;
+}
+/deep/.van-tabs__nav--card {
+  height: 35px;
+  // margin: 0;
+}
+/deep/.van-tabs__nav--card {
+  border: 1px solid #409eff;
+}
+/deep/.van-tabs__nav--card .van-tab {
+  color: #666;
+  border-right: 1px solid #409eff;
+}
+/deep/.van-tabs__nav--card .van-tab.van-tab--active {
+  background-color: #409eff;
+  color: #fff;
+}
+</style>

src/views/live/index.vue

@@ -7,7 +7,17 @@
         </el-col>
         <el-col :span="24" class="main">
           <van-tabs v-model="active">
-            <van-tab title="正在直播">
+            <van-tab title="科技成果在线">
+              <product :province="province" :place="place" news="1"></product>
+            </van-tab>
+            <van-tab title="人才对接在线">
+              <personal :province="province" :place="place" news="2"></personal>
+            </van-tab>
+            <van-tab title="专家培训在线">
+              <exports :province="province" :place="place" news="3"></exports>
+            </van-tab>
+
+            <!-- <van-tab title="正在直播">
               <liveList :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></liveList>
             </van-tab>
             <van-tab title="下期预告">
@@ -15,7 +25,7 @@
             </van-tab>
             <van-tab title="往期直播">
               <liveList :list="listPast" :total="nowTotal" status="2" @query="searchList" :province="province" :place="place"></liveList>
-            </van-tab>
+            </van-tab> -->
           </van-tabs>
         </el-col>
         <el-col :span="24" class="foot">
@@ -30,7 +40,10 @@
 import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
-import liveList from './parts/liveList.vue';
+import product from './parts/product.vue';
+import personal from './parts/personal.vue';
+import exports from './parts/exports.vue';
+
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: place } = createNamespacedHelpers('place');
 const jwt = require('jsonwebtoken');
@@ -40,7 +53,9 @@ export default {
   components: {
     NavBar,
     footInfo,
-    liveList, //直播列表
+    exports,
+    personal,
+    product,
   },
   data: function() {
     return {
@@ -51,15 +66,15 @@ export default {
       // 返回
       navShow: true,
       active: 0,
-      // 下期预告
-      listPre: [],
-      preTotal: 0,
-      // 正在直播
-      listNow: [],
-      nowTotal: 0,
-      // 往期直播
-      listPast: [],
-      pastTotal: 0,
+      // // 下期预告
+      // listPre: [],
+      // preTotal: 0,
+      // // 正在直播
+      // listNow: [],
+      // nowTotal: 0,
+      // // 往期直播
+      // listPast: [],
+      // pastTotal: 0,
       // 省
       province: [],
       // 市
@@ -68,29 +83,29 @@ export default {
   },
   async created() {
     await this.searchPlace();
-    await this.searchList({ status: '0' });
-    await this.searchList({ status: '1' });
-    await this.searchList({ status: '2' });
+    // await this.searchList({ status: '0' });
+    // await this.searchList({ status: '1' });
+    // await this.searchList({ status: '2' });
   },
   methods: {
     ...mapMutations(['setUser']),
-    ...dock({ dockQuery: 'query' }),
+    // ...dock({ dockQuery: 'query' }),
     ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
-    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {
-      let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
-      if (res.errcode === 0) {
-        if (status == '0') {
-          this.$set(this, `preTotal`, res.total);
-          this.$set(this, `listPre`, res.data);
-        } else if (status == '1') {
-          this.$set(this, `nowTotal`, res.total);
-          this.$set(this, `listNow`, res.data);
-        } else if (status == '2') {
-          this.$set(this, `pastTotal`, res.total);
-          this.$set(this, `listPast`, res.data);
-        }
-      }
-    },
+    // async searchList({ skip = 0, limit = 10, status, ...info } = {}) {
+    //   let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
+    //   if (res.errcode === 0) {
+    //     if (status == '0') {
+    //       this.$set(this, `preTotal`, res.total);
+    //       this.$set(this, `listPre`, res.data);
+    //     } else if (status == '1') {
+    //       this.$set(this, `nowTotal`, res.total);
+    //       this.$set(this, `listNow`, res.data);
+    //     } else if (status == '2') {
+    //       this.$set(this, `pastTotal`, res.total);
+    //       this.$set(this, `listPast`, res.data);
+    //     }
+    //   }
+    // },
     async searchPlace() {
       let res1 = await this.palcequery({ level: 1 });
       let arr = await this.palcequery({ level: 2 });

src/views/live/parts/exports.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="exports">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-tabs v-model="active1">
+          <van-tab title="正在直播">
+            <exportsList :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></exportsList>
+          </van-tab>
+          <van-tab title="下期预告">
+            <exportsList :list="listPre" :total="nowTotal" status="0" @query="searchList" :province="province" :place="place"></exportsList>
+          </van-tab>
+          <van-tab title="往期直播">
+            <exportsList :list="listPast" :total="nowTotal" status="2" @query="searchList" :province="province" :place="place"></exportsList>
+          </van-tab>
+        </van-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import exportsList from '../parts/exportsList.vue';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+const jwt = require('jsonwebtoken');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'exports',
+  props: {
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+    news: { type: String, default: '0' },
+  },
+  components: {
+    exportsList,
+  },
+  data: function() {
+    return {
+      active1: 0,
+      // 下期预告
+      listPre: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '专家培训在线模板',
+        },
+      ],
+      preTotal: 0,
+      // 正在直播
+      listNow: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '专家培训在线模板',
+        },
+      ],
+      nowTotal: 0,
+      // 往期直播
+      listPast: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '专家培训在线模板',
+        },
+      ],
+      pastTotal: 0,
+    };
+  },
+  async created() {
+    await this.searchList({ status: '0' });
+    await this.searchList({ status: '1' });
+    await this.searchList({ status: '2' });
+  },
+  methods: {
+    ...dock({ dockQuery: 'query' }),
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {},
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/live/parts/exportsList.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="liveList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="left">
+            <p class="textOver">{{ item.title }}</p>
+            <p>
+              举办城市:<span>{{ getprovince(item.province) }}-{{ getplace(item.place) }}</span>
+            </p>
+            <p>
+              直播时间:<span>{{ item.start_time }}</span>
+            </p>
+          </el-col>
+          <el-col :span="24" style="text-align:center">
+            <el-button type="primary" size="mini" @click="$router.push({ path: '/live/exportsDetail', query: { id: item.id } })" v-if="item.status == '1'"
+              >进入房间</el-button
+            >
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveList',
+  props: {
+    list: { type: Array },
+    status: { type: String, default: '0' },
+    news: { type: String, default: '0' },
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    // 过滤省
+    getprovince(item) {
+      let res = this.province.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    // 过滤市
+    getplace(item) {
+      let res = this.place.find(i => i.code == item);
+      if (res) return res.name;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+}
+.list {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  .left {
+    font-size: 16px;
+    color: #ccc;
+    p {
+      padding: 0 0 10px 0;
+      span {
+        color: #000;
+      }
+    }
+    p:first-child {
+      color: #000;
+    }
+  }
+  .right {
+    text-align: center;
+    p {
+      background: #409eff;
+      color: #fff;
+      padding: 5px 8px;
+      border-radius: 5px;
+      margin: 0 0 10px 0;
+    }
+  }
+}
+</style>

src/views/live/parts/liveList.vue

@@ -30,6 +30,7 @@ export default {
   props: {
     list: { type: Array },
     status: { type: String, default: '0' },
+    news: { type: String, default: '0' },
     // 省
     province: { type: Array, default: () => [] },
     // 市

src/views/live/parts/personal.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id="personal">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-tabs v-model="active1">
+          <van-tab title="正在直播">
+            <personalList :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></personalList>
+          </van-tab>
+          <van-tab title="下期预告">
+            <personalList :list="listPre" :total="nowTotal" status="0" @query="searchList" :province="province" :place="place"></personalList>
+          </van-tab>
+          <van-tab title="往期直播">
+            <personalList :list="listPast" :total="nowTotal" status="2" @query="searchList" :province="province" :place="place"></personalList>
+          </van-tab>
+        </van-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import personalList from '../parts/personalList.vue';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+const jwt = require('jsonwebtoken');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'personal',
+  props: {
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+  },
+  components: {
+    personalList,
+  },
+  data: function() {
+    return {
+      active1: 0,
+      // 下期预告
+      listPre: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '人才招聘会模板',
+        },
+      ],
+      preTotal: 0,
+      // 正在直播
+      listNow: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '人才招聘会模板',
+        },
+      ],
+      nowTotal: 0,
+      // 往期直播
+      listPast: [
+        {
+          end_time: '2020-10-23 00:00',
+          place: '220100',
+          province: '220000',
+          start_time: '2020-10-16 10:00',
+          status: '1',
+          title: '人才招聘会模板',
+        },
+      ],
+      pastTotal: 0,
+    };
+  },
+  async created() {
+    await this.searchList({ status: '0' });
+    await this.searchList({ status: '1' });
+    await this.searchList({ status: '2' });
+  },
+  methods: {
+    ...dock({ dockQuery: 'query' }),
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {},
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/live/parts/personalList.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="liveList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="left">
+            <p class="textOver">{{ item.title }}</p>
+            <p>
+              举办城市:<span>{{ getprovince(item.province) }}-{{ getplace(item.place) }}</span>
+            </p>
+            <p>
+              直播时间:<span>{{ item.start_time }}</span>
+            </p>
+          </el-col>
+          <el-col :span="24" style="text-align:center">
+            <el-button type="primary" size="mini" @click="$router.push({ path: '/live/personalDetail', query: { id: item.id } })" v-if="item.status == '1'"
+              >进入房间</el-button
+            >
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveList',
+  props: {
+    list: { type: Array },
+    status: { type: String, default: '0' },
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    // 过滤省
+    getprovince(item) {
+      let res = this.province.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    // 过滤市
+    getplace(item) {
+      let res = this.place.find(i => i.code == item);
+      if (res) return res.name;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+}
+.list {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  .left {
+    font-size: 16px;
+    color: #ccc;
+    p {
+      padding: 0 0 10px 0;
+      span {
+        color: #000;
+      }
+    }
+    p:first-child {
+      color: #000;
+    }
+  }
+  .right {
+    text-align: center;
+    p {
+      background: #409eff;
+      color: #fff;
+      padding: 5px 8px;
+      border-radius: 5px;
+      margin: 0 0 10px 0;
+    }
+  }
+}
+</style>

src/views/live/parts/product.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="product">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-tabs v-model="active1">
+          <van-tab title="正在直播">
+            <liveList :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></liveList>
+          </van-tab>
+          <van-tab title="下期预告">
+            <liveList :list="listPre" :total="nowTotal" status="0" @query="searchList" :province="province" :place="place"></liveList>
+          </van-tab>
+          <van-tab title="往期直播">
+            <liveList :list="listPast" :total="nowTotal" status="2" @query="searchList" :province="province" :place="place"></liveList>
+          </van-tab>
+        </van-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import liveList from '../parts/liveList.vue';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+const jwt = require('jsonwebtoken');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'product',
+  props: {
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+  },
+  components: {
+    liveList,
+  },
+  data: function() {
+    return {
+      active1: 0,
+      // 下期预告
+      listPre: [],
+      preTotal: 0,
+      // 正在直播
+      listNow: [],
+      nowTotal: 0,
+      // 往期直播
+      listPast: [],
+      pastTotal: 0,
+    };
+  },
+  async created() {
+    await this.searchList({ status: '0' });
+    await this.searchList({ status: '1' });
+    await this.searchList({ status: '2' });
+  },
+  methods: {
+    ...mapMutations(['setUser']),
+    ...dock({ dockQuery: 'query' }),
+    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {
+      let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
+      if (res.errcode === 0) {
+        if (status == '0') {
+          this.$set(this, `preTotal`, res.total);
+          this.$set(this, `listPre`, res.data);
+        } else if (status == '1') {
+          this.$set(this, `nowTotal`, res.total);
+          this.$set(this, `listNow`, res.data);
+        } else if (status == '2') {
+          this.$set(this, `pastTotal`, res.total);
+          this.$set(this, `listPast`, res.data);
+        }
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/live/personalDetail.vue

@@ -0,0 +1,603 @@
+<template>
+  <div id="roomDetail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="video">
+            <el-link :underline="false" class="back" @click="back()"><i class="el-icon-arrow-left"></i></el-link>
+            <el-col :span="24" class="videoone" v-if="videodock.file_path != null || ''">
+              <video :src="videodock.file_path" autoplay="" controls="controls">
+                您的浏览器不支持 video 标签。
+              </video>
+            </el-col>
+            <el-col :span="24" class="videotwo" v-else>
+              <!-- {{ videodock.videointro }} -->
+              祝贺吉林省高新技术成果发布会暨中科院进吉林高新技术成果发布会成功召开
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="chat">
+            <van-tabs v-model="chatactive" type="card" animated>
+              <van-tab title="图文直播">
+                <el-col class="list" v-for="(item, index) in lunboList" :key="index">
+                  <el-col :span="3" class="image">
+                    <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
+                  </el-col>
+                  <el-col :span="21" class="other">
+                    <el-col :span="24" class="one">
+                      <span>{{ item.name }}</span>
+                      <span>{{ item.date }}</span>
+                    </el-col>
+                    <el-col :span="24" class="two">
+                      <p class="hywl">
+                        <span>欢迎</span>
+                        <span>{{ item.name }}</span>
+                        <span>位临现场</span>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                        <el-image :src="hand" class="hand"></el-image>
+                      </p>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </van-tab>
+              <van-tab title="公共聊天">
+                <chat></chat>
+              </van-tab>
+            </van-tabs>
+          </el-col>
+          <el-col :span="24" class="market">
+            <van-tabs v-model="marketactive" type="card" animated>
+              <van-tab title="招聘信息">
+                <el-col :span="24" class="one">
+                  <el-col :span="24" class="list" v-for="(item, index) in zpxxList" :key="index">
+                    <p class="name">{{ item.name }}</p>
+                    <el-col :span="12">
+                      <p class="textOver">类型：{{ item.type }}</p>
+                    </el-col>
+                    <el-col :span="12">
+                      <p class="textOver date">{{ item.date }}</p>
+                    </el-col>
+                    <el-col :span="24">
+                      <p class="textOver">{{ item.content }}</p>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </van-tab>
+              <van-tab title="正式岗位">
+                <el-col :span="24" class="two">
+                  <el-col :span="24" class="list" v-for="(item, index) in zsgwList" :key="index">
+                    <el-col :span="18" class="name textOver">
+                      {{ item.name }}
+                    </el-col>
+                    <el-col :span="6" class="date textOver">
+                      {{ item.date }}
+                    </el-col>
+                    <el-col :span="24" class="other">
+                      <span class="textOver">需求人数：{{ item.num }}</span>
+                      <span class="textOver" style="color:#ff0000;">薪资：{{ item.xz }}</span>
+                    </el-col>
+                    <el-col :span="24" class="other">
+                      <span class="textOver">福利待遇：{{ item.fldy }}</span>
+                      <span class="textOver">职位诱惑：{{ item.zwyh }}</span>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </van-tab>
+              <van-tab title="实习岗位">
+                <el-col :span="24" class="three">
+                  <el-col :span="24" class="list" v-for="(item, index) in sxList" :key="index" @click.native="expertBtn(item)">
+                    <el-col :span="5" class="image">
+                      <el-image :src="expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;"></el-image>
+                    </el-col>
+                    <el-col :span="19" class="info1">
+                      <el-col :span="24" class="name textOver">
+                        {{ item.name }}
+                      </el-col>
+                      <el-col :span="24" class="other">
+                        <el-col :span="12">
+                          <span class="textOver"><i class="el-icon-coin"></i>{{ item.xz }}</span>
+                        </el-col>
+                        <el-col :span="12" style="text-align:right">
+                          <span class="textOver"><i class="el-icon-location"></i>{{ item.address }}</span>
+                        </el-col>
+                        <el-col :span="24" class="fldy textOver">
+                          <span>福利待遇：{{ item.fldy }}</span>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </van-tab>
+            </van-tabs>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// 图文直播
+import textVideo from '@/components/parts/textVideo.vue';
+// 公共聊天
+import chat from '@/components/parts/chat.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import videoDetail2 from './parts/videoDetail2.vue';
+import moment from 'moment';
+export default {
+  name: 'videoDetail2',
+  props: {},
+  components: {
+    // textVideo,
+    chat,
+  },
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      // 视频信息
+      videodock: {},
+      // 倒计时查询详情
+      times: 5,
+      //展会详情
+      dockinfo: [],
+      // 聊天
+      chatactive: 0,
+      // 图文直播
+      // lunboList: [],
+      lunboList: [
+        { login_name: '顾红伟', date: '10:00', content: '信息内容' },
+        { name: '顾红伟', date: '10:00', content: '信息内容' },
+      ],
+      // 科技超市
+      marketactive: 0,
+      expertimage: require('@/assets/222.png'),
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      touxiang: require('@/assets/touxiang.png'),
+      hand: require('@/assets/flower2.gif'),
+      //招聘信息
+      zpxxList: [
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+      ],
+      //正式岗位
+      zsgwList: [
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+      ],
+      //实习岗位
+      sxList: [
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+      ],
+      sx: require('@/assets/sx.png'),
+    };
+  },
+  created() {},
+  methods: {
+    async searchvideo() {
+      if (this.dock_id) {
+        let res = await this.dockFetch(this.dock_id);
+        if (this.$checkRes(res)) {
+          // 对接会详情
+          this.$set(this, `videodock`, res.data);
+        }
+      }
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/live/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+.main {
+  // 视频
+  .video {
+    height: 215px;
+    overflow: hidden;
+    .back {
+      position: fixed;
+      z-index: 999;
+      i {
+        font-size: 30px;
+        font-weight: bold;
+        margin: 5px 0 0px 5px;
+        color: #409eff;
+      }
+    }
+    .videoone {
+      height: 215px;
+      overflow: hidden;
+      video {
+        width: 100%;
+      }
+    }
+    .videotwo {
+      background: url('~@/assets/directBack.png');
+      background-size: 100% 100%;
+      height: 215px;
+      overflow: hidden;
+      text-align: center;
+      color: #fff;
+      font-size: 20px;
+      padding: 15% 3%;
+    }
+  }
+  // 聊天
+  .chat {
+    margin: 15px 0 0 0;
+    height: 400px;
+    overflow: hidden;
+    .list {
+      padding: 10px 0;
+      border-bottom: 1px dashed #ccc;
+      .image {
+        text-align: center;
+      }
+      .other {
+        .one {
+          span:nth-child(1) {
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+          }
+          span:nth-child(2) {
+            display: inline-block;
+            margin: 0 0 0 15px;
+            color: #ccc;
+          }
+        }
+        .two {
+          margin: 5px 0 0 0;
+          color: #000;
+          .zh {
+            min-height: 20px;
+            font-size: 15px;
+            padding: 5px;
+            border-radius: 5px;
+            background: #ea4235;
+          }
+          .hywl {
+            min-height: 20px;
+            font-size: 15px;
+            padding: 5px;
+            border-radius: 5px;
+            background: #245efe5f;
+            .hand {
+              width: 12px;
+              top: 3px;
+              left: 5px;
+              margin: 0px 0 0 5px;
+            }
+          }
+          .remark {
+            min-height: 20px;
+            font-size: 15px;
+            padding: 5px;
+            border-radius: 5px;
+            background: #cccccc5f;
+          }
+        }
+      }
+    }
+    // 主办方
+    .company {
+      margin: 15px 0 0 0;
+      .name {
+        margin: 0 0 20px 0;
+        padding: 0 10px;
+        p {
+          text-align: center;
+          color: #409eff;
+        }
+        p:nth-child(1) {
+          font-family: cursive;
+          font-size: 30px;
+          font-weight: bolder;
+          text-shadow: 5px 5px 2px #ccc;
+        }
+        p:nth-child(2) {
+          padding: 10px 0 0 0;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  // 科技超市
+  .market {
+    margin: 15px 0 0 0;
+    .one {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 102px;
+      .list {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .name {
+          font-size: 18px;
+          font-weight: bolder;
+        }
+        .name:hover {
+          color: #409eff;
+        }
+        .textOver {
+          font-size: 16px;
+          color: #666;
+          padding: 5px 0 0 0;
+        }
+        .date {
+          text-align: right;
+        }
+      }
+    }
+    .two {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 102px;
+      .list {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          text-align: right;
+          font-size: 16px;
+        }
+        .other {
+          padding: 2px 0 1px 0;
+          font-size: 16px;
+          span {
+            display: inline-block;
+            width: 50%;
+          }
+        }
+      }
+      .zsgwList:hover {
+        cursor: pointer;
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+    .three {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 92px;
+      .list {
+        padding: 5px 0px;
+        border-bottom: 1px dashed #ccc;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .info1 {
+          padding: 6px 0px 1px 20px;
+          .other {
+            margin-top: 5px;
+            .fldy {
+              margin-top: 5px;
+            }
+          }
+          .name {
+            font-size: 18px;
+            font-weight: bolder;
+          }
+        }
+        .field {
+          margin-top: 8px;
+          font-size: 16px;
+          color: #666;
+        }
+        .image {
+          margin-top: 5px;
+          .el-image {
+            border-radius: 90%;
+          }
+        }
+        .info1 {
+          padding: 6px 0px 1px 20px;
+        }
+      }
+    }
+  }
+}
+// 标签样式重定义
+/deep/.van-tab {
+  font-size: 16px;
+}
+/deep/.van-tabs--card > .van-tabs__wrap {
+  height: 35px;
+}
+/deep/.van-tabs__nav--card {
+  height: 35px;
+  // margin: 0;
+}
+/deep/.van-tabs__nav--card {
+  border: 1px solid #409eff;
+}
+/deep/.van-tabs__nav--card .van-tab {
+  color: #666;
+  border-right: 1px solid #409eff;
+}
+/deep/.van-tabs__nav--card .van-tab.van-tab--active {
+  background-color: #409eff;
+  color: #fff;
+}
+</style>