1

src/router/index.js

@@ -62,7 +62,7 @@ const routes = [
   // 咨询服务
   {
     path: '/service/index',
-    meta: { title: 'service_index', isleftarrow: false },
+    meta: { title: '咨询服务', isleftarrow: false },
     component: () => import('../views/service/index.vue'),
   },
   // 引用管理员

src/views/index.vue

@@ -5,7 +5,7 @@
         <el-col :span="24" class="top">
           <top topType="1" @search="search"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" @scroll.native="scrollEvent">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
           内容
         </el-col>
         <el-col :span="24" class="foot">
@@ -66,6 +66,7 @@ export default {
     border-bottom: 1px solid #f1f1f1;
   }
   .info {
+    overflow-x: hidden;
     overflow-y: auto;
   }
   .foot {

src/views/service/index.vue

@@ -2,23 +2,116 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        咨询服务
+        <el-col :span="24" class="top">
+          <top topType="1" @search="search"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <van-tabs v-model="active">
+            <van-tab title="文字">
+              <list type="1" :list="oneList"></list>
+            </van-tab>
+            <van-tab title="图片">
+              <list type="2" :list="twoList"></list>
+            </van-tab>
+            <van-tab title="科普视频">
+              <list type="3" :list="thrList"></list>
+            </van-tab>
+            <van-tab title="培训视频">
+              <list type="4" :list="fourList"></list>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <page limit="5" :total="total" @search="search"></page>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import list from './parts/list.vue';
+import top from '@/layout/common/top.vue';
+import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    top,
+    page,
+    list,
+  },
   data: function() {
-    return {};
+    return {
+      clientHeight: '',
+      // 文章菜单
+      active: 0,
+      // 文字
+      oneList: [
+        {
+          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          origin: '信息来源',
+          renew_time: '2021-03-30 10:00:00',
+          read: 10000,
+        },
+        {
+          title: '信息标题',
+          origin: '信息来源',
+          renew_time: '2021-03-30 10:00:00',
+          read: 10,
+        },
+      ],
+      // 图片
+      twoList: [
+        {
+          title: '信息标题',
+          origin: '信息来源',
+          read: 10,
+          imgUrl: require('@a/news1.jpg'),
+        },
+        {
+          title: '信息标题',
+          origin: '信息来源',
+          read: 10,
+        },
+      ],
+      // 科普
+      thrList: [
+        {
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
+          fileUrl: require('@a/video1.mp4'),
+          origin: '不知道',
+          renew_time: '2021-03-25 21:12:44',
+          read: 10000,
+        },
+      ],
+      // 培训
+      fourList: [
+        {
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
+          fileUrl: require('@a/video1.mp4'),
+          origin: '不知道',
+          renew_time: '2021-03-25 21:12:44',
+          read: 10000,
+        },
+      ],
+      // 总数
+      total: 0,
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search({ skip = 0, limit = 10, searchName, ...info } = {}) {
+      console.log();
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -35,4 +128,22 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>

src/views/service/parts/list.vue

@@ -0,0 +1,260 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one" v-if="type == '1'">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="24" class="origin">
+                信息来源:<span>{{ item.origin || '系统管理员' }}</span>
+              </el-col>
+              <el-col :span="24" class="date">
+                <el-col :span="20" class="left">
+                  更新时间:<span>{{ item.renew_time || '暂无时间' }}</span>
+                </el-col>
+                <el-col :span="4" class="right"> <i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }} </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="two" v-else-if="type == '2'">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="17" class="title">
+              <el-col :span="24" class="text">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="24" class="other">
+                <el-col :span="20" class="left">
+                  {{ item.origin || '系统管理员' }}
+                </el-col>
+                <el-col :span="4" class="right"> <i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }} </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="7" class="image">
+              <el-image :src="item.imgUrl">
+                <div slot="error" class="image-slot">
+                  <img :src="noImg" alt="" />
+                </div>
+              </el-image>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="thr" v-else-if="type == '3'">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="video">
+              <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="item.fileUrl"
+                loop="loop"
+              >
+                <source src="movie.ogg" type="video/ogg" />
+                <source src="movie.mp4" type="video/mp4" />
+              </video>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="20" class="left">{{ item.origin || '系统管理员' }}{{ item.renew_time || '暂无时间' }}</el-col>
+              <el-col :span="4" class="right"><i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }}</el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="thr" v-else-if="type == '4'">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="video">
+              <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="item.fileUrl"
+                loop="loop"
+              >
+                <source src="movie.ogg" type="video/ogg" />
+                <source src="movie.mp4" type="video/mp4" />
+              </video>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="20" class="left">{{ item.origin || '系统管理员' }}{{ item.renew_time || '暂无时间' }}</el-col>
+              <el-col :span="4" class="right"><i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }}</el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    type: { type: String },
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      noImg: require('@a/noImg.jpg'),
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  margin: 10px 0 0 0;
+  padding: 0 5px;
+  .one {
+    .list {
+      background-color: #fff;
+      margin: 0 0 10px 0;
+      padding: 8px;
+      border-radius: 5px;
+      .title {
+        font-size: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        margin: 0 0 4px 0;
+      }
+      .other {
+        .origin {
+          font-size: 14px;
+          color: #666;
+          margin: 0 0 5px 0;
+          span {
+            color: #000;
+          }
+        }
+        .date {
+          font-size: 14px;
+          color: #666;
+          margin: 0 0 5px 0;
+          span {
+            color: #000;
+          }
+          .right {
+            text-align: right;
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+  .two {
+    .list {
+      background-color: #fff;
+      margin: 0 0 10px 0;
+      padding: 8px;
+      border-radius: 5px;
+      position: relative;
+      .title {
+        padding: 0 5px 0 0;
+        .text {
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          margin: 0 0 4px 0;
+          padding: 0 5px 0 0;
+        }
+        .other {
+          font-size: 14px;
+          color: #666;
+          position: relative;
+          top: 25px;
+          .right {
+            text-align: right;
+            height: 20px;
+            line-height: 25px;
+          }
+        }
+      }
+      .image {
+        .el-image {
+          float: right;
+          width: 100%;
+          height: 100%;
+          border-radius: 5px;
+        }
+        /deep/.image-slot img {
+          width: 100%;
+          height: 100%;
+          vertical-align: top;
+        }
+      }
+    }
+  }
+  .thr {
+    .list {
+      background-color: #fff;
+      margin: 0 0 10px 0;
+      padding: 8px;
+      border-radius: 5px;
+      .title {
+        font-size: 15px;
+        margin: 0 0 5px 0;
+      }
+      .video {
+        margin: 0 0 5px 0;
+        border: 1px solid #f1f1f1;
+        video {
+          float: left;
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .other {
+        font-size: 14px;
+        color: #666;
+        .right {
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+</style>