guosen-ldt-client/pages/checkstand/index.vue

<template>
	<view class="check-panel flex-direction">
		<image :src="logo" class="buyer-logo"></image>
		<view class="title center">{{buyer}}</view>
		<u-input  class="amount"  :custom-style="inputStyle"  focus  placeholder="0" input-align="center "  v-model="orderAmount" :type="digit" :clearable="false" />
		<button @click="$jump('/pages/checkstand/order-res')">去支付</button>
		<view class="bottom-line center">联兑通提供技术支持</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
		},
		data() {
			return {
				logo: "/static/bank/zhaoshang.png",
				buyer: "中国招商银行",
				orderAmount: 0,
				inputStyle: {
					'margin-top': '100rpx',
					'font-size': '80rpx',
					'height': '120rpx',
					'font-weight': '500',
					'color': '#000000'
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.check-panel{
		background-color: #FFFFFF;
		border-radius: 25rpx;
		width: 90%;
		min-height: 900rpx;
		margin: 20rpx  5%;
		
		.buyer-logo{
			width: 100rpx;
			height: 100rpx;
			margin-top: 70rpx;
			margin-left: calc(50% - 50rpx);
		}
		.title{
			height: 70rpx;
			letter-spacing: 3rpx;
			color: #5D5D5D;
		}
		.amount::before{
			position: relative;
			left: 100rpx;
			color: #bec2c2;
			letter-spacing: 2rpx;
			content: '金额 (￥)';
		}
		button{
			width: 90%;
			margin-top: 100rpx;
			color: white;
			background-color: #E1961A;
			letter-spacing: 5rpx;
		}
	}
	.bottom-line{
		position: absolute;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		color: #dddddd;
	}
</style>