广告

pages/down/index.vue

@@ -2,31 +2,42 @@
  * @Author: ch
  * @Date: 2022-05-26 16:08:17
  * @LastEditors: ch
- * @LastEditTime: 2022-05-29 20:53:46
+ * @LastEditTime: 2022-05-31 16:08:41
  * @Description: file content
 -->
 <template>
 	<div class="main">
 		<h2 class="title">下载马士兵严选APP</h2>
 		<p class="desc"><b>精选好物</b><span></span><b>精致生活</b></p>
-		<ul class="qcode">
-			<li>
-				<div class="qcode--box">
-
+		<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"/>
 				</div>
-				<span class="qcode--title">Android</span>
+				<span class="group--item-title">Android</span>
 			</li>
-			<li>
-				<div class="qcode--box"></div>
-				<span class="qcode--title">iOS</span>
+			<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"/>
+				</div>
+				<span class="group--item-title">iOS</span>
+				<span class="group--item-btn">规划中...</span>
 			</li>
-			<li>
-				<div class="qcode--box"></div>
-				<span class="qcode--title">微信公众号</span>
+			<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"/>
+				</div>
+				<span class="group--item-title">微信公众号</span>
 			</li>
-			<li>
-				<div class="qcode--box"></div>
-				<span class="qcode--title">H5</span>
+			<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"/>
+				</div>
+				<span class="group--item-title">H5</span>
 			</li>
 		</ul>
 		<div class="bg">
@@ -72,25 +83,64 @@
 		border-radius: 6px;
 	}
 }
-.qcode{
+.group{
 	width: 930px;
 	margin: 73px auto;
 	display: flex;
 	justify-content: space-between;
 	z-index: 1;
 	position: relative;
-	li{
+	&--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;
+		}
 	}
-	&--box{
-		width: 180px;
-		height: 180px;
-		background: #F4F3F3;
+}
+
+.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;
 	}
-	&--title{
-		display: block;
-		font-size: 20px;
-		margin: 25px 0;
+	&--img{
+		position: absolute;
+		z-index: 2;
+		left: 0;
+		top: 0;
+		transition: opacity 1s;
+		opacity: 0;
+		&:hover{
+			opacity: 1;
+		}
+	}
+	&__disabled{
+		cursor: no-drop;
+		.qrcode--img:hover{
+			opacity: 0;
+		}
 	}
 }
 .bg{