|
|
<script setup>
|
|
|
import { ref } from 'vue'
|
|
|
const active = ref(0)
|
|
|
const showCenter = ref(false);
|
|
|
const showCenter = ref(false)
|
|
|
const value = ref('')
|
|
|
const text = ref('发送验证码')
|
|
|
const showPopup = () => {
|
|
|
console.log(111)
|
|
|
showCenter.value = true;
|
|
|
};
|
|
|
showCenter.value = true
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="right">
|
...
|
...
|
@@ -20,8 +22,8 @@ const showPopup = () => { |
|
|
<div class="lie">
|
|
|
<div>性别</div>
|
|
|
<div class="lin">
|
|
|
<input type="radio" name="value" value="男" checked="checked">男
|
|
|
<input type="radio" name="value" value="女">女
|
|
|
<input type="radio" name="value" value="男" checked="checked" />男
|
|
|
<input type="radio" name="value" value="女" />女
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="lie">
|
...
|
...
|
@@ -43,27 +45,51 @@ const showPopup = () => { |
|
|
<div class="list2">12320014</div>
|
|
|
</div>
|
|
|
<!-- 手机号登录 -->
|
|
|
<div>
|
|
|
<van-popup v-model:show="showCenter" close-icon="close" round :style="{ padding: '64px' }">
|
|
|
|
|
|
|
|
|
</van-popup>>
|
|
|
<div class="popup">
|
|
|
<van-popup
|
|
|
v-model:show="showCenter"
|
|
|
@click-close-icon="showCenter"
|
|
|
closeable="true"
|
|
|
close-icon-position="top-left"
|
|
|
close-icon="arrow-left"
|
|
|
round
|
|
|
:style="{ padding: '64px', width: '500px', height: '400px' }"
|
|
|
>
|
|
|
<div class="title">验证码登录</div>
|
|
|
<div class="code">
|
|
|
<van-cell-group inset>
|
|
|
<!-- 手机号 -->
|
|
|
<van-field v-model="value" placeholder="187159***14" />
|
|
|
<!-- 验证码 -->
|
|
|
<van-field
|
|
|
v-model="sms"
|
|
|
center
|
|
|
clearable
|
|
|
placeholder="验证码"
|
|
|
>
|
|
|
<template #button>
|
|
|
<van-button size="small" color="#6170c3" :text="text" round="true" @click="dbclick"></van-button>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
<!-- 底部按钮 -->
|
|
|
<van-button size="large" color="#6170c3" round="true">确认修改</van-button>
|
|
|
</van-cell-group>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
</van-tab>
|
|
|
<van-tab title="我的头像" class="box">
|
|
|
<div class="banner">
|
|
|
<div class="zuo">
|
|
|
<div class="pic">
|
|
|
<img src="../static/touxiang.jpg" alt="">
|
|
|
<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 class="button">上传头像</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-tab>
|
...
|
...
|
@@ -75,9 +101,7 @@ const showPopup = () => { |
|
|
<div class="ban">
|
|
|
<div class="old">新的密码:</div>
|
|
|
<input type="password" @focus="onfocus" placeholder="请输入" />
|
|
|
<div class="toast">
|
|
|
*密码要求8-16位,至少包含数字,字母,字符两种元素!
|
|
|
</div>
|
|
|
<div class="toast">*密码要求8-16位,至少包含数字,字母,字符两种元素!</div>
|
|
|
</div>
|
|
|
<div class="ban">
|
|
|
<div class="old">确认新密码:</div>
|
...
|
...
|
@@ -117,6 +141,14 @@ const showPopup = () => { |
|
|
color: #bcbec8;
|
|
|
}
|
|
|
}
|
|
|
.code {
|
|
|
margin-top: 60px;
|
|
|
.van-cell{
|
|
|
margin-bottom: 20px;
|
|
|
border: 1px solid #cacaca;
|
|
|
border-radius: 18px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.lie {
|
|
|
display: flex;
|
...
|
...
|
@@ -181,7 +213,6 @@ const showPopup = () => { |
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.button {
|
...
|
...
|
@@ -240,7 +271,6 @@ const showPopup = () => { |
|
|
padding-bottom: 5px;
|
|
|
|
|
|
span {
|
|
|
|
|
|
img {
|
|
|
width: 70px;
|
|
|
height: 30px;
|
...
|
...
|
@@ -273,4 +303,5 @@ const showPopup = () => { |
|
|
border-radius: 8px;
|
|
|
}
|
|
|
}
|
|
|
}</style> |
|
|
}
|
|
|
</style> |
...
|
...
|
|