jingcai/pages/transaction/transaction.vue

<template>
	<view class="all">
		<view class="top">
			<view class="one">
				<view class="xian"></view>
				<view class="jy">{{$t('password.a1')}}</view>
			</view>
			<view class="heng"></view>
			<view class="one">
				<view class="pas">{{$t('password.a2')}}</view>
				<view class="">
					<input class="npas" type="password" v-model="password" focus :placeholder="$t('password.a3')" />
				</view>
			</view>
			<view class="heng"></view>
			<view class="one">
				<view class="pas">{{$t('password.a4')}}</view>
				<view class="">
					<input class="nepas" type="password" v-model="password" focus :placeholder="$t('password.a5')" />
				</view>
			</view>
			<view class="heng"></view>
			<view class="one">
				<view class="pas">{{$t('password.a6')}}</view>
				<view class="">
					<input class="npas" type="password" v-model="password" focus :placeholder="$t('password.a7')" />
				</view>
				<view class="yanzheng">{{$t('password.a6')}}</view>
			</view>
		</view>
		<view class="last">
			<view class="an">
				<view class="qr">{{$t('password.a7')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
			};
		}
	}
</script>

<style lang="scss">
.all {
	width: 750rpx;
	height: 1334rpx;
	background-color: #000000;
}
.top {
	width: 750rpx;
	height: 430rpx;
	background: #191A1F;
}
.one {
	display: flex;
	justify-content: start;
}
.xian {
	width: 2rpx;
	height: 30rpx;
	background: #FDB242 ;
	margin-left: 31rpx;
	margin-top: 40rpx;
}
.jy {
	height: 29rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 55rpx;
	margin-left: 17rpx;
	margin-top: 27rpx;
}
.heng {
	width: 750rpx;
	height: 1rpx;
	background: #F3F3F3;
	margin-top: 30rpx;
}
.pas {
	height: 25rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 55rpx;
	margin-left: 29rpx;
	margin-top: 34rpx;
}
.npas {
	height: 25rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
	line-height: 55rpx;
	margin-left: 200rpx;
	margin-top: 40rpx;
}
.nepas {
	height: 25rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
	line-height: 55rpx;
	margin-left: 178rpx;
	margin-top: 40rpx;
}
.yanzheng {
	height: 25rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #FDB242;
	line-height: 55rpx;
	margin-top: 34rpx;
}

.an {
	width: 690rpx;
	height: 80rpx;
	background: #FDB242 ;
	border-radius: 40rpx;
	margin-left: 30rpx;
	margin-top: 62rpx;
}
.qr {
	// height: 28rpx;
	font-size: 30rpx;
	// font-family: PingFang SC;
	text-align: center;
	font-weight: 500;
	color: #0D0A21;
	line-height: 1;
	// margin-left: 316rpx;
	padding-top: 16rpx;
}
</style>