添加首页中英文

src/components/DataListItem.vue

@@ -78,16 +78,15 @@ export default {
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     align-items: center;
     align-items: center;
-    line-height: 25px;
     position: relative;
     position: relative;
 
 
     .title-tag {
     .title-tag {
       position: absolute;
       position: absolute;
       left: 0;
       left: 0;
       top: 0;
       top: 0;
-      bottom: 0;
-        
-      //   margin-right: 10px;
+      display: flex;
+      align-items: center;
+      height: 25px;
     }
     }
     .title-content {
     .title-content {
       font-size: 16px;
       font-size: 16px;

src/i18n/lang/home/index.js

+const En = {
+    home: {
+        searchPlaceholder: 'Please enter the content you want to search',
+        more: 'More',
+        recommend: 'Recommend',
+        top: 'Top',
+        updateDate: 'Update Date'
+    }
+}
+
+const Zh = {
+    home: {
+        searchPlaceholder: '请输入您想搜索的内容',
+        more: '更多',
+        recommend: '推荐',
+        top: '置顶',
+        updateDate: '更新日期'
+    }
+}
+
+export default { En, Zh }
\ No newline at end of file

src/i18n/lang/index.js

@@ -10,6 +10,7 @@ import person from './user/person'
 import feedback from './feedback/index'
 import feedback from './feedback/index'
 import question from './question/index'
 import question from './question/index'
 import member from './member/index'
 import member from './member/index'
+import home from './home/index'
 const messages = {
 const messages = {
   en: {
   en: {
     lang: 'English',
     lang: 'English',
@@ -22,7 +23,8 @@ const messages = {
     ...person.personEn,
     ...person.personEn,
     ...feedback.feedbackEn,
     ...feedback.feedbackEn,
     ...question.questionEn,
     ...question.questionEn,
-    ...member.memberEn
+    ...member.memberEn,
+    ...home.En
   },
   },
   zh: {
   zh: {
     lang: "中文",
     lang: "中文",
@@ -35,7 +37,8 @@ const messages = {
     ...person.personZh,
     ...person.personZh,
     ...feedback.feedbackZh,
     ...feedback.feedbackZh,
     ...question.questionZh,
     ...question.questionZh,
-    ...member.memberZh
+    ...member.memberZh,
+    ...home.Zh
   }
   }
 }
 }
 export default messages
 export default messages

src/views/home/components/DataModule.vue

@@ -3,16 +3,17 @@
     <div class="module-top-container">
     <div class="module-top-container">
       <div class="module-top-left">
       <div class="module-top-left">
         <span class="module-name">{{name}}</span>
         <span class="module-name">{{name}}</span>
-        <span v-if="isTop" class="module-top-btn">置顶</span>
+        <span v-if="isTop" class="module-top-btn">{{$t('home.top')}}</span>
       </div>
       </div>
       <div class="module-more">
       <div class="module-more">
-        <span>更多</span>
+        <span>{{$t('home.more')}}</span>
+        <img src="@/assets/icon/more.png" alt="">
       </div>
       </div>
     </div>
     </div>
     <div class="module-content-container">
     <div class="module-content-container">
-      <DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText">
+      <DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText || `${$t('home.updateDate')}：`">
         <template v-if="item.isRecommend" v-slot:tag>
         <template v-if="item.isRecommend" v-slot:tag>
-          <span class="item-recommend">推荐</span>
+          <span class="item-recommend">{{$t('home.recommend')}}</span>
         </template>
         </template>
       </DataListItem>
       </DataListItem>
     </div>
     </div>
@@ -31,11 +32,10 @@ export default {
     },
     },
     isTop: {
     isTop: {
       type: Boolean,
       type: Boolean,
-      default: false
+      default: true
     },
     },
     dateText: {
     dateText: {
       type: String,
       type: String,
-      default: '更新日期：'
     }
     }
   },
   },
   data () {
   data () {
@@ -113,18 +113,27 @@ export default {
     }
     }
 
 
     .module-more {
     .module-more {
+      display: flex;
+      align-items: center;
       font-size: 12px;
       font-size: 12px;
       color: #999999;
       color: #999999;
+      img {
+        margin-left: 5px;
+        margin-top: 2px;
+        width: auto;
+        height: 9px;
+      }
     }
     }
   }
   }
 }
 }
 .module-content-container {
 .module-content-container {
   .item-recommend {
   .item-recommend {
-    height: 18px;
+    height: 18x;
     line-height: 18px;
     line-height: 18px;
     font-size: 10px;
     font-size: 10px;
     color: white;
     color: white;
     padding: 0 7px;
     padding: 0 7px;
+    padding-bottom: 1px;
     border-radius: 8px;
     border-radius: 8px;
     background: #ff4038;
     background: #ff4038;
     text-align: center;
     text-align: center;

src/views/home/index.vue

@@ -2,11 +2,9 @@
   <div class="home nafmii-head-bg1">
   <div class="home nafmii-head-bg1">
     <nafm-header :leftArrow="false" navClass="nafmii-head-bg1">
     <nafm-header :leftArrow="false" navClass="nafmii-head-bg1">
       <div class="head-custom-container">
       <div class="head-custom-container">
-        <div class="search-input-box" @click="handleSearch">
-          <div src="" alt="" class="search-icon" />
-          <span class="search-placeholder">请输入您想搜索的内容</span>
-        </div>
+        <SearchFirst :placeholder="$t('home.searchPlaceholder')" @jumpPage="handleSearch" />
         <div class="head-message-box">
         <div class="head-message-box">
+          <img src="@/assets/icon/message.png" alt="">
         </div>
         </div>
       </div>
       </div>
     </nafm-header>
     </nafm-header>
@@ -20,12 +18,13 @@
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
+import SearchFirst from '@/components/SearchFirst'
 import HomeBanner from './components/HomeBanner'
 import HomeBanner from './components/HomeBanner'
 import MenuModule from './components/MenuModule'
 import MenuModule from './components/MenuModule'
 import DataModule from './components/DataModule'
 import DataModule from './components/DataModule'
 export default {
 export default {
   name: "Home",
   name: "Home",
-  components: { HomeBanner, MenuModule, DataModule },
+  components: { HomeBanner, MenuModule, DataModule, SearchFirst },
   data () {
   data () {
     return {};
     return {};
   },
   },
@@ -86,7 +85,6 @@ export default {
     width: @MessageBoxSize;
     width: @MessageBoxSize;
     height: @MessageBoxSize;
     height: @MessageBoxSize;
     margin-left: @PaddingSize;
     margin-left: @PaddingSize;
-    background: white;
   }
   }
 }
 }
 </style>
 </style>
\ No newline at end of file