首页修改

src/i18n/lang/home/index.js

@@ -4,7 +4,11 @@ const En = {
         more: 'More',
         recommend: 'Recommend',
         top: 'Top',
-        updateDate: 'Update Date'
+        updateDate: 'Update Date：',
+        disclosureDate: 'Disclosure Date：',
+        disclosure: 'Information Disclosure',
+        news: 'News',
+        registered: 'Registered Issue',
     }
 }
 
@@ -14,7 +18,12 @@ const Zh = {
         more: '更多',
         recommend: '推荐',
         top: '置顶',
-        updateDate: '更新日期'
+        updateDate: '更新日期：',
+        disclosureDate: '披露日期：',
+        disclosure: '信息披露',
+        news: '新闻动态',
+        registered: '注册发行',
+
     }
 }
 

src/views/home/components/DataModule.vue

@@ -3,7 +3,7 @@
     <div class="module-top-container">
       <div class="module-top-left">
         <span class="module-name">{{name}}</span>
-        <span v-if="isTop" class="module-top-btn">{{$t('home.top')}}</span>
+        <span v-if="!isTop" class="module-top-btn" @click="$emit('clickTop')">{{$t('home.top')}}</span>
       </div>
       <div class="module-more">
         <span>{{$t('home.more')}}</span>
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="module-content-container">
-      <DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText || `${$t('home.updateDate')}：`">
+      <DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText">
         <template v-if="item.isRecommend" v-slot:tag>
           <span class="item-recommend">{{$t('home.recommend')}}</span>
         </template>
@@ -28,11 +28,9 @@ export default {
   props: {
     name: {
       type: String,
-      default: '协会动态'
     },
     isTop: {
       type: Boolean,
-      default: true
     },
     dateText: {
       type: String,

src/views/home/index.vue

@@ -11,9 +11,7 @@
     <main>
       <HomeBanner />
       <MenuModule />
-      <DataModule />
-      <DataModule />
-      <DataModule />
+      <DataModule v-for="item in modules" :key="item.type" v-bind="item" @clickTop="handleTop(item)" />
     </main>
   </div>
 </template>
@@ -26,7 +24,14 @@ export default {
   name: "Home",
   components: { HomeBanner, MenuModule, DataModule, SearchFirst },
   data () {
-    return {};
+    console.log();
+    return {
+      modules: [
+        { type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), isTop: true },
+        { type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), isTop: false },
+        { type: '3', name: this.$t('home.registered'), dateText: this.$t('home.updateDate'), isTop: false }
+      ]
+    };
   },
   methods: {
     jumpLogin () {
@@ -36,6 +41,16 @@ export default {
     },
 
     handleSearch () { },
+
+    handleTop (module) {
+      const modules = []
+      for (const item of this.modules) {
+        const isTop = item.type == module.type
+        isTop ? modules.unshift(item) : modules.push(item)
+        Object.assign(item, { isTop })
+      }
+      this.modules = modules
+    }
   },
 };
 </script>