guosen-ldt-mall/pages/recharge/recharge.vue

<template>
	<view class="content">
		<view class="top">
			<text>对公付款资料</text>
			<text>点击下载对公转账相关资料</text>
		</view>
		<view class="card">
			<u-form label-width="150" :model="form" ref="uForm">
				<u-form-item label="账户名称:">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="账户号码:">
					<u-input v-model="form.intro" />
				</u-form-item>
				<u-form-item label="开户银行:">
					<u-input v-model="form.intro" />
				</u-form-item>
				<u-form-item label-width="250" label="基本存款账户编号:">
					<u-input v-model="form.intro" />
				</u-form-item>
			</u-form>
		</view>
		<view  style="position: fixed;bottom: 25%;left: 18%;right: 18%;width: 100%;">
			<view class="flex flex-direction" style="width: 64%;">
				<view hover-class="hoverClass" class="cu-btn btn-bg-color" style="height: 78rpx;">
					提交转账凭证
				</view>
				<view @click="$jump('records')" class="text-center margin-top-50 btn-color " style="text-decoration: underline;">
					<text >开票记录</text>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					name:'',
					intro:''
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 20rpx;
	}
	
	.top{
		padding:10rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		text:first-child{
			font-weight: 800;
			font-size: 36rpx;
		}
		text:last-child{
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			font-size: 26rpx;
			color: #3d75ca;
		}
	}

	.card {
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
	}
</style>