debug - tab

src/components/tab.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="tab">
-    <span
-      v-for="(item, i) in Items"
-      :key="`tab-${i}`"
-      @click="index = i"
-      :class="{ curr: index === i }"
-      ref="tab"
-    >
-      {{ item }}
-    </span>
+    <template v-for="({ title, url }, i) in Items">
+      <div class="item" :key="i" :class="{ curr: index === i }" ref="tab">
+        <router-link v-if="url" :to="url">
+          {{ title }}
+        </router-link>
+        <span v-else @click="index = i">
+          {{ title }}
+        </span>
+      </div>
+    </template>
+
     <div
       class="bar"
       :style="{
@@ -46,7 +48,7 @@ export default class extends Vue {
   get Items() {
     if (this.titles instanceof Array) return this.titles;
     if (typeof this.titles === "string")
-      return (this.titles as string).split(",");
+      return (this.titles as string).split(",").map(title => ({ title }));
     return [];
   }
 }
@@ -56,7 +58,8 @@ export default class extends Vue {
   border-bottom: 1px solid #e4e7ed;
   padding: 1rem;
   position: relative;
-  span {
+  .item {
+    display: inline-block;
     font-size: 1.6rem;
     font-weight: bolder;
     color: rgb(51, 51, 51);

src/views/info/details/sell.vue

@@ -72,10 +72,11 @@ export default class extends Vue {
     box-sizing: border-box;
 
     .title {
-      height: 4rem;
-      line-height: 4rem;
+      // height: 4rem;
+      // line-height: 4rem;
       .type {
-        display: inline-block;
+        display: block;
+        float: left;
         height: 2.2rem;
         line-height: 2.2rem;
         font-size: 1.4rem;
@@ -83,11 +84,13 @@ export default class extends Vue {
         border-radius: 0.4rem;
         padding: 0 0.6rem;
         background: #fd5522;
+        margin-right: 1.6rem;
       }
       .name {
+        display: block;
+        overflow: hidden;
         font-size: 1.8rem;
         color: #333;
-        margin-left: 1.6rem;
       }
     }
     .info {

src/views/info/index.vue

@@ -7,10 +7,7 @@
         </el-col>
         <el-col :span="20">
           <div class="tab">
-            <tab
-              :titles="$t('page.views.info.index.titles')"
-              :currIndex.sync="currIndex"
-            />
+            <tab :titles="titles" :currIndex.sync="currIndex" />
             <div class="btnDiv">
               <router-link to="/info/add">
                 <el-button class="buyBtn" size="mini">{{
@@ -53,8 +50,7 @@
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 @Component({ name: "infoList" })
 export default class extends Vue {
-  @Prop(String)
-  private index!: string;
+  @Prop(String) private index!: string;
   private currIndex = 0;
   @Watch("index", { immediate: true })
   indexChange() {
@@ -67,6 +63,14 @@ export default class extends Vue {
   get managerUrl() {
     return process.env.VUE_APP_MANAGER_URL;
   }
+  get titles() {
+    return `${this.$t("page.views.info.index.titles")}`
+      .split(",")
+      .map((title, i) => ({
+        title,
+        url: `/info/${i}`
+      }));
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -99,13 +103,13 @@ export default class extends Vue {
     padding: 0 1.6rem;
     .name {
       width: 80%;
-      float: left;
+      display: inline-block;
       overflow: hidden;
       color: #333;
     }
     .date {
       width: 20%;
-      float: left;
+      float: right;
       text-align: right;
       color: #666;
       white-space: nowrap;

src/views/news/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="bg-F5">
     <div class="container">
-      <tab
-        class="tab"
-        :titles="`${$t(`page.views.news.details.titles`)}`"
-        :currIndex.sync="currIndex"
-      />
+      <tab :titles="titles" :currIndex.sync="currIndex" />
       <load-more
         url="/interface/notice/getNoticeListAll"
         :params="params"
@@ -37,20 +33,27 @@ import { Dateformat } from "@/utils";
 @Component
 export default class extends Vue {
   @Prop(String) private index!: string;
-  private currIndex: number = 0;
-  private params: IAny | null = null;
-
-  activated() {
-    this.currIndex = Number(this.index) || 0;
-    this.currIndexChange();
-  }
-  @Watch("currIndex")
-  currIndexChange() {
+  private currIndex = 0;
+  @Watch("index", { immediate: true })
+  indexChange() {
+    this.currIndex = Number(this.index) | 0;
     this.params = { noticeType: this.currIndex + 1 };
   }
+
+  private params: IAny | null = null;
+
   getDateformat(date: string, fmt: string) {
     return Dateformat(date, fmt);
   }
+
+  get titles() {
+    return `${this.$t("page.views.news.details.titles")}`
+      .split(",")
+      .map((title, i) => ({
+        title,
+        url: `/news/${i}`
+      }));
+  }
 }
 </script>
 <style lang="scss" scoped>