diff --git a/src/stores/themeConfig.ts b/src/stores/themeConfig.ts
index 2ac0ccc..b5b7c67 100644
--- a/src/stores/themeConfig.ts
+++ b/src/stores/themeConfig.ts
@@ -19,7 +19,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 全局主题
 			 */
 			// 默认 primary 主题颜色
-			primary: '#FF2442',
+			primary: '#409eff',
 			// 是否开启深色模式
 			isIsDark: false,
 
@@ -32,21 +32,21 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 默认顶栏导航背景颜色
 			topBar: '#ffffff',
 			// 默认顶栏导航字体颜色
-			topBarColor: '#1A1A1A',
+			topBarColor: '#606266',
 			// 是否开启顶栏背景颜色渐变
-			isTopBarColorGradual: true,
+			isTopBarColorGradual: false,
 			// 默认菜单导航背景颜色
-			menuBar: '#F0F8FF',
+			menuBar: '#354E67',
 			// 默认菜单导航字体颜色
-			menuBarColor: '#2D3748',
+			menuBarColor: '#eaeaea',
 			// 是否开启菜单背景颜色渐变
-			isMenuBarColorGradual: true,
+			isMenuBarColorGradual: false,
 			// 默认分栏菜单背景颜色
-			columnsMenuBar: '#F8FAFF',
+			columnsMenuBar: '#545c64',
 			// 默认分栏菜单字体颜色
-			columnsMenuBarColor: '#4A5568',
+			columnsMenuBarColor: '#e6e6e6',
 			// 是否开启分栏菜单背景颜色渐变
