MiniPrograms/subpkg/subscribecenter/subscribecenter.vue

<template>
	<view class="container">
		<!-- 返回按钮 -->
		<back text="订阅中心" color="#FFF"></back>

		<view class="bg1"></view>
		<view class="bg2"></view>

		<view class="vipcard" style="display: flex; align-items: center;">
			<view>
				<view class="flex">
					<view class="t-icon t-icon-huiyuan1"></view>
					<view class="card-title">{{myData.subscribeLevel}}</view>
				</view>
				<view class="card-detail">{{endTime}} 到期</view>
				<view class="card-detail">{{myData.subscribePrivilege}}</view>
				<view class="btn-box">
					<view class="border-box">
						<view class="btn-text">升级版本</view>
					</view>
					<view class="border-box">
						<view class="btn-text">订阅续费</view>
					</view>
				</view>
			</view>
			<view class="flex">
				<view class="border-right"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
				<view class="border-right" style="margin-left: -480rpx;"></view>
			</view>
		</view>

		<view class="flex" style="margin: 50rpx 0 0 50rpx;">
			<u-tag text="专属功能" color="#fff" bgColor="#333" borderColor="#333" shape="circle"></u-tag>
			<view class="line"></view>
		</view>
		
		<view class="flex" style="margin: 50rpx 0 0 50rpx;justify-content: space-around;">
			<view class="flex" style="flex-direction: column;" v-for="(item,index) in data" :key="index">
				<view class="circle-box">
					<view :class="item.icon"></view>
				</view>
				<view style="color: #FFF; font-size: 28rpx;margin-top: 20rpx;">{{item.text}}</view>
			</view>
		</view>
		
		<view class="bg3" :style="{backgroundImage: `url(${image})`}"></view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_parent', ['myData'])
		},
		data() {
			return {
				endTime: '',
				data:[
					{
						icon: 't-icon t-icon-huiyuan',
						text: '测试测试1'
					},
					{
						icon: 't-icon t-icon-shangou',
						text: '测试测试2'
					},
					{
						icon: 't-icon t-icon-xunzhang',
						text: '测试测试3'
					}
				],
				image: 'https://ouch-cdn2.icons8.com/TkDU4uToX9e3o75BLBT0mMcvbRy6Ffw8EZrdODM7kbU/rs:fit:256:171/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMjM5/L2IxYTNmM2Q4LTdj/NjktNGQ2NC04ZjIz/LTJjZGM4ZDJmYWEw/ZC5zdmc.png'
			};
		},
		onLoad() {
			this.setEndTime()
		},
		methods: {
			setEndTime() {
				this.endTime = this.myData.subscribeTime.split('-')[1]
			}
		}
	}
</script>

<style lang="scss">
	.bg1 {
		position: fixed;
		left: 50%;
		right: 50%;
		transform: translate(-50%, -50%);
		width: 1900rpx;
		height: 1700rpx;
		border-radius: 50%;
		background-color: #404148;
		z-index: -1;
	}
	.bg2 {
		position: fixed;
		left: 50%;
		right: 50%;
		transform: translate(-50%, -50%);
		width: 1950rpx;
		height: 1750rpx;
		border-radius: 50%;
		background-color: #979797;
		z-index: -2;
	}
	.bg3 {
		position: fixed;
		left: 50%;
		right: 50%;
		margin-top: 100%;
		transform: translate(-50%, -50%);
		width: 70%;
		height: 60%;
		background-size: contain;
		background-repeat: no-repeat;
		z-index: -3;
	}

	.vipcard {
		position: relative;
		top: 20rpx;
		left: 50rpx;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(to right, #f8e4bf, #e1bc87);
		border-radius: $card-border-radius;
		padding: 50rpx;
		overflow: hidden;

		.card-title {
			margin-left: 20rpx;
			font-size: 50rpx;
			font-weight: bold;
			color: #7e5320;
		}

		.card-detail {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #b4986b;
		}

		.btn-box {
			width: 270rpx;
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.border-box {
				border-radius: 100rpx;
				border: 1rpx solid #7e5320;
				padding: 10rpx;

				.btn-text {
					font-size: 26rpx;
					color: #7e5320;
				}
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}
	.line {
		height: 4rpx;
		width: 100%;
		background-color: #333;
	}
	.t-icon {
		height: 40rpx;
		width: 40rpx;
		background-repeat: no-repeat;
	}
	.circle-box{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #FFF;
		.t-icon {
			height: 80rpx;
			width: 80rpx;
			background-repeat: no-repeat;
		}
	}
	.border-right{
		margin-left: 120rpx;
		height: 500rpx;
		width: 500rpx;
		border-radius: 50%;
		border: 1px solid #b4986b;
	}
</style>