Skip to content

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

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

上级 13270d86
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 425 行增加 和 54 行删除
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
......@@ -89,4 +127,112 @@
> .el-submenu__title
.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
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论