sange-bridge/pages/my/member.vue

<template>
	<app-layout>
		<view class="container">
			<view class="header">
				<view class="bg"></view>
				<view class="title-group dir-top-wrap cross-center main-center">
					<view class="title">桥架计算和公示表永久使用</view>
					<view class="sub-title">做桥架不求人，让你秒变大师</view>
				</view>
			</view>
			<view class="main">
				<view class="bg"></view>
				<view class="item-group  dir-top-wrap cross-center">
					<view class="title">开通桥架会员</view>
					<view class="price">
						<view class="current">¥58</view>
						<view class="origin">¥98</view>
						<view class="desc">永久使用</view>
					</view>
					<u-button shape="circle"
							  type="success"
							  hover-class="none"
							  :custom-style="btnStyle"
					>立即开通</u-button>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {

			}
		},
		methods: {

		},
		computed:{
			btnStyle() {
				return {
					border:'none',
					background:'linear-gradient(90deg, rgba(196,146,68,1) 0%, rgba(225,193,117,1) 100%, rgba(225,193,117,1) 100%)',
					width: '600rpx',
					padding: '42rpx 0',
					height: '100rpx',
					fontSize: '36rpx',
					fontWeight: 600
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
		.header {
			.bg {
				position: absolute;
				background: url("@/static/images/member-bg.png") no-repeat center;
				background-size: 100% 100%;
				height: 300rpx;
				left: 0;
				top: 0;
				width: 750rpx;
				z-index: 0;
			}
			.title-group{
				position: relative;
				color: #CFBB8B;
				height: 220rpx;
				.title{
					font-size: 48rpx;
					font-weight: 600;
				}
				.sub-title{
					margin-top: 8rpx;
					font-size: 30rpx;
				}
			}
		}
		.main{
			position: relative;
			.bg{
				position: absolute;
				background: url("@/static/images/member-bg1.png") no-repeat center;
				background-size: 100% 100%;
				left: 50%;
				transform: translateX(-50%);
				height: 750rpx;
				width: 680rpx;
				z-index: 0;
			}
			.item-group{
				position: relative;
				height: 750rpx;
				padding: 32rpx 0;
				.title{
					font-size: 42rpx;
					font-weight: 600;
					color: #4e5958;
				}
			}
			.price{
				border: 4rpx solid #C49244;
				color: #c5923d;
				padding: 20rpx 60rpx;
				text-align: center;
				margin-bottom: 100rpx;
				margin-top: 100rpx;
				border-radius: 10rpx;
				.current{
					font-weight: 600;
					font-size: 42rpx;
					padding: 30rpx 0;
				}
				.origin{
					color: #e3c377;
					text-decoration: line-through;
				}
				.desc{
					font-size: 40rpx;
					padding: 30rpx 0;
				}
			}
		}
	}
</style>