处理推荐云机页面显示问题

pages/introductionCloudPhone/index.vue

@@ -6,7 +6,7 @@
           推荐云手机
         </div>
 
-        <div class="introduction-tips"  :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
+        <div class="introduction-tips" :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
           请搜索您在云手机内希望使用的应用！
         </div>
 
@@ -16,27 +16,21 @@
           <div style="width: 1px;height: 20px;background: #7E8495;border-radius: 1px;"></div>
           <div @click="search">搜索</div>
         </div>
-        <div v-if="!appSeatchList.length && isShow" class="empty">
-          <div class="empty-title">当前搜索结果为空，您可以通过下面两种方式在云手机安装APP（限安卓手机应用上传安装）</div>
-          <div class="empty-img">
-            <img :src="require(`@/assets/image/introductionCloudPhone/${isShowApp ? 'empty-tips-default' : 'empty-tips-defaultWhite'}.png`)" alt="">
+
+        <div v-if="applicationList.length && isShow">
+          <div class="introduction-tips" style="margin-top: 24px;">
+            以下推荐应用选您需要使用的应用
           </div>
-          <div class="empty-tips">
-              <div :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
-                温馨提示：
+          <div>
+            <div class="application">
+              <div v-for="(item,index) in applicationList" :key="index" @click="selectApplication(item)">
+                {{ item }}
               </div>
-              <div>
-                根据相关部门要求，违规APP将无法安装。请远离以上风险软件，谨防上当受骗。如果需要应用上报，请联系客服；也可以购买短期云手机，试用您未搜索到的应用。
-              </div>
-          </div>
-          <div class="empty-btn" style="bottom: 24px; left: 16px;width: calc(100% - 32PX)">
-            <div v-for="item in emptyBtn" :key="item.key" @click="emptyBtnFun(item.type)" :class="{dark: isShowApp && !item.type}">
-              {{ item.name }}
             </div>
           </div>
         </div>
 
-        <div class="application" v-if="appSeatchList.length && !isShow">
+        <div style="margin-top: 24px;" v-if="appSeatchList.length && !isShow">
           <div class="application-list" v-for="(item,index) in appSeatchList" :key="index">
             <div class="application-list-top">
               <img class="application-list-img" width="42" height="42" :src="item.img" alt="" />
@@ -59,10 +53,25 @@
         </div>
 
         <div class="application-default" v-if="!appSeatchList.length && !isShow">
-          <img v-if="isShowApp" width="305" src="@/assets/image/introductionCloudPhone/default.png" />
-
-          <img v-else width="305" src="@/assets/image/introductionCloudPhone/defaultWhite.png" />
-          <div>很遗憾，没有搜索到您想要的应用</div>
+          <div class="empty">
+          <div class="empty-title">当前搜索结果为空，您可以通过下面两种方式在云手机安装APP（限安卓手机应用上传安装）</div>
+          <div class="empty-img">
+            <img :src="require(`@/assets/image/introductionCloudPhone/${isShowApp ? 'empty-tips-default' : 'empty-tips-defaultWhite'}.png`)" alt="">
+          </div>
+          <div class="empty-tips">
+              <div :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
+                温馨提示：
+              </div>
+              <div>
+                根据相关部门要求，违规APP将无法安装。请远离以上风险软件，谨防上当受骗。如果需要应用上报，请联系客服；也可以购买短期云手机，试用您未搜索到的应用。
+              </div>
+          </div>
+          <div class="empty-btn" style="bottom: 24px; left: 16px;width: calc(100% - 32PX)">
+            <div v-for="item in emptyBtn" :key="item.key" @click="emptyBtnFun(item.type)" :class="{dark: isShowApp && !item.type}">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
         </div>
 
       </div>
@@ -85,6 +94,7 @@ export default {
     return {
       searchText: '',
       isShow: true,
+      applicationList: [], //  推荐应用数组
       appSeatchList: [], //  应用数组
       emptyBtn: [{
         name: '联系客服咨询',
@@ -96,11 +106,11 @@ export default {
         key: 'purchaseCloudPhone',
         type: 1
       }]
-
     };
   },
   components: { layout, layoutBack },
   created() {
+    this.getSuggestApp()
 
     let _this = this
     document.addEventListener('keydown', function (e) {
@@ -116,10 +126,8 @@ export default {
   },
   watch: {
     searchText(value) {
-      if (!value) {
+      if (!value) 
         this.isShow = true
-        this.appSeatchList = []
-      }
     }
   },
   computed: {
@@ -157,12 +165,20 @@ export default {
     goArticleDetails(item) {
       this.$router.push({ path: '/introductionCloudPhone/articleDetails?token=needToken', query: { id: item.articleId } })
     },
+    getSuggestApp() {
+      this.$axios.$post('/public/v1/market/getSuggestApp', {
+        pageNum: 1, pageSize: -1
+      }).then((res) => {
+        this.applicationList = res.data
+      });
+    },
     selectApplication(name) {
       this.searchText = name
       this.search()
     },
     search() {
       if (!this.searchText) return
+      this.appSeatchList.slice(0, this.appSeatchList.length)
       this.isShow = false
       this.$axios.$post('/public/v1/market/clientSearchSuggestApp', { pageSize: 100, pageNum: 1, appName: this.searchText }).then((res) => {
         this.appSeatchList = res.data.list
@@ -199,6 +215,13 @@ export default {
     font-style: normal;
     margin-bottom: 24px;
   }
+  .introduction-tips {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: bold;
+    font-size: 14px;
+    color: #fefefe;
+    font-style: normal;
+  }
 
   .introduction-search {
     margin-top: 16px;
@@ -223,16 +246,18 @@ export default {
       font-size: 14px;
       color: #ffffff;
       flex: 1;
+      width: calc(100% - 16px - 60px);
     }
-    div:last-child {
+    div {
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
       font-size: 14px;
       color: #3b7fff;
-      line-height: 35px;
+      line-height: 18px;
       text-align: left;
       font-style: normal;
-      padding: 0 15px;
+      line-height: 37px;
+      width: 60px;
       height: 34px;
       // background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
       float: right;
@@ -240,7 +265,27 @@ export default {
       border-radius: 1px;
       // border-left: 1px solid #7e8495;
       // margin: 4px 4px 0 0;
-      margin: 0 4px;
+      margin: 0 4px 2px;
+    }
+  }
+
+  .application {
+    padding: 0 16px;
+    margin-top: 24px;
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(3, 1fr);
+    & > div {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      text-align: center;
+      font-style: normal;
+      background: #2c2c2d;
+      border-radius: 14px;
+      padding: 11px 0;
     }
   }
 
@@ -344,7 +389,6 @@ export default {
     color: #999999;
     line-height: 18px;
     font-style: normal;
-    margin-top: 42px;
   }
 }
 
@@ -352,6 +396,9 @@ export default {
   .introduction-title {
     color: #0a132b;
   }
+  .introduction-tips {
+    color: #0a132b;
+  }
 
   .introduction-search {
     background: #ffffff;
@@ -364,6 +411,12 @@ export default {
     }
   }
 
+  .application {
+    & > div {
+      color: #0a132b;
+      background: #ffffff;
+    }
+  }
 
   .application-list {
     background: #ffffff;
@@ -390,11 +443,6 @@ export default {
     }
   }
 }
-.application{
-  margin-top: 16px;
-  flex: 1;
-  overflow-y: auto;
-}
 .empty{
   margin-top: 16px;
   .empty-title{