mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 文件上传功能

Browse Source
This commit is contained in:
lbw 2023-02-14 14:40:17 +08:00
parent 116b4389a0
commit 0b73210793
5 changed files with 200 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,5 +1,5 @@
# port 端口号 # port 端口号
VITE_PORT = 8080 VITE_PORT = 8888
# 本地环境 # 本地环境
ENV = 'development' ENV = 'development'

7
src/utils/storage.ts
View File

@ -37,23 +37,24 @@ export const Local = {
export const Session = { export const Session = {
// 设置临时缓存 // 设置临时缓存
set(key: string, val: any) { set(key: string, val: any) {
if (key === 'token') return Cookies.set(key, val); if (key === 'token' || key === 'refresh_token') return Cookies.set(key, val);
window.sessionStorage.setItem(key, JSON.stringify(val)); window.sessionStorage.setItem(key, JSON.stringify(val));
}, },
// 获取临时缓存 // 获取临时缓存
get(key: string) { get(key: string) {
if (key === 'token') return Cookies.get(key); if (key === 'token' || key === 'refresh_token') return Cookies.get(key);
let json = <string>window.sessionStorage.getItem(key); let json = <string>window.sessionStorage.getItem(key);
return JSON.parse(json); return JSON.parse(json);
}, },
// 移除临时缓存 // 移除临时缓存
remove(key: string) { remove(key: string) {
if (key === 'token') return Cookies.remove(key); if (key === 'token' || key === 'refresh_token') return Cookies.remove(key);
window.sessionStorage.removeItem(key); window.sessionStorage.removeItem(key);
}, },
// 移除全部临时缓存 // 移除全部临时缓存
clear() { clear() {
Cookies.remove('token'); Cookies.remove('token');
Cookies.remove('refresh_token');
window.sessionStorage.clear(); window.sessionStorage.clear();
}, },
}; };

60
src/views/admin/file/form.vue
View File

@ -1,55 +1,47 @@
<template> <template>
<el-dialog title="上传文件" v-model="visible" <el-dialog title="上传文件" v-model="visible" :close-on-click-modal="false" draggable>
:close-on-click-modal="false" draggable> <el-upload class="upload-demo" drag action="/admin/sys-file/upload" :headers="headers" multiple @success="success">
<el-upload <el-icon class="el-icon--upload"><upload-filled /></el-icon>
class="upload-demo" <div class="el-upload__text">
drag 拖拽到这个位置或者<em>点击上传</em>
action="/admin/sys-file/upload" </div>
:headers="headers" <template #tip>
multiple <div class="el-upload__tip">
@success="success" 上传同步至文件服务器
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽到这个位置或者<em>点击上传</em>
</div> </div>
<template #tip>
<div class="el-upload__tip">
上传同步至文件服务器
</div>
</template>
</el-upload>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
</span>
</template> </template>
</el-dialog> </el-upload>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts" name="SysFileDialog"> <script setup lang="ts" name="SysFileDialog">
// 定义子组件向父组件传值/事件 // 定义子组件向父组件传值/事件
import {Session} from "/@/utils/storage"; import { Local } from "/@/utils/storage";
import { Session } from "/@/utils/storage";
const emit = defineEmits(['refresh']); const emit = defineEmits(['refresh']);
const headers = reactive({
Authorization: ''
})
// 定义变量内容 // 定义变量内容
const visible = ref(false) const visible = ref(false)
// 定义字典 // 定义字典
const headers = computed(() => {
const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
return {
'Authorization': "Bearer " + Session.get("token"),
'TENANT-ID': tenantId
};
})
// 打开弹窗 // 打开弹窗
const openDialog = () => { const openDialog = () => {
visible.value = true visible.value = true
// 获取 token 进行拼接
if (Session.get('token')) {
headers.Authorization = `Bearer ${Session.get('token')}`;
}
}; };
const success = () => { const success = () => {

9
src/views/login/component/authredirect.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts" name="authredirect"> <script setup lang="ts" name="authredirect">
import request from '/@/utils/request'; import request from '/@/utils/request';
import { ElMessageBox } from 'element-plus';
import other from "/@/utils/other"; import other from "/@/utils/other";
import { rule } from '/@/utils/validate'; import { rule } from '/@/utils/validate';
import { Session } from '/@/utils/storage'; import { Session } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo'; import { useUserInfo } from '/@/stores/userInfo';
import { useMessageBox } from '/@/hooks/message';
onMounted(async () => { onMounted(async () => {
const url = window.location.search const url = window.location.search
@ -38,11 +38,8 @@ const bind = (state: string, code: string) => {
method: 'post', method: 'post',
params: { state, code } params: { state, code }
}).then(() => { }).then(() => {
ElMessageBox.alert('社交账号绑定成功', '成功', { useMessageBox().confirm('社交账号绑定成功').then(() => {
confirmButtonText: '确定', window.close()
callback: () => {
window.close()
}
}) })
}) })
} }

302
src/views/personal/index.vue
View File

@ -7,19 +7,20 @@
<div class="personal-user"> <div class="personal-user">
<div class="personal-user-left"> <div class="personal-user-left">
<el-upload class="h100 personal-user-left-upload" action="/admin/sys-file/upload" <el-upload class="h100 personal-user-left-upload" action="/admin/sys-file/upload"
:headers="headers" :headers="headers" :on-success="handleAvatarSuccess" :limit="1">
:on-success="handleAvatarSuccess" :limit="1">
<img :src="formData.avatar" /> <img :src="formData.avatar" />
</el-upload> </el-upload>
</div> </div>
<div class="personal-user-right"> <div class="personal-user-right">
<el-row> <el-row>
<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col> <el-col :span="24" class="personal-title mb18">{{
currentTime
}}，admin！ </el-col>
<el-col :span="24"> <el-col :span="24">
<el-row> <el-row>
<el-col :xs="24" :sm="8" class="personal-item mb6"> <el-col :xs="24" :sm="8" class="personal-item mb6">
<div class="personal-item-label">昵称：</div> <div class="personal-item-label">昵称：</div>
<div class="personal-item-value">{{formData.nickname}}</div> <div class="personal-item-value">{{ formData.nickname }}</div>
</el-col> </el-col>
<el-col :xs="24" :sm="16" class="personal-item mb6"> <el-col :xs="24" :sm="16" class="personal-item mb6">
<div class="personal-item-label">身份：</div> <div class="personal-item-label">身份：</div>
@ -49,18 +50,19 @@
<el-col :span="24"> <el-col :span="24">
<el-card shadow="hover" class="mt15 personal-edit" header="更新信息"> <el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
<div class="personal-edit-title">基本信息</div> <div class="personal-edit-title">基本信息</div>
<el-form :model="formData" size="default" :rules="ruleForm" label-width="100px" class="mt35 mb35" ref="formdataRef"> <el-form :model="formData" size="default" :rules="ruleForm" label-width="100px" class="mt35 mb35"
ref="formdataRef">
<el-row :gutter="35"> <el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="用户名" prop="username"> <el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" clearable disabled></el-input> <el-input v-model="formData.username" clearable disabled></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="手机" prop="phone"> <el-form-item label="手机" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入手机" clearable></el-input> <el-input v-model="formData.phone" placeholder="请输入手机" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="邮箱" prop="email"> <el-form-item label="邮箱" prop="email">
@ -72,64 +74,65 @@
<el-input v-model="formData.nickname" placeholder="请输入昵称" clearable></el-input> <el-input v-model="formData.nickname" placeholder="请输入昵称" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input> <el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="原密码" prop="password"> <el-form-item label="原密码" prop="password">
<el-input v-model="formData.password" placeholder="请输入密码" clearable type="password"></el-input> <el-input v-model="formData.password" placeholder="请输入密码" clearable
type="password"></el-input>
</el-form-item>
</el-col>
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24" class="mb20">
<el-form-item label="新密码" prop="newpassword1">
<el-input v-model="formData.newpassword1" clearable type="password"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="确认密码" prop="newpassword2">
<el-input v-model="formData.newpassword2" clearable type="password"></el-input>
</el-form-item>
</el-col>
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24" class="mb20">
<el-form-item label="社交登录" prop="social">
<div @click="handleClick('wechat')">
<span :style="{ backgroundColor: '#6ba2d6' }" class="container">
<i class="iconfont icon-weixin" icon-class="wechat" />
</span>
<p class="title">微信</p>
</div>
<div @click="handleClick('tencent')">
<span :style="{ backgroundColor: '#8dc349' }" class="container">
<i class="iconfont icon-qq" icon-class="qq" />
</span>
<p class="title">QQ</p>
</div>
<div @click="handleClick('gitee')">
<span :style="{ backgroundColor: '#bf3030' }" class="container">
<i class="iconfont icon-logo_gitee_icon" icon-class="qq" />
</span>
<p class="title">Gitee</p>
</div>
<div @click="handleClick('osc')">
<span :style="{ backgroundColor: '#007B25' }" class="container">
<i class="iconfont icon-oschina" icon-class="qq" />
</span>
<p class="title">开源中国</p>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24" class="mb20">
<el-form-item label="新密码" prop="newpassword1">
<el-input v-model="formData.newpassword1" clearable type="password"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="确认密码" prop="newpassword2">
<el-input v-model="formData.newpassword2" clearable type="password"></el-input>
</el-form-item>
</el-col>
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24" class="mb20">
<el-form-item label="社交登录" prop="social">
<div @click="handleClick('wechat')">
<span :style="{ backgroundColor: '#6ba2d6' }" class="container">
<i class="iconfont icon-weixin" icon-class="wechat"/>
</span>
<p class="title">微信</p>
</div>
<div @click="handleClick('tencent')">
<span :style="{ backgroundColor: '#8dc349' }" class="container">
<i class="iconfont icon-qq" icon-class="qq"/>
</span>
<p class="title">QQ</p>
</div>
<div @click="handleClick('gitee')">
<span :style="{ backgroundColor: '#bf3030' }" class="container">
<i class="iconfont icon-logo_gitee_icon" icon-class="qq"/>
</span>
<p class="title">Gitee</p>
</div>
<div @click="handleClick('osc')">
<span :style="{ backgroundColor: '#007B25' }" class="container">
<i class="iconfont icon-oschina" icon-class="qq"/>
</span>
<p class="title">开源中国</p>
</div>
</el-form-item>
</el-col>
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24"> <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleSaveUser"> <el-button type="primary" @click="handleSaveUser">
<el-icon> <el-icon>
<ele-Position/> <ele-Position />
</el-icon> </el-icon>
更新个人信息 更新个人信息
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
@ -140,108 +143,105 @@
</template> </template>
<script setup lang="ts" name="personal"> <script setup lang="ts" name="personal">
import {computed, reactive} from 'vue'; import { computed, reactive } from 'vue';
import {formatAxis} from '/@/utils/formatTime'; import { formatAxis } from '/@/utils/formatTime';
import {useUserInfo} from '/@/stores/userInfo'; import { useUserInfo } from '/@/stores/userInfo';
import {editInfo} from '/@/api/admin/user' import { editInfo } from '/@/api/admin/user'
import {useMessage} from "/@/hooks/message"; import { useMessage } from "/@/hooks/message";
import {Session} from "/@/utils/storage"; import { Session } from "/@/utils/storage";
import {rule} from "/@/utils/validate"; import { rule } from "/@/utils/validate";
import other from '/@/utils/other';
// 定义变量内容 // 定义变量内容
const formData = reactive({ const formData = reactive({
username: '', username: '',
name: '', name: '',
email: '', email: '',
avatar: '', avatar: '',
nickname: '', nickname: '',
phone: '', phone: '',
password: '', password: '',
newpassword1: '', newpassword1: '',
newpassword2: '' newpassword2: ''
}); });
const formdataRef = ref() const formdataRef = ref()
const ruleForm = reactive({ const ruleForm = reactive({
password: [{ required: true, message: "密码不能为空", trigger: "blur" }], password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" },{ validator: rule.validatePhone, trigger: 'blur' }], phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }, { validator: rule.validatePhone, trigger: 'blur' }],
nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }], nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }], email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }], name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
newpassword1: [{ newpassword1: [{
min: 6, min: 6,
max: 20, max: 20,
message: "用户密码长度必须介于 6 和 20 之间", message: "用户密码长度必须介于 6 和 20 之间",
trigger: "blur" trigger: "blur"
}] }]
}) })
const handleAvatarSuccess = (res: any) => { const handleAvatarSuccess = (res: any) => {
formData.avatar = res.data.url; formData.avatar = res.data.url;
} }
const headers = computed(() => { const headers = computed(() => {
const tenantId = Session.get("tenantId") const tenantId = Session.get("tenantId")
return { return {
'Authorization': "Bearer " + Session.get("token"), 'Authorization': "Bearer " + Session.get("token"),
'TENANT-ID': tenantId ? tenantId : '1' 'TENANT-ID': tenantId ? tenantId : '1'
}; };
}) })
onMounted(() => { onMounted(() => {
const data = useUserInfo().userInfos const data = useUserInfo().userInfos
Object.assign(formData,data.user) Object.assign(formData, data.user)
formData.password = '' formData.password = ''
}) })
const handleSaveUser = () =>{ const handleSaveUser = () => {
formdataRef.value.validate((valid: boolean) => { formdataRef.value.validate((valid: boolean) => {
if (!valid) { if (!valid) {
return false return false
} }
editInfo(formData).then(() => { editInfo(formData).then(() => {
useMessage().success("修改成功") useMessage().success("修改成功")
// 清除缓存/token等 // 更新上下文的 user信息
Session.clear(); useUserInfo().setUserInfos()
// 使用 reload 时，不需要调用 resetRoute() 重置路由 }).catch(err => {
window.location.reload(); useMessage().error(err.msg)
})
}).catch(err => { })
useMessage().error(err.msg)
})
})
} }
// 当前时间提示语 // 当前时间提示语
const currentTime = computed(() => { const currentTime = computed(() => {
return formatAxis(new Date()); return formatAxis(new Date());
}); });
const handleClick = (thirdpart: string) => { const handleClick = (thirdpart: string) => {
let appid, client_id, redirect_uri, url; let appid, client_id, redirect_uri, url;
redirect_uri = encodeURIComponent( redirect_uri = encodeURIComponent(
window.location.origin + "/#/authredirect" window.location.origin + "/#/authredirect"
); );
if (thirdpart === "wechat") { if (thirdpart === "wechat") {
appid = "wxd1678d3f83b1d83a"; appid = "wxd1678d3f83b1d83a";
url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`; url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`;
} else if (thirdpart === "tencent") { } else if (thirdpart === "tencent") {
client_id = "101322838"; client_id = "101322838";
url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`; url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
} else if (thirdpart === "gitee") { } else if (thirdpart === "gitee") {
client_id = client_id = '0c29cfd9cb1e0037fc837521bc08c1a7483d8fd9b3e123d46beec59a5544a881'
"235ce26bbc59565b82c989aa3a407ce844cf59a7c5e0f9caa9bb3bf32cee5952"; url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`; } else if (thirdpart === "osc") {
} else if (thirdpart === "osc") { client_id = "neIIqlwGsjsfsA6uxNqD";
client_id = "neIIqlwGsjsfsA6uxNqD"; url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`;
url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`; }
} other.openWindow(url, thirdpart, 540, 540)
other.openWindow(url, thirdpart, 540, 540)
} }
@ -249,24 +249,29 @@ const handleClick = (thirdpart: string) => {
<style scoped lang="scss"> <style scoped lang="scss">
@import '../../theme/mixins/index.scss'; @import '../../theme/mixins/index.scss';
.personal { .personal {
.personal-user { .personal-user {
height: 130px; height: 130px;
display: flex; display: flex;
align-items: center; align-items: center;
.personal-user-left { .personal-user-left {
width: 180px; width: 180px;
height: 130px; height: 130px;
border-radius: 3px; border-radius: 3px;
:deep(.el-upload) { :deep(.el-upload) {
height: 100%; height: 100%;
} }
.personal-user-left-upload { .personal-user-left-upload {
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 3px; border-radius: 3px;
} }
&:hover { &:hover {
img { img {
animation: logoAnimation 0.3s ease-in-out; animation: logoAnimation 0.3s ease-in-out;
@ -274,51 +279,63 @@ const handleClick = (thirdpart: string) => {
} }
} }
} }
.personal-user-right { .personal-user-right {
flex: 1; flex: 1;
padding: 0 15px; padding: 0 15px;
.personal-title { .personal-title {
font-size: 18px; font-size: 18px;
@include text-ellipsis(1); @include text-ellipsis(1);
} }
.personal-item { .personal-item {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
.personal-item-label { .personal-item-label {
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
@include text-ellipsis(1); @include text-ellipsis(1);
} }
.personal-item-value { .personal-item-value {
@include text-ellipsis(1); @include text-ellipsis(1);
} }
} }
} }
} }
.personal-info { .personal-info {
.personal-info-more { .personal-info-more {
float: right; float: right;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
font-size: 13px; font-size: 13px;
&:hover { &:hover {
color: var(--el-color-primary); color: var(--el-color-primary);
cursor: pointer; cursor: pointer;
} }
} }
.personal-info-box { .personal-info-box {
height: 130px; height: 130px;
overflow: hidden; overflow: hidden;
.personal-info-ul { .personal-info-ul {
list-style: none; list-style: none;
.personal-info-li { .personal-info-li {
font-size: 13px; font-size: 13px;
padding-bottom: 10px; padding-bottom: 10px;
.personal-info-li-title { .personal-info-li-title {
display: inline-block; display: inline-block;
@include text-ellipsis(1); @include text-ellipsis(1);
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
text-decoration: none; text-decoration: none;
} }
& a:hover { & a:hover {
color: var(--el-color-primary); color: var(--el-color-primary);
cursor: pointer; cursor: pointer;
@ -327,6 +344,7 @@ const handleClick = (thirdpart: string) => {
} }
} }
} }
.personal-recommend-row { .personal-recommend-row {
.personal-recommend-col { .personal-recommend-col {
.personal-recommend { .personal-recommend {
@ -335,6 +353,7 @@ const handleClick = (thirdpart: string) => {
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
i { i {
right: 0px !important; right: 0px !important;
@ -342,6 +361,7 @@ const handleClick = (thirdpart: string) => {
transition: all ease 0.3s; transition: all ease 0.3s;
} }
} }
i { i {
position: absolute; position: absolute;
right: -10px; right: -10px;
@ -350,12 +370,14 @@ const handleClick = (thirdpart: string) => {
transform: rotate(-30deg); transform: rotate(-30deg);
transition: all ease 0.3s; transition: all ease 0.3s;
} }
.personal-recommend-auto { .personal-recommend-auto {
padding: 15px; padding: 15px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 5%; top: 5%;
color: var(--next-color-white); color: var(--next-color-white);
.personal-recommend-msg { .personal-recommend-msg {
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
@ -364,11 +386,13 @@ const handleClick = (thirdpart: string) => {
} }
} }
} }
.personal-edit { .personal-edit {
.personal-edit-title { .personal-edit-title {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
&::after { &::after {
content: ''; content: '';
width: 2px; width: 2px;
@ -380,21 +404,26 @@ const handleClick = (thirdpart: string) => {
background: var(--el-color-primary); background: var(--el-color-primary);
} }
} }
.personal-edit-safe-box { .personal-edit-safe-box {
border-bottom: 1px solid var(--el-border-color-light, #ebeef5); border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
padding: 15px 0; padding: 15px 0;
.personal-edit-safe-item { .personal-edit-safe-item {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.personal-edit-safe-item-left { .personal-edit-safe-item-left {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.personal-edit-safe-item-left-label { .personal-edit-safe-item-left-label {
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
margin-bottom: 5px; margin-bottom: 5px;
} }
.personal-edit-safe-item-left-value { .personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
@include text-ellipsis(1); @include text-ellipsis(1);
@ -402,6 +431,7 @@ const handleClick = (thirdpart: string) => {
} }
} }
} }
&:last-of-type { &:last-of-type {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;