From 8b18ca4f736b0a409f685d3ef2d57553f97da34f Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Thu, 2 Jun 2022 18:01:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/down.vue                        | 60 +++++++++++++++++++++++++
 layouts/module/header/HeaderInfoBar.vue | 16 ++++++-
 pages/down/index.vue                    | 13 ++++--
 3 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 layouts/down.vue

diff --git a/layouts/down.vue b/layouts/down.vue
new file mode 100644
index 0000000..17d810b
--- /dev/null
+++ b/layouts/down.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-04 17:56:39
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-02 17:49:00
+ * @Description: file content
+-->
+<template>
+  <div class="layout">
+    <BsLogin :visible.sync="loginVisible" />
+    <Header :is-sticky="isSticky" />
+    <div class="layout-content">
+      <Nuxt />
+    </div>
+  </div>
+</template>
+<script>
+import BsLogin from "@/components/BsLogin.vue";
+import Header from "./module/header/index.vue";
+import Footer from "./module/footer/index.vue";
+
+export default {
+  name: "down",
+  components: { Header, Footer, BsLogin },
+  data() {
+    return {
+      isSticky: false,
+    };
+  },
+  computed: {
+    loginVisible: {
+      get() {
+        return this.$store.state.loginVisible;
+      },
+      set(val) {
+        this.$store.commit("setLoginVisible", val);
+      },
+    },
+  },
+  mounted() {
+    // 监听滚动事件
+    window.addEventListener("scroll", this.scrollEventMethod);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.scrollEventMethod);
+  },
+  methods: {
+    scrollEventMethod() {
+      this.isSticky = window.scrollY > 300;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.layout {
+  .layout-content {
+    min-height: calc(100vh - 400px);
+  }
+}
+</style>
diff --git a/layouts/module/header/HeaderInfoBar.vue b/layouts/module/header/HeaderInfoBar.vue
index 977b0fa..55805b7 100644
--- a/layouts/module/header/HeaderInfoBar.vue
+++ b/layouts/module/header/HeaderInfoBar.vue
@@ -86,7 +86,8 @@
         </div>
         <div class="header-wrap-content__common flex flex-middle down" 
           @click="$router.push('/down')">
-            <img  src="~/assets/img/layout/icon-phone.png"/>
+            <img class="down--icon" src="~/assets/img/layout/icon-phone.png"/>
+            <img class="down--icon__hover" src="~/assets/img/layout/icon-phone-light.png"/>
             <span>下载app</span>
         </div>
       </div>
@@ -296,6 +297,19 @@ export default {
         height: 26px;
         display: flex;
         align-items: center;
+        border-radius: 4px;
+        .down--icon__hover{
+          display: none;
+        }
+        &:hover{
+          color: #ff875b;
+          .down--icon{
+            display: none;
+          }
+          .down--icon__hover{
+            display: inline-block;
+          }
+        }
       }
     }
   }
diff --git a/pages/down/index.vue b/pages/down/index.vue
index 87e709f..4c713ff 100644
--- a/pages/down/index.vue
+++ b/pages/down/index.vue
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-26 16:08:17
  * @LastEditors: ch
- * @LastEditTime: 2022-05-31 17:52:30
+ * @LastEditTime: 2022-06-02 17:56:04
  * @Description: file content
 -->
 <template>
@@ -20,7 +20,7 @@
 			<li class="group--item">
 				<div class="qrcode qrcode__disabled">
 					<img class="qrcode--img" src="@/assets/img/down/app-qrcode.png"/>
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
+					<img class="qrcode--icon" src="@/assets/img/down/ios.png"/>
 				</div>
 				<span class="group--item-title">iOS</span>
 				<span class="group--item-btn">规划中...</span>
@@ -28,14 +28,14 @@
 			<li class="group--item">
 				<div class="qrcode">
 					<img class="qrcode--img" src="@/assets/img/down/wx-qrcode.jpg"/>
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
+					<img class="qrcode--icon" src="@/assets/img/down/wx.png"/>
 				</div>
 				<span class="group--item-title">微信公众号</span>
 			</li>
 			<li class="group--item">
 				<div class="qrcode">
 					<img class="qrcode--img" src="@/assets/img/down/h5-qrcode.png"/>
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
+					<img class="qrcode--icon" src="@/assets/img/down/browser.png"/>
 				</div>
 				<span class="group--item-title">H5</span>
 			</li>
@@ -50,6 +50,11 @@
 		
 	</div>
 </template>
+<script>
+export default {
+	layout : 'down'
+}
+</script>
 <style lang="scss" scoped>
 .main{
 	height: calc(100vh - 132px);