Browse Source

style: 移动端工作台设置样式

master
tiantian 5 months ago
parent
commit
7b1192e266
  1. 83
      frontend/src/components/chat/ChatUserSetting.vue

83
frontend/src/components/chat/ChatUserSetting.vue

@ -4,6 +4,7 @@ import { ref, reactive, onMounted } from "vue";
import { useChatStore } from "@/stores/chat";
import { notifyError, notifySuccess } from "@/util/msg";
import { fetchGet, fetchPost, getSystemConfig, setSystemKey } from "@/system/config";
import { isMobileDevice } from '@/util/device';
const store = useChatStore()
// const form = ref({
// nickname: '',
@ -116,7 +117,8 @@ const rules = {
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: (rule: any, value:any, callback:any) => {
{
validator: (rule: any, value: any, callback: any) => {
console.log('rule:', rule);
if (value === '') {
@ -126,7 +128,8 @@ const rules = {
} else {
callback();
}
}, trigger: 'blur' }
}, trigger: 'blur'
}
],
}
const toChangePwd = async () => {
@ -161,7 +164,8 @@ onMounted(()=>{
<div @click="editType = 1" :class="{ 'is-active': editType == 1 }">修改密码</div>
</el-aside>
<el-main>
<el-form v-if="editType == 0" :model="userInfoForm" :rules="userRule" ref="userRef" label-width="130px" style="padding: 30px;">
<el-form v-if="editType == 0" :model="userInfoForm" :rules="userRule" ref="userRef"
:label-width="isMobileDevice() ? '90px' : '130px'" style="padding: 30px;">
<el-form-item label="头像">
<el-avatar :size="90" :src="store.userInfo.avatar" @click="showChange(true)" />
</el-form-item>
@ -181,27 +185,16 @@ onMounted(()=>{
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
<el-form v-else :model="passwordForm" :rules="rules" ref="passwordRef" label-width="120px" style="padding: 30px;">
<el-form v-else :model="passwordForm" :rules="rules" ref="passwordRef" label-width="120px"
style="padding: 30px;">
<el-form-item label="旧密码" prop="oldPassword">
<el-input
v-model="passwordForm.oldPassword"
type="password"
show-password
/>
<el-input v-model="passwordForm.oldPassword" type="password" show-password />
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input
v-model="passwordForm.newPassword"
type="password"
show-password
/>
<el-input v-model="passwordForm.newPassword" type="password" show-password />
</el-form-item>
<el-form-item label="再次输入密码" prop="confirmPassword">
<el-input
v-model="passwordForm.confirmPassword"
type="password"
show-password
/>
<el-input v-model="passwordForm.confirmPassword" type="password" show-password />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toChangePwd">保存</el-button>
@ -210,17 +203,9 @@ onMounted(()=>{
</el-main>
<el-dialog v-model="dialogShow" title="修改头像" width="400px" draggable>
<div>
<span
v-for="(item, index) in imgList"
:key="item.name"
class="img-box"
>
<el-avatar
:size="80"
:src="item.url"
@click="chooseImg(index)"
:class="{'is-active': pos == index}"
>
<span v-for="(item, index) in imgList" :key="item.name" class="img-box">
<el-avatar :size="80" :src="item.url" @click="chooseImg(index)"
:class="{ 'is-active': pos == index }">
</el-avatar>
<el-icon v-show="pos == index"><Select /></el-icon>
</span>
@ -244,17 +229,21 @@ onMounted(()=>{
overflow-y: scroll
}
}
.img-box {
position: relative;
.el-avatar {
margin: 10px;
}
.is-active {
width: 90px;
height: 90px;
border: 2px solid green;
box-sizing: border-box;
}
.el-icon {
position: absolute;
bottom: 0;
@ -267,6 +256,7 @@ onMounted(()=>{
transform: translate(-50%, 0)
}
}
.el-container {
.el-aside {
@ -281,14 +271,47 @@ onMounted(()=>{
height: 40px;
font-size: 14px;
}
.is-active,
div:hover {
font-weight: bold;
color: #16b777;
}
.el-input {
width: 200px;
}
}
}
@media screen and (max-width: 768px) {
.el-container {
position: relative;
.el-aside {
position: absolute;
display: flex;
width: 100%;
padding: 0;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f9f9f9;
div {
text-align: center;
line-height: 40px;
&:first-child {
border-right: 1px solid #fff;
}
}
}
.el-form {
margin-top: vh(60);
padding: 0 !important;
}
}
}
</style>

Loading…
Cancel
Save