修改全局搜索模块

src/components/HomeDataListModule.vue

+<template>
+  <section class="data-module">
+    <div class="module-top-container">
+      <div class="module-top-left">
+        <span class="module-name">{{name}}</span>
+        <span v-if="showTop" class="module-top-btn" @click="$emit('clickTop')">{{$t('home.top')}}</span>
+      </div>
+      <div class="module-more" @click="emit('clickMore')">
+        <span>{{$t('home.more')}}</span>
+        <img src="@/assets/icon/more.png" alt="">
+      </div>
+    </div>
+    <div class="module-content-container">
+      <DataListItem v-for="(item, idx) in datas" :key="idx" :data="item" :dateText="dateText" @click="$emit('clickItem', item)">
+        <template v-if="item.isRecommend" v-slot:tag>
+          <span class="item-recommend">{{$t('home.recommend')}}</span>
+        </template>
+      </DataListItem>
+    </div>
+  </section>
+</template>
+
+<script>
+import DataListItem from './DataListItem'
+export default {
+  name: 'HomeDataListModule',
+  components: { DataListItem },
+  props: {
+    name: {
+      type: String,
+    },
+    showTop: {
+      type: Boolean,
+    },
+    dateText: {
+      type: String,
+    },
+    datas: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      data: {
+        name: '协会动态',
+        isTop: true,
+        list: [
+          {
+            isRecommend: true,
+            title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
+            date: '2020-02-02',
+            dataType: '产品创新'
+          },
+          {
+            isRecommend: false,
+            title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
+            date: '2020-02-02',
+            dataType: '产品创新'
+          },
+          {
+            isRecommend: false,
+            title: '创新推出碳中和债，助理实现30·60目标出',
+            date: '2020-02-02',
+            dataType: '产品创新'
+          },
+
+        ]
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/css/mixins.less';
+
+@ModuleTop: 30px;
+.data-module {
+  padding-top: @ModuleTop;
+
+  .module-top-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #135faa;
+
+    .module-top-left {
+      display: flex;
+      align-items: center;
+      margin-bottom: -0.5px;
+      .module-name {
+        padding-bottom: 2px;
+        box-sizing: border-box;
+        font-size: 19px;
+        color: #222222;
+        line-height: 26px;
+        border-bottom: 2.5px solid #135faa;
+      }
+
+      .module-top-btn {
+        margin-left: 15px;
+        height: 17px;
+        line-height: 15px;
+        border-radius: 10px;
+        color: #135faa;
+        font-size: 12px;
+        padding: 0 5px;
+        text-align: center;
+        border: 0.5px solid #135faa;
+      }
+    }
+
+    .module-more {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #999999;
+      img {
+        margin-left: 5px;
+        margin-top: 2px;
+        width: auto;
+        height: 9px;
+      }
+    }
+  }
+}
+.module-content-container {
+  .item-recommend {
+    height: 18x;
+    line-height: 18px;
+    font-size: 10px;
+    color: white;
+    padding: 0 7px;
+    padding-bottom: 1px;
+    border-radius: 8px;
+    background: #ff4038;
+    text-align: center;
+  }
+
+  .content-item {
+    padding-top: 14px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    .item-title {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      line-height: 25px;
+      position: relative;
+
+      .item-recommend {
+        position: absolute;
+        left: 0;
+        top: 3.5px;
+        height: 18px;
+        line-height: 18px;
+        font-size: 10px;
+        color: white;
+        padding: 0 7px;
+        border-radius: 8px;
+        background: #ff4038;
+        text-align: center;
+        margin-right: 10px;
+      }
+      .item-title-content {
+        font-size: 16px;
+        color: #222222;
+        line-height: 25px;
+        .line-clamp(2);
+      }
+
+      &.item-recommend {
+        .item-title-content {
+          text-indent: 50px;
+        }
+      }
+    }
+    .item-content-bottom {
+      padding-top: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .item-bottom-item {
+        display: flex;
+        align-items: center;
+
+        @IconSize: 15px;
+        .item-bottom-icon {
+          width: @IconSize;
+          height: @IconSize;
+        }
+        .item-bottom-text {
+          line-height: 16px;
+          font-size: 12px;
+          color: #999999;
+          margin-left: 7px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/i18n/lang/home/index.js

@@ -9,6 +9,9 @@ const En = {
         disclosure: 'Information Disclosure',
         news: 'News',
         registered: 'Registered Issue',
+    },
+    homeSearch: {
+        titleModule: 'Related Applications',
     }
 }
 
@@ -23,7 +26,9 @@ const Zh = {
         disclosure: '信息披露',
         news: '新闻动态',
         registered: '注册发行',
-
+    },
+    homeSearch: {
+        titleModule: '相关应用'
     }
 }
 

src/views/home/index.vue

@@ -12,7 +12,7 @@
     <main>
       <HomeBanner />
       <MenuModule />
-      <DataModule v-for="item in modules" :key="item.type" v-bind="item" @clickTop="handleTop(item)" />
+      <DataModule v-for="item in modules" :key="item.type" v-bind="item" :datas="item.datas" @clickTop="handleTop(item)" />
     </main>
   </div>
 </template>
@@ -20,17 +20,36 @@
 import SearchInput from '@/components/SearchInput'
 import HomeBanner from './components/HomeBanner'
 import MenuModule from './components/MenuModule'
-import DataModule from './components/DataModule'
+import DataModule from '@/components/HomeDataListModule'
 export default {
   name: "Home",
   components: { HomeBanner, MenuModule, DataModule, SearchInput },
   data () {
-    console.log();
+    const datas = [
+      {
+        isRecommend: true,
+        title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
+        date: '2020-02-02',
+        dataType: '产品创新'
+      },
+      {
+        isRecommend: false,
+        title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
+        date: '2020-02-02',
+        dataType: '产品创新'
+      },
+      {
+        isRecommend: false,
+        title: '创新推出碳中和债，助理实现30·60目标出',
+        date: '2020-02-02',
+        dataType: '产品创新'
+      }
+    ]
     return {
       modules: [
-        { type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), showTop: false },
-        { type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), showTop: true },
-        { type: '3', name: this.$t('home.registered'), dateText: this.$t('home.updateDate'), showTop: true }
+        { type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), datas, showTop: false },
+        { type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), datas, showTop: true },
+        { type: '3', name: this.$t('home.registered'), dateText: this.$t('home.updateDate'), datas, showTop: true }
       ]
     };
   },

src/views/homeSearch/components/MenuModuleLayout.vue

+<template>
+  <section class="menu-module-layout">
+    <span class="module-title">{{$t('homeSearch.titleModule')}}</span>
+    <div class="menu-modules-container">
+      <div class="menu-module-item" v-for="(item, idx) in datas" :key="idx" @click="handleClickItem(item)">
+        <img v-if="item.icon" class="menu-icon" :src="item.icon">
+        <div v-else class="menu-icon"></div>
+        <span v-if="item.name" class="menu-name">{{item.name}}</span>
+        <div v-else class="menu-name white"></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'MenuModuleLayout',
+  props: {
+    datas: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleClickItem (item) {
+
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.menu-module-layout {
+  .module-title {
+    color: #222222;
+    font-size: 19px;
+  }
+
+  .menu-modules-container {
+    display: flex;
+    flex-flow: wrap;
+  }
+
+  @ModulePaddingTop: 10px;
+  .menu-module-item {
+    padding-top: @ModulePaddingTop;
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    @IconSize: 50px;
+    .menu-icon {
+      background: #eee;
+      height: @IconSize;
+      width: @IconSize;
+      border-radius: calc(@IconSize / 2);
+    }
+    .menu-name {
+      display: block;
+      margin-top: 8px;
+      line-height: 17px;
+      min-height: 17px;
+      font-size: 12px;
+      text-align: center;
+      color: #444444;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/homeSearch/components/SearchDataLayout.vue

 <template>
-  <section></section>
+  <section class="search-data-layout">
+    <MenuModuleLayout class="search-menus" v-if="menus" :datas="menus" />
+    <HomeDataListModule v-for="(item, idx) in moduleList" :key="idx" :datas="item.list" v-bind="item" @clickMore="handleMore(item)" @clickItem="handleItem" />
+  </section>
 </template>
 
 <script>
+import MenuModuleLayout from './MenuModuleLayout'
+import HomeDataListModule from '@/components/HomeDataListModule'
 export default {
   name: 'SearchDataLayout',
+  components: { MenuModuleLayout, HomeDataListModule },
   props: {
-
+    data: {
+      type: Object,
+      default: () => { return {} }
+    }
   },
   data () {
-
     return {}
   },
+  computed: {
+    menus () {
+      return this.data && this.data.apps
+    },
+    
+    moduleList () {
+      const { modules } = this.data || {}
+      const result = []
+      modules && modules.forEach(item => {
+        if (item.type == 1) { // 注册发行
+          Object.assign(item, { name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate') })
+        } else if (item.type == 2) {  // 新闻动态
+          Object.assign(item, { name: this.$t('home.news'), dateText: this.$t('home.updateDate') })
+        } else if (item.type == 3) { // 信息披露
+          Object.assign(item, { name: this.$t('home.registered'), dateText: this.$t('home.updateDate') })
+        }
+        result.push(item)
+      });
+      return result
+    }
+  },
   methods: {
+    handleMore (item) {
+
+    },
+    handleItem (dataItem) {
 
     }
+  }
 }
 </script>
+
+<style lang="less" scoped>
+@PaddingSize: 15px;
+.search-data-layout {
+  height: 100%;
+  background: white;
+  padding: @PaddingSize;
+
+  .search-menus {
+    padding-bottom: 25px;
+  }
+
+  /deep/.data-module {
+    padding-top: initial;
+    .module-top-container {
+      border-bottom: initial;
+      .module-name {
+        border-bottom: initial !important;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/homeSearch/components/SearchLayout.vue

@@ -3,10 +3,10 @@
     <nafm-header navClass="nafmii-head-bg3">
       <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
     </nafm-header>
-    <div class="history-container" v-if="history">
-      <SearchHistory stateKey="Home" @jumpPage="emitSearchValue" />
+    <div class="content-layout">
+      <SearchHistory v-if="history" stateKey="Home" @jumpPage="emitSearchValue" />
+      <SearchDataLayout v-else :data="searchData"/>
     </div>
-    <SearchDataLayout v-else />
   </div>
 </template>
 <script>
@@ -18,7 +18,8 @@ export default {
   components: { SearchInput, SearchHistory, SearchDataLayout },
   props: {
     history: Boolean,
-    defKeyword: String
+    defKeyword: String,
+    searchData: Object
   },
   data () {
     return {
@@ -41,9 +42,6 @@ export default {
     emitSearchValue (val) {
       this.$emit('search', val)
     }
-  },
-  mounted () {
-    // this.keyword = this.defKeyword
   }
 }
 </script>
@@ -57,7 +55,7 @@ export default {
     width: 100%;
     padding-left: 40px;
   }
-  .history-container {
+  .content-layout {
     flex: 1;
   }
 }

src/views/homeSearch/result.vue

 <template>
   <div class="home-search">
-    <SearchLayout :history="false" :defKeyword="keyword" />
+    <SearchLayout :history="false" :defKeyword="keyword" :searchData="data" @search="handleSearch" />
   </div>
 </template>
 
@@ -11,12 +11,40 @@ export default {
   components: { SearchLayout },
   data () {
     return {
-      keyword: null
+      keyword: null,
+      data: null
+    }
+  },
+  methods: {
+    handleSearch (val) {
+
+      this.data = {
+        apps: [{ icon: '', name: '新闻动态' }],
+        modules: [
+          {
+            type: 1 + parseInt(Math.random() * 3),
+            list: [
+              {
+                title: '创新推出碳中和债，助理实现30·60目标',
+                date: '2020-02-02',
+                dataType: '公告'
+              }
+            ]
+          }
+        ]
+      }
     }
   },
   mounted () {
     const { keyword } = this.$route.query
     this.keyword = keyword
+    this.handleSearch(keyword)
   }
 }
 </script>
+
+<style lang="less" scoped>
+.home-search {
+  height: 100%;
+}
+</style>
\ No newline at end of file