下载页

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>

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;
+          }
+        }
       }
     }
   }

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);