1

src/views/community/index.vue

@@ -2,23 +2,98 @@
   <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' }">
+          <list :list="communityList"></list>
+        </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: {
+    list,
+    top,
+    page,
+  },
   data: function() {
-    return {};
+    return {
+      clientHeight: '',
+      communityList: [
+        {
+          content:
+            '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
+          origin: '文章来源',
+          renew_time: '2021-02-01 10:00:00',
+          type: '0',
+          imgUrl: [
+            { name: '图片名称', url: require('@a/news1.jpg') },
+            // { name: '图片名称1', url: require('@a/news1.jpg') },
+            // { name: '图片名称2', url: require('@a/news1.jpg') },
+          ],
+          fileUrl: require('@a/video1.mp4'),
+          website: 'http://broadcast.waityou24.cn/platlive/home.html',
+          read: 10,
+        },
+        {
+          content:
+            '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
+          origin: '文章来源',
+          renew_time: '2021-02-01 10:00:00',
+          type: '0',
+          imgUrl: [
+            { name: '图片名称', url: require('@a/news1.jpg') },
+            { name: '图片名称1', url: require('@a/news1.jpg') },
+            { name: '图片名称2', url: require('@a/news1.jpg') },
+          ],
+          fileUrl: require('@a/video1.mp4'),
+          website: 'http://broadcast.waityou24.cn/platlive/home.html',
+          read: 10,
+        },
+        {
+          content:
+            '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
+          origin: '文章来源',
+          renew_time: '2021-02-01 10:00:00',
+          type: '0',
+          imgUrl: [
+            { name: '图片名称', url: require('@a/news1.jpg') },
+            { name: '图片名称1', url: require('@a/news1.jpg') },
+            { name: '图片名称2', url: require('@a/news1.jpg') },
+          ],
+          fileUrl: require('@a/video1.mp4'),
+          website: 'http://broadcast.waityou24.cn/platlive/home.html',
+          read: 10,
+        },
+      ],
+      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(searchName);
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -35,4 +110,21 @@ 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;
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>

src/views/community/parts/list.vue

@@ -0,0 +1,120 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="content">
+            {{ item.content }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <span>来源:{{ item.origin || '系统管理员' }}</span>
+            <span>更新时间:{{ item.renew_time || '暂无时间' }}</span>
+          </el-col>
+          <el-col :span="24" class="image" v-if="item.type == '0'">
+            <img :src="tag.url" v-for="(tag, index) in item.imgUrl" :key="index" :style="{ width: item.imgUrl.length == 1 ? '100%' : '48.5%' }" />
+          </el-col>
+          <el-col :span="24" class="video" v-else-if="item.type == '1'">
+            <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="btn">
+            <el-col :span="6" class="button"><i class="el-icon-position"></i>分享</el-col>
+            <el-col :span="6" class="button"><i class="el-icon-chat-line-round"></i>分享</el-col>
+            <el-col :span="6" class="button"><i class="el-icon-thumb"></i>点赞</el-col>
+            <el-col :span="6" class="button"><i class="el-icon-view"></i>阅读</el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    list: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  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 {
+  padding: 0 5px;
+  .list {
+    border-bottom: 1px solid #ccc;
+    padding: 10px 0 0 0;
+  }
+  .content {
+    font-size: 15px;
+    margin: 0 0 5px 0;
+  }
+  .other {
+    color: #666;
+    font-size: 14px;
+    margin: 0 0 10px 0;
+    span:nth-child(2) {
+      padding: 0 0 0 10px;
+    }
+  }
+  .image {
+    img {
+      margin: 0 10px 0 0;
+      border-radius: 5px;
+    }
+    img:nth-child(2n) {
+      margin: 0 0 0 0;
+    }
+  }
+  .video {
+    margin: 0 0 5px 0;
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .btn {
+    .button {
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      background-color: #f1f1f1;
+      border-top: 1px solid #ccc;
+    }
+  }
+}
+</style>