Browse Source

优化样式

shenjj 7 years ago
parent
commit
141abfea49

+ 1 - 0
assets/scss/mobileCommon.scss

@@ -7,6 +7,7 @@ html {
 @media screen and (max-width: 750px){
   html{
     font-size: calc(100vw / 750 * 100);
+    height: 100%;
   }
   ::-webkit-scrollbar {
     opacity: 0;

+ 7 - 1
components/mobile/MobileFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-footer">
+  <div class="mobile-footer" :class="InputGetFocus ? 'active': ''">
     <span :class="activeType=='home'?'active':''">
       <nuxt-link to="/">
         <i :class="activeType=='home'?'iconfont icon-shouye':'iconfont icon-shouye1'"></i><p>首页</p>
@@ -48,6 +48,9 @@
       RemindBox
     },
     computed: {
+      InputGetFocus() {
+        return this.$store.state.mobile.InputGetFocus
+      },
       activeType () {
         return this.$route.path === '/' ? 'home' : this.$route.path === '/mobile/shop' ? 'shops' : this.$route.path === '/mobile/user' ? 'user' : ''
       },
@@ -111,6 +114,9 @@
     border-top:.02rem solid #ccc;
     background: #ffffff;
     z-index: 10;
+    &.active{
+      position: relative;
+    }
   }
   .mobile-footer > span{
     display: inline-block;

+ 7 - 7
components/mobile/applyPurchase/SayPrice.vue

@@ -89,13 +89,13 @@
     },
     watch: {
       showSayPriceBox: function (val, old) {
-        if (val) {
-          document.body.style.position = 'fixed'
-          document.body.style.left = '0'
-          document.body.style.right = '0'
-        } else {
-          document.body.style.position = 'relative'
-        }
+        // if (val) {
+        //   document.body.style.position = 'fixed'
+        //   document.body.style.left = '0'
+        //   document.body.style.right = '0'
+        // } else {
+        document.body.style.position = 'relative'
+        // }
         this.resetSayPrice()
       }
     },

+ 3 - 1
components/mobile/brand/ComponentDetail.vue

@@ -246,7 +246,9 @@
         }
         let tbodyObj = document.getElementById('product-body')
         let theadObj = document.getElementById('product-head')
-        this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
+        if (theadObj) {
+          this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
+        }
       },
       getMoreStore: function () {
         if (!this.isSearchingMore) {

+ 3 - 1
components/mobile/store/StoreDetail.vue

@@ -164,7 +164,9 @@
         }
         let tbodyObj = document.getElementById('product-body')
         let theadObj = document.getElementById('product-head')
-        this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
+        if (theadObj) {
+          this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
+        }
       },
       getMoreCom: function () {
         if (!this.isSearchingMore) {

+ 15 - 2
pages/mobile/user/index.vue

@@ -37,8 +37,8 @@
         <li :class="{active: seekType == 'done'}" @click="switchSeek('done')"><div>已报价</div></li>
       </ul>
       <div class="search-content">
-        <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="seekKeyword" @keyup.13="searchSeek">
-        <span @click="searchSeek">
+        <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="seekKeyword" @keyup.13="searchSeek" ref="searchSeekInput" @focus="inputGetFocus()" @blur="blur()">
+        <span @click="searchSeek" >
         <i class="iconfont icon-sousuo"></i>
         </span>
       </div>
@@ -285,6 +285,19 @@
         if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.seekPage < this.allPage) {
           this.getMoreSearch()
         }
+        if (this.$refs.searchSeekInput && this.$store.state.mobile.InputGetFocus) {
+          this.$refs.searchSeekInput.blur()
+        }
+      },
+      blur: function() {
+        setTimeout(() => {
+          this.$store.dispatch('mobile/SetInputGetFocus', false)
+        }, 300)
+      },
+      inputGetFocus: function() {
+        setTimeout(() => {
+          this.$store.dispatch('mobile/SetInputGetFocus', true)
+        }, 300)
       },
       getMoreSearch: function () {
         this.seekPage++

+ 19 - 0
store/mobile.js

@@ -0,0 +1,19 @@
+/*
+ * 全局设置
+ */
+export const state = () => ({
+  // 输入框是否被点击
+  InputGetFocus: false
+})
+
+export const mutations = {
+  SET_INPUT_STATUS (state, flag) {
+    state.InputGetFocus = flag
+  }
+}
+
+export const actions = {
+  SetInputGetFocus({commit}, flag) {
+    commit('SET_INPUT_STATUS', flag)
+  }
+}