From d7bc641a0f4c9cdc6951dfebfb4a8af324700216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 5 May 2023 22:39:25 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=90=91=E4=B8=8B=E6=BB=9A=E5=8A=A8,=20header=E6=94=B9?=
 =?UTF-8?q?=E5=8F=98=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/favicon.ico         | Bin 1150 -> 0 bytes
 public/index.html          |   2 +-
 src/views/header/index.vue | 275 ++++++++++++++++++++++++++-----------
 3 files changed, 192 insertions(+), 85 deletions(-)
 delete mode 100644 public/favicon.ico

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 75f45f142d457f2432e7171350d4f619e86bff64..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1150
zcmZ9MX;2eJ6vrPHq1Oke<8-VJBh~@5(^BoU){GUE2}J?1NQHte_mM%6kOKw?4WWf_
zBp{Grpb!$n5lDf6Fo0Ykas_g5qmqK00m>05cL{W3YiHWs`R%@WyZ_y{Z+8~J0M#Q$
z02Ncf83MeItTPC`%M@YosznAG`+qq&I51yc-hg~=7jO~T+3nEP@C0h}Qm*Dj2NECP
zoESL~K2%9*-j|(qRYqeY!+<mf2z~#KR=Wuv9s=6YqY;X8=NXmmZoJSmJT8e(4W<Za
zL6HUV<WOdS6ED*Kd_T>_s-8{sN!Z!mGWtgkOlH%khY#ZqzH{SK5|dkOy{#R(u9{tb
z>ScXfkse8*X5j3~((k!&>Uiu6vfA>KrOcS5Iv$I#IH!R{%?ygU^VIPZF_RMMI7myf
zd_%BjBcfcb6N*@Qk<J#UbpGGmtLc}?VMHc@spo^RzppbaXC+eFYAO$P*4Mz`&>T2A
z@daUl>6~QG%juC$m_$iQu79fU^^V8c3}SXhg%jEKv+gQ(oQry(ANr(CP|l(|Hi(Lh
zTPj4bw6FvU`Gm>W7FH`EH!jf%<M9ba^zhVVUx)Uctxd=Zb`r)qU#v><un|5?$ncc6
z_d;!cCRW+ne5kjr6-HIv&?(M89sRvWvn$47yrtw9S2ET@^Kzum?6>}&<Af_8&Ohss
z9@D&38<6n@DFmXJI6F4{=Ge#ptS&Esc2NVxN#Q|_d}eTrKfdY*EBoidL;_Qv-$%6j
zw9H@^k#2AA)t&9>4uC`wb5a;Bq}Tc1SY0tHqLX8PO{0dliwm41?7kRF4=2()tA%Ef
z*FPQ_mA77cJs0%`I^DkEojcreZobS%??*Ad$02*A6vPvLtbQ0D$O>^4Dx0b<lCfu0
zbT7y1nVDsnp4P(l_MiF~-qmX+Cznr~oBuQ}mrq&@v^5-K<J}qD=s+qr$}gcTHRis&
zzWf@~&rXz)T5Ij<CWuN(YP4)>dI6)Ozr*0524-hh!N!JNa`R?3Up=5OeiRo<<woNu
z9Fiwn#E1$WRd$?^)f8h?y&CksB<Jql<^AknpOxw7R}@GfRA7lD@huY*$`l5ZTEDxy
z1B302*938RI$GmFUNnxqI6VOq!+oIcRl#t#43v$PH-yFAA9;Hf24JzQ981f@W(<Z|
zDwV1~(Vu5`XB*^C#O4wa_uF`PYgKg)(`7)~aI!v^X`2yrTR1m1^!fP28Wa}vfKaGJ
zsGzK@59a6A^f`g;&2@O8>;!ec0+daUFQf(BD&i15b4k|bQ!ORAVfr}>^XtIl$$-!A
z27y2hg@tmMnq2u;|E#ACM&uo^FrkL&VI{1uEEzwoD#mSW{BdY&YXh{}HMFk+^7Cc?
v(No?Ah<yY73JB9MWPboad+TpsoHO!!Bjyla>HiS`dMtqC3V@ahu!r~y;(JiH

diff --git a/public/index.html b/public/index.html
index aaaece3..73928cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
     <title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
     <script>
       fnResize();
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index a653af3..fa3c34e 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,45 +1,61 @@
 <template>
-  <div class="header_bg">
-    <el-row type="flex" class="up_header">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16" style="z-index: 400;">
-          <span class="up_left">
-            艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
-          </span>
-        <span class="up_right">
-            广东祥睿陶瓷有限公司
-          </span>
-      </el-col>
-    </el-row>
-    <el-row type="flex" class="down_header">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16">
-        <div class="down_left">
-          <a href="/">
-            <el-image
-              src="http://www.yipengtaoci.com/images/logo.png"></el-image>
-          </a>
+  <div>
+    <div class="header_bg" id="header_bg">
+      <el-row type="flex" class="up_header">
+        <el-col :span="4">
+        </el-col>
+        <el-col :span="16" style="z-index: 400;">
+            <span class="up_left">
+              艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
+            </span>
+          <span class="up_right">
+              广东祥睿陶瓷有限公司
+            </span>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="down_header">
+        <el-col :span="4">
+        </el-col>
+        <el-col :span="16">
+          <div class="down_left">
+            <a href="/">
+              <el-image
+                src="http://www.yipengtaoci.com/images/logo.png"></el-image>
+            </a>
+          </div>
+          <div class="down_right">
+            <ul>
+              <li v-for="(item,index) in navList" :key="index" class="nav">
+                <a :href="item.href" class="nav_item">
+                  {{ item.title }}
+                </a>
+                <ul class="subNav" v-if="item.children">
+                  <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
+                    <a :href="childrenItem.href">
+                      {{ childrenItem.title }}
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="search_header" id="search_header">
+      <div class="headerItems">
+        <ul>
+          <li v-for="(item,index) in navList" :key="index" class="nav">
+            <a :href="item.href">
+              {{ item.title }}
+            </a>
+          </li>
+        </ul>
+        <div class="search">
+          <i class="el-icon-search"></i>
         </div>
-        <div class="down_right">
-          <ul >
-            <li v-for="(item,index) in navList" :key="index" class="nav">
-              <a :href="item.href" class="nav_item">
-                {{ item.title }}
-              </a>
-              <ul class="subNav" v-if="item.children">
-                <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
-                  <a :href="childrenItem.href">
-                    {{ childrenItem.title }}
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -56,83 +72,83 @@ export default {
         {
           href: '',
           title: '关于我们',
-          children:[
+          children: [
             {
               href: '',
-              title:'企业简介'
+              title: '企业简介'
             },
             {
               href: '',
-              title:'品牌文化'
-            },{
+              title: '品牌文化'
+            }, {
               href: '',
-              title:'企业观点'
-            },{
+              title: '企业观点'
+            }, {
               href: '',
-              title:'企业文化'
+              title: '企业文化'
             }
           ]
         }, {
           href: '',
           title: '产品中心',
-          children:[
+          children: [
             {
               href: '',
-              title:'瓷抛大理石'
+              title: '瓷抛大理石'
             },
             {
               href: '',
-              title:'通体大理石'
-            },{
+              title: '通体大理石'
+            }, {
               href: '',
-              title:'中板通体大理石'
-            },{
+              title: '中板通体大理石'
+            }, {
               href: '',
-              title:'大板通体大理石'
-            },{
+              title: '大板通体大理石'
+            }, {
               href: '',
-              title:'银河系大板'
-            },{
+              title: '银河系大板'
+            }, {
               href: '',
-              title:'仿古砖600x600'
-            },{
+              title: '仿古砖600x600'
+            }, {
               href: '',
-              title:'金刚大理石'
-            },{
+              title: '金刚大理石'
+            }, {
               href: '',
-              title:'岩板'
-            },{
+              title: '岩板'
+            }, {
               href: '',
-              title:'微水泥'
+              title: '微水泥'
             }
           ]
         }, {
           href: '/news',
           title: '新闻资讯',
-          children:[
+          children: [
             {
               href: '/news',
-              title:'公司新闻'
+              title: '公司新闻'
             },
             {
               href: '',
-              title:'行业动态'
-            },{
+              title: '行业动态'
+            }, {
               href: '',
-              title:'瓷砖百科'
+              title: '瓷砖百科'
             }
           ]
         }, {
           href: '',
           title: '形象展示',
-          children:[
+          children: [
             {
               href: '',
-              title:'资质荣誉'
+              title: '资质荣誉'
             },
             {
               href: '',
-              title:'工程案例'
+              title: '工程案例'
             }
           ]
         }, {
@@ -141,11 +157,11 @@ export default {
           children: [
             {
               href: '',
-              title:'支持策略'
+              title: '支持策略'
             },
             {
               href: '',
-              title:'加盟条件'
+              title: '加盟条件'
             },
           ]
         }, {
@@ -154,12 +170,37 @@ export default {
         }
       ]
     }
-  }
+  },
+  mounted() {
+    let header_bg = document.getElementById('header_bg')
+    let search_header = document.getElementById('search_header')
+
+    window.onscroll = () => {
+      // 获取滚动距离
+      let top = document.documentElement.scrollTop || document.body.scrollTop;
+      if (top >= 140) {
+        header_bg.style = 'display:none;transition:  all 0.6s;'
+        search_header.style = 'position: fixed;top: 0;;display:block;transition:  all 0.6s;'
+      } else if (top === 0) {
+        header_bg.style = 'position: static;'
+        search_header.style = 'display:none'
+      }
+    }
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth >= 1200
+      })()
+    }
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .header_bg {
+  transition: all 0.6s;
   height: 130px;
   width: 100%;
   background-color: #111;
@@ -208,11 +249,11 @@ export default {
       position: relative;
       float: right;
 
-      >ul {
+      > ul {
         display: inline;
         float: left;
 
-        >.nav {
+        > .nav {
           position: relative;
           display: inline;
           width: 100px;
@@ -226,11 +267,12 @@ export default {
             line-height: 85px;
             font-size: 14px;
           }
-          .nav_item:hover{
+
+          .nav_item:hover {
             text-decoration: underline;
           }
 
-          .subNav{
+          .subNav {
             display: none;
             clear: both;
             position: absolute;
@@ -239,24 +281,28 @@ export default {
             width: 100px;
             background-color: #000;
             padding: 12px 0;
-            >li{
+
+            > li {
               width: 100%;
               text-align: center;
               height: 35px;
               line-height: 35px;
-              >a{
+
+              > a {
                 color: #fff;
                 font-size: 12px;
               }
-              >a:hover{
+
+              > a:hover {
                 text-decoration: underline;
               }
             }
           }
 
         }
-        >.nav:hover {
-          .subNav{
+
+        > .nav:hover {
+          .subNav {
             display: block;
           }
         }
@@ -264,4 +310,65 @@ export default {
     }
   }
 }
+
+.search_header {
+  width: 100%;
+  display: none;
+  background-color: #000;
+  min-width: 1290px;
+  z-index: 99999;
+
+  .headerItems {
+    position: relative;
+    padding: 8px 0;
+    width: 66%;
+    margin: 0 auto;
+
+    ul {
+      display: flex;
+      width: 100%;
+      padding-left: 100px;
+
+      li {
+        position: relative;
+        display: inline-block;
+        width: 12%;
+        z-index: 300;
+
+        a:hover {
+          text-decoration: underline;
+        }
+
+        a {
+          color: #fff;
+          display: inline-block;
+          position: relative;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+          text-align: center;
+          text-decoration: none;
+          cursor: pointer;
+          z-index: 200;
+        }
+      }
+    }
+
+    .search {
+      cursor: pointer;
+      position: absolute;
+      right: 10px;
+      top: 0;
+      line-height: 62px;
+
+      i {
+        font-size: 20px;
+        color: #fff;
+      }
+    }
+  }
+
+
+}
 </style>