主题样式更新

.env.development

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

src/stores/themeConfig.ts

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

src/utils/request.ts

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

src/views/login/index.vue

@@ -30,8 +30,8 @@
     <div class="login-footer">
       <div class="login-footer-content mt15">
         <div class="login-footer-content-warp">
-          <div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div>
-          <div class="mt5">云南奇讯科技有限公司版权所有</div>
+          <div>红动未来</div>
+          <div class="mt5"></div>
         </div>
       </div>
     </div>
@@ -51,35 +51,35 @@ import Scan from '/@/views/login/component/scan.vue';
 
 // 定义接口来定义对象的类型
 interface LoginState {
-	tabsActiveName: string;
-	isScan: boolean;
+  tabsActiveName: string;
+  isScan: boolean;
 }
 
 export default defineComponent({
-	name: 'loginIndex',
-	components: { Account, Mobile, Scan },
-	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const state = reactive<LoginState>({
-			tabsActiveName: 'account',
-			isScan: false,
-		});
-		// 获取布局配置信息
-		const getThemeConfig = computed(() => {
-			return themeConfig.value;
-		});
-		// 页面加载时
-		onMounted(() => {
-			NextLoading.done();
-		});
-		return {
-			logoMini,
-			loginIconTwo,
-			getThemeConfig,
-			...toRefs(state),
-		};
-	},
+  name: 'loginIndex',
+  components: { Account, Mobile, Scan },
+  setup() {
+    const storesThemeConfig = useThemeConfig();
+    const { themeConfig } = storeToRefs(storesThemeConfig);
+    const state = reactive<LoginState>({
+      tabsActiveName: 'account',
+      isScan: false,
+    });
+    // 获取布局配置信息
+    const getThemeConfig = computed(() => {
+      return themeConfig.value;
+    });
+    // 页面加载时
+    onMounted(() => {
+      NextLoading.done();
+    });
+    return {
+      logoMini,
+      loginIconTwo,
+      getThemeConfig,
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 
@@ -91,22 +91,27 @@ export default defineComponent({
   position: relative;
   background-image: url("/@/assets/bg.jpg");
   background-size: cover;
+
   .login-icon-group {
     width: 100%;
     height: 100%;
     position: relative;
+
     .login-icon-group-title {
       display: flex;
       align-items: center;
+
       img {
         width: 80px;
         height: 70px;
       }
+
       &-text {
         padding-left: 5px;
         color: var(--el-color-primary);
       }
     }
+
     &-icon {
       width: 60%;
       height: 70%;
@@ -115,6 +120,7 @@ export default defineComponent({
       bottom: 0;
     }
   }
+
   .login-content-out {
     width: 100%;
     height: 100%;
@@ -123,6 +129,7 @@ export default defineComponent({
     justify-content: center;
     align-items: center;
   }
+
   .login-content {
     width: 500px;
     padding: 20px;
@@ -133,9 +140,11 @@ export default defineComponent({
     overflow: hidden;
     z-index: 1;
     position: relative;
+
     .login-content-main {
       margin: 0 auto;
       width: 80%;
+
       .login-content-title {
         color: var(--el-text-color-primary);
         font-weight: 500;
@@ -149,6 +158,7 @@ export default defineComponent({
         transition: all 0.3s ease;
       }
     }
+
     .login-content-main-sacn {
       position: absolute;
       top: 0;
@@ -159,6 +169,7 @@ export default defineComponent({
       cursor: pointer;
       transition: all ease 0.3s;
       color: var(--el-text-color-primary);
+
       &-delta {
         position: absolute;
         width: 35px;
@@ -169,11 +180,13 @@ export default defineComponent({
         background: var(--el-color-white);
         transform: rotate(-45deg);
       }
+
       &:hover {
         opacity: 1;
         transition: all ease 0.3s;
         color: var(--el-color-primary) !important;
       }
+
       i {
         width: 47px;
         height: 50px;
@@ -185,13 +198,16 @@ export default defineComponent({
       }
     }
   }
-  .login-footer{
+
+  .login-footer {
     position: absolute;
     bottom: 5px;
     width: 100%;
+
     &-content {
       width: 100%;
       display: flex;
+
       &-warp {
         margin: auto;
         color: #e0e3e9;