|
|
<script setup>
|
|
|
import { ref } from 'vue';
|
|
|
const active = ref(0);
|
|
|
import { ref } from 'vue'
|
|
|
const active = ref(0)
|
|
|
|
|
|
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="right">
|
|
|
<div class="biti">
|
|
|
账号管理
|
|
|
</div>
|
|
|
<div class="container">
|
|
|
<van-tabs v-model:active="active">
|
|
|
<van-tab title="基本信息" class="box">基本信息</van-tab>
|
|
|
<van-tab title="我的头像" class="box">我的头像</van-tab>
|
|
|
<van-tab title="密码管理" class="box">密码管理</van-tab>
|
|
|
</van-tabs>
|
|
|
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="biti">账号管理</div>
|
|
|
<div class="container">
|
|
|
<van-tabs v-model:active="active" line-width="0px">
|
|
|
<van-tab title="基本信息" class="box">基本信息</van-tab>
|
|
|
<van-tab title="我的头像" class="box">
|
|
|
<div class="banner">
|
|
|
<div class="zuo">
|
|
|
<div class="pic">
|
|
|
<img src="../static/touxiang.jpg" alt="">
|
|
|
</div>
|
|
|
<div class="button">保存头像</div>
|
|
|
</div>
|
|
|
<div class="you">
|
|
|
请选择大小小于2M的.jpg文件
|
|
|
<div class="red">请上传本人照片!</div>
|
|
|
<div class="button">
|
|
|
上传头像
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-tab>
|
|
|
<van-tab title="密码管理" class="box">
|
|
|
<div class="ban">
|
|
|
<div class="old">旧密码:</div>
|
|
|
<input type="password" placeholder="请输入" />
|
|
|
</div>
|
|
|
<div class="ban">
|
|
|
<div class="old">新的密码:</div>
|
|
|
<input type="password" @focus="onfocus" placeholder="请输入" />
|
|
|
<div class="toast">
|
|
|
*密码要求8-16位,至少包含数字,字母,字符两种元素!
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ban">
|
|
|
<div class="old">确认新密码:</div>
|
|
|
<input type="password" placeholder="请输入" />
|
|
|
</div>
|
|
|
<div class="ban">
|
|
|
<div class="old">
|
|
|
验证码:<span><img src="@/static/code.png" alt="" /></span>
|
|
|
</div>
|
|
|
<input type="password" placeholder="请输入" />
|
|
|
</div>
|
|
|
<div class="btn" @click="onclick">保存</div>
|
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
.right{
|
|
|
background-color: #e5e5e5;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
margin-top: 50px;
|
|
|
.biti{
|
|
|
|
|
|
.right {
|
|
|
background-color: #e5e5e5;
|
|
|
height: 535px;
|
|
|
width: 100%;
|
|
|
margin-top: 40px;
|
|
|
.biti {
|
|
|
font-weight: 800;
|
|
|
font-size: 30px;
|
|
|
margin:30px 0px 20px 40px;
|
|
|
margin: 30px 0px 20px 40px;
|
|
|
}
|
|
|
.container{
|
|
|
.container {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
margin: 40px;
|
|
|
width: 50%;
|
|
|
.box{
|
|
|
// width: 100%;
|
|
|
.box {
|
|
|
width: 500px;
|
|
|
.banner{
|
|
|
width: 640px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.zuo {
|
|
|
.pic {
|
|
|
width: 300px;
|
|
|
height: 300px;
|
|
|
// background-color: pink;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
.button {
|
|
|
margin-top: 30px;
|
|
|
padding: 3px 20px;
|
|
|
width: 70px;
|
|
|
height: 40px;
|
|
|
background-color: #fff;
|
|
|
text-align: center;
|
|
|
line-height: 40px;
|
|
|
border: 1px solid #5b5b5b;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
}
|
|
|
.you {
|
|
|
padding: 10px;
|
|
|
width: 250px;
|
|
|
height: 120px;
|
|
|
background-color: #fffdea;
|
|
|
.red {
|
|
|
padding-top: 10px;
|
|
|
padding-right: 10px;
|
|
|
text-align: right;
|
|
|
color: #f00;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.button {
|
|
|
margin-top: 30px;
|
|
|
padding: 3px 20px;
|
|
|
width: 50px;
|
|
|
height: 20px;
|
|
|
background-color: #fff;
|
|
|
text-align: center;
|
|
|
font-size: 10px;
|
|
|
line-height: 20px;
|
|
|
border: 1px solid #5b5b5b;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.van-tab{
|
|
|
.van-tab {
|
|
|
background-color: #e5e5e5;
|
|
|
}
|
|
|
.van-tabs__wrap {
|
|
|
width: 60%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ban {
|
|
|
margin-top: 15px;
|
|
|
width: 400px;
|
|
|
.old {
|
|
|
padding-bottom: 5px;
|
|
|
span{
|
|
|
|
|
|
img{
|
|
|
width: 70px;
|
|
|
height: 30px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.toast {
|
|
|
padding-top: 5px;
|
|
|
font-size: 12px;
|
|
|
color: rgb(255, 41, 41);
|
|
|
}
|
|
|
input{
|
|
|
width: 100%;
|
|
|
height: 30px;
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
.btn {
|
|
|
margin-top: 35px;
|
|
|
padding: 3px 30px;
|
|
|
width: 50px;
|
|
|
height: 30px;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
line-height: 30px;
|
|
|
background-color: #6170c3;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
}
|
|
|
</style> |
|
|
\ No newline at end of file |
|
|
}
|
|
|
</style> |
...
|
...
|
|