1

src/views/news/index.vue

@@ -1,19 +1,122 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main"> 新闻资讯 </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="common one">
+            <el-col :span="12" class="left">
+              <top topText="政务动态"></top>
+              <list type="1" :list="oneList"></list>
+            </el-col>
+            <el-col :span="12" class="left">
+              <top topText="通知通告"></top>
+              <list type="2" :list="twoList"></list>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="common two">
+            <el-col :span="12" class="left">
+              <top topText="科技新闻"></top>
+              <list type="3" :list="thrList"></list>
+            </el-col>
+            <el-col :span="12" class="left">
+              <top topText="媒体聚焦"></top>
+              <list type="4" :list="fourList"></list>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="common thr">
+            <el-col :span="24" class="left">
+              <top topText="信息公开"></top>
+              <list type="5" :list="fiveList"></list>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import top from './parts/top.vue';
+import list from './parts/list.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: { top, list },
   data: function () {
-    return {};
+    return {
+      // 政务动态
+      oneList: [
+        {
+          title: '信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表',
+          release_time: '2021-01-16',
+        },
+        {
+          title: '11条数据',
+          release_time: '2021-01-16',
+        },
+      ],
+      // 通知通告
+      twoList: [
+        {
+          title: '信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表',
+          release_time: '2021-01-16',
+        },
+        {
+          title: '11条数据',
+          release_time: '2021-01-16',
+        },
+      ],
+      // 科技新闻
+      thrList: [
+        {
+          image: [
+            {
+              name: '1',
+              url: require('@a/news1.jpg'),
+            },
+            {
+              name: '1',
+              url: require('@a/news1.jpg'),
+            },
+          ],
+          title: '新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题',
+          release_time: '2021-04-16',
+        },
+        {
+          image: [
+            {
+              name: '1',
+              url: require('@a/news1.jpg'),
+            },
+          ],
+          title: '四条数据',
+          release_time: '2021-04-16',
+        },
+      ],
+      // 媒体聚焦
+      fourList: [
+        {
+          title: '信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表',
+          release_time: '2021-01-16',
+        },
+        {
+          title: '11条数据',
+          release_time: '2021-01-16',
+        },
+      ],
+      // 信息公开
+      fiveList: [
+        {
+          title: '信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表信息表',
+          release_time: '2021-01-16',
+        },
+        {
+          title: '12条数据',
+          release_time: '2021-01-16',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -33,4 +136,31 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  min-height: 500px;
+  margin: 10px 0 0 0;
+  .common {
+    margin: 0 0 10px 0;
+    .left {
+      width: 49.5%;
+      height: 500px;
+      overflow: hidden;
+      box-shadow: 0 0 4px #409eff;
+      border-radius: 10px;
+      margin: 0 10px 10px 0;
+      padding: 10px;
+    }
+    .left:nth-child(2n) {
+      margin: 0 0 10px 0;
+    }
+  }
+  .thr {
+    .left {
+      width: 100%;
+      margin: 0;
+      height: 300px;
+    }
+  }
+}
+</style>

src/views/news/parts/list.vue

@@ -0,0 +1,228 @@
+<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="text">
+              <el-col :span="1" class="i">
+                <i class="el-icon-caret-right"></i>
+              </el-col>
+              <el-col :span="18" class="title textOver">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="5" class="date"> [{{ item.release_time }}] </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="one" v-else-if="type == '2'">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="text">
+              <el-col :span="1" class="i">
+                <i class="el-icon-caret-left"></i>
+              </el-col>
+              <el-col :span="18" class="title textOver">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="5" class="date"> [{{ item.release_time }}] </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="thr" v-else-if="type == '3'">
+          <el-col :span="12" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="image">
+              <el-carousel height="135px" arrow="never" indicator-position="none" :interval="2000">
+                <el-carousel-item v-for="(tag, index) in item.image" :key="index">
+                  <el-image :src="tag.url"></el-image>
+                </el-carousel-item>
+              </el-carousel>
+            </el-col>
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="date">
+              {{ item.release_time }}
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="one" v-else-if="type == '4'">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="text">
+              <el-col :span="1" class="i">
+                <i class="el-icon-caret-left"></i>
+              </el-col>
+              <el-col :span="18" class="title textOver">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="5" class="date"> [{{ item.release_time }}] </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="five" v-else-if="type == '5'">
+          <el-col :span="12" class="fiveList" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="text">
+              <el-col :span="1" class="i">
+                <i class="el-icon-caret-right"></i>
+              </el-col>
+              <el-col :span="18" class="title textOver">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="5" class="date"> [{{ item.release_time }}] </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 {};
+  },
+  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;
+  .one {
+    height: 430px;
+    overflow: hidden;
+    .list {
+      height: 39px;
+      line-height: 39px;
+      overflow: hidden;
+      .text {
+        .i {
+          text-align: center;
+        }
+        .title {
+          font-size: 16px;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+    }
+    .list:hover {
+      cursor: pointer;
+      .text {
+        .title {
+          color: #6495ed;
+        }
+      }
+    }
+  }
+  .thr {
+    height: 430px;
+    overflow: hidden;
+    .list {
+      width: 49.1%;
+      height: 208px;
+      margin: 0 10px 10px 0;
+      box-shadow: 0 0 5px #ccc;
+      border-radius: 5px;
+      .image {
+        height: 135px;
+        overflow: hidden;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        /deep/.el-image__inner {
+          height: 135px;
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
+        }
+      }
+      .title {
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        text-align: center;
+        padding: 0px 5px;
+        margin: 5px 0;
+      }
+      .date {
+        font-size: 12px;
+        color: #666;
+        padding: 0px 5px;
+      }
+    }
+    .list:nth-child(2n) {
+      margin: 0 0 10px 0;
+    }
+    .list:hover {
+      cursor: pointer;
+      .title {
+        color: #6495ed;
+      }
+    }
+  }
+  .five {
+    height: 430px;
+    overflow: hidden;
+    .fiveList {
+      height: 39px;
+      line-height: 39px;
+      overflow: hidden;
+      padding: 0 5px 0 0;
+      border-right: 1px solid #ccc;
+      .text {
+        .i {
+          text-align: center;
+        }
+        .title {
+          font-size: 16px;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+    }
+    .fiveList:nth-child(2n) {
+      border-right: none;
+    }
+    .fiveList:hover {
+      cursor: pointer;
+      .text {
+        .title {
+          color: #6495ed;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/news/parts/top.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="20" class="left">
+            {{ topText }}
+          </el-col>
+          <el-col :span="4" class="right">
+            <el-link :underline="false" @click="more">MORE</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'top',
+  props: {
+    topText: { type: String },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    more() {
+      this.$emit('more');
+    },
+  },
+  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 {
+    height: 40px;
+    line-height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #ccc;
+    .left {
+      font-weight: bold;
+      font-size: 16px;
+    }
+    .right {
+      text-align: right;
+      .el-link {
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>