equipment-rental-mini/pages/menus/mine/mine.vue

<template>
	<view class="home">
		<view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="3">
						<view class="demo-layout">姓名</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout">
							<input type="text" v-model="form.name">
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="3">
						<view class="demo-layout">工号</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout">
							<input type="text" v-model="form.ID">
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="3">
						<view class="demo-layout">手机号</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout">
							<input type="text" v-model="form.phone">
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="3">
						<view class="demo-layout">邮箱</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout">
							<input type="text" v-model="form.email">
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="3">
						<view class="demo-layout">密码</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout" style="width: 300rpx;">
							<u-button color="#000" size="small" @click="popupShow = true">修改密码</u-button>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-popup :show="popupShow" @close="popupShow = false" >
			<view class="popup-area">
				<view class="layout-row" >
					<u-row
						justify="space-between"
						gutter="10">
						 <u-col span="3">
							<view class="demo-layout">旧密码</view>
						</u-col>
						<u-col span="9">
							<view class="demo-layout" style="width: 300rpx;">
								<input type="text">
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="layout-row">
					<u-row
						justify="space-between"
						gutter="10">
						 <u-col span="3">
							<view class="demo-layout">新密码</view>
						</u-col>
						<u-col span="9">
							<view class="demo-layout" style="width: 300rpx;">
								<input type="text">
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="layout-row">
					<u-row
						justify="space-between"
						gutter="10">
						 <u-col span="3">
							<view class="demo-layout">确认密码</view>
						</u-col>
						<u-col span="9">
							<view class="demo-layout" style="width: 300rpx;">
								<input type="text">
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="pwd-btn">
					<u-button size="small" @click="popupShow = false">取消</u-button>
					<u-button color="#000" size="small" >确认</u-button>
				</view>
			</view>
		</u-popup>
		<view class="btn-area">
			<u-button color="#000" size="small">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					name:"张晓翠",
					ID:"DDDDDSS2",
					phone:"13545454542",
					email:"13545454542@qq.com"
				},
				popupShow:false
			};
		},
		methods:{
			showPopup(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.home{
	position: relative;
	height: 100vh;
}
.layout-row{
	padding:50rpx 30rpx;
	border-bottom:1rpx solid #c6c6c6;
	font-size: 30rpx;
}
.btn-area{
	position: absolute;
	width: 300rpx;
	bottom: 100rpx;
	right: 50rpx;
}
.popup-area{
	height: 700rpx;
	box-sizing: border-box;
	// padding: 0 30rpx;
	.pwd-btn{
		display: flex;
		padding-top: 50rpx;
		/deep/.u-button{
			margin: 30rpx;
		}
	}
}
</style>