jingcai/pages/transaction/transaction.vue

<template>
	<view class="all">
		<view class="top">
			<view class="one">
				<view class="xian"></view>
				<view class="jy">修改交易密码</view>
			</view>
			<view class="heng"></view>
			<view class="one">
				<view class="pas">新密码</view>
				<view class="">
					<input class="npas" type="password" v-model="password" focus placeholder="请输入新密码" />
				</view>
			</view>
			<view class="heng"></view>
			<view class="one">
				<view class="pas">重复密码</view>
				<view class="">
					<input class="nepas" type="password" v-model="password" focus placeholder="请重复输入密码" />
				</view>
			</view>
			<view class="heng"></view>
			<view class="one">
				<view class="pas">验证码</view>
				<view class="">
					<input class="npas" type="password" v-model="password" focus placeholder="请输入新密码" />
				</view>
				<view class="yanzheng">验证码</view>
			</view>
		</view>
		<view class="last">
			<view class="an">
				<view class="qr">确认</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-family: PingFang SC;
	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-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 55rpx;
	margin-left: 29rpx;
	margin-top: 34rpx;
}
.npas {
	height: 25rpx;
	font-size: 26rpx;
	font-family: PingFangSC;
	font-weight: 500;
	color: #999999;
	line-height: 55rpx;
	margin-left: 200rpx;
	margin-top: 40rpx;
}
.nepas {
	height: 25rpx;
	font-size: 26rpx;
	font-family: PingFangSC;
	font-weight: 500;
	color: #999999;
	line-height: 55rpx;
	margin-left: 178rpx;
	margin-top: 40rpx;
}
.yanzheng {
	height: 25rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	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;
	font-weight: 500;
	color: #0D0A21;
	line-height: 55rpx;
	margin-left: 316rpx;
	padding-top: 16rpx;
}
</style>