1

src/App.vue

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

src/layout/common/page.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="page">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-pagination v-model="currentPage" @change="changePage" :total-items="total" :items-per-page="limit" :show-page-size="5" force-ellipses />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'page',
+  props: {
+    total: { type: Number },
+    limit: { type: String, default: () => '6' },
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1,
+    };
+  },
+  created() {},
+  methods: {
+    changePage(page) {
+      this.$emit('search', { skip: (page - 1) * this.limit });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/common/top.md

@@ -0,0 +1,7 @@
+<!-- 头部类型 -->
+# topType
+## topType=="1" 带有查询，查询方法:search
+
+## topType=="2" 带有标题和返回，返回方法：upback
+
+## topType=="3" 带有返回和查询，返回方法：upback，查询方法：search

src/layout/common/top.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one" v-if="topType == '1'">
+          <van-search v-model="searchName" placeholder="请输入信息标题" @search="search" />
+        </el-col>
+        <el-col :span="24" class="two" v-else-if="topType == '2'">
+          <van-nav-bar :title="this.$route.meta.title" left-text="返回" left-arrow @click-left="upBack" />
+        </el-col>
+        <el-col :span="24" class="thr" v-else-if="topType == '3'">
+          <el-col :span="4" class="back" @click.native="upBack"> <van-icon name="arrow-left" />返回 </el-col>
+          <el-col :span="20" class="search">
+            <van-search v-model="searchName" placeholder="请输入赠与人名称" @search="search" />
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'top',
+  props: {
+    topType: { type: String, default: () => '1' },
+  },
+  components: {},
+  data: function() {
+    return {
+      searchName: '',
+    };
+  },
+  created() {},
+  methods: {
+    // 查询
+    search() {
+      this.$emit('search', { searchName: this.searchName });
+    },
+    // 返回
+    upBack() {
+      this.$emit('upBack');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    /deep/.van-search {
+      padding: 3px 5px;
+    }
+  }
+  .two {
+    /deep/.van-nav-bar__content {
+      height: 40px;
+    }
+  }
+  .thr {
+    .back {
+      color: #409eff;
+      padding: 8px 0;
+      text-align: center;
+      .van-icon {
+        top: 3px;
+      }
+    }
+    .search {
+      /deep/.van-search {
+        padding: 2px 5px 2px 0px;
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -8,13 +8,13 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: '/',
-    meta: { title: 'index', isleftarrow: false },
+    meta: { title: '系统首页', isleftarrow: false },
     component: () => import('../views/index.vue'),
   },
   // 文章辟谣
   {
     path: '/refute/index',
-    meta: { title: 'refute_index', isleftarrow: false },
+    meta: { title: '文章辟谣', isleftarrow: false },
     component: () => import('../views/refute/index.vue'),
   },
   // 社区话题
@@ -23,11 +23,11 @@ const routes = [
     meta: { title: 'community_index', isleftarrow: false },
     component: () => import('../views/community/index.vue'),
   },
-  // 个人中心
+  // 咨询服务
   {
-    path: '/center/index',
-    meta: { title: 'center_index', isleftarrow: false },
-    component: () => import('../views/center/index.vue'),
+    path: '/service/index',
+    meta: { title: 'service_index', isleftarrow: false },
+    component: () => import('../views/service/index.vue'),
   },
 ];
 

src/views/community/index.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        test
+        社区话题
       </el-col>
     </el-row>
   </div>

src/views/index.vue

@@ -2,23 +2,46 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        test
+        <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>
+        <el-col :span="24" class="foot">
+          底部
+        </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: {},
+  components: {
+    top,
+  },
   data: function() {
-    return {};
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search({ skip = 0, limit = 10, searchName, ...info } = {}) {
+      console.log(searchName);
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -35,4 +58,20 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #ccc;
+  }
+  .info {
+    overflow-y: auto;
+  }
+  .foot {
+    height: 50px;
+    overflow: hidden;
+    border-top: 1px solid #ccc;
+  }
+}
+</style>

src/views/refute/index.vue

@@ -2,23 +2,98 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        test
+        <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="refuteList"></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: '',
+      refuteList: [
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+        {
+          imgUrl: require('@a/news1.jpg'),
+          title: '文章标题',
+          renew_time: '2021-03-25 21:12:44',
+        },
+      ],
+      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/refute/parts/list.vue

@@ -0,0 +1,87 @@
+<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="9" class="image">
+            <el-image :src="item.imgUrl"></el-image>
+          </el-col>
+          <el-col :span="15" class="info">
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="date">
+              {{ item.renew_time }}
+            </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: 5px;
+  .list {
+    border-bottom: 1px solid #ccc;
+    padding: 8px 0;
+    position: relative;
+    .image {
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+      }
+    }
+    .info {
+      padding: 0 8px;
+      .title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 3;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        font-size: 18px;
+        font-weight: bold;
+        line-height: 25px;
+      }
+      .date {
+        position: absolute;
+        bottom: 15px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/views/center/index.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        test
+        咨询服务
       </el-col>
     </el-row>
   </div>