-			isColumnsMenuBarColorGradual: true,
+			isColumnsMenuBarColorGradual: false,
 
 			/**
 			 * 界面设置
diff --git a/src/theme/mixins/button-text.scss b/src/theme/mixins/button-text.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 68cdb70..d5cf69c 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,41 +1,53 @@
 <template>
-  <div class="login-container">
-    <div class="login-content-out">
-      <div class="login-content">
-        <div class="login-content-main">
-          <div class="login-icon-group">
-            <div class="login-icon-group-title">
-              <img :src="logoMini" />
-              <div class="login-icon-group-title-text font25">{{ getThemeConfig.globalViceTitle }}</div>
-            </div>
-          </div>
-          <div v-if="!isScan">
-            <el-tabs v-model="tabsActiveName">
-              <el-tab-pane :label="$t('message.label.one1')" name="account">
-                <Account />
-              </el-tab-pane>
-              <el-tab-pane :label="$t('message.label.two2')" name="mobile">
-                <Mobile />
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-          <Scan v-if="isScan" />
-          <div class="login-content-main-sacn" @click="isScan = !isScan">
-            <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
-            <div class="login-content-main-sacn-delta"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="login-footer">
-      <div class="login-footer-content mt15">
-        <div class="login-footer-content-warp">
-          <div>红动未来</div>
-          <div class="mt5"></div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div class="login-container">
+		<div class="login-wrapper">
+			<!-- 左侧品牌区域 -->
+			<div class="login-brand-section">
+				<div class="brand-content">
+					<div class="brand-logo">
+						<img :src="logoMini" alt="logo" />
+					</div>
+					<h1 class="brand-title">{{ getThemeConfig.globalTitle }}</h1>
+					<p class="brand-subtitle">{{ getThemeConfig.globalViceTitle }}</p>
+					<div class="brand-decoration"></div>
+				</div>
+			</div>
+
+			<!-- 右侧表单区域 -->
+			<div class="login-form-section">
+				<div class="form-wrapper">
+					<div class="form-header">
+						<h2>欢迎登录</h2>
+						<p>请输入您的账户信息</p>
+					</div>
+
+					<div v-if="!isScan" class="form-content">
+						<el-tabs v-model="tabsActiveName" class="login-tabs">
+							<el-tab-pane :label="$t('message.label.one1')" name="account">
+								<Account />
+							</el-tab-pane>
+							<el-tab-pane :label="$t('message.label.two2')" name="mobile">
+								<Mobile />
+							</el-tab-pane>
+						</el-tabs>
+					</div>
+
+					<div v-if="isScan" class="form-content">
+						<Scan />
+					</div>
+
+					<div class="scan-toggle" @click="isScan = !isScan" :title="isScan ? '切换为账户登录' : '切换为扫码登录'">
+						<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 页脚 -->
+		<div class="login-footer">
+			<p>© 2024 红动未来服务商平台</p>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
@@ -51,170 +63,315 @@ 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>
 
-
 <style scoped lang="scss">
 .login-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-image: url("/@/assets/bg.jpg");
-  background-size: cover;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	background-size: cover;
+	background-attachment: fixed;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 
-  .login-icon-group {
-    width: 100%;
-    height: 100%;
-    position: relative;
+	.login-wrapper {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 40px 20px;
+	}
 
-    .login-icon-group-title {
-      display: flex;
-      align-items: center;
+	/* 左侧品牌区域 */
+	.login-brand-section {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-right: 60px;
 
-      img {
-        width: 80px;
-        height: 70px;
-      }
+		.brand-content {
+			color: white;
+			text-align: left;
 
-      &-text {
-        padding-left: 5px;
-        color: var(--el-color-primary);
-      }
-    }
+			.brand-logo {
+				margin-bottom: 40px;
+				animation: slideInLeft 0.8s ease;
 
-    &-icon {
-      width: 60%;
-      height: 70%;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
-  }
+				img {
+					width: 100px;
+					height: 90px;
+					filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
+				}
+			}
 
-  .login-content-out {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
+			.brand-title {
+				font-size: 42px;
+				font-weight: 700;
+				margin: 0 0 20px 0;
+				letter-spacing: 1px;
+				animation: slideInLeft 0.8s ease 0.2s both;
+			}
 
-  .login-content {
-    width: 500px;
-    padding: 20px;
-    margin: auto;
-    background-color: var(--el-color-white);
-    border: 5px solid var(--el-color-primary-light-8);
-    border-radius: 5px;
-    overflow: hidden;
-    z-index: 1;
-    position: relative;
+			.brand-subtitle {
+				font-size: 18px;
+				opacity: 0.9;
+				margin: 0;
+				animation: slideInLeft 0.8s ease 0.4s both;
+				font-weight: 300;
+			}
 
-    .login-content-main {
-      margin: 0 auto;
-      width: 80%;
+			.brand-decoration {
+				width: 60px;
+				height: 4px;
+				background: rgba(255, 255, 255, 0.5);
+				margin-top: 30px;
+				border-radius: 2px;
+				animation: slideInLeft 0.8s ease 0.6s both;
+			}
+		}
+	}
 
-      .login-content-title {
-        color: var(--el-text-color-primary);
-        font-weight: 500;
-        font-size: 22px;
-        text-align: center;
-        letter-spacing: 4px;
-        margin: 15px 0 30px;
-        white-space: nowrap;
-        z-index: 5;
-        position: relative;
-        transition: all 0.3s ease;
-      }
-    }
+	/* 右侧表单区域 */
+	.login-form-section {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-left: 60px;
 
-    .login-content-main-sacn {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 50px;
-      height: 50px;
-      overflow: hidden;
-      cursor: pointer;
-      transition: all ease 0.3s;
-      color: var(--el-text-color-primary);
+		.form-wrapper {
+			width: 100%;
+			max-width: 420px;
+			background: white;
+			border-radius: 12px;
+			padding: 50px 40px;
+			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+			position: relative;
+			animation: slideInRight 0.8s ease;
 
-      &-delta {
-        position: absolute;
-        width: 35px;
-        height: 70px;
-        z-index: 2;
-        top: 2px;
-        right: 21px;
-        background: var(--el-color-white);
-        transform: rotate(-45deg);
-      }
+			.form-header {
+				margin-bottom: 40px;
+				text-align: center;
 
-      &:hover {
-        opacity: 1;
-        transition: all ease 0.3s;
-        color: var(--el-color-primary) !important;
-      }
+				h2 {
+					font-size: 28px;
+					color: #303133;
+					margin: 0 0 10px 0;
+					font-weight: 600;
+				}
 
-      i {
-        width: 47px;
-        height: 50px;
-        display: inline-block;
-        font-size: 48px;
-        position: absolute;
-        right: 2px;
-        top: -1px;
-      }
-    }
-  }
+				p {
+					font-size: 14px;
+					color: #909399;
+					margin: 0;
+				}
+			}
 
-  .login-footer {
-    position: absolute;
-    bottom: 5px;
-    width: 100%;
+			.form-content {
+				margin-bottom: 20px;
+			}
 
-    &-content {
-      width: 100%;
-      display: flex;
+			.login-tabs {
+				:deep(.el-tabs__header) {
+					margin-bottom: 30px;
+					border-bottom: none;
 
-      &-warp {
-        margin: auto;
-        color: #e0e3e9;
-        text-align: center;
-        animation: error-num 1s ease-in-out;
-      }
-    }
-  }
+					.el-tabs__nav {
+						width: 100%;
+						display: flex;
+						justify-content: space-around;
+
+						.el-tabs__item {
+							flex: 1;
+							text-align: center;
+							font-weight: 500;
+							padding: 0;
+							color: #909399;
+							border-bottom: 2px solid transparent;
+							transition: all 0.3s;
+
+							&.is-active {
+								color: var(--el-color-primary);
+								border-bottom-color: var(--el-color-primary);
+							}
+
+							&:hover {
+								color: var(--el-color-primary);
+							}
+						}
+					}
+				}
+			}
+
+			.scan-toggle {
+				position: absolute;
+				top: 15px;
+				right: 15px;
+				width: 44px;
+				height: 44px;
+				border-radius: 50%;
+				background: #f5f7fa;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				transition: all 0.3s ease;
+				color: #909399;
+				font-size: 20px;
+
+				&:hover {
+					background: var(--el-color-primary-light-9);
+					color: var(--el-color-primary);
+					transform: scale(1.1);
+				}
+			}
+		}
+	}
+
+	/* 页脚 */
+	.login-footer {
+		text-align: center;
+		padding: 20px;
+		color: rgba(255, 255, 255, 0.6);
+		font-size: 12px;
+		border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+		p {
+			margin: 0;
+		}
+	}
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+	.login-container {
+		.login-brand-section {
+			padding-right: 40px;
+
+			.brand-content {
+				.brand-title {
+					font-size: 32px;
+				}
+
+				.brand-subtitle {
+					font-size: 16px;
+				}
+			}
+		}
+
+		.login-form-section {
+			padding-left: 40px;
+
+			.form-wrapper {
+				max-width: 380px;
+				padding: 40px 30px;
+			}
+		}
+	}
+}
+
+@media (max-width: 768px) {
+	.login-container {
+		.login-wrapper {
+			flex-direction: column;
+			padding: 20px;
+		}
+
+		.login-brand-section {
+			padding-right: 0;
+			padding-bottom: 30px;
+			text-align: center;
+
+			.brand-content {
+				text-align: center;
+
+				.brand-logo {
+					img {
+						width: 80px;
+						height: 70px;
+					}
+				}
+
+				.brand-title {
+					font-size: 24px;
+				}
+
+				.brand-subtitle {
+					font-size: 14px;
+				}
+
+				.brand-decoration {
+					margin-left: auto;
+					margin-right: auto;
+				}
+			}
+		}
+
+		.login-form-section {
+			padding-left: 0;
+
+			.form-wrapper {
+				max-width: 100%;
+				padding: 30px 20px;
+			}
+		}
+	}
+}
+
+/* 动画定义 */
+@keyframes slideInLeft {
+	from {
+		opacity: 0;
+		transform: translateX(-30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes slideInRight {
+	from {
+		opacity: 0;
+		transform: translateX(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 </style>