主题样式更新

This commit is contained in:
WUSIJIAN
2025-11-22 10:32:43 +08:00
parent 90d6da1d45
commit 774e6c97a6
10 changed files with 67 additions and 52 deletions

View File

@@ -2,4 +2,4 @@
ENV = 'development' ENV = 'development'
# 本地环境接口地址 # 本地环境接口地址
VITE_API_URL = 'http://localhost:8808/' VITE_API_URL = 'http://192.168.3.49:8808/'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

@@ -18,33 +18,32 @@ export const useThemeConfig = defineStore('themeConfig', {
/** /**
* 全局主题 * 全局主题
*/ */
// 默认 primary 主题颜色 // 主色调:莫兰迪蓝
primary: '#409eff', primary: '#6D8BA6',
// 是否开启深色模式 // 是否开启深色模式
isIsDark: false, isIsDark: false,
/** /**
* 菜单 / 顶栏 * 菜单 / 顶栏 - 多彩渐变方案
* 注意v1.0.17 版本去除设置布局切换重置主题样式initSetLayoutChange
* 切换布局需手动设置样式,设置的样式自动同步各布局,
* 代码位置:/@/layout/navBars/breadcrumb/setings.vue
*/ */
// 默认顶栏导航背景颜 // 顶栏:浅杏
topBar: '#ffffff', topBar: '#F5E8DA',
// 默认顶栏导航字体颜色 // 顶栏文字:深灰褐
topBarColor: '#606266', topBarColor: '#5D4E3F',
// 是否开启顶栏背景颜色渐变 // 是否开启顶栏背景颜色渐变
isTopBarColorGradual: false, isTopBarColorGradual: false,
// 默认菜单导航背景颜色
menuBar: '#354E67', // 侧边栏:灰绿色
// 默认菜单导航字体颜色 menuBar: '#A8B8A5',
menuBarColor: '#eaeaea', // 菜单文字:深墨绿
menuBarColor: '#2C3E2C',
// 是否开启菜单背景颜色渐变 // 是否开启菜单背景颜色渐变
isMenuBarColorGradual: false, isMenuBarColorGradual: false,
// 默认分栏菜单背景颜色
columnsMenuBar: '#545c64', // 分栏菜单:淡紫灰
// 默认分栏菜单字体颜色 columnsMenuBar: '#D4CDDC',
columnsMenuBarColor: '#e6e6e6', // 分栏文字:深紫灰
columnsMenuBarColor: '#4A4453',
// 是否开启分栏菜单背景颜色渐变 // 是否开启分栏菜单背景颜色渐变
isColumnsMenuBarColorGradual: false, isColumnsMenuBarColorGradual: false,
@@ -117,7 +116,7 @@ export const useThemeConfig = defineStore('themeConfig', {
* 中的 `initSetLayoutChange(设置布局切换,重置主题样式)` 方法 * 中的 `initSetLayoutChange(设置布局切换,重置主题样式)` 方法
*/ */
// 布局切换:可选值"<defaults|classic|transverse|columns>",默认 defaults // 布局切换:可选值"<defaults|classic|transverse|columns>",默认 defaults
layout: 'defaults', layout: 'transverse',
/** /**
* 后端控制路由 * 后端控制路由
@@ -131,11 +130,11 @@ export const useThemeConfig = defineStore('themeConfig', {
// 网站主标题(菜单导航、浏览器当前网页标题) // 网站主标题(菜单导航、浏览器当前网页标题)
globalTitle: '红动未来业务中台', globalTitle: '红动未来业务中台',
// 网站副标题(登录页顶部文字) // 网站副标题(登录页顶部文字)
globalViceTitle: '红动未来业务中台', globalViceTitle: '让内容创作更简单',
// 默认初始语言,可选值"<zh-cn|en|zh-tw>",默认 zh-cn // 默认初始语言,可选值"<zh-cn|en|zh-tw>",默认 zh-cn
globalI18n: 'zh-cn', globalI18n: 'zh-cn',
// 默认全局组件大小,可选值"<large|'default'|small>",默认 'large' // 默认全局组件大小,可选值"<large|'default'|small>",默认 'large'
globalComponentSize: 'large', globalComponentSize: 'default',
}, },
}), }),
actions: { actions: {

View File

@@ -5,7 +5,7 @@ import qs from 'qs';
// 配置新建一个 axios 实例 // 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({ const service: AxiosInstance = axios.create({
baseURL: 'http://192.168.3.49:8808/', baseURL: import.meta.env.VITE_API_URL,
timeout: 50000, timeout: 50000,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
paramsSerializer: { paramsSerializer: {

View File

@@ -30,8 +30,8 @@
<div class="login-footer"> <div class="login-footer">
<div class="login-footer-content mt15"> <div class="login-footer-content mt15">
<div class="login-footer-content-warp"> <div class="login-footer-content-warp">
<div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div> <div>红动未来</div>
<div class="mt5">云南奇讯科技有限公司版权所有</div> <div class="mt5"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -91,22 +91,27 @@ export default defineComponent({
position: relative; position: relative;
background-image: url("/@/assets/bg.jpg"); background-image: url("/@/assets/bg.jpg");
background-size: cover; background-size: cover;
.login-icon-group { .login-icon-group {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.login-icon-group-title { .login-icon-group-title {
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
width: 80px; width: 80px;
height: 70px; height: 70px;
} }
&-text { &-text {
padding-left: 5px; padding-left: 5px;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
} }
&-icon { &-icon {
width: 60%; width: 60%;
height: 70%; height: 70%;
@@ -115,6 +120,7 @@ export default defineComponent({
bottom: 0; bottom: 0;
} }
} }
.login-content-out { .login-content-out {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -123,6 +129,7 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.login-content { .login-content {
width: 500px; width: 500px;
padding: 20px; padding: 20px;
@@ -133,9 +140,11 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
position: relative; position: relative;
.login-content-main { .login-content-main {
margin: 0 auto; margin: 0 auto;
width: 80%; width: 80%;
.login-content-title { .login-content-title {
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
font-weight: 500; font-weight: 500;
@@ -149,6 +158,7 @@ export default defineComponent({
transition: all 0.3s ease; transition: all 0.3s ease;
} }
} }
.login-content-main-sacn { .login-content-main-sacn {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -159,6 +169,7 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
transition: all ease 0.3s; transition: all ease 0.3s;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
&-delta { &-delta {
position: absolute; position: absolute;
width: 35px; width: 35px;
@@ -169,11 +180,13 @@ export default defineComponent({
background: var(--el-color-white); background: var(--el-color-white);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
&:hover { &:hover {
opacity: 1; opacity: 1;
transition: all ease 0.3s; transition: all ease 0.3s;
color: var(--el-color-primary) !important; color: var(--el-color-primary) !important;
} }
i { i {
width: 47px; width: 47px;
height: 50px; height: 50px;
@@ -185,13 +198,16 @@ export default defineComponent({
} }
} }
} }
.login-footer { .login-footer {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
width: 100%; width: 100%;
&-content { &-content {
width: 100%; width: 100%;
display: flex; display: flex;
&-warp { &-warp {
margin: auto; margin: auto;
color: #e0e3e9; color: #e0e3e9;