seaech页面优化

components/moblie/dataCard.vue

@@ -28,6 +28,19 @@
         >
           {{right}}
         </yun-div>
+        <yun-div
+          v-if="cardType===3"
+          :width-v="32"
+          :height-v="32"
+          :border-r="['50%']"
+          :show-ske="false"
+          bg-color-v="#FF4A4A"
+          :font-style="[20,36,400,'white','left']"
+          :flex-v="['row','center','center']"
+        >
+          {{right}}
+
+        </yun-div>
         <yun-img
           v-if="cardType===2"
           :width-v="66"
@@ -36,7 +49,6 @@
           :ske-w="66"
           :border-r="[50,50,50,50]"
         >
-
         </yun-img>
         <yun-icon
           :style="{marginLeft:commonReturnFlexedLength(15)}"
@@ -79,7 +91,7 @@
     props:{
       cardType:{
         default:1,
-        type:Number
+        type:Number//1:字,2:头像,3:我的消息专用
       },
       title:String,
       right:String

dev-schedule__xb.md

@@ -26,4 +26,4 @@
           dynamic:'/personal-center/home/dynamic'
         },
 ```
-+ 搜索页面 @foucs 事件处理
++ 搜索页面 @foucs 事件处理✅

pages/personal-center/index.vue

@@ -7,12 +7,12 @@
     ></user-card-big>
     <yun-div
       :margin-v="[15,0,0,0]">
-      <data-card title="我的消息" right="3"></data-card>
+      <data-card title="我的消息" :cardType="3" right="23"></data-card>
     </yun-div>
     <yun-div
       bg-color-v="white"
       :margin-v="[15,0,0,0]">
-      <data-card title="我的喜欢"></data-card>
+      <data-card title="我的喜欢" right="23"></data-card>
       <yun-div
         :width-v="704"
         :margin-v="[0,'auto']"

pages/search.vue

@@ -18,6 +18,8 @@
         @focus="focus"
       >
       </yun-input>
+
+      <!--取消按键-->
       <yun-div
       v-if="this.bottom1"
       :ske-w="50"
@@ -26,6 +28,8 @@
       }"
       :font-style="[24,30,400,'#999999','left']"
     >取消</yun-div>
+
+      <!--删除+搜索button-->
       <yun-div
       v-if="this.bottom2"
      :flex-v="['row','flex-start','center']"
@@ -34,6 +38,10 @@
       }"
     >
       <yun-div
+        :height-v="74"
+        :flex-v="['row','flex-start','center']"
+      >
+      <yun-div
         :width-v="36"
         :height-v="36"
         :margin-v="[0,15,0,0]"
@@ -48,20 +56,25 @@
           color="#00AAE6"
         ></yun-icon>
       </yun-div>
+      </yun-div>
         <yun-button
+        v-if="this.button"
         :size="[116,74]"
+        @click="search"
       >搜索
       </yun-button>
       </yun-div>
      </yun-div>
 
     <yun-div
+      v-if="!this.bottom3"
       width-v="100%"
       :height-v="15"
       bg-color-v="#EDF5F8"
     ></yun-div>
 
-    <!--搜索记录-->
+    <!--搜索提示-->
+    <yun-div v-if="this.bottom4">
     <yun-div
       :width-v="704"
       :margin-v="[35,27,0,26]"
@@ -85,6 +98,7 @@
         :margin-v="[0,0,0,20]"
       >{{item}}</yun-div>
     </yun-div>
+    </yun-div>
 
 
   <yun-div
@@ -156,8 +170,11 @@
       </yun-div>
     </yun-div>
 
-  </yun-div>
+  </yun-div >
     <!--搜索结果-->
+  <yun-div
+    v-if="this.bottom3"
+  >
     <Nav :path="path" :nav-list="navList"></Nav>
     <yun-div
     >
@@ -166,6 +183,8 @@
       <answer-card v-for="val in 1" key="val.answerId"></answer-card>
 
     </yun-div>
+  </yun-div>
+
 
   </yun-div>
 </template>
@@ -182,11 +201,24 @@
     components: {
       Nav, answerCard, userCardX, projectCard
     },
+    /*
+    directives: {
+      focus: {
+        // 指令的定义
+        inserted: function(el) {
+          // 聚焦元素
+          el.querySelector("input").focus();
+        }
+      }
+    },*/
     data() {
       return {
         question: '',
         bottom1: true,
         bottom2:false,
+        bottom3:false,
+        button:true,
+        bottom4:false,
         topicList:['云顶书院','云顶书院','云顶书院','云顶书院'],
         path: '/search',
         navList: [
@@ -235,16 +267,39 @@
     methods:{
       changeInput(){
         if (this.question !== '') {
-          this.bottom1=false;
-          this.bottom2 = true
+          this.bottom1=false;//取消
+          this.bottom2 = true;//搜索按钮
+          this.bottom4=true;//搜索提示
         }else{
           this.bottom2=false;
-          this.bottom1=true
+          this.bottom1=true;
+          this.bottom4=false;
         }
       },
+      search(){
+        this.bottom4=false;
+        this.bottom3=true;
+        this.button=false;
+      },
       focus(){
-        console.log("sss")
+        this.button=true;
+        this.bottom3=false;
+        if(this.question===''){
+          this.bottom4=true;
+          //显示原始内容
+        }else{
+          this.bottom4=true;
+          //显示输入的内容
         }
+
+       // this.bottom2=true;
+        //this.button=true;
+
+      },
+      delete(){
+        this.question=""
+      }
+
     }
   }
 </script>

yarn.lock

@@ -9799,6 +9799,11 @@ vary@^1.1.2, vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vconsole@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.npm.taobao.org/vconsole/download/vconsole-3.3.4.tgz#a7dacd8887b3d3e902e8d18425cda56c34e77f51"
+  integrity sha1-p9rNiIez0+kC6NGEJc2lbDTnf1E=
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"