下载页

layouts/default.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:56:39
  * @LastEditors: ch
- * @LastEditTime: 2022-05-27 16:40:50
+ * @LastEditTime: 2022-05-31 16:52:40
  * @Description: file content
 -->
 <template>
@@ -12,7 +12,7 @@
     <div class="layout-content">
       <Nuxt />
     </div>
-    <!-- <Footer /> -->
+    <Footer />
   </div>
 </template>
 <script>

layouts/module/header/HeaderInfoBar.vue

@@ -84,37 +84,11 @@
           <img v-show="!orderHover" src="~/assets/img/layout/icon-order.png" />
           <span>我的订单</span>
         </div>
-        <div class="header-wrap-content--line"></div>
+        <div class="header-wrap-content__common flex flex-middle down" 
-        <!-- 下载app -->
+          @click="$router.push('/down')">
-        <el-popover
+            <img  src="~/assets/img/layout/icon-phone.png"/>
-          popper-class="header-info-bar__popover"
+            <span>下载app</span>
-          placement="bottom"
+        </div>
-          width="230"
-          trigger="hover"
-          @show="phoneHover = true"
-          @hide="phoneHover = false"
-        >
-          <div
-            slot="reference"
-            class="header-wrap-content__common flex flex-middle"
-          >
-            <img
-              v-show="phoneHover"
-              src="~/assets/img/layout/icon-phone-light.png"
-            />
-            <img
-              v-show="!phoneHover"
-              src="~/assets/img/layout/icon-phone.png"
-            />
-            <span :class="{ 'wrap-content-common--light': phoneHover }"
-              >下载app</span
-            >
-          </div>
-          <div class="info-bar-popover__qrcode">
-            <img src="~/assets/img/common/app-qrcode.png" />
-            <span>扫一扫上方二维码 下载APP</span>
-          </div>
-        </el-popover>
       </div>
     </div>
   </div>
@@ -133,7 +107,6 @@ export default {
     return {
       menuVisible: false,
       orderHover: false,
-      phoneHover: false,
       messageHover: false,
       menuList: [
         {
@@ -317,6 +290,13 @@ export default {
           margin-right: 4px;
         }
       }
+      .down{
+        background:#474747;
+        padding: 0 10px;
+        height: 26px;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 }

pages/down/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-26 16:08:17
  * @LastEditors: ch
- * @LastEditTime: 2022-05-31 16:08:41
+ * @LastEditTime: 2022-05-31 16:40:50
  * @Description: file content
 -->
 <template>
@@ -12,30 +12,30 @@
 		<ul class="group">
 			<li class="group--item">
 				<div class="qrcode">
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 					<img class="qrcode--img" src="@/assets/img/down/app-qrcode.png"/>
+					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 				</div>
 				<span class="group--item-title">Android</span>
 			</li>
 			<li class="group--item">
 				<div class="qrcode qrcode__disabled">
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 					<img class="qrcode--img" src="@/assets/img/down/app-qrcode.png"/>
+					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 				</div>
 				<span class="group--item-title">iOS</span>
 				<span class="group--item-btn">规划中...</span>
 			</li>
 			<li class="group--item">
 				<div class="qrcode">
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 					<img class="qrcode--img" src="@/assets/img/down/wx-qrcode.jpg"/>
+					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 				</div>
 				<span class="group--item-title">微信公众号</span>
 			</li>
 			<li class="group--item">
 				<div class="qrcode">
-					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 					<img class="qrcode--img" src="@/assets/img/down/h5-qrcode.png"/>
+					<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
 				</div>
 				<span class="group--item-title">H5</span>
 			</li>
@@ -108,7 +108,9 @@
 		}
 	}
 }
-
+// .qrcode--img:hover + .qrcode--icon{
+// 	opacity: 0;
+// }
 .qrcode{
 	width: 180px;
 	height: 180px;
@@ -124,6 +126,8 @@
 		height: 96px;
 		left: 62px;
 		top: 42px;
+		transition: opacity .8s;
+		opacity: 1;
 	}
 	&--img{
 		position: absolute;
@@ -134,12 +138,18 @@
 		opacity: 0;
 		&:hover{
 			opacity: 1;
+			+ .qrcode--icon{
+				opacity: 0;
+			}
 		}
 	}
 	&__disabled{
 		cursor: no-drop;
 		.qrcode--img:hover{
 			opacity: 0;
+			+ .qrcode--icon{
+				opacity: 1;
+			}
 		}
 	}
 }

pages/index/module/TabbarFixed.vue

@@ -2,13 +2,12 @@
   <div
     v-if="tabBarVisible"
     class="home-tabbar-fixed flex"
-    :class="{ 'home-tabbar-fixed--change': appHover }"
     :style="tabBarStyle"
   >
-    <div v-show="appHover" class="home-tabbar-fixed__qrcode">
+    <!-- <div v-show="appHover" class="home-tabbar-fixed__qrcode">
       <img src="~/assets/img/common/app-qrcode.png" />
       <p>扫一扫上方二维码 下载APP</p>
-    </div>
+    </div> -->
     <div
       class="home-tabbar-fixed__box flex flex-column flex-middle"
       :class="{ 'home-tabbar-fixed__box--height-short': !showToTop }"
@@ -16,6 +15,7 @@
       <div
         @mouseenter="appHover = true"
         @mouseleave="appHover = false"
+        @click="$router.push('/down')"
         class="tabbar-fixed-box__common flex flex-middle"
       >
         <span v-show="appHover">下载app</span>