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 @@ ...@@ -98,7 +98,7 @@
"vue-template-compiler": "2.6.12" "vue-template-compiler": "2.6.12"
}, },
"engines": { "engines": {
"node": ">=8.9", "node": ">=16",
"npm": ">= 3.0.0" "npm": ">= 3.0.0"
}, },
"browserslist": [ "browserslist": [
......
src/assets/styles/btn.scss
浏览文件 @ f2091d07
...@@ -14,7 +14,16 @@ ...@@ -14,7 +14,16 @@
} }
.blue-btn { .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 { .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,
.el-breadcrumb__inner a { .el-breadcrumb__inner a {
font-weight: 400 !important; 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 { .el-upload {
...@@ -18,6 +29,13 @@ ...@@ -18,6 +29,13 @@
.cell { .cell {
.el-tag { .el-tag {
margin-right: 0px; margin-right: 0px;
// 标签蓝色主题增强
&.el-tag--primary {
background-color: #ecf5ff; // 浅蓝色背景
border-color: #b3d8ff; // 浅蓝色边框
color: #409EFF; // 蓝色文字
}
} }
} }
...@@ -42,6 +60,13 @@ ...@@ -42,6 +60,13 @@
.el-tag { .el-tag {
margin-right: 0px; margin-right: 0px;
// 状态标签蓝色主题
&.el-tag--primary {
background-color: #ecf5ff; // 浅蓝色背景
border-color: #b3d8ff; // 浅蓝色边框
color: #409EFF; // 蓝色文字
}
} }
} }
} }
...@@ -52,6 +77,19 @@ ...@@ -52,6 +77,19 @@
left: 0; left: 0;
position: relative; position: relative;
margin: 0 auto; 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 // refine element ui upload
...@@ -90,3 +128,111 @@ ...@@ -90,3 +128,111 @@
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; 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 @@ ...@@ -3,11 +3,11 @@
* So I modified the default color and you can modify it to your liking. * So I modified the default color and you can modify it to your liking.
**/ **/
/* theme color */ /* theme color - 蓝色主题 */
$--color-primary: #1890ff; $--color-primary: #409EFF; // 主色调：蓝色
$--color-success: #13ce66; $--color-success: #67C23A;
$--color-warning: #ffba00; $--color-warning: #E6A23C;
$--color-danger: #ff4949; $--color-danger: #F56C6C;
// $--color-info: #1E1E1E; // $--color-info: #1E1E1E;
$--button-font-weight: 400; $--button-font-weight: 400;
......
src/assets/styles/index.scss
浏览文件 @ f2091d07
...@@ -11,6 +11,9 @@ body { ...@@ -11,6 +11,9 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; 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 { label {
...@@ -45,11 +48,11 @@ a:active { ...@@ -45,11 +48,11 @@ a:active {
outline: none; outline: none;
} }
// 默认链接样式会被后面的全局链接样式覆盖
a, a,
a:focus, a:focus,
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: inherit;
text-decoration: none; text-decoration: none;
} }
...@@ -97,10 +100,10 @@ div:focus { ...@@ -97,10 +100,10 @@ div:focus {
} }
aside { aside {
background: #eef1f6; background: #f0f7ff; // 浅蓝色背景
padding: 8px 24px; padding: 8px 24px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 2px; border-radius: 4px;
display: block; display: block;
line-height: 32px; line-height: 32px;
font-size: 16px; font-size: 16px;
...@@ -108,20 +111,56 @@ aside { ...@@ -108,20 +111,56 @@ aside {
color: #2c3e50; color: #2c3e50;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
border-left: 3px solid #409EFF; // 蓝色左边框
a { a {
color: #337ab7; color: #409EFF; // 蓝色链接
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: #66B1FF; // 浅蓝色悬停
} }
} }
} }
//main-container全局样式 //main-container全局样式 - 浅色渐变背景
.app-container { .app-container {
padding: 20px; 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 { .components-container {
...@@ -137,6 +176,53 @@ aside { ...@@ -137,6 +176,53 @@ aside {
text-align: center 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 { .sub-navbar {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
...@@ -145,11 +231,14 @@ aside { ...@@ -145,11 +231,14 @@ aside {
text-align: right; text-align: right;
padding-right: 20px; padding-right: 20px;
transition: 600ms ease position; 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 { .subtitle {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
font-weight: 500;
} }
&.draft { &.draft {
...@@ -163,11 +252,12 @@ aside { ...@@ -163,11 +252,12 @@ aside {
.link-type, .link-type,
.link-type:focus { .link-type:focus {
color: #337ab7; color: #409EFF; // 蓝色链接
cursor: pointer; cursor: pointer;
transition: color 0.3s;
&:hover { &:hover {
color: rgb(32, 160, 255); color: #66B1FF; // 浅蓝色悬停
} }
} }
......
src/assets/styles/ruoyi.scss
浏览文件 @ f2091d07
...@@ -75,10 +75,12 @@ ...@@ -75,10 +75,12 @@
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper, .el-table__fixed-header-wrapper {
th { th {
word-break: break-word; word-break: break-word;
background-color: #f8f8f9; background-color: #f0f7ff; // 浅蓝色表头背景
color: #515a6e; color: #409EFF; // 蓝色表头文字
height: 40px; height: 40px;
font-size: 13px; font-size: 13px;
font-weight: 600;
border-bottom: 2px solid #409EFF; // 蓝色底部边框
} }
} }
.el-table__body-wrapper { .el-table__body-wrapper {
...@@ -86,15 +88,21 @@ ...@@ -86,15 +88,21 @@
margin-left: 1px; margin-left: 1px;
} }
} }
// 表格行悬停效果
.el-table__body tr:hover > td {
background-color: #f0f7ff !important; // 浅蓝色悬停背景
}
} }
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size:15px; font-size:15px;
color:#6379bb; color:#409EFF; // 蓝色标题
border-bottom:1px solid #ddd; border-bottom:2px solid #409EFF; // 蓝色底部边框
margin:8px 10px 25px 10px; margin:8px 10px 25px 10px;
padding-bottom:5px padding-bottom:5px;
font-weight: 500;
} }
/** 表格布局 **/ /** 表格布局 **/
...@@ -109,14 +117,31 @@ ...@@ -109,14 +117,31 @@
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #409EFF; // 蓝色边框
background: #FFFFFF none; background: #FFFFFF none;
border-radius:4px; border-radius:4px;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1); // 蓝色阴影
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; right: 0;
position: absolute; 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) { @media ( max-width : 768px) {
...@@ -137,8 +162,13 @@ ...@@ -137,8 +162,13 @@
/** 表格更多操作下拉样式 */ /** 表格更多操作下拉样式 */
.el-table .el-dropdown-link { .el-table .el-dropdown-link {
cursor: pointer; cursor: pointer;
color: #409EFF; color: #409EFF; // 蓝色链接
margin-left: 5px; margin-left: 5px;
transition: color 0.3s;
&:hover {
color: #66B1FF; // 浅蓝色悬停
}
} }
.el-table .el-dropdown, .el-icon-arrow-down { .el-table .el-dropdown, .el-icon-arrow-down {
...@@ -175,8 +205,16 @@ ...@@ -175,8 +205,16 @@
} }
.el-card__header { .el-card__header {
padding: 14px 15px 7px; padding: 16px 20px 10px 20px;
min-height: 40px; 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 { .el-card__body {
...@@ -186,7 +224,21 @@ ...@@ -186,7 +224,21 @@
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 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 */ /* button color */
...@@ -210,33 +262,33 @@ ...@@ -210,33 +262,33 @@
color: #FFFFFF; color: #FFFFFF;
} }
/* text color */ /* text color - 蓝色主题 */
.text-navy { .text-navy {
color: #1ab394; color: #409EFF; // 蓝色
} }
.text-primary { .text-primary {
color: inherit; color: #409EFF; // 主题蓝色
} }
.text-success { .text-success {
color: #1c84c6; color: #67C23A;
} }
.text-info { .text-info {
color: #23c6c8; color: #409EFF; // 信息色使用蓝色
} }
.text-warning { .text-warning {
color: #f8ac59; color: #E6A23C;
} }
.text-danger { .text-danger {
color: #ed5565; color: #F56C6C;
} }
.text-muted { .text-muted {
color: #888888; color: #909399;
} }
/* image */ /* image */
......
src/assets/styles/sidebar.scss
浏览文件 @ f2091d07
...@@ -76,16 +76,34 @@ ...@@ -76,16 +76,34 @@
white-space: nowrap !important; white-space: nowrap !important;
} }
// menu hover // menu hover - 蓝色主题
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
&:hover { &: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 { & .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
background-color: $base-menu-active-background !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
...@@ -93,16 +111,23 @@ ...@@ -93,16 +111,23 @@
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
&:hover { &: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 .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item { & .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important; background-color: $base-sub-menu-background !important;
&:hover { &: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 // base color - 蓝色主题色系
$blue:#324157; $blue:#409EFF; // 主蓝色（Element UI 标准蓝）
$light-blue:#3A71A8; $light-blue:#66B1FF; // 浅蓝色
$dark-blue:#337AB7; // 深蓝色，用于标题等
$primary-blue:#409EFF; // 主题蓝色
$red:#C03639; $red:#C03639;
$pink: #E65D6E; $pink: #E65D6E;
$green: #30B08F; $green: #30B08F;
...@@ -8,18 +10,21 @@ $tiffany: #4AB7BD; ...@@ -8,18 +10,21 @@ $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格 - 蓝色主题
$base-menu-color:#bfcbd9; $base-menu-color:#bfcbd9; // 未激活菜单文字颜色
$base-menu-color-active:#f4f4f5; $base-menu-color-active:#ffffff; // 激活菜单文字颜色（白色）
$base-menu-background:#304156; $base-menu-background:#304156; // 菜单背景色（深灰蓝）
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff; // Logo文字颜色
// 激活菜单项背景色（蓝色主题）
$base-menu-active-background:#409EFF; // 激活菜单项背景色（蓝色）
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; $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-background:#1f2d3d;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#409EFF; // 子菜单悬停颜色（蓝色）
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**
......
src/layout/components/AppMain.vue
浏览文件 @ f2091d07
...@@ -29,6 +29,35 @@ export default { ...@@ -29,6 +29,35 @@ export default {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; 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 { .fixed-header+.app-main {
......
src/layout/components/Navbar.vue
浏览文件 @ f2091d07
...@@ -115,8 +115,10 @@ export default { ...@@ -115,8 +115,10 @@ export default {
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: #ffffff; // 纯白色背景，适配浅色主题
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 2px 12px rgba(64, 158, 255, 0.08); // 柔和的蓝色阴影
border-bottom: 1px solid #e8ecf0; // 更浅的边框
backdrop-filter: blur(10px); // 毛玻璃效果
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
...@@ -127,7 +129,8 @@ export default { ...@@ -127,7 +129,8 @@ export default {
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(64, 158, 255, 0.1); // 浅蓝色悬停背景
color: #409EFF; // 蓝色图标
} }
} }
...@@ -159,15 +162,17 @@ export default { ...@@ -159,15 +162,17 @@ export default {
padding: 0 8px; padding: 0 8px;
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
color: #5a5e66; color: #606266;
vertical-align: text-bottom; vertical-align: text-bottom;
transition: all .3s;
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background .3s; transition: all .3s;
&:hover { &: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 { ...@@ -71,6 +71,9 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
// 整体浅色渐变背景
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 30%, #f0f7ff 100%);
background-attachment: fixed;
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
......
src/views/datax/json-build/reader/RDBMSReader.vue
浏览文件 @ f2091d07
...@@ -171,6 +171,7 @@ export default { ...@@ -171,6 +171,7 @@ export default {
tableName: this.readerForm.tableName tableName: this.readerForm.tableName
} }
dsQueryApi.getColumns(obj).then(response => { dsQueryApi.getColumns(obj).then(response => {
this.rColumnList = response.data this.rColumnList = response.data
this.readerForm.columns = response.data this.readerForm.columns = response.data
this.readerForm.checkAll = true this.readerForm.checkAll = true
......
src/views/login.vue
浏览文件 @ f2091d07
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论