new index + news

src/views/career/information/index.vue

@@ -1,102 +1,100 @@
-<template>
-  <div class="info-container">
-    <el-container>
-      <el-main>
-        <div class="info-tabs">
-          <el-radio-group v-model="type" @change="detailMode = false">
-            <el-radio-button
-              v-for="opt in typeOptions"
-              :key="opt.value"
-              :label="opt.label"
-              >{{ opt.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <info-list
-          class="mt10"
-          :type="type"
-          v-show="!detailMode"
-          @click="detailList"
-        ></info-list>
-        <info-detail
-          class="mt10"
-          v-if="detailMode"
-          :type="type"
-          :title="detailTitle"
-          :id="detailId"
-          @close="detailClose"
-        />
-      </el-main>
-      <el-aside width="400px" style="background-color: #ffffff">
-        <el-card class="mt20" v-for="opt in typeOptions" :key="opt.value">
-          <info-sample
-            :type="opt.label"
-            :title="opt.label"
-            @click="detailSample"
-        /></el-card>
-      </el-aside>
-    </el-container>
-  </div>
-</template>
-<script>
-import InfoDetail from "../components/infoDetail.vue";
-import infoList from "../components/infoList.vue";
-import InfoSample from "../components/infoSample.vue";
-import * as career from "@/api/webApi/career-news";
-
-export default {
-  components: { infoList, InfoSample, InfoDetail },
-  data() {
-    return {
-      detailMode: false,
-      detailTitle: "",
-      detailId: 0,
-      type: "",
-      typeOptions: [],
-    };
-  },
-  watch: {
-    $route: function () {
-      this.getTypes();
-    },
-  },
-  created() {
-    this.getTypes();
-  },
-  methods: {
-    detailList(item) {
-      this.detailTitle = item.title;
-      this.detailId = item.id;
-      this.detailMode = true;
-    },
-    detailSample(item) {
-      this.detailTitle = item.title;
-      this.detailId = item.id;
-      this.detailMode = true;
-    },
-    detailClose() {
-      this.detailMode = false;
-    },
-    getTypes() {
-      career.types().then((res) => {
-        console.log("career news res", res);
-        if (res.code == 200 || res.code == 0) {
-          this.typeOptions = res.rows;
-          let query = this.$route.query;
-          console.log(query)
-          if (query.hasOwnProperty("name")) {
-            this.type = query.name;
-            return;
-          } else {
-            this.type = this.typeOptions[0].label;
-          }
-        } else {
-          this.msgError(res.msg || "career news types 请求异常");
-        }
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-</style>
+<template>
+  <div class="info-container">
+    <el-container>
+      <el-main>
+        <div class="info-tabs">
+          <el-radio-group v-model="type" @change="detailMode = false">
+            <el-radio-button
+              v-for="opt in typeOptions"
+              :key="opt.value"
+              :label="opt.label"
+            >{{ opt.label }}
+            </el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <info-list
+          class="mt10"
+          :type="type"
+          v-show="!detailMode"
+          @click="detailList"
+        ></info-list>
+        <info-detail
+          class="mt10"
+          v-if="detailMode"
+          :type="type"
+          :title="detailTitle"
+          :id="detailId"
+          @close="detailClose"
+        />
+      </el-main>
+      <el-aside width="400px" style="background-color: #ffffff">
+        <el-card class="mt20" v-for="opt in typeOptions" :key="opt.value">
+          <info-sample
+            :type="opt.label"
+            :title="opt.label"
+            @click="detailSample"
+          />
+        </el-card>
+      </el-aside>
+    </el-container>
+  </div>
+</template>
+<script>
+import transferMixin from '@/components/mx-transfer-mixin'
+import InfoDetail from '../components/infoDetail.vue'
+import infoList from '../components/infoList.vue'
+import InfoSample from '../components/infoSample.vue'
+import * as career from '@/api/webApi/career-news'
+
+export default {
+  mixins: [transferMixin],
+  components: { infoList, InfoSample, InfoDetail },
+  data() {
+    return {
+      detailMode: false,
+      detailTitle: '',
+      detailId: 0,
+      type: '',
+      typeOptions: []
+    }
+  },
+  watch: {
+    $route: function() {
+      this.getTypes()
+    }
+  },
+  created() {
+    this.getTypes()
+  },
+  methods: {
+    detailList(item) {
+      this.detailTitle = item.title
+      this.detailId = item.id
+      this.detailMode = true
+    },
+    detailSample(item) {
+      this.detailTitle = item.title
+      this.detailId = item.id
+      this.detailMode = true
+    },
+    detailClose() {
+      this.detailMode = false
+    },
+    getTypes() {
+      career.types().then((res) => {
+        console.log('career news res', res)
+        if (res.code == 200 || res.code == 0) {
+          this.typeOptions = res.rows
+          let query = this.$route.query?.name || this.prevData.type
+          this.type = query || this.typeOptions.first()?.label
+        } else {
+          this.msgError(res.msg || 'career news types 请求异常')
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/index/components/index-card-news.vue

@@ -4,10 +4,12 @@
       <el-tab-pane v-for="type in newsTypes" :key="type" :name="type" :label="type">
         <el-row>
           <el-col v-for="news in getSafeNews(type)" :key="news.id" :span="12">
-            <div class="fx-row fx-sta-cen pr30 pf f-333" style="line-height: 35px">
+            <div class="fx-row fx-sta-cen pf f-333 pr40" style="line-height: 35px">
               <i class="el-icon-alarm-clock"></i>
-              <span class="ml10">{{ news.sendDate }}</span>
-              <span class="ml10 fx-1 text-ellipsis" :title="news.title">{{ news.title }}</span>
+              <span class="ml3">{{ news.sendDate }}</span>
+              <span class="ml10 fx-1 text-ellipsis new-title pointer"
+                    :title="news.title" @click="goNewsWithType(type)">
+                {{ news.title }}</span>
             </div>
           </el-col>
         </el-row>
@@ -65,11 +67,17 @@ export default {
     async handleMore() {
       await this.loginCheck()
       this.transferTo(this.morePath)
+    },
+    async goNewsWithType(type) {
+      await this.loginCheck()
+      this.transferTo(this.morePath, { type })
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.new-title:hover {
+  color: #47C6A2;
+}
 </style>

src/views/index/components/index-card-top.vue

@@ -2,10 +2,12 @@
   <index-card title="热门资讯">
     <!-- 空白与左边tabs对齐 -->
     <div style="height: 55px"></div>
-    <div v-for="news in topNews" :key="news.id" class="fx-row fx-sta-cen pr30 pf f-333" style="line-height: 35px">
+    <div v-for="news in topNews" :key="news.id" class="fx-row fx-sta-cen pf f-333 pr40" style="line-height: 35px">
       <i class="el-icon-alarm-clock"></i>
-      <span class="ml10">{{ news.sendDate }}</span>
-      <span class="ml10 fx-1 text-ellipsis" :title="news.title">{{ news.title }}</span>
+      <span class="ml3">{{ news.sendDate }}</span>
+      <span class="ml10 fx-1 text-ellipsis new-title pointer"
+            :title="news.title" @click="handleMore">
+                {{ news.title }}</span>
     </div>
   </index-card>
 </template>
@@ -22,6 +24,7 @@ export default {
   components: { IndexCard },
   data() {
     return {
+      morePath: '/fuzhu/newGaokaoNews',
       topNews: []
     }
   },
@@ -37,11 +40,17 @@ export default {
       }).then(res => {
         this.topNews = res.rows
       })
+    },
+    async handleMore() {
+      await this.loginCheck()
+      this.transferTo(this.morePath)
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.new-title:hover {
+  color: #47C6A2;
+}
 </style>