xpl/pages/money/phone.vue

<template>
	<view class="center">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="content-money">
			<view class="body-title">
				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
				<view class="header">充值中心</view>
			</view>
			<view class="content-bg"></view>
			<view class="phone">
				<view class="phone-title">充值号码</view>
				<view class="input"><input type="text" value="phone" v-model="phone" placeholder="请输入充值号码" placeholder-class="input" /></view>
			</view>
		</view>
		<view class="main-box">
			<view class="main-title">请选择充值套餐</view>
			<view class="main">
				<view class="main-item" v-for="(item, index) in moneyList" :class="{ current: money === item.price }" :key="index" @click="change(item.price)">
					<view class="num">
						{{ item.money }}
						<text>元</text>
					</view>
					<view class="yuan">售价{{ item.price }}元</view>
				</view>
			</view>
			<view class="zj">
				<view class="zj-left">
					应付金额
				</view>
				<view class="zj-right">
					￥{{money}}元
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="explain-left">
				充值说明
			</view>
			<view class="explain-right">
			</view>
		</view>
		<view class="btn">
			立即充值
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			money: 9.9,
			moneyList: [
				{
					money: 10,
					price: 9.9
				},
				{
					money: 20,
					price: 19.9
				},
				{
					money: 30,
					price: 29.9
				},
				{
					money: 50,
					price: 49.9
				},
				{
					money: 100,
					price: 99.9
				},
				{
					money: 200,
					price: 199.9
				},
				{
					money: 300,
					price: 299.9
				},
				{
					money: 500,
					price: 499.9
				},
				{
					money: 1000,
					price: 999.9
				}
			]
		};
	},
	methods: {
		// 点击返回 我的页面
		toBack() {
			uni.navigateBack({});
		},
		change(money){
			this.money = money
		}
	}
};
</script>

<style lang="scss">
page,.center {
	background: #f1f1f1;
	height: 100%;
	padding-bottom: 30rpx;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.content-money {
	padding-bottom: 30rpx;
	position: relative;
	height: 520rpx;
	.content-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 520rpx;
		background: linear-gradient(30deg, #2e58ff, #33eeff);
		border-bottom-right-radius: 35%;
		border-bottom-left-radius: 35%;
	}
	.body-title {
		height: 80rpx;
		text-align: center;
		font-size: 35rpx;
		position: relative;
		.header {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fffeff;
			height: 80rpx;
			font-size: 36rpx;
			font-weight: 700;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.goback-box {
			position: absolute;
			left: 18rpx;
			top: 0;
			height: 80rpx;
			display: flex;
			align-items: center;
		}

		.goback {
			z-index: 100;
			width: 34rpx;
			height: 34rpx;
		}
	}
}
.phone {
	position: relative;
	z-index: 10;
	padding: 50rpx 27rpx 0;
	.phone-title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.input {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #e5e5e5;
	}
}
.main-box {
	position: relative;
	z-index: 10;
	width: 694rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: -200rpx auto 0;
	padding: 30rpx;
	.main-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #010101;
	}
	.main {
		padding-top: 14rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		.current {
			background: linear-gradient(0deg, #2e58ff, #32c6ff) !important;
			.num,.yuan{
				color: #FFFFFF !important;
			}
		}
		.main-item {
			margin-top: 14rpx;
			line-height: 1;
			width: 204rpx;
			height: 130rpx;
			background: #d6e9ff;
			border-radius: 7rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #2e58ff;
				text {
					display: inline-block;
					padding-left: 8rpx;
					font-size: 26rpx;
				}
			}
			.yuan {
				margin-top: 18rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #999999;
			}
		}
	}
	.zj {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.zj-left {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.zj-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF0000;
		}
	}
}
.explain {
	margin: 20rpx auto 0;
	padding: 24rpx 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 694rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	.explain-left {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.explain-right {
		position: relative;
		bottom: 14rpx;
		right: 28rpx;
	}
	.explain-right:after,.explain-right:before {
	  border: 12rpx solid transparent;
	  border-left: 12rpx solid #fff;
	  width: 0;
	  height: 0;
	  position: absolute;
	  top: 0;
	  right: -20px;
	  content: ' ';
	}
	
	.explain-right:before {
	  border-left-color: #333333;
	  right: -21px;
	}
}
.btn {
	margin: 200rpx auto 0;
	width: 696rpx;
	height: 84rpx;
	background: linear-gradient(0deg, #2E58FF, #32C6FF);
	border-radius: 42rpx;
	text-align: center;
	line-height: 84rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}
</style>