更新

src/components/pagination.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="pagination">
+    <el-row type="flex" align="middle" style="padding-top:1rem">
+      <el-col :span="24" :style="`text-align:${position};`">
+        <el-pagination
+          background
+          layout=" total, prev, pager, next"
+          :total="total"
+          :page-size="limit"
+          :current-page.sync="currentPage"
+          @current-change="changePage"
+        >
+        </el-pagination>
+        <!-- 
+          :page-sizes="[5, 10, 15, 20, 50, 100]"
+          @size-change="sizeChange"
+         -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'pagination',
+  props: {
+    position: { type: String, default: 'right' },
+    total: { type: Number, default: 0 },
+    limit: { type: Number, default: 10 },
+  },
+  components: {},
+  data: () => {
+    return {
+      currentPage: 1,
+    };
+  },
+  created() {},
+  methods: {
+    changePage(page) {
+      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
+    },
+    sizeChange(limit) {
+      this.limit = limit;
+      this.$emit('query', { skip: 0, limit: this.limit });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/news/listDetail.vue

@@ -19,17 +19,28 @@
               </el-col>
               <el-col :span="24" class="menu">
                 <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
-                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
+                  <p
+                    @click="changeMenu(item.name, index)"
+                    :style="`background:${menuIndex == index ? menuBack : ''};color:${menuIndex == index ? menuColor : ''}`"
+                  >
+                    {{ item.name }}
+                  </p>
                 </el-col>
               </el-col>
             </el-col>
             <el-col :span="18" class="right">
               <span v-if="displays == '0'">
-                <el-col :span="24" v-for="(item, index) in list" :key="index">
-                  <p @click="detailBtn(item.title)">{{ item.title }}</p>
+                <el-col :span="24" class="one">
+                  <span></span>
+                  <span>{{ columnName }}</span>
                 </el-col>
+                <el-col :span="24" class="list">
+                  <newsList :list="list" :total="total" @detailBtn="detailBtn"></newsList>
+                </el-col>
+              </span>
+              <span v-else>
+                <detailInfo :newsDetail="newsDetail"></detailInfo>
               </span>
-              <span v-else>详情</span>
             </el-col>
           </div>
         </el-col>
@@ -47,7 +58,8 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
-import listDetails from './parts/listDetail.vue';
+import newsList from './parts/newsList.vue';
+import detailInfo from './parts/detailInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'listDetail',
@@ -56,19 +68,37 @@ export default {
     top,
     menus,
     foot,
+    newsList,
+    detailInfo,
   },
   data: function() {
     return {
       menuList: [{ name: '科技资讯' }, { name: '技术前沿' }, { name: '工作动态' }, { name: '通知通告' }],
-      menuColor: 'rgb(254, 149, 14)',
+      menuBack: 'rgb(33,82,153,0.5)',
+      menuColor: 'rgb(255, 255, 255)',
       menuIndex: '0',
       columnName: '',
       displays: '0',
+      // 列表
       list: [
         {
-          title: '列表',
+          title: '标题',
+          date: '2020-02-02',
+        },
+        {
+          title: '十四数据',
+          date: '2020-02-02',
         },
       ],
+      // 总数
+      total: 10,
+      // 详情
+      newsDetail: {
+        title: '信息标题',
+        source: '信息部',
+        date: '2020-02-02',
+        content: '信息内容',
+      },
     };
   },
   created() {
@@ -80,22 +110,22 @@ export default {
       if (this.col_name == '科技资讯') {
         this.menuIndex = 0;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(254, 149, 14)';
+        this.menuColor = 'rgb(255, 255, 255)';
         this.$set(this, `displays`, this.display);
       } else if (this.col_name == '技术前沿') {
         this.menuIndex = 1;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(254, 149, 14)';
+        this.menuColor = 'rgb(255, 255, 255)';
         this.$set(this, `displays`, this.display);
       } else if (this.col_name == '工作动态') {
         this.menuIndex = 2;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(254, 149, 14)';
+        this.menuColor = 'rgb(255, 255, 255)';
         this.$set(this, `displays`, this.display);
       } else if (this.col_name == '通知通告') {
         this.menuIndex = 3;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(254, 149, 14)';
+        this.menuColor = 'rgb(255, 255, 255)';
         this.$set(this, `displays`, this.display);
       }
     },
@@ -103,11 +133,11 @@ export default {
     changeMenu(name, index) {
       this.menuIndex = index;
       this.columnName = name;
-      this.menuColor = 'rgb(254, 149, 14)';
+      this.menuColor = 'rgb(255, 255, 255)';
       this.$set(this, `displays`, 0);
     },
     // 点击详情
-    detailBtn(title) {
+    detailBtn(id) {
       this.$set(this, `displays`, 1);
     },
   },
@@ -161,6 +191,9 @@ export default {
         line-height: 50px;
         text-align: center;
         border-bottom: 1px solid #ccc;
+        p {
+          font-size: 20px;
+        }
       }
     }
     .right {
@@ -168,7 +201,7 @@ export default {
       min-height: 600px;
       background: #fff;
       padding: 0 20px;
-      .top {
+      .one {
         height: 35px;
         margin: 20px 0;
         border-bottom: 1px dashed #ccc;

src/views/news/parts/detailInfo.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="detailInfo">
+    <el-row>
+      <el-col :span="24" class="info">
+        <h3>{{ newsDetail.title }}</h3>
+        <div>
+          <span>文章来源:{{ newsDetail.source }}</span>
+          <span>时间:{{ newsDetail.date }}</span>
+        </div>
+        <p>{{ newsDetail.content }}</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detailInfo',
+  props: {
+    newsDetail: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 20px 0;
+  h3 {
+    font-size: 24px;
+    color: #005293;
+    text-align: center;
+  }
+  div {
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    padding: 0 0 40px 0;
+    margin: 0 0 20px 0;
+    span {
+      color: #666666;
+      padding: 0 10px;
+    }
+  }
+}
+</style>

src/views/news/parts/listDetail.vue

@@ -1,64 +0,0 @@
-<template>
-  <div id="listDetail">
-    <el-row>
-      <el-col :span="24" class="info">
-        <el-col :span="24" class="top">
-          <span></span>
-          <span>{{ col_name }}</span>
-        </el-col>
-        <el-col :span="24" class="message">
-          列表详情
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'listDetail',
-  props: {},
-  components: {},
-  data: function() {
-    return {};
-  },
-  created() {},
-  methods: {},
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-    col_name() {
-      return this.$route.query.col_name;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.info {
-  padding: 0 20px;
-  .top {
-    height: 35px;
-    margin: 20px 0;
-    border-bottom: 1px dashed #ccc;
-    span:first-child {
-      display: inline-block;
-      width: 4px;
-      height: 20px;
-      background: #005293;
-      margin: 0 10px -3px 0;
-    }
-    span:nth-child(2) {
-      font-size: 20px;
-      color: #005293;
-      font-weight: bold;
-    }
-  }
-}
-</style>

src/views/news/parts/newsList.vue

@@ -0,0 +1,83 @@
+<template>
+  <div id="newsList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="list" @click.native="detailBtn(item.id)" v-for="(item, index) in list" :key="index">
+          <span></span>
+          <span class="textOver">{{ item.title }}</span>
+          <span>{{ item.date }}</span>
+        </el-col>
+        <el-col :span="24" class="page">
+          <pagination :total="total"></pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import pagination from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'newsList',
+  props: {
+    list: null,
+    total: null,
+  },
+  components: {
+    pagination,
+  },
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    detailBtn(id) {
+      this.$emit('detailBtn', id);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  .list {
+    padding: 0 0 7px 0;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 4px;
+      background: #ccc;
+      margin: 0px 10px 7px 0px;
+    }
+    span:nth-child(2) {
+      display: inline-block;
+      font-size: 16px;
+      color: #555555;
+      font-family: '微软雅黑';
+      width: 85%;
+      margin: 0 30px 0 0;
+    }
+    span:last-child {
+      display: inline-block;
+      width: 90px;
+      font-size: 16px;
+      color: #a8abb7;
+      font-family: '微软雅黑';
+      text-align: right;
+    }
+  }
+  .page {
+    height: 50px;
+  }
+}
+</style>