提交

components/main/Header.vue

@@ -1,23 +1,25 @@
 <template>
-  <div class="header clearfix">
-    <div class="container">
-      <!--Logo商标-->
-      <div class="header-brand pull-left">
-        <nuxt-link :to="'/'">
-          <img src="/images/logo/uas_mall.png" class="mall-logo"/>
-          <div class="mall-slogan">
-            <p>For the World<br/>为世界电子产业创造价值</p>
-          </div>
-        </nuxt-link>
+  <div class="header-wrapper" id="headerWrapperContent">
+    <div class="header clearfix" :class="{'fixed': isFixed}">
+      <div class="container">
+        <!--Logo商标-->
+        <div class="header-brand pull-left">
+          <nuxt-link :to="'/'">
+            <img src="/images/logo/uas_mall.png" class="mall-logo"/>
+            <div class="mall-slogan">
+              <p>For the World<br/>为世界电子产业创造价值</p>
+            </div>
+          </nuxt-link>
+        </div>
+        <!--搜索-->
+        <div class="header-search pull-left">
+          <search-box :isPcb="isPcb"></search-box>
+        </div>
+        <!--统计-->
+        <!-- <div class="header-count pull-right">
+           <count-box></count-box>
+         </div>-->
       </div>
-      <!--搜索-->
-      <div class="header-search pull-left">
-        <search-box :isPcb="isPcb"></search-box>
-      </div>
-      <!--统计-->
-     <!-- <div class="header-count pull-right">
-        <count-box></count-box>
-      </div>-->
     </div>
   </div>
 </template>
@@ -35,15 +37,30 @@
       isPcb: {
         type: Boolean,
         default: false
+      },
+      isFixed: {
+        type: Boolean,
+        default: false
       }
     }
   }
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
+  .header-wrapper {
+    height: 103px;
+  }
 
   .header {
     padding: 10px 0;
+    &.fixed {
+      position: fixed;
+      width: 100%;
+      background: #fff;
+      z-index: 999;
+      top: 0;
+      padding-top: 20px;
+    }
 
     .header-brand {
 

components/search/SupplierList.vue

@@ -14,8 +14,8 @@
             <span>地址：</span><span :title="item.enAddress">{{item.enAddress || '暂无信息'}}</span>
           </p>
           <p>
-            <span>邮箱：</span><span :title="item.enEmail">{{baseUtils.isEmptyStr(item.enEmail) ? '暂无信息' : item.enEmail}}</span>
-            <span class="split_line">|</span>
+            <!--<span>邮箱：</span><span :title="item.enEmail">{{baseUtils.isEmptyStr(item.enEmail) ? '暂无信息' : item.enEmail}}</span>
+            <span class="split_line">|</span>-->
             <span>电话：</span><span :title="item.enTel">{{item.enTel || '暂无信息'}}</span>
             <span class="split_line">|</span>
             <span>行业：</span><span :title="item.enIndustry">{{item.enIndustry || '暂无信息'}}</span>

components/supplier/merchant.vue

@@ -30,8 +30,8 @@
             <span>地址：</span><span v-text="item.enAddress ? item.enAddress : '暂无信息'">1</span>
           </p>
           <p>
-            <span>邮箱：</span><span v-text="item.enEmail ? item.enEmail : '暂无信息'">h</span>
-            <span class="split_line">|</span>
+            <!--<span>邮箱：</span><span v-text="item.enEmail ? item.enEmail : '暂无信息'">h</span>
+            <span class="split_line">|</span>-->
             <span>电话：</span><span v-text="item.enTel ? item.enTel : '暂无信息'">1</span>
             <span class="split_line">|</span>
             <span>行业：</span><span v-text="item.enIndustry ? item.enIndustry : '暂无信息'">1</span>

layouts/main.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="main">
     <header-view v-if="!isInFrame"></header-view>
-    <main-header></main-header>
+    <main-header :isFixed="isFixed"></main-header>
     <main-nav></main-nav>
     <nuxt/>
     <footer-view></footer-view>
@@ -13,6 +13,11 @@
   import { MainHeader, MainNav } from '~components/main'
   export default {
     name: 'mainView',
+    data () {
+      return {
+        isFixed: false
+      }
+    },
     components: {
       HeaderView: Header,
       FooterView: Footer,
@@ -23,6 +28,21 @@
     created() {
       this.$root.$on('add_cart', this.drop)
     },
+    mounted () {
+      this.$nextTick(() => {
+        window.addEventListener('scroll', () => {
+          let obj = document.querySelector('#headerWrapperContent')
+          let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+          console.log('scrollTop' + obj.scrollTop)
+          console.log('clientTop' + obj.clientTop)
+          console.log('offsetTop' + obj.offsetTop)
+          console.log('scrollY' + obj.scrollY)
+          console.log('---------------------')
+          // 写死是因为获取不到
+          this.isFixed = scrolled >= obj.offsetTop
+        }, false)
+      })
+    },
     methods: {
       drop(el) {
         this.$refs.rightBar.drop(el)