hx/pages/index/explain.vue

<template>
	<view class="center">
		<view class="title">
			<image class="title-bg" src="../../static/img/explain-bg.png" mode=""></image>
		</view>
		<view class="tip">
			ACTIVATION INFORMATION
		</view>
		<view class="main">
			<view class="main-sun">
				粉丝激活说明内容步骤说明详细的内容说明粉丝激
				活说明内容步骤说明详细的内容说明粉丝激活说明
				内容步骤说明详细的内容说明
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
page,.center {
	background: #f7f7f7;
	height: 100%;
}
.title{
	margin: 50rpx auto 0;
	width: 400rpx;
	position: relative;
	.title-bg {
		width: 400rpx;
		height: 90rpx;
	}
}
.tip {
	margin-top: -10rpx;
	text-align: center;
	font-size: 20rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #375AFE;
}
.main {
	margin: 46rpx auto 0;
	width: 670rpx;
	height: 616rpx;
	padding: 6rpx;
	box-sizing: border-box;
	background: linear-gradient(0deg, #6456FB, #45F8F8);
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 0px 20rpx 0px 20rpx;
	.main-sun {
		width: 100%;
		height: 100%;
		border-radius: 0px 20rpx 0px 20rpx;
		background: #FFFFFF;
		padding: 44rpx 60rpx 44rpx 36rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0C1732;
		line-height: 38rpx;
	}
}
</style>