shop-pc/pages/down/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-26 16:08:17
 * @LastEditors: ch
 * @LastEditTime: 2022-05-27 16:52:18
 * @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>
		<i class="bg1"></i>
		<i class="bg1"></i>
		<i class="bg1"></i>
		<i class="bg1"></i>
		<i class="bg1"></i>
	</div>
</template>
<style lang="scss" scoped>
.main{
	height: calc(100vh - 132px);
	overflow: hidden;
}
.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;
	li{
		text-align: center;
	}
	&--box{
		width: 180px;
		height: 180px;
		background: #F4F3F3;
	}
	&--title{
		display: block;
		font-size: 20px;
		margin: 25px 0;
	}
}
.bg1{
	position: fixed;
	left: 0;
	bottom: 45px;
	width: 152px;
	height: 257px;
	background: url('@/assets/img/down/bg1.png');
	background-size: 100%;
}
</style>