fix: 修复登录图片消失问题

This commit is contained in:
wangdan-fit2cloud 2024-07-22 17:38:45 +08:00
parent ed54ae632b
commit 3266e405c7
2 changed files with 13 additions and 12 deletions

View File

@ -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>

View File

@ -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;
} }