1

src/router/index.js

@@ -15,18 +15,36 @@ const education = [
     meta: { title: '科普微视频' },
     component: () => import('../views/education/videos.vue'),
   },
+  {
+    path: '/education/videoDetail',
+    name: 'education_videoDetail',
+    meta: { title: '科普微视频' },
+    component: () => import('../views/education/videoDetail.vue'),
+  },
   {
     path: '/education/refute',
     name: 'education_refute',
     meta: { title: '科学辟谣' },
     component: () => import('../views/education/refute.vue'),
   },
+  {
+    path: '/education/refuteDetail',
+    name: 'education_refuteDetail',
+    meta: { title: '科学辟谣' },
+    component: () => import('../views/education/refuteDetail.vue'),
+  },
   {
     path: '/education/expert',
     name: 'education_expert',
     meta: { title: '专家观点' },
     component: () => import('../views/education/expert.vue'),
   },
+  {
+    path: '/education/expertDetail',
+    name: 'education_expertDetail',
+    meta: { title: '专家观点' },
+    component: () => import('../views/education/expertDetail.vue'),
+  },
 ];
 // 科教服务
 const service = [

src/views/education/detail/expert.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="videos">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="title">
+            {{ form.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <el-col :span="12" class="left textOver">
+              来源：<span>{{ form.origin || '暂无' }}</span>
+            </el-col>
+            <el-col :span="12" class="left textOver">
+              时间：<span>{{ getTime(form) }}</span>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p v-html="form.content"></p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const moment = require('moment');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'videos',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {},
+  methods: {
+    // 整理时间
+    getTime(data) {
+      return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0 10px 10px 10px;
+    .title {
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+      padding: 15px 0;
+    }
+    .other {
+      border-bottom: 1px dashed #f1f1f1;
+      padding: 0 0 15px 0;
+      margin: 0 0 10px 0;
+      .left {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        span {
+          color: #000;
+        }
+      }
+    }
+    // .content {
+    // }
+  }
+}
+</style>

src/views/education/detail/refute.vue

@@ -0,0 +1,133 @@
+<template>
+  <div id="refute">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="title">
+            {{ form.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <el-col :span="12" class="left textOver">
+              来源：<span>{{ form.origin || '暂无' }}</span>
+            </el-col>
+            <el-col :span="12" class="left textOver">
+              时间：<span>{{ getTime(form) }}</span>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="videos">
+            <video
+              autoplay="autoplay"
+              controls="controls"
+              preload="meta"
+              x-webkit-airplay="true"
+              webkit-playsinline="true"
+              playsinline="true"
+              x5-video-player-type="h5"
+              x5-video-player-fullscreen="true"
+              controlsList="nodownload"
+              :src="getVideo(form.video_file)"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </video>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p v-html="form.content"></p>
+          </el-col>
+          <el-col :span="24" class="web">
+            <el-link :href="form.web" :underline="false" target="_blank">网站：{{ form.web }}</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const moment = require('moment');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'refute',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {},
+  methods: {
+    // 整理时间
+    getTime(data) {
+      return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
+    },
+    // 整理视频
+    getVideo(data) {
+      if (data.length > 0) {
+        var url = data.map((item) => item.url)[0];
+        if (url) return url;
+      }
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0 10px 10px 10px;
+    .title {
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+      padding: 15px 0;
+    }
+    .other {
+      border-bottom: 1px dashed #f1f1f1;
+      padding: 0 0 15px 0;
+      margin: 0 0 10px 0;
+      .left {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        span {
+          color: #000;
+        }
+      }
+    }
+    .videos {
+      margin: 0 0 10px 0;
+      video {
+        width: 100%;
+        height: 200px;
+      }
+    }
+    .content {
+      margin: 0 0 10px 0;
+    }
+  }
+}
+</style>

src/views/education/detail/videos.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id="videos">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="title">
+            {{ form.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <el-col :span="12" class="left textOver">
+              来源：<span>{{ form.origin || '暂无' }}</span>
+            </el-col>
+            <el-col :span="12" class="left textOver">
+              时间：<span>{{ getTime(form) }}</span>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="videos">
+            <video
+              autoplay="autoplay"
+              controls="controls"
+              preload="meta"
+              x-webkit-airplay="true"
+              webkit-playsinline="true"
+              playsinline="true"
+              x5-video-player-type="h5"
+              x5-video-player-fullscreen="true"
+              controlsList="nodownload"
+              :src="getVideo(form.video_file)"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </video>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const moment = require('moment');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'videos',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {},
+  methods: {
+    // 整理时间
+    getTime(data) {
+      return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
+    },
+    // 整理视频
+    getVideo(data) {
+      if (data.length > 0) {
+        var url = data.map((item) => item.url)[0];
+        if (url) return url;
+      }
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0 10px;
+    .title {
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+      padding: 15px 0;
+    }
+    .other {
+      border-bottom: 1px dashed #f1f1f1;
+      padding: 0 0 15px 0;
+      margin: 0 0 10px 0;
+      .left {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        span {
+          color: #000;
+        }
+      }
+    }
+    .videos {
+      video {
+        width: 100%;
+        height: 200px;
+      }
+    }
+  }
+}
+</style>

src/views/education/expert.vue

@@ -6,7 +6,10 @@
           <top topType="2" :leftArrow="false"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <expert-index></expert-index>
+          <expert-index :list="list"></expert-index>
+        </el-col>
+        <el-col :span="24" class="page">
+          <page :limit="limit" :total="total" @search="search"></page>
         </el-col>
         <el-col :span="24" class="foot">
           <foot :type="1"></foot>
@@ -20,26 +23,80 @@
 import expertIndex from './index/expert.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
+import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: ExpertView } = createNamespacedHelpers('ExpertView');
 export default {
   name: 'expert',
   props: {},
   components: {
+    expertIndex,
     top,
     foot,
-    expertIndex,
+    page,
   },
   data: function () {
     return {
       clientHeight: '',
+      list: [
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+      ],
+      total: 0,
+      limit: '10',
     };
   },
-  async created() {},
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...ExpertView(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        // this.$set(this, `list`, res.data);
+        // this.$set(this, `total`, res.total);
+      }
+    },
+  },
   mounted() {
-    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+
   computed: {
     ...mapState(['user']),
   },
@@ -67,6 +124,10 @@ export default {
     overflow-x: hidden;
     overflow-y: auto;
   }
+  .page {
+    height: 40px;
+    overflow: hidden;
+  }
   .foot {
     height: 50px;
     overflow: hidden;

src/views/education/expertDetail.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @back="back"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <expert-detail :form="form"></expert-detail>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import expertDetail from './detail/expert.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    top,
+    expertDetail,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+      form: {
+        title: '信息标题',
+        origin: '信息来源',
+        content: '信息内容',
+        meta: {
+          createdAt: '2021-01-01',
+        },
+      },
+    };
+  },
+  async created() {
+    if (this.id) await this.search();
+  },
+  methods: {
+    async search() {},
+    back() {
+      this.$router.push({ path: '/education/expert' });
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/education/index/expert.vue

@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detail(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -17,9 +17,6 @@
             </el-col>
           </el-col>
         </el-col>
-        <el-col :span="24" class="foot">
-          <page :limit="limit" :total="total" @search="search"></page>
-        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -27,80 +24,32 @@
 
 <script>
 const moment = require('moment');
-import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: ExpertView } = createNamespacedHelpers('ExpertView');
 export default {
   name: 'expert',
-  props: {},
-  components: {
-    page,
+  props: {
+    list: { type: Array },
   },
+  components: {},
   data: function () {
     return {
       clientHeight: '',
-      list: [
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-      ],
-      total: 0,
-      limit: '10',
     };
   },
-  async created() {
-    await this.search();
-  },
+  async created() {},
   methods: {
-    ...ExpertView(['query']),
-    async search({ skip = 0, limit = this.limit, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
-      if (this.$checkRes(res)) {
-        this.$set(this, `list`, res.data);
-        this.$set(this, `total`, res.total);
-      }
-    },
     getTime(data) {
       return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
     },
+    // 查看详情
+    detail(data) {
+      this.$router.push({ path: '/education/expertDetail', query: { id: data.id } });
+    },
   },
   mounted() {
     let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
     this.$set(this, `clientHeight`, clientHeight);
   },
-
   computed: {
     ...mapState(['user']),
   },
@@ -133,6 +82,12 @@ export default {
         font-size: 15px;
         font-weight: bold;
         margin: 0 0 4px 0;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // -webkit-line-clamp: 2;
+        // word-break: break-all;
+        // display: -webkit-box;
+        // -webkit-box-orient: vertical;
       }
       .other {
         p {

src/views/education/index/refute.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="videos">
+  <div id="refute">
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detail">
             <el-col :span="8" class="image" v-if="item.cover.length > 0">
               <el-image v-for="(i, index) in item.cover" :key="index" :src="i.url" fit="fit"></el-image>
             </el-col>
@@ -25,9 +25,6 @@
             </el-col>
           </el-col>
         </el-col>
-        <el-col :span="24" class="foot">
-          <page :limit="limit" :total="total" @search="search"></page>
-        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -35,57 +32,28 @@
 
 <script>
 const moment = require('moment');
-import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: Refute } = createNamespacedHelpers('Refute');
 export default {
-  name: 'videos',
-  props: {},
-  components: {
-    page,
+  name: 'refute',
+  props: {
+    list: { type: Array },
   },
+  components: {},
   data: function () {
     return {
       clientHeight: '',
-      list: [
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: { createdAt: '2021-01-01' },
-          cover: [
-            {
-              url: require('@a/news1.jpg'),
-              name: '你好',
-            },
-          ],
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: { createdAt: '2021-01-01' },
-          cover: [],
-        },
-      ],
       noImage: require('@a/noImg.jpg'),
-      total: 0,
-      limit: '10',
     };
   },
-  async created() {
-    await this.search();
-  },
+  async created() {},
   methods: {
-    ...Refute(['query']),
-    async search({ skip = 0, limit = this.limit, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
-      if (this.$checkRes(res)) {
-        this.$set(this, `list`, res.data);
-        this.$set(this, `total`, res.total);
-      }
-    },
     getTime(data) {
       return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
     },
+    // 查看详情
+    detail(data) {
+      this.$router.push({ path: '/education/refuteDetail', query: { id: data.id } });
+    },
   },
   mounted() {
     let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
@@ -158,10 +126,5 @@ export default {
       margin: 0;
     }
   }
-  .foot {
-    height: 40px;
-    overflow: hidden;
-    border-top: 1px solid #f1f1f1;
-  }
 }
 </style>

src/views/education/index/videos.vue

@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detail(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -17,9 +17,6 @@
             </el-col>
           </el-col>
         </el-col>
-        <el-col :span="24" class="foot">
-          <page :limit="limit" :total="total" @search="search"></page>
-        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -27,80 +24,32 @@
 
 <script>
 const moment = require('moment');
-import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: MiniVideo } = createNamespacedHelpers('MiniVideo');
 export default {
   name: 'videos',
-  props: {},
-  components: {
-    page,
+  props: {
+    list: { type: Array },
   },
+  components: {},
   data: function () {
     return {
       clientHeight: '',
-      list: [
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          meta: {
-            createdAt: '2021-01-01',
-          },
-        },
-      ],
-      total: 0,
-      limit: '10',
     };
   },
-  async created() {
-    await this.search();
-  },
+  async created() {},
   methods: {
-    ...MiniVideo(['query']),
-    async search({ skip = 0, limit = this.limit, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
-      if (this.$checkRes(res)) {
-        this.$set(this, `list`, res.data);
-        this.$set(this, `total`, res.total);
-      }
-    },
     getTime(data) {
       return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
     },
+    // 查看详情
+    detail(data) {
+      this.$router.push({ path: '/education/videoDetail', query: { id: data.id } });
+    },
   },
   mounted() {
     let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
     this.$set(this, `clientHeight`, clientHeight);
   },
-
   computed: {
     ...mapState(['user']),
   },

src/views/education/refute.vue

@@ -6,7 +6,10 @@
           <top topType="2" :leftArrow="false"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <refute-index></refute-index>
+          <refute-index :list="list"></refute-index>
+        </el-col>
+        <el-col :span="24" class="page">
+          <page :limit="limit" :total="total" @search="search"></page>
         </el-col>
         <el-col :span="24" class="foot">
           <foot :type="1"></foot>
@@ -20,26 +23,62 @@
 import refuteIndex from './index/refute.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
+import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: Refute } = createNamespacedHelpers('Refute');
 export default {
   name: 'refute',
   props: {},
   components: {
+    refuteIndex,
     top,
     foot,
-    refuteIndex,
+    page,
   },
   data: function () {
     return {
       clientHeight: '',
+      list: [
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: { createdAt: '2021-01-01' },
+          cover: [
+            {
+              url: require('@a/news1.jpg'),
+              name: '你好',
+            },
+          ],
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: { createdAt: '2021-01-01' },
+          cover: [],
+        },
+      ],
+      total: 0,
+      limit: '10',
     };
   },
-  async created() {},
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...Refute(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        // this.$set(this, `list`, res.data);
+        // this.$set(this, `total`, res.total);
+      }
+    },
+  },
   mounted() {
-    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+
   computed: {
     ...mapState(['user']),
   },
@@ -67,6 +106,10 @@ export default {
     overflow-x: hidden;
     overflow-y: auto;
   }
+  .page {
+    height: 40px;
+    overflow: hidden;
+  }
   .foot {
     height: 50px;
     overflow: hidden;

src/views/education/refuteDetail.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @back="back"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <refute-detail :form="form"></refute-detail>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import refuteDetail from './detail/refute.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    top,
+    refuteDetail,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+      form: {
+        title: '信息标题',
+        origin: '信息来源',
+        web: 'https://www.baidu.com',
+        video_file: [
+          {
+            url: require('@a/video1.mp4'),
+          },
+        ],
+        content: '信息内容',
+        meta: {
+          createdAt: '2021-01-01',
+        },
+      },
+    };
+  },
+  async created() {
+    if (this.id) await this.search();
+  },
+  methods: {
+    async search() {},
+    back() {
+      this.$router.push({ path: '/education/refute' });
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/education/videoDetail.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @back="back"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <videos-detail :form="form"></videos-detail>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import videosDetail from './detail/videos.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    top,
+    videosDetail,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+      form: {
+        title: '信息标题',
+        origin: '信息来源',
+        video_file: [
+          {
+            url: require('@a/video1.mp4'),
+          },
+        ],
+        meta: {
+          createdAt: '2021-01-01',
+        },
+      },
+    };
+  },
+  async created() {
+    if (this.id) await this.search();
+  },
+  methods: {
+    async search() {},
+    back() {
+      this.$router.push({ path: '/education/videos' });
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/education/videos.vue

@@ -6,7 +6,10 @@
           <top topType="2" :leftArrow="false"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <video-index></video-index>
+          <video-index :list="list"></video-index>
+        </el-col>
+        <el-col :span="24" class="page">
+          <page :limit="limit" :total="total" @search="search"></page>
         </el-col>
         <el-col :span="24" class="foot">
           <foot :type="1"></foot>
@@ -20,7 +23,9 @@
 import videoIndex from './index/videos.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
+import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: MiniVideo } = createNamespacedHelpers('MiniVideo');
 export default {
   name: 'videos',
   props: {},
@@ -28,18 +33,70 @@ export default {
     top,
     foot,
     videoIndex,
+    page,
   },
   data: function () {
     return {
       clientHeight: '',
+      list: [
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          meta: {
+            createdAt: '2021-01-01',
+          },
+        },
+      ],
+      total: 0,
+      limit: '10',
     };
   },
-  async created() {},
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...MiniVideo(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        // this.$set(this, `list`, res.data);
+        // this.$set(this, `total`, res.total);
+      }
+    },
+  },
   mounted() {
-    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+
   computed: {
     ...mapState(['user']),
   },
@@ -67,6 +124,10 @@ export default {
     overflow-x: hidden;
     overflow-y: auto;
   }
+  .page {
+    height: 40px;
+    overflow: hidden;
+  }
   .foot {
     height: 50px;
     overflow: hidden;

vue.config.js

@@ -23,7 +23,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/api/live': {
-        target: 'http://192.168.1.19:9101', //http://192.168.1.19:9101//http://broadcast.waityou24.cn
+        target: 'http://127.0.0.1:9101', //http://192.168.1.19:9101//http://broadcast.waityou24.cn
         changeOrigin: true,
         ws: false,
       },