下班没啥事，花费三个小时做了一个“个人设置”界面，所使用的框架是vue，技术是element UI组件。
拿去不谢！！！有帮助的话，点个赞再走

<template><div style="background-color:#FCFCFC;font-family:'宋体';height:100%;"><div><my-bread level1='个人中心' level2='修改密码' :level3="levelName"></my-bread></div><div style="margin-top:25px;margin-left:80px;"><el-row :gutter="10"><el-col :span="2"><div style="background-color:#FFEBCD;width:60px;height:60px;display:inline-block;border-radius:50%;overflow:hidden;"><el-image :src="src" style="width:60px;height:60px;"></el-image></div><div style="margin-top:5px;margin-left:6px;"><span>王某某</span></div><div style="margin-top:50px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;"  @click="infomationClick()">个人信息<span style="color:#B0E0E6;" v-show="infomationShow" class="el-icon-s-promotion"></span></el-button></div><div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;" @click="passwordClick()">修改密码<span style="color:#B0E0E6;" v-show="passwordShow" class="el-icon-s-promotion"></span></el-button></div></el-col><el-col :span="21"><el-row :gutter="10" style="margin-top:20px;"><el-col :span="2"><div style="text-align:right;"><span>账号：</span></div></el-col><el-col :span="5">0000000000</el-col></el-row><!-- 个人信息 --><el-row v-show="infomationShow"><el-card style="margin-top:30px;"><el-row><el-col :span="6"><el-row :gutter="12" style="margin-top:20px;"><el-col :span="8"><div style="text-align:right;"><span>姓名：</span></div></el-col><el-col :span="16">王某某</el-col></el-row><el-row :gutter="12" style="margin-top:30px;"><el-col :span="8"><div style="text-align:right;"><span>手机号：</span></div></el-col><el-col :span="16">17125463265</el-col></el-row><el-row :gutter="12" style="margin-top:30px;"><el-col :span="8"><div style="text-align:right;"><span>电子邮箱：</span></div></el-col><el-col :span="16">2036128127@qq.com</el-col></el-row><el-row :gutter="12" style="margin-top:30px;"><el-col :span="8"><div style="text-align:right;"><span>部门：</span></div></el-col><el-col :span="16">某某管理中心</el-col></el-row><el-row :gutter="12" style="margin-top:30px;"><el-col :span="8"><div style="text-align:right;"><span>职位：</span></div></el-col><el-col :span="16">部门负责人</el-col></el-row><el-row :gutter="12" style="margin-top:30px;"><el-col :span="8"><div style="text-align:right;"><span>项目：</span></div></el-col><el-col :span="16">某某107项目</el-col></el-row></el-col><el-col :span="18"><el-row><el-col><el-timeline><el-timeline-item timestamp="项目一" placement="top"><el-card><div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div><div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div></el-card></el-timeline-item><el-timeline-item timestamp="项目二" placement="top"><el-card><div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div><div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div></el-card></el-timeline-item><el-timeline-item timestamp="项目三" placement="top"><el-card><div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div><div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div></el-card></el-timeline-item><el-timeline-item timestamp="项目四" placement="top"><el-card><div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div><div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div></el-card></el-timeline-item><el-timeline-item timestamp="项目五" placement="top"><el-card><div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div><div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div></el-card></el-timeline-item></el-timeline></el-col></el-row></el-col></el-row></el-card></el-row><!-- 修改密码 --><el-row v-show="passwordShow"><el-card style="margin-top:30px;"><el-form :model="personalForm"><el-row :gutter="12" style="margin-top:20px;"><el-col :span="6"><div style="text-align:right;"><span>账号：</span></div></el-col><el-col :span="5"><el-form-item prop="account"><el-input type="text" v-model="personalForm.account" placeholder="请输入您的账号" ></el-input></el-form-item></el-col></el-row><el-row :gutter="12" style="margin-top:1px;"><el-col :span="6"><div style="text-align:right;"><span>手机号：</span></div></el-col><el-col :span="5"><el-form-item prop="phone_num"><el-input type="text" v-model="personalForm.phone_num" placeholder="绑定的手机号" ></el-input></el-form-item></el-col></el-row><el-row :gutter="12" style="margin-top:1px;"><el-col :span="6"><div style="text-align:right;"><span>密码：</span></div></el-col><el-col :span="5"><el-form-item prop="password1"><el-input type="password" show-password v-model="personalForm.password1" placeholder="请输入新的密码" ></el-input></el-form-item></el-col></el-row><el-row :gutter="12" style="margin-top:1px;"><el-col :span="6"><div style="text-align:right;"><span>确认密码：</span></div></el-col><el-col :span="5"><el-form-item prop="password2"><el-input type="password" show-password v-model="personalForm.password2" placeholder="请再次输入新的密码" ></el-input></el-form-item></el-col></el-row><el-row :gutter="12" style="margin-top:1px;"><el-col :span="6"><div style="text-align:right;"><span>验证码：</span></div></el-col><el-col :span="5"><el-form-item prop="verification"><el-input type="text" v-model="personalForm.verification" placeholder="验证码" ></el-input></el-form-item></el-col><el-col :span="2"><el-button type="primary" plain round size="medium" @click="sendMsg()" :disabled="isDisabled">{{ buttonName }}</el-button></el-col></el-row><el-row :gutter="12" style="margin-top:10px;"><el-col :span="17" style="text-align:center;"><el-button type="primary" plain round size="medium" @click="submit()">修改</el-button></el-col></el-row></el-form></el-card></el-row></el-col></el-row></div><div></div></div>
</template>
<script>import yu from '../images/yu.png'export default {data(){return {src:yu,levelName:'',isCollapse:false,infomationShow:false,passwordShow:false,buttonName:"发送短信",isDisabled:false,time:60,personalForm:{account:"",phone_num:"",verification:"",password1:"",password2:"",}}},methods:{handleOpen(key, keyPath) {console.log(key, keyPath)console.log(key)console.log(keyPath)},handleClose(key, keyPath) {// console.log(key, keyPath);},infomationClick(){    //个人信息事件this.infomationShow = truethis.passwordShow = false},passwordClick(){     //密码事件this.infomationShow = falsethis.passwordShow = true},sendMsg() {    //时间按钮let me = this;me.isDisabled = true;let interval = window.setInterval(function() {me.buttonName = "(" + me.time + ")秒"--me.time;if(me.time < 0) {me.buttonName = "重新发送"me.time = 60me.isDisabled = falsewindow.clearInterval(interval)}}, 1000);//获取短信验证码// this.$http.get('/?phone_num=' + this.personalForm.phone_num).then(res => {//     this.$message.success("短信已发送,请查收")// })},submit(){  //提交if(this.personalForm.account === ""){this.$message.warning("账号不能为空")}else if(this.personalForm.phone_num === ""){this.$message.warning("手机号不能为空")}else if(this.personalForm.password1 === ""){this.$message.warning("密码不能为空")}else if(this.personalForm.password2 === ""){this.$message.warning("密码不能为空")}else if(this.personalForm.verification === ""){this.$message.warning("验证码不能为空")}else{if(this.personalForm.password1 === this.personalForm.password2){this.$message.success("修改成功")// const params = {//     account:this.personalForm.account,//     phone_num:this.personalForm.phone_num,//     password1:this.personalForm.password1,//     password2:this.personalForm.password2,//     verification:this.personalForm.verification,// }// console.log(params)// this.$http.post('',params).then(res => {//     console.log(res)// })}else{this.$message.warning("两次输入的密码不一致,请重新输入")}}},}
}
</script><style>.name{ text-align: right; }.value{ text-align: left; }
</style>