Merge branch 'feature/task315-0526-ch' into msb_test

layouts/default.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:56:39
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 15:53:49
+ * @LastEditTime: 2022-05-31 16:52:40
  * @Description: file content
 -->
 <template>

layouts/module/header/HeaderCategory.vue

@@ -2,7 +2,6 @@
   <div class="header-category">
     <!-- 热门分类 -->
     <div
-      v-show="showCategroyTab"
       class="header-box-tab__category"
       @mouseenter="handleCategoryChange(true)"
       @mouseleave="handleCategoryChange(false)"
@@ -12,7 +11,6 @@
         <span>热门分类</span>
       </div> -->
       <div
-        v-show="isCategroyOpen || categroyVisible"
         class="tab-category__menu"
         @mouseenter="handleCategoryTwoChange(true)"
         @mouseleave="handleCategoryTwoChange(false)"
@@ -68,7 +66,7 @@ export default {
     return {
       CATEGROY_LEVEL,
       categroyTwoVisible: false, // 是否展示二级分类
-      categroyVisible: false, // 是否展示一级分类
+      categroyVisible: true, // 是否展示一级分类
       currentCategroyId: 0, // 当前鼠标悬停的一级分类id
       list: [],
     };

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"
-          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 }"
-              >关注公众号</span
-            >
         </div>
-          <div class="info-bar-popover__qrcode">
-            <img src="~/assets/img/common/app-qrcode.jpg" />
-            <span>扫一扫二维码 关注公众号</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

@@ -0,0 +1,226 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-26 16:08:17
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-31 17:52:30
+ * @Description: file content
+-->
+<template>
+	<div class="main">
+		<h2 class="title">下载马士兵严选APP</h2>
+		<p class="desc"><b>精选好物</b><span></span><b>精致生活</b></p>
+		<ul class="group">
+			<li class="group--item">
+				<div class="qrcode">
+					<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--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--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--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>
+		</ul>
+		<div class="bg">
+			<i class="bg--icon1"></i>
+			<i class="bg--icon2"></i>
+			<i class="bg--icon3"></i>
+			<i class="bg--icon4"></i>
+			<i class="bg--icon5"></i>
+		</div>
+		
+	</div>
+</template>
+<style lang="scss" scoped>
+.main{
+	height: calc(100vh - 132px);
+	overflow: hidden;
+	position: relative;
+}
+.title{
+	text-align: center;
+	font-size: 40px;
+	font-family: 'PingFang SC-粗体, PingFang SC';
+	font-weight: bold;
+	color: #191919;
+	margin-top: 115px;
+}
+.desc{
+	text-align: center;
+	font-size: 24px;
+	font-family: 'PingFang SC-常规体, PingFang SC';
+	color: #A8A8A8;
+	line-height: 21px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 24px;
+	span{
+		margin: 0 15px;
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		background: #A8A8A8;
+		border-radius: 6px;
+	}
+}
+.group{
+	width: 930px;
+	margin: 73px auto;
+	display: flex;
+	justify-content: space-between;
+	z-index: 1;
+	position: relative;
+	&--item{
+		text-align: center;
+		&-title{
+			display: block;
+			font-size: 20px;
+			margin: 25px 0;
+		}
+		&-btn{
+			border: 1px solid #ddd;
+			color: #A7A7A7;
+			font-size: 16px;
+			width: 142px;
+			height: 40px;
+			line-height: 40px;
+			display: inline-block;
+		}
+	}
+}
+// .qrcode--img:hover + .qrcode--icon{
+// 	opacity: 0;
+// }
+.qrcode{
+	width: 180px;
+	height: 180px;
+	background: url('@/assets/img/down/qrcode.png') no-repeat #F4F3F3 right top;
+	background-size: 52px;
+	cursor: pointer;
+	text-align: center;
+	position: relative;
+	&--icon{
+		position: absolute;
+		z-index: 1;
+		width: 57px;
+		height: 96px;
+		left: 62px;
+		top: 42px;
+		transition: opacity .8s;
+		opacity: 1;
+	}
+	&--img{
+		position: absolute;
+		z-index: 2;
+		left: 0;
+		top: 0;
+		transition: opacity 1s;
+		opacity: 0;
+		&:hover{
+			opacity: 1;
+			+ .qrcode--icon{
+				opacity: 0;
+			}
+		}
+	}
+	&__disabled{
+		cursor: no-drop;
+		.qrcode--img:hover{
+			opacity: 0;
+			+ .qrcode--icon{
+				opacity: 1;
+			}
+		}
+	}
+}
+.bg{
+	width: 1920px;
+	height: 100%;
+	@include adj(transform, translateX(-50%));
+	z-index: 0;
+	position: absolute;
+	left: 50%;
+	top: 0;
+	i{
+		position: absolute;
+		display: block;
+		background-size: 100%;
+	}
+	&--icon1{
+		bottom: 45px;
+		width: 152px;
+		height: 257px;
+		background-image: url('@/assets/img/down/bg1.png');
+	}
+	&--icon2{
+		top: 148px;
+		left: 140px;
+		width: 197px;
+		height: 214px;
+		background-image: url('@/assets/img/down/bg2.png');
+		animation: float 4s ease-in-out infinite;
+	}
+	&--icon3{
+		top: 549px;
+		left: 960px;
+		width: 116px;
+		height: 126px;
+		background-image: url('@/assets/img/down/bg3.png');
+		animation: float 5s ease-in-out infinite;
+	}
+	&--icon4{
+		top: 456px;
+		right: 261px;
+		width: 133px;
+		height: 137px;
+		background-image: url('@/assets/img/down/bg4.png');
+		animation: float 4s ease-in-out infinite;
+	}
+
+	&--icon5{
+		top: -72px;
+		right: -20px;
+		width: 200px;
+		height: 200px;
+		box-shadow: 0 0 50px #ffc9b6;
+		background: #FFF8F2;
+		border-radius: 50%;
+		filter: blur(50px);
+		// background-image: url('@/assets/img/down/bg5.png');
+		// background-size: 246px !important ;
+		// background-repeat: no-repeat;
+		// background-position: center;
+	}
+}
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-50px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+</style>

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.jpg" />
+      <img src="~/assets/img/common/app-qrcode.png" />
-      <p>扫一扫上方二维码 关注公众号</p>
+      <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,9 +15,10 @@
       <div
         @mouseenter="appHover = true"
         @mouseleave="appHover = false"
+        @click="$router.push('/down')"
         class="tabbar-fixed-box__common flex flex-middle"
       >
-        <span v-show="appHover">关注公众号</span>
+        <span v-show="appHover">下载APP</span>
         <img v-show="!appHover" src="~/assets/img/home/icon-app.png" />
       </div>
       <div class="tabbar-fixed-box__line"></div>