Merge branch 'dev5.8.2' of Software/android-cloud-H5 into master

pages/introductionCloudPhone/index.vue

@@ -13,6 +13,7 @@
         <div class="introduction-search">
           <img src="@/assets/image/introductionCloudPhone/search.png" alt="" />
           <input ref="inputField" v-model="searchText" type="search" placeholder="请输入应用名" />
+          <div style="width: 1px;height: 20px;background: #7E8495;border-radius: 1px;"></div>
           <div @click="search">搜索</div>
         </div>
 
@@ -34,10 +35,15 @@
             <div class="application-list-top">
               <img class="application-list-img" width="42" height="42" :src="item.img" alt="" />
               <div class="application-list-rigth">
-                <div class="application-list-title">{{item.appName}} <span v-if="item.articleId>0" @click="goArticleDetails(item)">点击阅读</span></div>
-                <div class="application-list-tips">游戏名称云手机使用教程</div>
+                <div class="application-list-title">
+                  <div class="application-list-appname"> {{item.appName}}</div>
+                  <span v-if="item.articleId>0" @click="goArticleDetails(item)">点击阅读</span>
+                </div>
+                <div class="application-list-tips">{{item.appName}}云手机使用教程</div>
+              </div>
+              <div class="application-list-btn" @click="pay(item)">购买云手机
+                <!-- <img width="12" src="@/assets/image/introductionCloudPhone/btn.png" /> -->
               </div>
-              <div class="application-list-btn" @click="pay(item)">购买云手机 <img width="12" src="@/assets/image/introductionCloudPhone/btn.png" /></div>
 
             </div>
 
@@ -209,14 +215,19 @@ export default {
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
       font-size: 14px;
-      color: #ffffff;
-      line-height: 34px;
+      color: #3b7fff;
+      line-height: 18px;
+      text-align: left;
+      font-style: normal;
+
+      line-height: 37px;
       width: 60px;
       height: 34px;
-      background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
+      // background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
       float: right;
       text-align: center;
-      border-radius: 8px;
+      border-radius: 1px;
+      // border-left: 1px solid #7e8495;
       // margin: 4px 4px 0 0;
       margin: 0 4px;
     }
@@ -261,6 +272,7 @@ export default {
     .application-list-rigth {
       display: inline-block;
       overflow: hidden;
+      width: calc(100% - 150px);
     }
     .application-list-title {
       vertical-align: top;
@@ -269,8 +281,15 @@ export default {
       color: #ffffff;
       font-style: normal;
       margin-right: 4px;
-
+      .application-list-appname {
+        max-width: calc(100% - 50px);
+        display: inline-block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
       span {
+        vertical-align: super;
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
         font-size: 10px;
@@ -290,6 +309,10 @@ export default {
       text-align: left;
       font-style: normal;
       margin-right: 4px;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
     .application-list-btn {
       width: 82px;
@@ -298,9 +321,9 @@ export default {
       border-radius: 8px;
       color: #ffffff;
       line-height: 32px;
-      padding: 0  0  0 8px;
+      padding: 0 0 0 8px;
       float: right;
-      font-size: 10px;
+      font-size: 12px;
       img {
         vertical-align: middle;
         margin-top: -1px;
@@ -344,12 +367,12 @@ export default {
 
   .introduction-search {
     background: #ffffff;
-    border: 1px solid #ffffff;
+    // border: 1px solid #ffffff;
     input {
       color: #0a132b;
     }
     div {
-      color: #ffffff;
+      // color: #ffffff;
     }
   }