浮层

src/components/common/first-time-ss.vue

  <template>
-	<div>
-        <img src="" />
+	<div class="loader">
+        <img class="loader-mask" src="../../images/sousuo/sousuo-fc.png" />
+        <span @click="closeFC" class="loader-btn">我知道了</span>
     </div>
 </template>
+<script>
+export default {
+    methods: {
+        closeFC() {
+            this.$emit('closeFC')
+        }
+    }
+}
+</script>
 
 <style lang="scss" scoped>
     @import '../../style/mixin';
     .loader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 5;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
         &-mask {
             position: fixed;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            z-index: 100;
+            top: px2rem(64px);
+            left: px2rem(38px);
+            bottom: px2rem(64px);
+            right: px2rem(37px);
+            width: px2rem(300px);
+            z-index: 4;
             background: rgba(0, 0, 0, 0.5);
         }
-        svg {
+        &-btn {
+            display: inline-block;
             position: absolute;
-            top: px2rem(280px);
-            left: px2rem(166px);
-            z-index: 101;
+            left: px2rem(128px);
+            bottom: px2rem(120px);
+            height: px2rem(30px);
+            width: px2rem(120px);
+            z-index: 6;
+            text-align: center;
+            padding-top: px2rem(4px);
+            font-size: px2rem(15px);
+            border: 1px solid #fff;
+            border-radius: px2rem(30px);
+            color: #fff;
         }
     }
 
-    svg path, svg rect{
-        fill: #fff;
-        // fill: #449284;
-    }
 </style>

src/views/result.vue

@@ -12,8 +12,8 @@
         <img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
         <div >
           <span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
-          <input id="search-input" class="search-container-input" type="search" v-model="searchText" maxlength="100">
-          <span class="search-container-img3" @click="clearText"><img class="search-container-img" src="../images/sousuo/delete.png"/></span>
+          <input class="search-container-input" type="search"  v-model="searchText" maxlength="100" @focus.prevent="onInputFocus" @blur.prevent="onInputBlur">
+          <span v-show="isOnFocus" class="search-container-img3" @click.prevent="clearText"><img class="search-container-img" src="../images/sousuo/delete.png"/></span>
           <span class="search-container-cancle" @click.prevent="search">搜索</span>
         </div>
       </div>
@@ -109,6 +109,7 @@ import BackTop from '@/components/common/backTop'
 export default {
   data() {
     return {
+      isOnFocus: false,
       isShowTop: false,
       // token: '',
       navIndex: '0',
@@ -347,6 +348,12 @@ export default {
     },
     clearText() {
       this.searchText = ''
+    },
+    onInputFocus() {
+      this.isOnFocus = true
+    },
+    onInputBlur() {
+      this.isOnFocus = false
     }
   },
 }
@@ -436,7 +443,7 @@ export default {
     position: absolute;
     top: px2rem(9px);
     left: px2rem(274px);
-    z-index: 2;
+    z-index: 5;
     img {
       width: px2rem(22px);
       height: px2rem(22px);

src/views/search-index.vue

@@ -8,8 +8,8 @@
             <img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
             <div >
               <span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
-              <input class="search-container-input" type="search"  v-model="searchText" maxlength="100" :placeholder="pSearchText">
-              <span class="search-container-img3" @click="clearText"><img class="search-container-img" src="../images/sousuo/delete.png"/></span>
+              <input class="search-container-input" type="search"  v-model="searchText" maxlength="100" :placeholder="pSearchText" @focus="onInputFocus" @blur="onInputBlur">
+              <span v-show="isOnFocus" class="search-container-img3" @click="clearText"><img class="search-container-img" src="../images/sousuo/delete.png"/></span>
               <span class="search-container-cancle" @click.prevent="search">搜索</span>
             </div>
           </div>
@@ -20,6 +20,7 @@
         <!-- <div class="mt-100"></div> -->
         <HistoryLabels/>
         <HotLabels/>
+        <FirstTimeSS v-show="needShowFirstTime" @closeFC="closeFC"/>
     </div>
 </template>
 
@@ -30,6 +31,7 @@ import SearchHeader from '../components/business/search-header';
 import SplitLine from '../components/business/split-line';
 import HistoryLabels from '../components/business/history-labels';
 import HotLabels from '../components/business/hot-labels';
+import FirstTimeSS from '../components/common/first-time-ss';
 
 export default {
   data() {
@@ -37,14 +39,16 @@ export default {
       searchText: '',
       pSearchText: '',
       token: '',
-      needShowFirstTime: false
+      needShowFirstTime: true,
+      isOnFocus: false
     }
   },
   components: {
     SearchHeader,
     SplitLine,
     HistoryLabels,
-    HotLabels
+    HotLabels,
+    FirstTimeSS
   },
   created(){
     
@@ -63,14 +67,14 @@ export default {
         _self.getData()
     }
     window.__isFirstTime = function(param) {
-      if(param.isFirst == 'true') {
-        this.needShowFirstTime = true
+      if(param.isFirst === 'true') {
+        _self.needShowFirstTime = true
         rocNative.setFirstTime({
           projectName: 'YQY_PROJECT_SOUSUO',
           isFirst: 'false'
         })
       } else {
-        this.needShowFirstTime = false
+        _self.needShowFirstTime = false
       }
     }
   },
@@ -201,7 +205,15 @@ export default {
             __funcName: '__isFirstTime'
         })
     },
-
+    onInputFocus() {
+      this.isOnFocus = true
+    },
+    onInputBlur() {
+      this.isOnFocus = false
+    },
+    closeFC() {
+      this.needShowFirstTime = false
+    }
   },
 }
 </script>