xpl/pages/conversion/transfers.vue

<template>
	<view class="center">
		<view class="top">
			<view class="top-num">{{ jf }}</view>
			<view class="top-font">可转账购物积分</view>
		</view>
		<view class="main">
			<view class="main-font">收款人账户</view>
			<input class="main-input" type="text" value="" v-model="uid" placeholder="请输入收款人账户" placeholder-class="main-input" />
		</view>
		<view class="main">
			<view class="main-font">转账数量</view>
			<input class="main-input" type="text" value="" v-model="num" placeholder="请输入转账数量" placeholder-class="main-input" />
		</view>
		<view class="btn">
			提交申请
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			jf: 360, //可转账购物积分
			uid: '', //收款人账户
			num: '' //转账数量
		};
	}
};
</script>

<style lang="scss">
page,
.center {
	background: #f2f3f5;
	height: 100%;
}
.top {
	margin-top: 20rpx;
	background: #ffffff;
	padding: 30rpx 0;
	text-align: center;
	.top-num {
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.top-font {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
}
.main {
	padding: 36rpx 24rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	.main-font {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.main-input {
		margin-top: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 110px;
	}
}
.btn {
	text-align: center;
	margin: 120rpx auto;
	width: 670rpx;
	height: 88rpx;
	background: linear-gradient(0deg, #2E58FF, #32C6FF);
	border-radius: 10px;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	font-family: SourceHanSansCN;
	font-weight: 500;
	color: #FEFEFE;
}
</style>