ch
3 years ago
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
@ -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>
|
||||