Skip to content

R
ruoshui-ui
提交 f2091d07 authored 作者: 吕本才's avatar 吕本才
浏览文件
操作

修改整体样式-登录页修改比较多

上级 13270d86
显示空白字符变更
内嵌 并排
正在显示 包含 805 行增加 和 101 行删除
Readme.md 0 → 100644
浏览文件 @ f2091d07
1、node打包
使用的版本是16.19.1
使用18版本，打包成功，但是缺少文件
package.json
浏览文件 @ f2091d07
......@@ -98,7 +98,7 @@
"vue-template-compiler": "2.6.12"
},
"engines": {
"node": ">=8.9",
"node": ">=16",
"npm": ">= 3.0.0"
},
"browserslist": [
......
src/assets/styles/btn.scss
浏览文件 @ f2091d07
......@@ -14,7 +14,16 @@
}
.blue-btn {
@include colorBtn($blue)
@include colorBtn(#409EFF); // 使用主题蓝色
background: #409EFF;
color: #fff;
border-color: #409EFF;
&:hover {
background: #66B1FF;
border-color: #66B1FF;
color: #fff;
}
}
.light-blue-btn {
......
src/assets/styles/element-ui.scss
浏览文件 @ f2091d07
// cover some element-ui styles
// cover some element-ui styles - 蓝色主题
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
color: #606266;
transition: color 0.3s;
&:hover {
color: #409EFF !important; // 蓝色悬停
}
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #409EFF; // 当前页蓝色
font-weight: 500;
}
.el-upload {
......@@ -18,6 +29,13 @@
.cell {
.el-tag {
margin-right: 0px;
// 标签蓝色主题增强
&.el-tag--primary {
background-color: #ecf5ff; // 浅蓝色背景
border-color: #b3d8ff; // 浅蓝色边框
color: #409EFF; // 蓝色文字
}
}
}
......@@ -42,6 +60,13 @@
.el-tag {
margin-right: 0px;
// 状态标签蓝色主题
&.el-tag--primary {
background-color: #ecf5ff; // 浅蓝色背景
border-color: #b3d8ff; // 浅蓝色边框
color: #409EFF; // 蓝色文字
}
}
}
}
......@@ -52,6 +77,19 @@
left: 0;
position: relative;
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
.el-dialog__header {
background: linear-gradient(to right, #f0f7ff, #ffffff); // 浅蓝色渐变
border-bottom: 2px solid #409EFF; // 蓝色底部边框
padding: 20px 20px 15px;
.el-dialog__title {
color: #409EFF; // 蓝色标题
font-weight: 600;
}
}
}
// refine element ui upload
......@@ -90,3 +128,111 @@
.el-submenu__icon-arrow {
display: none;
}
// 标签页 (Tabs) 蓝色主题
.el-tabs__item {
color: #606266;
transition: color 0.3s;
&:hover {
color: #409EFF; // 蓝色悬停
}
&.is-active {
color: #409EFF; // 激活标签蓝色
font-weight: 600;
}
}
.el-tabs__active-bar {
background-color: #409EFF; // 激活条蓝色
}
.el-tabs__nav-wrap::after {
background-color: #e4e7ed; // 底部边框
}
// 分页器 (Pagination) 蓝色主题
.el-pagination {
.el-pager li {
&:hover {
color: #409EFF; // 蓝色悬停
}
&.active {
color: #409EFF; // 当前页蓝色
font-weight: 600;
}
}
.btn-prev,
.btn-next {
&:hover {
color: #409EFF; // 蓝色悬停
}
}
button:disabled {
color: #c0c4cc;
}
}
// 输入框焦点样式
.el-input__inner {
&:focus {
border-color: #409EFF; // 蓝色焦点边框
}
}
.el-textarea__inner {
&:focus {
border-color: #409EFF; // 蓝色焦点边框
}
}
// 选择器蓝色主题
.el-select .el-input.is-focus .el-input__inner {
border-color: #409EFF; // 蓝色焦点边框
}
// 步骤条蓝色主题
.el-steps {
.el-step__head.is-process {
color: #409EFF; // 进行中蓝色
border-color: #409EFF; // 蓝色边框
}
.el-step__head.is-finish {
color: #409EFF; // 完成蓝色
border-color: #409EFF; // 蓝色边框
}
.el-step__title.is-process {
color: #409EFF; // 进行中标题蓝色
font-weight: 600;
}
.el-step__title.is-finish {
color: #409EFF; // 完成标题蓝色
}
}
// 消息提示蓝色主题
.el-message {
border-color: #409EFF; // 蓝色边框
.el-message__icon {
color: #409EFF; // 蓝色图标
}
}
// 加载提示蓝色主题
.el-loading-spinner {
.path {
stroke: #409EFF; // 蓝色加载圈
}
.el-loading-text {
color: #409EFF; // 蓝色文字
}
}
\ No newline at end of file
src/assets/styles/element-variables.scss
浏览文件 @ f2091d07
......@@ -3,11 +3,11 @@
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
/* theme color - 蓝色主题 */
$--color-primary: #409EFF; // 主色调：蓝色
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
......
src/assets/styles/index.scss
浏览文件 @ f2091d07
......@@ -11,6 +11,9 @@ body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
// 整体背景设置为浅色渐变
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 30%, #f0f7ff 100%);
background-attachment: fixed; // 固定背景，滚动时不变
}
label {
......@@ -45,11 +48,11 @@ a:active {
outline: none;
}
// 默认链接样式会被后面的全局链接样式覆盖
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
......@@ -97,10 +100,10 @@ div:focus {
}
aside {
background: #eef1f6;
background: #f0f7ff; // 浅蓝色背景
padding: 8px 24px;
margin-bottom: 20px;
border-radius: 2px;
border-radius: 4px;
display: block;
line-height: 32px;
font-size: 16px;
......@@ -108,20 +111,56 @@ aside {
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-left: 3px solid #409EFF; // 蓝色左边框
a {
color: #337ab7;
color: #409EFF; // 蓝色链接
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
color: #66B1FF; // 浅蓝色悬停
}
}
}
//main-container全局样式
//main-container全局样式 - 浅色渐变背景
.app-container {
padding: 20px;
// 白色到浅蓝色的渐变背景，与登录页保持一致
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 50%, #f0f7ff 100%);
min-height: calc(100vh - 84px);
position: relative;
// 添加微妙的几何装饰
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(135deg, rgba(64, 158, 255, 0.03) 0%, transparent 50%),
linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0%, transparent 40%),
linear-gradient(-45deg, rgba(64, 158, 255, 0.02) 0%, transparent 50%);
background-size:
800px 600px,
600px 400px,
500px 500px;
background-position:
-100px -100px,
500px 200px,
800px 500px;
pointer-events: none;
opacity: 1;
z-index: 0;
}
// 确保内容在装饰层之上
> * {
position: relative;
z-index: 1;
}
}
.components-container {
......@@ -137,6 +176,53 @@ aside {
text-align: center
}
// 全局卡片样式增强 - 适配浅色背景
.el-card {
border-radius: 8px; // 增加圆角
border: 1px solid #e4e7ed;
background: #ffffff; // 白色背景
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); // 轻微阴影
&:hover {
box-shadow: 0 6px 20px rgba(64, 158, 255, 0.12); // 蓝色阴影，更明显
border-color: #c0d9f5; // 悬停时边框变浅蓝色
transform: translateY(-2px); // 轻微上浮效果
}
}
// 全局按钮样式增强
.el-button--primary {
background-color: #409EFF;
border-color: #409EFF;
&:hover,
&:focus {
background-color: #66B1FF;
border-color: #66B1FF;
}
&:active {
background-color: #337AB7;
border-color: #337AB7;
}
}
// 全局链接样式
a {
color: #409EFF;
transition: color 0.3s;
&:hover {
color: #66B1FF;
}
&:active,
&:visited {
color: #409EFF;
}
}
.sub-navbar {
height: 50px;
line-height: 50px;
......@@ -145,11 +231,14 @@ aside {
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
// 蓝色主题渐变背景
background: linear-gradient(90deg, #409EFF 0%, #66B1FF 50%, #409EFF 100%);
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); // 蓝色阴影
.subtitle {
font-size: 20px;
color: #fff;
font-weight: 500;
}
&.draft {
......@@ -163,11 +252,12 @@ aside {
.link-type,
.link-type:focus {
color: #337ab7;
color: #409EFF; // 蓝色链接
cursor: pointer;
transition: color 0.3s;
&:hover {
color: rgb(32, 160, 255);
color: #66B1FF; // 浅蓝色悬停
}
}
......
src/assets/styles/ruoyi.scss
浏览文件 @ f2091d07
......@@ -75,10 +75,12 @@
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9;
color: #515a6e;
background-color: #f0f7ff; // 浅蓝色表头背景
color: #409EFF; // 蓝色表头文字
height: 40px;
font-size: 13px;
font-weight: 600;
border-bottom: 2px solid #409EFF; // 蓝色底部边框
}
}
.el-table__body-wrapper {
......@@ -86,15 +88,21 @@
margin-left: 1px;
}
}
// 表格行悬停效果
.el-table__body tr:hover > td {
background-color: #f0f7ff !important; // 浅蓝色悬停背景
}
}
/** 表单布局 **/
.form-header {
font-size:15px;
color:#6379bb;
border-bottom:1px solid #ddd;
color:#409EFF; // 蓝色标题
border-bottom:2px solid #409EFF; // 蓝色底部边框
margin:8px 10px 25px 10px;
padding-bottom:5px
padding-bottom:5px;
font-weight: 500;
}
/** 表格布局 **/
......@@ -109,14 +117,31 @@
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
border: 1px solid #409EFF; // 蓝色边框
background: #FFFFFF none;
border-radius:4px;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1); // 蓝色阴影
}
.pagination-container .el-pagination {
right: 0;
position: absolute;
// 分页器蓝色主题增强
.el-pager li.active {
background-color: #409EFF !important; // 当前页蓝色背景
color: #fff !important; // 白色文字
border-color: #409EFF !important;
}
.el-pager li:hover {
color: #409EFF; // 悬停蓝色
}
.btn-prev:hover,
.btn-next:hover {
color: #409EFF; // 箭头悬停蓝色
}
}
@media ( max-width : 768px) {
......@@ -137,8 +162,13 @@
/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link {
cursor: pointer;
color: #409EFF;
color: #409EFF; // 蓝色链接
margin-left: 5px;
transition: color 0.3s;
&:hover {
color: #66B1FF; // 浅蓝色悬停
}
}
.el-table .el-dropdown, .el-icon-arrow-down {
......@@ -175,8 +205,16 @@
}
.el-card__header {
padding: 14px 15px 7px;
padding: 16px 20px 10px 20px;
min-height: 40px;
border-bottom: 1px solid #e8ecf0; // 浅色边框，更柔和
background: linear-gradient(to right, #fafbff, #ffffff); // 极浅的渐变背景
span {
color: #303133; // 深灰色标题，适配浅色背景
font-weight: 600;
font-size: 15px;
}
}
.el-card__body {
......@@ -186,7 +224,21 @@
.card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
margin-bottom: 15px; // 增加间距
.el-card {
border: 1px solid #e8ecf0; // 更浅的边框
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); // 更柔和的阴影
background: #ffffff; // 白色背景
transition: all 0.3s ease;
border-radius: 8px; // 增加圆角
&:hover {
box-shadow: 0 6px 20px rgba(64, 158, 255, 0.12); // 悬停时蓝色阴影
border-color: #c0d9f5; // 悬停时浅蓝色边框
transform: translateY(-2px); // 轻微上浮
}
}
}
/* button color */
......@@ -210,33 +262,33 @@
color: #FFFFFF;
}
/* text color */
/* text color - 蓝色主题 */
.text-navy {
color: #1ab394;
color: #409EFF; // 蓝色
}
.text-primary {
color: inherit;
color: #409EFF; // 主题蓝色
}
.text-success {
color: #1c84c6;
color: #67C23A;
}
.text-info {
color: #23c6c8;
color: #409EFF; // 信息色使用蓝色
}
.text-warning {
color: #f8ac59;
color: #E6A23C;
}
.text-danger {
color: #ed5565;
color: #F56C6C;
}
.text-muted {
color: #888888;
color: #909399;
}
/* image */
......
src/assets/styles/sidebar.scss
浏览文件 @ f2091d07
......@@ -76,16 +76,34 @@
white-space: nowrap !important;
}
// menu hover
// menu hover - 蓝色主题
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: rgba(64, 158, 255, 0.1) !important; // 浅蓝色悬停背景
color: #409EFF !important; // 蓝色文字
}
}
// 激活菜单项样式
.el-menu-item.is-active {
background-color: $base-menu-active-background !important; // 蓝色背景
color: $base-menu-color-active !important; // 白色文字
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #ffffff; // 白色左侧指示条
}
}
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
background-color: $base-menu-active-background !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
......@@ -93,16 +111,23 @@
min-width: $base-sidebar-width !important;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: rgba(64, 158, 255, 0.1) !important; // 浅蓝色悬停背景
color: #409EFF !important; // 蓝色文字
}
}
// 激活状态的菜单项
& .nest-menu .el-submenu .el-menu-item.is-active {
background-color: $base-menu-active-background !important;
color: $base-menu-color-active !important;
}
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important;
&:hover {
background-color: $base-sub-menu-hover !important;
background-color: rgba(64, 158, 255, 0.2) !important; // 蓝色悬停
}
}
}
......
src/assets/styles/variables.scss
浏览文件 @ f2091d07
// base color
$blue:#324157;
$light-blue:#3A71A8;
// base color - 蓝色主题色系
$blue:#409EFF; // 主蓝色（Element UI 标准蓝）
$light-blue:#66B1FF; // 浅蓝色
$dark-blue:#337AB7; // 深蓝色，用于标题等
$primary-blue:#409EFF; // 主题蓝色
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
......@@ -8,18 +10,21 @@ $tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// 默认菜单主题风格
$base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5;
$base-menu-background:#304156;
$base-logo-title-color: #ffffff;
// 默认菜单主题风格 - 蓝色主题
$base-menu-color:#bfcbd9; // 未激活菜单文字颜色
$base-menu-color-active:#ffffff; // 激活菜单文字颜色（白色）
$base-menu-background:#304156; // 菜单背景色（深灰蓝）
$base-logo-title-color: #ffffff; // Logo文字颜色
// 激活菜单项背景色（蓝色主题）
$base-menu-active-background:#409EFF; // 激活菜单项背景色（蓝色）
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-logo-light-title-color: #409EFF; // 浅色主题Logo文字颜色（蓝色）
$base-sub-menu-background:#1f2d3d;
$base-sub-menu-hover:#001528;
$base-sub-menu-hover:#409EFF; // 子菜单悬停颜色（蓝色）
// 自定义暗色菜单风格
/**
......
src/layout/components/AppMain.vue
浏览文件 @ f2091d07
......@@ -29,6 +29,35 @@ export default {
width: 100%;
position: relative;
overflow: hidden;
// 浅色渐变背景，与整体风格一致
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 50%, #f0f7ff 100%);
// 添加微妙的装饰效果
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(135deg, rgba(64, 158, 255, 0.02) 0%, transparent 60%),
linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0%, transparent 40%);
background-size:
1000px 800px,
600px 600px;
background-position:
-200px -200px,
600px 300px;
pointer-events: none;
z-index: 0;
}
// 确保路由内容在装饰层之上
section {
position: relative;
z-index: 1;
}
}
.fixed-header+.app-main {
......
src/layout/components/Navbar.vue
浏览文件 @ f2091d07
......@@ -115,8 +115,10 @@ export default {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
background: #ffffff; // 纯白色背景，适配浅色主题
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.08); // 柔和的蓝色阴影
border-bottom: 1px solid #e8ecf0; // 更浅的边框
backdrop-filter: blur(10px); // 毛玻璃效果
.hamburger-container {
line-height: 46px;
......@@ -127,7 +129,8 @@ export default {
-webkit-tap-highlight-color:transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(64, 158, 255, 0.1); // 浅蓝色悬停背景
color: #409EFF; // 蓝色图标
}
}
......@@ -159,15 +162,17 @@ export default {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
color: #606266;
vertical-align: text-bottom;
transition: all .3s;
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: all .3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(64, 158, 255, 0.1); // 浅蓝色悬停背景
color: #409EFF; // 蓝色图标
}
}
}
......
src/layout/index.vue
浏览文件 @ f2091d07
......@@ -71,6 +71,9 @@ export default {
position: relative;
height: 100%;
width: 100%;
// 整体浅色渐变背景
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 30%, #f0f7ff 100%);
background-attachment: fixed;
&.mobile.openSidebar {
position: fixed;
......
src/views/datax/json-build/reader/RDBMSReader.vue
浏览文件 @ f2091d07
......@@ -171,6 +171,7 @@ export default {
tableName: this.readerForm.tableName
}
dsQueryApi.getColumns(obj).then(response => {
this.rColumnList = response.data
this.readerForm.columns = response.data
this.readerForm.checkAll = true
......
src/views/login.vue
浏览文件 @ f2091d07
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="background-color: rgb(255, 255, 255, 0.1);color: #FFF;">
<h3 class="title">若水数据中台</h3>
<!-- 左侧信息展示区 -->
<div class="login-left">
<div class="brand-section">
<!-- 品牌标识 -->
<div class="brand-logo">
<div class="logo-icon">
<svg viewBox="0 0 64 64" width="48" height="48">
<path d="M32 8 L20 16 L20 28 L32 36 L44 28 L44 16 Z" fill="#409EFF" opacity="0.8"/>
<path d="M32 36 L20 44 L20 56 L32 64 L44 56 L44 44 Z" fill="#409EFF" opacity="0.6"/>
<circle cx="32" cy="32" r="4" fill="#ffffff"/>
</svg>
</div>
<div class="brand-text">
<h2 class="brand-title">王小卤数据处理平台</h2>
<div class="brand-subtitle">数据ETL</div>
</div>
</div>
<!-- 核心标题 -->
<h1 class="main-title">完整的数据治理与服务平台</h1>
<!-- 详细描述 -->
<div class="description">
<p>致力于解决企业在数据管理、分析和应用过程中遇到的各种挑战。通过统一的</p>
<p class="highlight-text">数据采集、存储、处理和服务能力</p>
<p>，帮助企业实现数据资产的价值最大化。</p>
</div>
</div>
<!-- 版权信息 -->
<div class="copyright">
<span>王小卤网络科技有限公司</span>
</div>
</div>
<!-- 右侧登录表单区 -->
<div class="login-right">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="form-title">登陆</h3>
<!-- 系统选择（可选，根据需求添加） -->
<!-- <el-form-item>
<el-select v-model="loginForm.system" placeholder="请选择系统" class="full-width">
<el-option label="系统1" value="system1"></el-option>
<el-option label="系统2" value="system2"></el-option>
</el-select>
</el-form-item> -->
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
class="login-input"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
class="login-input"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaOnOff">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
class="login-input code-input"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
......@@ -37,26 +87,27 @@
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox">7天免登陆</el-checkbox>
<el-form-item style="width:100%;margin-top: 20px;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
class="login-button"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-if="!loading">登录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
</div>
<!-- 底部版权信息 -->
<div class="el-login-footer">
<span>Copyright © 2024-2030 若水数字科技有限公司 All Rights Reserved.</span>
<span>Copyright © 2016-2026 王小卤 All Rights Reserved.</span>
</div>
</div>
</template>
......@@ -158,66 +209,348 @@ export default {
<style rel="stylesheet/scss" lang="scss">
.login {
color: #ffffff !important;
display: flex;
height: 100vh;
width: 100%;
overflow: hidden;
// 白色到浅蓝色的渐变背景（从左上到右下）
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 30%, #e3f2fd 60%, #bbdefb 100%);
position: relative;
// 添加半透明几何形状层
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
// 矩形和梯形形状 - 对角线排列
linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, transparent 50%),
linear-gradient(135deg, transparent 0%, rgba(64, 158, 255, 0.06) 100%),
// 更多几何形状
linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
linear-gradient(-45deg, rgba(64, 158, 255, 0.05) 0%, transparent 50%),
// 玻璃质感效果
linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
background-size:
800px 600px,
600px 800px,
400px 400px,
500px 500px,
1000px 1000px;
background-position:
-100px -100px,
200px 300px,
500px 200px,
800px 500px,
0 0;
pointer-events: none;
opacity: 1;
}
// 添加额外的几何形状层
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// 创建更多半透明几何形状
background-image:
// 矩形形状
linear-gradient(135deg, rgba(64, 158, 255, 0.04) 0%, transparent 70%),
linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.5) 30%, transparent 70%),
// 梯形效果
linear-gradient(135deg, rgba(64, 158, 255, 0.06) 0%, transparent 50%),
linear-gradient(-135deg, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
background-size:
700px 500px,
600px 400px,
500px 600px,
800px 700px;
background-position:
300px 100px,
600px 400px,
100px 500px,
700px 200px;
pointer-events: none;
opacity: 1;
}
}
// 移除动画，使用静态背景
// 左侧信息展示区
.login-left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 60px 80px 60px 120px; // 增加左侧padding，让文字区域往右移动
color: #303133; // 改为深色文字，适配浅色背景
position: relative;
z-index: 1;
.brand-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 40px; // 文字区域再往右移动一些
}
// 品牌标识
.brand-logo {
display: flex;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
margin-bottom: 50px;
.logo-icon {
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-text {
.brand-title {
margin: 0;
font-size: 28px;
font-weight: 600;
color: #409EFF; // 蓝色文字，适配浅色背景
line-height: 1.2;
}
.brand-subtitle {
font-size: 16px;
color: #606266; // 深灰色文字
margin-top: 4px;
font-weight: 400;
}
}
}
// 核心标题
.main-title {
font-size: 42px;
font-weight: 700;
color: #303133; // 深色文字，适配浅色背景
margin: 0 0 40px 0;
line-height: 1.3;
text-shadow: none; // 移除阴影
}
// 详细描述
.description {
font-size: 16px;
line-height: 1.8;
color: #606266; // 深灰色文字
max-width: 500px;
p {
margin: 8px 0;
}
.highlight-text {
color: #409EFF; // 蓝色高亮
font-weight: 600;
display: inline;
}
}
// 版权信息
.copyright {
font-size: 14px;
color: #909399; // 浅灰色文字
margin-top: auto;
}
}
.title {
margin: 0px auto 30px auto;
text-align: center;
// 右侧登录表单区
.login-right {
flex: 0 0 650px; // 增加表单区域宽度（600 + 50）
display: flex;
align-items: center;
justify-content: flex-start; // 改为左对齐，让表单往左移动
padding: 40px 40px 40px 30px; // 减少左侧padding，让表单更靠左移动
position: relative;
z-index: 1;
}
// 登录表单样式
.login-form {
border-radius: 6px;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
width: 100%;
max-width: 570px; // 增加表单最大宽度（520 + 50）
min-height: 550px; // 增加表单高度（约500 + 50）
background: #ffffff;
border-radius: 12px;
padding: 50px 45px; // 增加内边距（45 + 5, 40 + 5），让表单更大
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
.form-title {
font-size: 24px;
font-weight: 600;
color: #303133;
margin: 0 0 35px 0;
text-align: left;
}
.el-form-item {
margin-bottom: 20px;
}
.login-input {
width: 100%;
.el-input__inner {
height: 44px;
line-height: 44px;
background-color: #ffffff;
border: 1px solid #dcdfe6;
border-radius: 4px;
color: #606266;
font-size: 14px;
padding-left: 40px;
transition: border-color 0.3s;
&:focus {
border-color: #409EFF;
outline: none;
}
&::placeholder {
color: #c0c4cc;
}
}
height: 38px;
input {
color: #ffffff ;
height: 38px;
&.code-input {
width: 65%;
float: left;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
height: 44px;
width: 16px;
margin-left: 12px;
color: #c0c4cc;
line-height: 44px;
}
.login-code {
width: 32%;
height: 44px;
float: right;
border: 1px solid #dcdfe6;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
background-color: #f5f7fa;
img {
width: 100%;
height: 100%;
display: block;
}
}
.remember-checkbox {
margin: 10px 0 0 0;
.el-checkbox__label {
color: #606266;
font-size: 14px;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #409EFF;
border-color: #409EFF;
}
}
.login-button {
width: 100%;
height: 44px;
background-color: #409EFF;
border-color: #409EFF;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
transition: all 0.3s;
&:hover {
background-color: #66B1FF;
border-color: #66B1FF;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}
&:active {
background-color: #337AB7;
border-color: #337AB7;
}
}
}
.login-tip {
font-size: 13px;
text-align: center;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
.login-code-img {
height: 44px;
width: 100%;
display: block;
}
// 底部版权信息
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-family: Arial;
font-size: 12px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-family: Arial, sans-serif;
letter-spacing: 1px;
z-index: 10;
span {
color: rgba(255, 255, 255, 0.9);
}
}
.login-code-img {
height: 38px;
}
.el-textarea__inner,.el-input__inner{
background: transparent;
// 响应式设计
@media (max-width: 1024px) {
.login {
flex-direction: column;
}
.login-left {
flex: 0 0 auto;
padding: 40px;
min-height: 300px;
.main-title {
font-size: 32px;
}
.description {
font-size: 14px;
}
}
.login-right {
flex: 1;
padding: 20px;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论