页面更新

src/layout/index/noticeNews.vue

@@ -2,18 +2,26 @@
   <div id="noticeNews">
     <el-row>
       <el-col :span="24" style="width:460px;height:304px;" v-loading="loading">
-        <el-tabs v-model="activeName" type="card" :before-leave="handleClick">
-          <el-tab-pane v-for="(item, index) in infoList" :key="index">
-            <span slot="label">{{ item.title }}</span>
-            <el-col :span="24" v-for="(tag, index) in item.children" :key="index" class="list" @click.native="$router.push({ path: `/detail?id=${tag.id}` })">
-              <el-col :span="18" class="title">
-                <i class="el-icon-caret-right icon"></i>
-                <p class="textOver">{{ tag.title }}</p>
-              </el-col>
-              <el-col :span="5" class="date">{{ tag.meta | getDate }}</el-col>
+        <el-col :span="24" class="top">
+          <el-col :span="20" class="topTit">
+            <span> {{ noticeNewsList.title || title }}</span>
+          </el-col>
+          <el-col :span="4" class="topLink">
+            <el-link :underline="false" @click="$router.push({ path: path, query: { title: noticeNewsList.title } })"
+              >more<i class="el-icon-d-arrow-right"></i
+            ></el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="list" v-for="(item, index) in infoList" :key="index" @click.native="$router.push({ path: `/detail?id=${item.id}` })">
+            <el-col :span="19" class="title">
+              <p class="textOver"><i class="el-icon-caret-right icon"></i>{{ item.title }}</p>
             </el-col>
-          </el-tab-pane>
-        </el-tabs>
+            <el-col :span="5" class="date">
+              {{ item.meta | getDate }}
+            </el-col>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -28,9 +36,10 @@ export default {
   },
   components: {},
   data: () => ({
-    activeName: '',
-    infoList: [],
+    title: '通知公告',
     loading: true,
+    infoList: [],
+    path: undefined,
   }),
   watch: {
     noticeNewsList: {
@@ -42,18 +51,17 @@ export default {
   created() {},
   computed: {},
   methods: {
-    handleClick(tab, event) {},
     assignData(data) {
       let columns = _.get(data, 'children');
-      // let notice = [];
-      // for (const item of columns) {
-      //   if (!this.path) this.path = item.path;
-      //   let noticeNewsList = _.get(item, `children`);
-      //   if (noticeNewsList) {
-      //     notice = notice.concat(notice, noticeNewsList);
-      //   }
-      // }
-      this.$set(this, `infoList`, columns);
+      let notice = [];
+      for (const item of columns) {
+        if (!this.path) this.path = item.path;
+        let noticeNewsList = _.get(item, `children`);
+        if (noticeNewsList) {
+          notice = notice.concat(notice, noticeNewsList);
+        }
+      }
+      this.$set(this, `infoList`, notice);
       this.loading = false;
     },
   },
@@ -80,27 +88,43 @@ p {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/deep/.el-tabs__item {
-  font-size: 16px;
-}
-/deep/.el-tabs--card > .el-tabs__header {
+.top {
+  height: 39px;
+  line-height: 39px;
   border-bottom: 1px solid #176ebb;
 }
-/deep/.el-tabs__header {
-  margin: 0;
+.top .topTit span {
+  display: inline-block;
+  width: 110px;
+  height: 39px;
+  line-height: 39px;
+  text-align: center;
+  color: #fff;
+  font-size: 16px;
+  background-color: #176ebb;
 }
-/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
-  border-bottom: none;
+.top .topLink {
+  height: 39px;
+  line-height: 39px;
+  text-align: center;
 }
-/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
-  border: none;
+.top .topLink .el-link {
+  height: 39px;
+  line-height: 39px;
+  text-align: center;
+  color: #000;
+  font-size: 16px;
+  text-transform: uppercase;
 }
-/deep/.el-tabs__item.is-active {
-  color: #fff;
-  background: #176ebb;
+.top .topLink:hover .el-link {
+  color: #a32324;
+}
+.info {
+  height: 260px;
+  overflow: hidden;
 }
 .list {
-  padding: 7px 10px 7px 0;
+  padding: 6px 10px;
 }
 .list .title {
   font-size: 16px;