fix: 修复登录图片消失问题
This commit is contained in:
parent
ed54ae632b
commit
3266e405c7
@ -3,7 +3,7 @@
|
|||||||
<div class="login-container w-full h-full">
|
<div class="login-container w-full h-full">
|
||||||
<el-row class="container w-full h-full">
|
<el-row class="container w-full h-full">
|
||||||
<el-col :xs="0" :sm="0" :md="10" :lg="10" :xl="10" class="left-container">
|
<el-col :xs="0" :sm="0" :md="10" :lg="10" :xl="10" class="left-container">
|
||||||
<div class="login-image" :style="loginImageStyle"></div>
|
<div class="login-image" :style="{ backgroundImage: `url(${loginImage})` }"></div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
|
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
@ -16,6 +16,7 @@
|
|||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { getThemeImg } from '@/utils/theme'
|
import { getThemeImg } from '@/utils/theme'
|
||||||
import useStore from '@/stores'
|
import useStore from '@/stores'
|
||||||
|
import { request } from '@/request'
|
||||||
defineOptions({ name: 'LoginLayout' })
|
defineOptions({ name: 'LoginLayout' })
|
||||||
const { user } = useStore()
|
const { user } = useStore()
|
||||||
|
|
||||||
@ -31,15 +32,12 @@ const fileURL = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const loginImageStyle = computed(() => {
|
const loginImage = computed(() => {
|
||||||
if (user.themeInfo?.loginImage) {
|
if (user.themeInfo?.loginImage) {
|
||||||
return {
|
return `${fileURL.value}`
|
||||||
backgroundImage: `url(${fileURL.value})`
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
return {
|
return new URL(`../../assets/theme/${getThemeImg(user.themeInfo?.theme)}.jpg`, import.meta.url)
|
||||||
backgroundImage: `url(src/assets/theme/${getThemeImg(user.themeInfo?.theme)}.jpg)`
|
.href
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<el-dialog
|
<el-dialog
|
||||||
v-model="aboutDialogVisible"
|
v-model="aboutDialogVisible"
|
||||||
class="about-dialog border-r-4"
|
class="about-dialog border-r-4"
|
||||||
:class="!isDefaultTheme ? 'custom-header' : ''"
|
:class="!isDefaultTheme ? 'dialog-custom-header' : ''"
|
||||||
>
|
>
|
||||||
<template #header="{ titleId, titleClass }">
|
<template #header="{ titleId, titleClass }">
|
||||||
<div class="logo flex-center" :id="titleId" :class="titleClass">
|
<div class="logo flex-center" :id="titleId" :class="titleClass">
|
||||||
@ -100,7 +100,7 @@ defineExpose({ open })
|
|||||||
<style lang="scss" scope>
|
<style lang="scss" scope>
|
||||||
.about-dialog {
|
.about-dialog {
|
||||||
padding: 0 0 24px 0;
|
padding: 0 0 24px 0;
|
||||||
width: 600px;
|
width: 620px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
background: var(--app-header-bg-color);
|
background: var(--app-header-bg-color);
|
||||||
@ -108,18 +108,21 @@ defineExpose({ open })
|
|||||||
height: 140px;
|
height: 140px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: 4px 4px 0 0;
|
||||||
|
&.show-close {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.el-dialog__title {
|
.el-dialog__title {
|
||||||
height: 140px;
|
height: 140px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.about-ui {
|
.about-ui {
|
||||||
width: 450px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
|
padding: 0 40px;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
@ -127,7 +130,7 @@ defineExpose({ open })
|
|||||||
color: var(--app-text-color-secondary);
|
color: var(--app-text-color-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.custom-header {
|
&.dialog-custom-header {
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
background: var(--el-color-primary-light-9) !important;
|
background: var(--el-color-primary-light-9) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user