This commit is contained in:
ahui
2025-12-01 10:41:43 +08:00
10 changed files with 254 additions and 120 deletions

BIN
web/src/assets/home-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange"> <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
<img :src="siteLogo" class="layout-logo-medium-img" /> <img :src="siteLogo" class="layout-logo-medium-img" />
<span style="font-size: x-large">{{ getSystemConfig['login.site_title'] || themeConfig.globalTitle }}</span> <span style="font-size: x-large; ">{{ getSystemConfig['login.site_title'] || themeConfig.globalTitle }}</span>
</div> </div>
<div class="layout-logo-size" v-else @click="onThemeConfigChange"> <div class="layout-logo-size" v-else @click="onThemeConfigChange">
<img :src="siteLogo" class="layout-logo-size-img" /> <img :src="siteLogo" class="layout-logo-size-img" />

View File

@@ -591,10 +591,13 @@ watch(
<style scoped lang="scss"> <style scoped lang="scss">
.layout-navbars-tagsview { .layout-navbars-tagsview {
background-color: var(--el-color-white);
border-bottom: 1px solid var(--next-border-color-light);
position: relative; position: relative;
z-index: 4; z-index: 4;
height: 45px;
border-radius: 8px;
margin-left: 15px;
margin-right: 15px;
:deep(.el-scrollbar__wrap) { :deep(.el-scrollbar__wrap) {
overflow-x: auto !important; overflow-x: auto !important;
} }
@@ -602,7 +605,7 @@ watch(
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 34px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
@@ -610,7 +613,7 @@ watch(
white-space: nowrap; white-space: nowrap;
padding: 0 15px; padding: 0 15px;
&-li { &-li {
height: 26px; height: 30px;
line-height: 26px; line-height: 26px;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -18,7 +18,7 @@ export const useThemeConfig = defineStore('themeConfig', {
* 全局主题 * 全局主题
*/ */
// 默认 primary 主题颜色 // 默认 primary 主题颜色
primary: '#409eff', primary: "#193755",
// 是否开启深色模式 // 是否开启深色模式
isIsDark: false, isIsDark: false,
@@ -26,9 +26,9 @@ export const useThemeConfig = defineStore('themeConfig', {
* 顶栏设置 * 顶栏设置
*/ */
// 默认顶栏导航背景颜色 // 默认顶栏导航背景颜色
topBar: '#ffffff', topBar: "#f8f8f8",
// 默认顶栏导航字体颜色 // 默认顶栏导航字体颜色
topBarColor: '#606266', topBarColor: "#000000",
// 是否开启顶栏背景颜色渐变 // 是否开启顶栏背景颜色渐变
isTopBarColorGradual: false, isTopBarColorGradual: false,
@@ -36,11 +36,11 @@ export const useThemeConfig = defineStore('themeConfig', {
* 菜单设置 * 菜单设置
*/ */
// 默认菜单导航背景颜色 // 默认菜单导航背景颜色
menuBar: '#334054', menuBar: "#f8f8f8",
// 默认菜单导航字体颜色 // 默认菜单导航字体颜色
menuBarColor: '#eaeaea', menuBarColor: "#000000",
// 默认菜单高亮背景色 // 默认菜单高亮背景色
menuBarActiveColor: 'rgba(0, 0, 0, 0.2)', menuBarActiveColor: "rgba(0, 48, 255, 0.38)",
// 是否开启菜单背景颜色渐变 // 是否开启菜单背景颜色渐变
isMenuBarColorGradual: false, isMenuBarColorGradual: false,
@@ -48,9 +48,9 @@ export const useThemeConfig = defineStore('themeConfig', {
* 分栏设置 * 分栏设置
*/ */
// 默认分栏菜单背景颜色 // 默认分栏菜单背景颜色
columnsMenuBar: '#334054', columnsMenuBar:"#334054",
// 默认分栏菜单字体颜色 // 默认分栏菜单字体颜色
columnsMenuBarColor: '#e6e6e6', columnsMenuBarColor: "#e6e6e6",
// 是否开启分栏菜单背景颜色渐变 // 是否开启分栏菜单背景颜色渐变
isColumnsMenuBarColorGradual: false, isColumnsMenuBarColorGradual: false,
// 是否开启分栏菜单鼠标悬停预加载(预览菜单) // 是否开启分栏菜单鼠标悬停预加载(预览菜单)

View File

@@ -29,7 +29,7 @@
.el-form { .el-form {
// 用于修改弹窗时表单内容间隔太大问题,如系统设置的新增菜单弹窗里的表单内容 // 用于修改弹窗时表单内容间隔太大问题,如系统设置的新增菜单弹窗里的表单内容
.el-form-item:last-of-type { .el-form-item:last-of-type {
margin-bottom: 22px !important; margin-bottom: 24px !important;
} }
// 修复行内表单最后一个 el-form-item 位置下移问题 // 修复行内表单最后一个 el-form-item 位置下移问题
&.el-form--inline { &.el-form--inline {
@@ -38,12 +38,12 @@
} }
.el-form-item--default.el-form-item:last-of-type, .el-form-item--default.el-form-item:last-of-type,
.el-form-item--small.el-form-item:last-of-type { .el-form-item--small.el-form-item:last-of-type {
margin-bottom: 18px !important; margin-bottom: 6px !important;
} }
} }
// https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM // https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM
.el-form-item .el-form-item__label .el-icon { .el-form-item .el-form-item__label .el-icon {
margin-right: 0px; margin-right: 0;
} }
} }
@@ -76,12 +76,16 @@
width: 220px; width: 220px;
} }
.el-menu-item { .el-menu-item {
height: 56px !important; height: 46px !important;
line-height: 56px !important; line-height: 46px !important;
border-radius:12px;
} }
.el-menu-item, .el-menu-item,
.el-sub-menu__title { .el-sub-menu__title {
height: 46px !important;
line-height: 46px !important;
color: var(--next-bg-menuBarColor); color: var(--next-bg-menuBarColor);
border-radius:12px;
} }
// 修复点击左侧菜单折叠再展开时,宽度不跟随问题 // 修复点击左侧菜单折叠再展开时,宽度不跟随问题
.el-menu--collapse { .el-menu--collapse {

View File

@@ -1,54 +1,96 @@
<template> <template>
<div class="home-container"> <div class="home-container">
<el-row :gutter="15" class="home-card-one mb15"> <div style="margin: 15px; font-size: 16px; font-weight: 700">
<el-col 欢迎回来{{ userInfo.userInfos.name }}
:xs="24" <span style="font-size: 12px; color: grey"> 这里是您的工作台请愉快的工作吧</span>
:sm="12" </div>
:md="12" <el-row>
:lg="6" <el-col :span="16">
:xl="6" <el-row :gutter="15" class="home-card-one mb15">
v-for="(v, k) in homeOne" <el-col
:key="k" :xs="24"
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }" :sm="12"
:md="12"
:lg="8"
:xl="6"
v-for="(v, k) in homeOne"
:key="k"
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
> >
<div class="home-card-item flex"> <div class="home-card-item flex" style="padding: 0;">
<div class="flex-margin flex w100" :class="` home-one-animation${k}`"> <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
<div class="flex-auto"> <div class="home-card-item-icon flex" style="margin: 10px;" :style="{ background: `var(${v.color2})` }">
<span class="font30">{{ v.num1 }}</span> <i class="flex-margin font24" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
<span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
<div class="mt10">{{ v.num3 }}</div>
</div> </div>
<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }"> <div class="flex-auto">
<i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i> <span class="font24">{{ v.num1 }}</span>
<span class="ml5 font14" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
<div class="mt10">{{ v.num3 }}</div>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="15" class="home-card-two mb15"> <el-row :gutter="15" class="home-card-two mb15">
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div class="home-card-item">
<div style="height: 100%" ref="homeLineRef"></div>
</div>
</el-col>
</el-row>
<el-row :gutter="15" class="home-card-three">
<el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="home-media">
<div class="home-card-item"> <div class="home-card-item">
<div style="height: 100%" ref="homeLineRef"></div> <div style="height: 100%" ref="homeBarRef"></div>
</div>
</el-col>
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
<div class="home-card-item">
<div style="height: 100%" ref="homePieRef"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="15" class="home-card-three"> </el-col>
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8"> <el-col :span="8">
<div class="home-card-item"> <div style="margin-left: 15px">
<el-row :gutter="100" class="home-card-one mb15">
<el-col :span="24">
<div class="home-card-item flex" style="padding: 0; width:350px; height:200px">
<img :src="HomeBg" style="padding: 0; margin: 0;">
</div>
</el-col>
</el-row>
<el-row :gutter="100" class="home-card-one mb15">
<el-col :span="24" >
<div class="home-card-item" style=" width:350px; height: 100%; max-height: 320px">
<div class="home-card-item-title">消息通知
<button type="button" class="el-button" style=" float: right; border-color: transparent; margin-top: -2px;" @click="msgMore">
<span>更多
<i class="el-icon fs-icon fs-button-icon-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288m0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.19 160.19 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"></path></svg></i>
</span>
</button>
</div>
<div v-for="(v, k) in newsInfoList" :key="k" class="personal-info-li flex-margin flex w100" >
<div class="home-card-item-icon flex" style="margin: 5px;" :style="{ background: `#f8f8f8` }">
<i class="flex-margin font24" :class="`fa fa-commenting-o`" :style="{ color: `#5d8b22` }"></i>
</div>
<div class="flex-auto" style="margin-top: 10px">
<span class="font14">[{{ v.creator_name }}]</span>
<span style=" color: grey; float: right; font-style:italic;">&nbsp;{{ v.create_datetime }}&nbsp;&nbsp;</span>
<div class="text-container"> {{ v.title }}</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="100" class="home-card-one mb15">
<el-col :span="24">
<div class="home-card-item" style=" width:350px; height: 100%">
<div class="home-card-item-title">快捷导航工具</div> <div class="home-card-item-title">快捷导航工具</div>
<div class="home-monitor"> <div class="home-monitor">
<div class="flex-warp"> <div class="flex-warp">
<div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k"> <div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k">
<div class="flex-warp-item-box" :class="`home-animation${k}`"> <div class="flex-warp-item-box" :class="`home-animation${k}`">
<div class="flex-margin"> <div class="flex-margin">
<i :class="v.icon" :style="{ color: v.iconColor }"></i> <div class="home-card-item-icon flex" style="margin: 20px;" :style="{ background: '#f8f8f8' }">
<span class="pl5">{{ v.label }}</span> <i class="flex-margin font24" :class="v.icon" :style="{ color: v.iconColor}"></i>
<div class="mt10">{{ v.value }}</div> </div>
<span class="pl20" :style="{ fontSize: 'clamp(0.875rem, 2vw, 1rem)' }">{{ v.label }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -56,13 +98,11 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media"> </el-row>
<div class="home-card-item"> </div>
<div style="height: 100%" ref="homeBarRef"></div> </el-col>
</div> </el-row>
</el-col> </div>
</el-row>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -71,6 +111,7 @@ import * as echarts from 'echarts';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig'; import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import HomeBg from '/@/assets/home-bg.png';
let global: any = { let global: any = {
homeChartOne: null, homeChartOne: null,
@@ -79,9 +120,21 @@ let global: any = {
dispose: [null, '', undefined], dispose: [null, '', undefined],
}; };
import { useUserInfo } from '/@/stores/userInfo';
import {useRouter} from "vue-router";
import * as api from "/@/views/system/personal/api";
// 定义消息类型
interface NewsItem {
creator_name: string;
create_datetime: string;
title: string;
}
export default defineComponent({ export default defineComponent({
name: 'home', name: 'home',
setup() { setup() {
const userInfo = useUserInfo();
const homeLineRef = ref(); const homeLineRef = ref();
const homePieRef = ref(); const homePieRef = ref();
const homeBarRef = ref(); const homeBarRef = ref();
@@ -89,7 +142,11 @@ export default defineComponent({
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig); const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes); const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const router = useRouter(); // 将router移到组件级别
const defaultNewsItems: NewsItem[] = [];
const state = reactive({ const state = reactive({
newsInfoList: [...defaultNewsItems] as NewsItem[],
homeOne: [ homeOne: [
{ {
num1: '125,12', num1: '125,12',
@@ -109,15 +166,6 @@ export default defineComponent({
color2: '--next-color-success-lighter', color2: '--next-color-success-lighter',
color3: '--el-color-success', color3: '--el-color-success',
}, },
{
num1: '125,65',
num2: '+17.32',
num3: '年度计划信息',
num4: 'iconfont icon-zaosheng',
color1: '#6690F9',
color2: '--next-color-warning-lighter',
color3: '--el-color-warning',
},
{ {
num1: '520,43', num1: '520,43',
num2: '-10.01', num2: '-10.01',
@@ -131,57 +179,48 @@ export default defineComponent({
homeThree: [ homeThree: [
{ {
icon: 'iconfont icon-yangan', icon: 'iconfont icon-yangan',
label: '浅粉红', label: '用户管理',
value: '2.1%OBS/M', iconColor: 'gray',
iconColor: '#F72B3F',
}, },
{ {
icon: 'iconfont icon-wendu', icon: 'iconfont icon-wendu',
label: '深红(猩红)', label: '部门管理',
value: '30℃', iconColor: 'gray',
iconColor: '#91BFF8',
}, },
{ {
icon: 'iconfont icon-shidu', icon: 'iconfont icon-shidu',
label: '淡紫红', label: '权限管理',
value: '57%RH', iconColor: 'gray',
iconColor: '#88D565',
}, },
{ {
icon: 'iconfont icon-shidu', icon: 'iconfont icon-shidu',
label: '弱紫罗兰红', label: '日志管理',
value: '107w', iconColor: 'gray',
iconColor: '#88D565',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '中紫罗兰红', label: '菜单管理',
value: '57DB', iconColor: 'gray',
iconColor: '#FBD4A0',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '紫罗兰', label: '消息中心',
value: '57PV', iconColor: 'gray',
iconColor: '#FBD4A0',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '暗紫罗兰', label: '接口管理',
value: '517Cpd', iconColor: 'gray',
iconColor: '#FBD4A0',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '幽灵白', label: '下载中心',
value: '12kg', iconColor: 'gray',
iconColor: '#FBD4A0',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '海军蓝', label: '系统管理',
value: '64fm', iconColor: 'gray',
iconColor: '#FBD4A0',
}, },
], ],
myCharts: [], myCharts: [],
@@ -506,6 +545,7 @@ export default defineComponent({
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
initEchartsResize(); initEchartsResize();
getMsg(); // 确保组件挂载时立即获取消息列表
}); });
// 由于页面缓存原因keep-alive // 由于页面缓存原因keep-alive
onActivated(() => { onActivated(() => {
@@ -542,11 +582,47 @@ export default defineComponent({
immediate: true, immediate: true,
} }
); );
// 获取消息列表
const getMsg = (): void => {
// 先重置为默认数据
state.newsInfoList = [...defaultNewsItems];
// 尝试从API获取最新数据
api.GetSelfReceive({}).then((res: any) => {
const { data } = res || {};
// 严格检查返回数据的有效性
if (data && Array.isArray(data) && data.length > 0) {
try {
// 安全地进行类型转换并更新状态
state.newsInfoList = data.map((item: any): NewsItem => ({
creator_name: String(item.creator_name || '未知用户'),
create_datetime: String(item.create_datetime || ''),
title: String(item.title || '')
}));
} catch (typeError) {
console.error('数据类型转换失败:', typeError);
// 类型转换失败时保持默认数据
}
}
}).catch((error: Error) => {
console.error('获取消息列表失败,保持默认数据:', error);
// 错误时保持已设置的默认数据
});
};
// 跳转消息中心
const msgMore = (): void => {
router.push({ path: '/messageCenter' });
};
return { return {
homeLineRef, homeLineRef,
homePieRef, homePieRef,
homeBarRef, homeBarRef,
...toRefs(state), userInfo,
...toRefs(state),
HomeBg,
msgMore,
}; };
}, },
}); });
@@ -554,6 +630,20 @@ export default defineComponent({
<style scoped lang="scss"> <style scoped lang="scss">
$homeNavLengh: 8; $homeNavLengh: 8;
.text-container {
width: 420px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-container:hover {
animation: scrollText 5s linear infinite;
}
@keyframes scrollText {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.home-container { .home-container {
overflow: hidden; overflow: hidden;
.home-card-one, .home-card-one,
@@ -561,21 +651,21 @@ $homeNavLengh: 8;
.home-card-three { .home-card-three {
.home-card-item { .home-card-item {
width: 100%; width: 100%;
height: 130px; height: 120px;
border-radius: 4px;
transition: all ease 0.3s; transition: all ease 0.3s;
padding: 20px; padding: 20px;
overflow: hidden; overflow: hidden;
background: var(--el-color-white); background: var(--el-color-white);
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
border: 1px solid var(--next-border-color-light); border: 1px solid var(--next-border-color-light);
border-radius: 24px;
&:hover { &:hover {
box-shadow: 0 2px 12px var(--next-color-dark-hover); box-shadow: 0 2px 12px var(--next-color-dark-hover);
transition: all ease 0.3s; transition: all ease 0.3s;
} }
&-icon { &-icon {
width: 70px; width: 55px;
height: 70px; height: 55px;
border-radius: 100%; border-radius: 100%;
flex-shrink: 1; flex-shrink: 1;
i { i {
@@ -583,13 +673,15 @@ $homeNavLengh: 8;
} }
} }
&-title { &-title {
font-size: 15px; font-size: 16px;
font-weight: bold; font-weight: bold;
height: 30px; height: 30px;
} }
} }
} }
.home-card-one { .home-card-one {
left:15px;
right: 15px;
@for $i from 0 through 3 { @for $i from 0 through 3 {
.home-one-animation#{$i} { .home-one-animation#{$i} {
opacity: 0; opacity: 0;
@@ -602,6 +694,9 @@ $homeNavLengh: 8;
} }
.home-card-two, .home-card-two,
.home-card-three { .home-card-three {
position: relative;
left: 15px;
right: 15px;
.home-card-item { .home-card-item {
height: 400px; height: 400px;
width: 100%; width: 100%;
@@ -626,7 +721,7 @@ $homeNavLengh: 8;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
} }
@for $i from 0 through $homeNavLengh { @for $i from 0 through 3 {
.home-animation#{$i} { .home-animation#{$i} {
opacity: 0; opacity: 0;
animation-name: error-num; animation-name: error-num;
@@ -641,3 +736,4 @@ $homeNavLengh: 8;
} }
} }
</style> </style>

View File

@@ -187,8 +187,8 @@ export default defineComponent({
// 初始化登录成功时间问候语 // 初始化登录成功时间问候语
let currentTimeInfo = currentTime.value; let currentTimeInfo = currentTime.value;
// 登录成功,跳到转首页 // 登录成功,跳到转首页
const pwd_change_count = userInfos.value.pwd_change_count const pwd_change_count = userInfos.value.pwd_change_count ?? 0
if(pwd_change_count>0){ if(pwd_change_count > 0){
// 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中 // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
if (route.query?.redirect) { if (route.query?.redirect) {
router.push({ router.push({
@@ -234,16 +234,37 @@ export default defineComponent({
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 定义error-num动画的关键帧
@keyframes error-num {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.login-content-form { .login-content-form {
margin-top: 20px; margin-top: 20px;
// 为输入框添加圆角和设置字体大小
:deep(.el-input__wrapper) {
border-radius: 8px !important;
}
// 设置输入框文字大小
:deep(.el-input__inner) {
font-size: 12px !important; // Element Plus large尺寸的默认字体大小
}
@for $i from 1 through 4 { @for $i from 1 through 4 {
.login-animation#{$i} { .login-animation#{$i} {
opacity: 0; opacity: 0;
animation-name: error-num; animation-name: error-num;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-delay: calc($i/10) + s; animation-delay: #{$i/10}s;
} }
} }
@@ -253,7 +274,7 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #909399; color: #909397;
} }
} }
@@ -262,6 +283,7 @@ export default defineComponent({
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
letter-spacing: 5px; letter-spacing: 5px;
border-radius: 8px !important;
} }
.login-content-submit { .login-content-submit {
@@ -269,6 +291,7 @@ export default defineComponent({
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 800; font-weight: 800;
margin-top: 15px; margin-top: 15px;
border-radius:8px;
} }
} }
</style> </style>

View File

@@ -239,6 +239,15 @@ export default defineComponent({
.login-content-form { .login-content-form {
margin-top: 20px; margin-top: 20px;
// 为输入框添加圆角和设置字体大小
:deep(.el-input__wrapper) {
border-radius: 8px !important;
}
// 设置输入框文字大小
:deep(.el-input__inner) {
font-size: 12px !important; // Element Plus large尺寸的默认字体大小
}
@for $i from 1 through 5 { @for $i from 1 through 5 {
.login-animation#{$i} { .login-animation#{$i} {
opacity: 0; opacity: 0;
@@ -264,6 +273,7 @@ export default defineComponent({
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
letter-spacing: 5px; letter-spacing: 5px;
border-radius: 8px !important;
} }
.login-content-submit { .login-content-submit {
@@ -271,6 +281,7 @@ export default defineComponent({
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 800; font-weight: 800;
margin-top: 15px; margin-top: 15px;
border-radius:8px;
} }
} }
</style> </style>

View File

@@ -5,8 +5,6 @@
<img :src="siteLogo" /> <img :src="siteLogo" />
<div class="login-left-logo-text"> <div class="login-left-logo-text">
<span>{{ getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle }}</span> <span>{{ getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle }}</span>
<span class="login-left-logo-text-msg" style="margin-top: 5px;">{{
getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -16,7 +14,9 @@
<!-- <span class="login-right-warp-two"></span>--> <!-- <span class="login-right-warp-two"></span>-->
<div class="login-right-warp-mian"> <div class="login-right-warp-mian">
<div class="login-right-warp-main-title"> <div class="login-right-warp-main-title">
{{userInfos.pwd_change_count===0?'初次登录修改密码':'欢迎登录'}} <span>{{getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg }}</span>
<br>
<span>{{userInfos.pwd_change_count===0?'初次登录请修改密码':'欢迎登录'}}</span>
</div> </div>
<div class="login-right-warp-main-form"> <div class="login-right-warp-main-form">
<div v-if="!state.isScan"> <div v-if="!state.isScan">
@@ -168,14 +168,11 @@ onMounted(() => {
span { span {
margin-left: 10px; margin-left: 10px;
font-size: 16px; font-size: 24px;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.login-left-logo-text-msg {
font-size: 12px;
color: var(--el-color-primary);
}
} }
} }
@@ -280,10 +277,10 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.login-right-warp-main-title { .login-right-warp-main-title {
height: 130px; height: 130px;
line-height: 130px; font-size: 24px;
font-size: 32px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
letter-spacing: 3px; letter-spacing: 3px;
@@ -347,7 +344,7 @@ onMounted(() => {
text-align: center; text-align: center;
p { p {
font-size: 14px; font-size: 12px;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }

View File

@@ -2,7 +2,7 @@ import vue from '@vitejs/plugin-vue';
import { resolve } from 'path'; import { resolve } from 'path';
import { defineConfig, loadEnv, ConfigEnv } from 'vite'; import { defineConfig, loadEnv, ConfigEnv } from 'vite';
import vueSetupExtend from 'vite-plugin-vue-setup-extend'; import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import vueJsx from '@vitejs/plugin-vue-jsx' // import vueJsx from '@vitejs/plugin-vue-jsx'
import { generateVersionFile } from "/@/utils/upgrade"; import { generateVersionFile } from "/@/utils/upgrade";
const pathResolve = (dir: string) => { const pathResolve = (dir: string) => {
@@ -22,7 +22,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
// 当Vite构建时生成版本文件 // 当Vite构建时生成版本文件
generateVersionFile() generateVersionFile()
return { return {
plugins: [vue(), vueJsx(), vueSetupExtend()], plugins: [vue(), /* vueJsx(), */ vueSetupExtend()],
root: process.cwd(), root: process.cwd(),
resolve: { alias }, resolve: { alias },
base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH, base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,