agent-app/agentApp/pages/payment/payment.vue

<template>
	<view class="app-container" style="background-color: #ededed;">
		<view class="pam-content">
			<view class="pam-shop">
				<view class="pam-mess">
					<view class="picon">
						<img src="../../static/page/people.png" style="width: 110rpx;height: 110rpx;" alt="" srcset="" />
					</view>
					<view class="pam-address">
						<view class="pname">
							付款给李姐烧烤(普罗旺斯店)
						</view>
						<view class="paddre">
							广西南宁市江南区波尔多庄园2-109号商铺
						</view>
					</view>
				</view>
				<view class="pam-local">
					<img src="../../static/page/location.png" style="width: 30rpx;height: 36rpx;" alt="" srcset="" />
				</view>

			</view>
			<view class="pam-main">
				<view class="pm-title">
					付款金额(元)
				</view>
				<view class="pm-write">
					<view class="font">
						￥
					</view>
					<view class="num">
						<input type="text" class="pr-num" placeholder="请输入金额" placeholder-style="color: #cfcfcf;" />
					</view>
				</view>
				<view class="pfooter u-border-top">
					向商家询问支付金额
				</view>
			</view>
			<view class="pac-cont">
				<view class="pac-left">
					<view class="pcfont">
						支付金额给商户
					</view>
					<view class="pcline">

					</view>
					<view class="pc-aplay">
						支付宝支付
					</view>
				</view>
				<view class="pac-link">
					查看活动规则
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {

	}
}
</script>

<style lang="scss">
.uni-page-body {
	background: #ededed;
}

.pam-content {
	padding-top: 100rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;

	.pam-shop {
		display: flex;
		justify-content: space-between;

		.pam-mess {
			display: flex;
			height: 110rpx;

			.picon {
				width: 110rpx;
				height: 110rpx;
			}

			.pam-address {
				margin-left: 20rpx;

				.pname {
					margin-top: 15rpx;
					color: #454545;
					font-size: 16px;
					line-height: 1.5;
					font-weight: bold;
				}

				.paddre {
					margin-top: 5rpx;
					color: #666;
					font-size: 12px;
					line-height: 1.5;
				}
			}
		}

		.pam-local {
			width: 30rpx;
			height: 36rpx;
			margin-top: 60rpx;
		}
	}

	.pam-main {
		margin-top: 97rpx;
		padding-top: 30rpx;
		height: 380rpx;
		background: #fff;
		box-sizing: border-box;

		.pm-title {
			padding-left: 40rpx;
			color: #454545;
			font-size: 15px;
			line-height: 1.5;
		}

		.pfooter {
			margin-top: 60rpx;
			padding-left: 40rpx;
			padding-top: 40rpx;
			color: #666;
			font-size: 12px;
			line-height: 1.5;
		}

		.u-border-bottom,
		.u-border-top {
			border-color: #eee !important;
		}

		.pm-write {
			display: flex;
			height: 60rpx;
			padding-left: 40rpx;
			margin-top: 70rpx;

			.font {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 15px;
				color: #454545;
				font-weight: bold;
			}

			.num {
				margin-left: 20rpx;
				line-height: 60rpx;
				height: 60rpx;

				.pr-num {
					font-size: 30px;
					line-height: 60rpx;
					min-height: 60rpx;
					height: 60rpx;
					color: #454545;
				}
			}
		}
	}

	.pac-cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;

		.pac-left {
			display: flex;

			.pcfont {
				font-size: 12px;
				color: #666;
				height: 30rpx;
				line-height: 30rpx;
			}

			.pcline {
				height: 28rpx;
				width: 2rpx;
				margin-left: 20rpx;
				background: #ccc;
			}

			.pc-aplay {
				padding-left: 40rpx;
				margin-left: 20rpx;
				font-size: 12px;
				height: 30rpx;
				line-height: 30rpx;
				color: #999;
				background: url(../../static/page/aplay.png) no-repeat left center;
				background-size: 30rpx 30rpx;
			}
		}

		.pac-link {
			color: #1783FF;
			font-size: 12px;
			height: 30rpx;
			line-height: 30rpx;
			cursor: pointer;
		}
	}
}
</style>