1

src/App.vue

@@ -14,9 +14,9 @@ p {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-#app {
-  max-width: 375px;
-  max-height: 667px;
-  margin: 0 auto;
-}
+// #app {
+//   // max-width: 375px;
+//   // max-height: 667px;
+//   // margin: 0 auto;
+// }
 </style>

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
     meta: { title: '文章辟谣', isleftarrow: false },
     component: () => import('../views/refute/index.vue'),
   },
+  {
+    path: '/refute/detail',
+    meta: { title: '文章详情', isleftarrow: false },
+    component: () => import('../views/refute/detail.vue'),
+  },
   // 社区话题
   {
     path: '/community/index',

src/views/refute/detail.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @upBack="upBack"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" @scroll.native="scrollEvent">
+          内容
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    top,
+  },
+  data: function() {
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search() {},
+    // 返回上一页
+    upBack() {
+      this.$router.push({ path: '/refute/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  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 #ccc;
+  }
+  .info {
+    overflow-y: auto;
+  }
+}
+</style>

src/views/refute/index.vue

@@ -6,7 +6,7 @@
           <top topType="1" @search="search"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <list :list="refuteList"></list>
+          <list :list="refuteList" @detailBtn="detailBtn"></list>
         </el-col>
         <el-col :span="24" class="foot">
           <page limit="5" :total="total" @search="search"></page>
@@ -35,48 +35,57 @@ export default {
       refuteList: [
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10000,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 100,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 1000,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10,
         },
         {
           imgUrl: require('@a/news1.jpg'),
-          title: '文章标题',
+          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
           renew_time: '2021-03-25 21:12:44',
+          num: 10,
         },
       ],
       total: 0,
@@ -93,6 +102,10 @@ export default {
     search({ skip = 0, limit = 10, searchName, ...info } = {}) {
       console.log(searchName);
     },
+    // 详情
+    detailBtn(data) {
+      this.$router.push({ path: '/refute/detail', query: { id: data.id } });
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/refute/parts/list.vue

@@ -2,16 +2,17 @@
   <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="9" class="image">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="8" class="image">
             <el-image :src="item.imgUrl"></el-image>
           </el-col>
-          <el-col :span="15" class="info">
+          <el-col :span="16" class="info">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
             <el-col :span="24" class="date">
-              {{ item.renew_time }}
+              <span>{{ item.renew_time }}</span>
+              <span>阅读:{{ item.num >= 10000 ? '1万+' : item.num }}</span>
             </el-col>
           </el-col>
         </el-col>
@@ -32,7 +33,12 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    // 详情
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -72,14 +78,24 @@ export default {
         word-break: break-all;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-        font-size: 18px;
-        font-weight: bold;
-        line-height: 25px;
+        font-size: 16px;
+        line-height: 22px;
       }
       .date {
         position: absolute;
-        bottom: 15px;
+        bottom: 10px;
         color: #666;
+        font-size: 14px;
+        span {
+          display: inline-block;
+        }
+        span:nth-child(1) {
+          width: 40%;
+        }
+        span:nth-child(2) {
+          width: 25%;
+          text-align: right;
+        }
       }
     }
   }