shop-pc/pages/down/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-26 16:08:17
 * @LastEditors: ch
 * @LastEditTime: 2022-05-29 20:53:46
 * @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">

				</div>
				<span class="qcode--title">Android</span>
			</li>
			<li>
				<div class="qcode--box"></div>
				<span class="qcode--title">iOS</span>
			</li>
			<li>
				<div class="qcode--box"></div>
				<span class="qcode--title">微信公众号</span>
			</li>
			<li>
				<div class="qcode--box"></div>
				<span class="qcode--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;
	}
}
.qcode{
	width: 930px;
	margin: 73px auto;
	display: flex;
	justify-content: space-between;
	z-index: 1;
	position: relative;
	li{
		text-align: center;
	}
	&--box{
		width: 180px;
		height: 180px;
		background: #F4F3F3;
	}
	&--title{
		display: block;
		font-size: 20px;
		margin: 25px 0;
	}
}
.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: 0;
		right: 0;
		width: 192px;
		height: 174px;
		background-image: url('@/assets/img/down/bg5.png');
	}
}
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
    }
}
</style>