feat: 更新UI主题和样式，优化页面布局和交互
- 将侧边栏主题从深色改为浅色 - 移除多个组件的背景色和金属风格样式 - 调整按钮、表格和分页组件的样式和间距 - 新增easycode扫码功能页面 - 更新基础URL配置和应用版本号 - 优化登录后跳转逻辑和登出功能 - 调整滚动条和菜单项的样式
This commit is contained in:
砂糖
@@ -1,7 +1,7 @@
|
|||||||
// 应用全局配置
|
// 应用全局配置
|
||||||
module.exports = {
|
module.exports = {
|
||||||
baseUrl: 'http://192.168.31.116:8080',
|
// baseUrl: 'http://192.168.31.116:8080',
|
||||||
// baseUrl: 'http://140.143.206.120:8080',
|
baseUrl: 'http://140.143.206.120:8080',
|
||||||
// baseUrl: 'http://localhost:8080',
|
// baseUrl: 'http://localhost:8080',
|
||||||
// 应用信息
|
// 应用信息
|
||||||
appInfo: {
|
appInfo: {
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
"name" : "科伦普",
|
"name" : "科伦普",
|
||||||
"appid" : "__UNI__E781B49",
|
"appid" : "__UNI__E781B49",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.2.0",
|
"versionName" : "3.4",
|
||||||
"versionCode" : "100",
|
"versionCode" : 1,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
"usingComponents" : true,
|
"usingComponents" : true,
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"pages": [
|
"pages": [
|
||||||
{
|
{
|
||||||
"path": "pages/index",
|
"path" : "pages/easycode/easycode",
|
||||||
"style": {
|
"style" :
|
||||||
"navigationBarTitleText": "首页",
|
{
|
||||||
|
"navigationBarTitleText" : "扫码",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -13,6 +14,13 @@
|
|||||||
"navigationBarTitleText": "登录"
|
"navigationBarTitleText": "登录"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "首页",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"path": "pages/mine/index",
|
"path": "pages/mine/index",
|
||||||
@@ -91,28 +99,28 @@
|
|||||||
"navigationBarTitleText": "RuoYi",
|
"navigationBarTitleText": "RuoYi",
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
},
|
},
|
||||||
"tabBar": {
|
// "tabBar": {
|
||||||
"list": [
|
// "list": [
|
||||||
{
|
// {
|
||||||
"text": "产线",
|
// "text": "产线",
|
||||||
"pagePath": "pages/index",
|
// "pagePath": "pages/index",
|
||||||
"selectedIconPath": "/static/images/tabbar/home_.png",
|
// "selectedIconPath": "/static/images/tabbar/home_.png",
|
||||||
"iconPath": "/static/images/tabbar/home.png"
|
// "iconPath": "/static/images/tabbar/home.png"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"text": "扫码",
|
// "text": "扫码",
|
||||||
"pagePath": "pages/code/code",
|
// "pagePath": "pages/code/code",
|
||||||
"selectedIconPath": "/static/images/tabbar/work_.png",
|
// "selectedIconPath": "/static/images/tabbar/work_.png",
|
||||||
"iconPath": "/static/images/tabbar/work.png"
|
// "iconPath": "/static/images/tabbar/work.png"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"text": "我的",
|
// "text": "我的",
|
||||||
"pagePath": "pages/mine/index",
|
// "pagePath": "pages/mine/index",
|
||||||
"selectedIconPath": "/static/images/tabbar/mine_.png",
|
// "selectedIconPath": "/static/images/tabbar/mine_.png",
|
||||||
"iconPath": "/static/images/tabbar/mine.png"
|
// "iconPath": "/static/images/tabbar/mine.png"
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"autoscan": true,
|
"autoscan": true,
|
||||||
"custom": {
|
"custom": {
|
||||||
|
|||||||
60
apps/hand-factory/pages/easycode/easycode.vue
Normal file
60
apps/hand-factory/pages/easycode/easycode.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<button v-for='item in types' @click="handleScan(item.dictValue)">
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button @click='handleLogout'>
|
||||||
|
退出登录
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getDicts } from '@/api/system/dict/data.js'
|
||||||
|
import { getGenerateRecord } from '@/api/wms/code.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
types: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleLogout() {
|
||||||
|
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||||
|
this.$store.dispatch('LogOut').then(() => {}).finally(() => {
|
||||||
|
this.$tab.reLaunch('/pages/login')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleScan(type) {
|
||||||
|
// 1. 扫码
|
||||||
|
uni.scanCode({
|
||||||
|
success(res) {
|
||||||
|
const result = res.result;
|
||||||
|
// 2. 解析二维码的content，获取enter_coil_no、current_coil_no和coil_id
|
||||||
|
const qrcodeRecord = qrcodeRes.data;
|
||||||
|
const content = JSON.parse(qrcodeRecord.content);
|
||||||
|
const enterCoilNo = content.enter_coil_no;
|
||||||
|
const currentCoilNo = content.current_coil_no;
|
||||||
|
const coilId = content.coil_id && content.coil_id !== 'null' ? content.coil_id : null;
|
||||||
|
|
||||||
|
// 3. 调用创建待操作记录的API
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取字典
|
||||||
|
getDicts('easycode_type').then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.types = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
onLoad() {
|
onLoad() {
|
||||||
//#ifdef H5
|
//#ifdef H5
|
||||||
if (getToken()) {
|
if (getToken()) {
|
||||||
this.$tab.reLaunch('/pages/index')
|
this.$tab.reLaunch('/pages/easycode/easycode')
|
||||||
}
|
}
|
||||||
//#endif
|
//#endif
|
||||||
},
|
},
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
loginSuccess(result) {
|
loginSuccess(result) {
|
||||||
// 设置用户信息
|
// 设置用户信息
|
||||||
this.$store.dispatch('GetInfo').then(res => {
|
this.$store.dispatch('GetInfo').then(res => {
|
||||||
this.$tab.reLaunch('/pages/index')
|
this.$tab.reLaunch('/pages/easycode/easycode')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -103,9 +103,9 @@
|
|||||||
},
|
},
|
||||||
handleLogout() {
|
handleLogout() {
|
||||||
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||||
// this.$store.dispatch('LogOut').then(() => {}).finally(() => {
|
this.$store.dispatch('LogOut').then(() => {}).finally(() => {
|
||||||
this.$tab.reLaunch('/pages/login')
|
this.$tab.reLaunch('/pages/login')
|
||||||
// })
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleToEditInfo() {
|
handleToEditInfo() {
|
||||||
|
|||||||
@@ -41,11 +41,11 @@
|
|||||||
@include colorBtn($yellow)
|
@include colorBtn($yellow)
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-btn {
|
.el-button.pan-btn {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 14px 36px;
|
padding: 4px !important;
|
||||||
border-radius: 8px;
|
border-radius: 4px;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: 600ms ease all;
|
transition: 600ms ease all;
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-button {
|
.el-button.custom-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -93,7 +93,21 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px 15px;
|
padding: 2px !important;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border-radius: 4px;
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.el-table__cell {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__cell .el-button {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__cell + .el-button {
|
||||||
|
margin-left: 4px !important;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,8 @@
|
|||||||
**/
|
**/
|
||||||
|
|
||||||
/* theme color */
|
/* theme color */
|
||||||
$--color-primary: #647b98;
|
$--color-primary: #5F7BA0;
|
||||||
|
// $--color-primary: #2bf;
|
||||||
$--color-success: #13ce66;
|
$--color-success: #13ce66;
|
||||||
$--color-warning: #ffba00;
|
$--color-warning: #ffba00;
|
||||||
$--color-danger: #ff4949;
|
$--color-danger: #ff4949;
|
||||||
@@ -26,6 +27,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
|||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
// the :export directive is the magic sauce for webpack
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||||
:export {
|
// :export {
|
||||||
theme: $--color-primary;
|
// theme: $--color-primary;
|
||||||
}
|
// }
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ body {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
background-color: #a1a6ac;
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
291
apps/l2/src/assets/styles/klp.scss
Normal file
291
apps/l2/src/assets/styles/klp.scss
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
/**
|
||||||
|
* 通用css样式布局处理
|
||||||
|
* Copyright (c) 2019 klp
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 基础通用 **/
|
||||||
|
.pt5 {
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr5 {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb5 {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt5 {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr5 {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb5 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb8 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml5 {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb10 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.ml10 {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr20 {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.ml20 {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message-box__status + .el-message-box__message{
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog:not(.is-fullscreen) {
|
||||||
|
margin-top: 6vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
|
||||||
|
overflow: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
max-height: 70vh;
|
||||||
|
padding: 10px 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .el-table {
|
||||||
|
// .el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||||
|
// th {
|
||||||
|
// word-break: break-word;
|
||||||
|
// background-color: #f8f8f9;
|
||||||
|
// color: #515a6e;
|
||||||
|
// height: 40px;
|
||||||
|
// font-size: 13px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .el-table__body-wrapper {
|
||||||
|
// .el-button [class*="el-icon-"] + span {
|
||||||
|
// margin-left: 1px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
/** 表单布局 **/
|
||||||
|
// .form-header {
|
||||||
|
// font-size: 15px;
|
||||||
|
// color: #6379bb;
|
||||||
|
// border-bottom: 1px solid #ddd;
|
||||||
|
// margin: 8px 10px 25px 10px;
|
||||||
|
// padding-bottom: 5px
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /** 表格布局 **/
|
||||||
|
// .pagination-container {
|
||||||
|
// position: relative;
|
||||||
|
// height: 25px;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
// margin-top: 15px;
|
||||||
|
// padding: 10px 20px !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
/* tree border */
|
||||||
|
// .tree-border {
|
||||||
|
// margin-top: 5px;
|
||||||
|
// border: 1px solid #e5e6e7;
|
||||||
|
// background: #FFFFFF none;
|
||||||
|
// border-radius: 4px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .pagination-container .el-pagination {
|
||||||
|
// right: 0;
|
||||||
|
// position: absolute;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// @media (max-width: 768px) {
|
||||||
|
// .pagination-container .el-pagination > .el-pagination__jump {
|
||||||
|
// display: none !important;
|
||||||
|
// }
|
||||||
|
// .pagination-container .el-pagination > .el-pagination__sizes {
|
||||||
|
// display: none !important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .el-table .fixed-width .el-button--mini {
|
||||||
|
// padding-left: 0;
|
||||||
|
// padding-right: 0;
|
||||||
|
// width: inherit;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /** 表格更多操作下拉样式 */
|
||||||
|
// .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
|
||||||
|
// cursor: pointer;
|
||||||
|
// margin-left: 5px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .el-table .el-dropdown, .el-icon-arrow-down {
|
||||||
|
// font-size: 12px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .el-tree-node__content > .el-checkbox {
|
||||||
|
// margin-right: 8px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.list-group-striped > .list-group-item {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group {
|
||||||
|
padding-left: 0px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
border-bottom: 1px solid #e7eaec;
|
||||||
|
border-top: 1px solid #e7eaec;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
padding: 11px 0px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-right {
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__header {
|
||||||
|
padding: 14px 15px 7px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 15px 20px 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-box {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button color */
|
||||||
|
.el-button--cyan.is-active,
|
||||||
|
.el-button--cyan:active {
|
||||||
|
background: #20B2AA;
|
||||||
|
border-color: #20B2AA;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--cyan:focus,
|
||||||
|
.el-button--cyan:hover {
|
||||||
|
background: #48D1CC;
|
||||||
|
border-color: #48D1CC;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--cyan {
|
||||||
|
background-color: #20B2AA;
|
||||||
|
border-color: #20B2AA;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* text color */
|
||||||
|
.text-navy {
|
||||||
|
color: #1ab394;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-success {
|
||||||
|
color: #1c84c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-info {
|
||||||
|
color: #23c6c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-warning {
|
||||||
|
color: #f8ac59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-danger {
|
||||||
|
color: #ed5565;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* image */
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-lg {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-upload-preview {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 4px #ccc;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 拖拽列样式 */
|
||||||
|
.sortable-ghost {
|
||||||
|
opacity: .8;
|
||||||
|
color: #fff !important;
|
||||||
|
background: #42b983 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right-btn {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
@@ -1,415 +0,0 @@
|
|||||||
/**
|
|
||||||
* 通用css样式布局处理
|
|
||||||
* Copyright (c) 2019 ruoyi
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** 基础通用 **/
|
|
||||||
.pt5 {
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr5 {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb5 {
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt5 {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr5 {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb5 {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb8 {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml5 {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt10 {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr10 {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb10 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.ml10 {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt20 {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr20 {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb20 {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.ml20 {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.1;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message-box__status + .el-message-box__message{
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog:not(.is-fullscreen) {
|
|
||||||
margin-top: 6vh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
|
|
||||||
overflow: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
max-height: 70vh;
|
|
||||||
padding: 10px 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table {
|
|
||||||
/* 固定列表格容器背景与分割线 */
|
|
||||||
.el-table__fixed,
|
|
||||||
.el-table__fixed-left,
|
|
||||||
.el-table__fixed-right {
|
|
||||||
background: transparent; /* 让内部单元格背景生效 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__fixed::before,
|
|
||||||
.el-table__fixed-left::before,
|
|
||||||
.el-table__fixed-right::before {
|
|
||||||
/* 顶部那条细线颜色 */
|
|
||||||
background-color: #444A52;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 固定列表头 */
|
|
||||||
.el-table__fixed-header-wrapper th,
|
|
||||||
.el-table__fixed-left .el-table__fixed-header-wrapper th,
|
|
||||||
.el-table__fixed-right .el-table__fixed-header-wrapper th {
|
|
||||||
background: #1F2227 !important; /* 与主表头一致的深灰 */
|
|
||||||
color: #FFFFFF !important; /* 白字 */
|
|
||||||
border-bottom: 1px solid #444A52 !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 固定列表体单元格（奇偶行） */
|
|
||||||
.el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell,
|
|
||||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell,
|
|
||||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell {
|
|
||||||
background: #2F3339 !important; /* 中深灰 */
|
|
||||||
color: #EAEAEA !important; /* 浅灰白字 */
|
|
||||||
border-bottom: 1px solid #444A52 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell,
|
|
||||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell,
|
|
||||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell {
|
|
||||||
background: #353A40 !important; /* 稍亮一档 */
|
|
||||||
color: #EAEAEA !important;
|
|
||||||
border-bottom: 1px solid #444A52 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 固定列 hover / current-row 同步 */
|
|
||||||
.el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell,
|
|
||||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell,
|
|
||||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell {
|
|
||||||
background: rgba(95, 123, 160, 0.25) !important; /* 工业蓝 hover */
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell,
|
|
||||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell,
|
|
||||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell {
|
|
||||||
background: rgba(95, 123, 160, 0.35) !important; /* current-row 更明显 */
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 固定列滚动条（可选） */
|
|
||||||
.el-table__fixed-body-wrapper::-webkit-scrollbar,
|
|
||||||
.el-table__fixed-left .el-table__fixed-body-wrapper::-webkit-scrollbar,
|
|
||||||
.el-table__fixed-right .el-table__fixed-body-wrapper::-webkit-scrollbar {
|
|
||||||
width: 8px; height: 8px;
|
|
||||||
}
|
|
||||||
.el-table__fixed-body-wrapper::-webkit-scrollbar-thumb,
|
|
||||||
.el-table__fixed-left .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb,
|
|
||||||
.el-table__fixed-right .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb {
|
|
||||||
background: #4A525B; border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* =========================
|
|
||||||
Splitpanes 工业风深色主题
|
|
||||||
仍保留 default-theme 类名
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
/* 根容器：与页面主背景统一，去掉默认白底 */
|
|
||||||
.splitpanes.default-theme {
|
|
||||||
background: #2B2F36; /* 页面主底色 */
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pane：统一深灰金属风，提供一致的内边距 */
|
|
||||||
.splitpanes.default-theme .splitpanes__pane {
|
|
||||||
background: linear-gradient(145deg, #1F242A, #21262D) !important; /* 深灰渐变 */
|
|
||||||
color: #EAEAEA !important;
|
|
||||||
padding: 12px 12px; /* 两侧内容留白一致 */
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden; /* 保持干净 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左/右外侧圆角，仅在最外侧边缘展示，避免中缝突兀 */
|
|
||||||
.splitpanes.default-theme .splitpanes__pane:first-child {
|
|
||||||
border-radius: 8px 0 0 8px;
|
|
||||||
}
|
|
||||||
.splitpanes.default-theme .splitpanes__pane:last-child {
|
|
||||||
border-radius: 0 8px 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 分隔条（splitter）：工业灰，hover 工业蓝，带内嵌“握把” */
|
|
||||||
.splitpanes.default-theme .splitpanes__splitter {
|
|
||||||
position: relative;
|
|
||||||
background: #39414A !important; /* 静态 */
|
|
||||||
transition: background .2s ease;
|
|
||||||
}
|
|
||||||
.splitpanes.default-theme .splitpanes__splitter:hover {
|
|
||||||
background: #46505A !important; /* 悬停稍亮 */
|
|
||||||
}
|
|
||||||
/* 把握把做成中线，水平/垂直两种方向都美观 */
|
|
||||||
.splitpanes.default-theme .splitpanes__splitter::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
border-radius: 2px;
|
|
||||||
background: #4A525B;
|
|
||||||
}
|
|
||||||
.splitpanes.default-theme.splitpanes--vertical .splitpanes__splitter::before {
|
|
||||||
width: 2px; height: 60%;
|
|
||||||
}
|
|
||||||
.splitpanes.default-theme.splitpanes--horizontal .splitpanes__splitter::before {
|
|
||||||
height: 2px; width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pane 内滚动条（如果有）与全站一致 */
|
|
||||||
.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
||||||
.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar-thumb {
|
|
||||||
background: #4A525B; border-radius: 6px;
|
|
||||||
}
|
|
||||||
.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar-track { background: transparent; }
|
|
||||||
|
|
||||||
/* 可选：让右侧主区域看起来像一张卡片（若你的右 pane 是内容主区） */
|
|
||||||
.splitpanes.default-theme .splitpanes__pane:last-child {
|
|
||||||
box-shadow: 0 12px 24px rgba(0,0,0,.25) inset,
|
|
||||||
0 1px 0 rgba(255,255,255,.04) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 可选：在窄屏时减小 pane 内边距，避免拥挤 */
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.splitpanes.default-theme .splitpanes__pane { padding: 8px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 表单布局 **/
|
|
||||||
.form-header {
|
|
||||||
font-size: 15px;
|
|
||||||
color: #6379bb;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
margin: 8px 10px 25px 10px;
|
|
||||||
padding-bottom: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 表格布局 **/
|
|
||||||
.pagination-container {
|
|
||||||
position: relative;
|
|
||||||
height: 25px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-top: 15px;
|
|
||||||
padding: 10px 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tree border */
|
|
||||||
.tree-border {
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 1px solid #e5e6e7;
|
|
||||||
background: #FFFFFF none;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-container .el-pagination {
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.pagination-container .el-pagination > .el-pagination__jump {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table .fixed-width .el-button--mini {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
width: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 表格更多操作下拉样式 */
|
|
||||||
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table .el-dropdown, .el-icon-arrow-down {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tree-node__content > .el-checkbox {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-striped > .list-group-item {
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group {
|
|
||||||
padding-left: 0px;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item {
|
|
||||||
border-bottom: 1px solid #e7eaec;
|
|
||||||
border-top: 1px solid #e7eaec;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
padding: 11px 0px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull-right {
|
|
||||||
float: right !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-card__header {
|
|
||||||
padding: 14px 15px 7px;
|
|
||||||
min-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-card__body {
|
|
||||||
padding: 15px 20px 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* button color */
|
|
||||||
.el-button--cyan.is-active,
|
|
||||||
.el-button--cyan:active {
|
|
||||||
background: #20B2AA;
|
|
||||||
border-color: #20B2AA;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--cyan:focus,
|
|
||||||
.el-button--cyan:hover {
|
|
||||||
background: #48D1CC;
|
|
||||||
border-color: #48D1CC;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--cyan {
|
|
||||||
background-color: #20B2AA;
|
|
||||||
border-color: #20B2AA;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* text color */
|
|
||||||
.text-navy {
|
|
||||||
color: #1ab394;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-success {
|
|
||||||
color: #1c84c6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-info {
|
|
||||||
color: #23c6c8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-warning {
|
|
||||||
color: #f8ac59;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-danger {
|
|
||||||
color: #ed5565;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-muted {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* image */
|
|
||||||
.img-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-lg {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-preview {
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 0 4px #ccc;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 拖拽列样式 */
|
|
||||||
.sortable-ghost {
|
|
||||||
opacity: .8;
|
|
||||||
color: #fff !important;
|
|
||||||
background: #42b983 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-right-btn {
|
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
@@ -4,13 +4,14 @@
|
|||||||
--text-regular: #333333;
|
--text-regular: #333333;
|
||||||
--text-secondary: #555555;
|
--text-secondary: #555555;
|
||||||
--text-placeholder: #777777;
|
--text-placeholder: #777777;
|
||||||
|
--background-color: #fff;
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: margin-left .28s, box-shadow .3s ease;
|
transition: margin-left .28s, box-shadow .3s ease;
|
||||||
margin-left: $base-sidebar-width;
|
margin-left: $base-sidebar-width;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #3f4449; // 金属浅色渐变
|
// background: #1E2227; // 金属浅色渐变
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarHide {
|
.sidebarHide {
|
||||||
@@ -21,7 +22,7 @@
|
|||||||
-webkit-transition: width .28s, background .3s ease;
|
-webkit-transition: width .28s, background .3s ease;
|
||||||
transition: width 0.28s, background .3s ease;
|
transition: width 0.28s, background .3s ease;
|
||||||
width: $base-sidebar-width !important;
|
width: $base-sidebar-width !important;
|
||||||
background: #3f4449; // 金属深色渐变
|
background: var(--background-color); // 金属深色渐变
|
||||||
border-right: 1px solid #8d939b;
|
border-right: 1px solid #8d939b;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -44,11 +45,12 @@
|
|||||||
|
|
||||||
.el-scrollbar__bar.is-vertical {
|
.el-scrollbar__bar.is-vertical {
|
||||||
right: 0px;
|
right: 0px;
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: #2Bf;
|
||||||
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar__thumb {
|
.el-scrollbar__thumb {
|
||||||
background: #1E2227;
|
background: var(--background-color);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -86,7 +88,8 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item, .el-submenu__title {
|
.el-menu-item,
|
||||||
|
.el-submenu__title {
|
||||||
// 明确默认状态样式（关键修复）
|
// 明确默认状态样式（关键修复）
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
@@ -96,7 +99,7 @@
|
|||||||
white-space: nowrap !important;
|
white-space: nowrap !important;
|
||||||
color: var(--text-regular); // 菜单项文本偏黑
|
color: var(--text-regular); // 菜单项文本偏黑
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 0 6px;
|
margin: 0;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,13 +114,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 深色主题下子菜单选中高亮
|
|
||||||
& .theme-dark .is-active > .el-submenu__title {
|
|
||||||
color: #fff !important; // 选中时文字纯白
|
|
||||||
// background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
|
|
||||||
// border-left: 3px solid #5F7BA0; // 左边高亮条
|
|
||||||
}
|
|
||||||
|
|
||||||
// & .nest-menu .el-submenu>.el-submenu__title,
|
// & .nest-menu .el-submenu>.el-submenu__title,
|
||||||
& .el-submenu .el-menu-item {
|
& .el-submenu .el-menu-item {
|
||||||
// 子菜单默认样式
|
// 子菜单默认样式
|
||||||
@@ -145,13 +141,20 @@
|
|||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
|
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
|
||||||
color: #fff !important; // 激活文字白色
|
color: #000 !important; // 激活文字白色
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-left: 3px solid #5F7BA0; // 左边高亮条
|
border-left: 3px solid #5F7BA0; // 左边高亮条
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active.submenu-title-noDropdown {
|
||||||
|
background: #657b96; // 激活背景
|
||||||
|
color: #000; // 激活文字白色
|
||||||
|
font-weight: 600;
|
||||||
|
border-left: 3px solid #657b96; // 左边高亮条
|
||||||
|
}
|
||||||
|
|
||||||
.hideSidebar {
|
.hideSidebar {
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
width: 54px !important;
|
width: 54px !important;
|
||||||
@@ -205,6 +208,10 @@
|
|||||||
min-width: $base-sidebar-width !important;
|
min-width: $base-sidebar-width !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-submenu .el-menu {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
// mobile responsive
|
// mobile responsive
|
||||||
.mobile {
|
.mobile {
|
||||||
.main-container {
|
.main-container {
|
||||||
@@ -227,6 +234,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.withoutAnimation {
|
.withoutAnimation {
|
||||||
|
|
||||||
.main-container,
|
.main-container,
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: none;
|
transition: none;
|
||||||
@@ -234,7 +242,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// when menu collapsed
|
// 收起状态下的菜单
|
||||||
.el-menu--vertical {
|
.el-menu--vertical {
|
||||||
&>.el-menu {
|
&>.el-menu {
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
@@ -293,7 +301,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#app .sidebar-container .el-menu-item,
|
#app .sidebar-container .nest-menu .el-submenu .el-submenu__title {
|
||||||
#app .sidebar-container .el-submenu__title {
|
margin: 0 4px;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
@@ -1,38 +1,45 @@
|
|||||||
// 基础金属色调
|
// base color
|
||||||
$metal-dark: #637994; // 主色调1 - 深金属色
|
$blue:#324157;
|
||||||
$metal-light: #bec3c9; // 主色调2 - 浅金属色
|
$light-blue:#3A71A8;
|
||||||
$metal-bg: #a1a6ac; // 背景主色调
|
$red:#C03639;
|
||||||
$metal-highlight: #d0d5db; // 金属高光色
|
$pink: #E65D6E;
|
||||||
$metal-shadow: #8c949d; // 金属阴影色
|
$green: #30B08F;
|
||||||
|
$tiffany: #4AB7BD;
|
||||||
|
$yellow:#FEC171;
|
||||||
|
$panGreen: #30B08F;
|
||||||
|
|
||||||
// 功能色（保持原有，但调整为金属质感）
|
// 默认菜单主题风格
|
||||||
$blue: mix($metal-dark, #324157, 30%);
|
$base-menu-color:#bfcbd9;
|
||||||
$light-blue: mix($metal-light, #3A71A8, 30%);
|
$base-menu-color-active:#f4f4f5;
|
||||||
$red: mix($metal-light, #C03639, 20%);
|
$base-menu-background:#304156;
|
||||||
$pink: mix($metal-light, #E65D6E, 20%);
|
$base-logo-title-color: #ffffff;
|
||||||
$green: mix($metal-light, #30B08F, 20%);
|
|
||||||
$tiffany: mix($metal-light, #4AB7BD, 20%);
|
|
||||||
$yellow: mix($metal-light, #FEC171, 20%);
|
|
||||||
$panGreen: mix($metal-light, #30B08F, 20%);
|
|
||||||
|
|
||||||
// 金属风格菜单主题
|
$base-menu-light-color:rgba(0,0,0,.70);
|
||||||
$base-menu-color: mix($metal-light, rgba(255, 255, 255, 0.7), 60%); // 菜单文字色
|
$base-menu-light-background:#ffffff;
|
||||||
$base-menu-color-active: #ffffff; // 激活菜单文字色
|
$base-logo-light-title-color: #001529;
|
||||||
$base-menu-background: linear-gradient(145deg, darken($metal-bg, 3%), $metal-bg); // 菜单背景
|
|
||||||
$base-logo-title-color: $metal-highlight; // Logo文字色
|
|
||||||
|
|
||||||
// 浅色金属菜单风格
|
$base-sub-menu-background:#1f2d3d;
|
||||||
$base-menu-light-color: mix($metal-dark, rgba(0, 0, 0, 0.7), 70%); // 浅色菜单文字色
|
$base-sub-menu-hover:#001528;
|
||||||
$base-menu-light-background: linear-gradient(145deg, $metal-bg, lighten($metal-bg, 3%)); // 浅色菜单背景
|
|
||||||
$base-logo-light-title-color: $metal-dark; // 浅色Logo文字色
|
|
||||||
|
|
||||||
// 子菜单样式
|
// 自定义暗色菜单风格
|
||||||
$base-sub-menu-background: darken($metal-bg, 5%); // 子菜单背景
|
/**
|
||||||
$base-sub-menu-hover: linear-gradient(145deg, $metal-bg, $metal-dark); // 子菜单悬停背景
|
$base-menu-color:hsla(0,0%,100%,.65);
|
||||||
|
$base-menu-color-active:#fff;
|
||||||
|
$base-menu-background:#001529;
|
||||||
|
$base-logo-title-color: #ffffff;
|
||||||
|
|
||||||
$base-sidebar-width: 200px; // 侧边栏宽度
|
$base-menu-light-color:rgba(0,0,0,.70);
|
||||||
|
$base-menu-light-background:#ffffff;
|
||||||
|
$base-logo-light-title-color: #001529;
|
||||||
|
|
||||||
// 导出变量供JS使用
|
$base-sub-menu-background:#000c17;
|
||||||
|
$base-sub-menu-hover:#001528;
|
||||||
|
*/
|
||||||
|
|
||||||
|
$base-sidebar-width: 200px;
|
||||||
|
|
||||||
|
// the :export directive is the magic sauce for webpack
|
||||||
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||||
:export {
|
:export {
|
||||||
menuColor: $base-menu-color;
|
menuColor: $base-menu-color;
|
||||||
menuLightColor: $base-menu-light-color;
|
menuLightColor: $base-menu-light-color;
|
||||||
@@ -43,9 +50,5 @@ $base-sidebar-width: 200px; // 侧边栏宽度
|
|||||||
subMenuHover: $base-sub-menu-hover;
|
subMenuHover: $base-sub-menu-hover;
|
||||||
sideBarWidth: $base-sidebar-width;
|
sideBarWidth: $base-sidebar-width;
|
||||||
logoTitleColor: $base-logo-title-color;
|
logoTitleColor: $base-logo-title-color;
|
||||||
logoLightTitleColor: $base-logo-light-title-color;
|
logoLightTitleColor: $base-logo-light-title-color
|
||||||
// 导出金属主题基础色供全局使用
|
|
||||||
metalDark: $metal-dark;
|
|
||||||
metalLight: $metal-light;
|
|
||||||
metalBg: $metal-bg;
|
|
||||||
}
|
}
|
||||||
@@ -93,9 +93,9 @@ export default {
|
|||||||
.app-breadcrumb.el-breadcrumb {
|
.app-breadcrumb.el-breadcrumb {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 50px;
|
line-height: 40px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
color: #fff;
|
color: #111;
|
||||||
.no-redirect {
|
.no-redirect {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
@@ -103,6 +103,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
|
.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
|
||||||
color: #fff;
|
color: #111;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -43,6 +43,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: #fff;
|
fill: #111;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<!-- <style lang="scss" scoped>
|
||||||
/* 工业风：石墨灰体系，深色背景适配。无蓝色。 */
|
/* 工业风：石墨灰体系，深色背景适配。无蓝色。 */
|
||||||
.pagination-container {
|
.pagination-container {
|
||||||
background: transparent; /* 不要白底 */
|
background: transparent; /* 不要白底 */
|
||||||
@@ -93,9 +93,9 @@ export default {
|
|||||||
|
|
||||||
/* sizes 选择器（下拉的输入框外观） */
|
/* sizes 选择器（下拉的输入框外观） */
|
||||||
.el-pagination__sizes .el-select .el-input .el-input__inner {
|
.el-pagination__sizes .el-select .el-input .el-input__inner {
|
||||||
background: var(--pg-bg);
|
// background: var(--pg-bg);
|
||||||
border-color: var(--pg-border);
|
// border-color: var(--pg-border);
|
||||||
color: var(--pg-text);
|
// color: var(--pg-text);
|
||||||
}
|
}
|
||||||
.el-pagination__sizes .el-select .el-input .el-input__inner:hover {
|
.el-pagination__sizes .el-select .el-input .el-input__inner:hover {
|
||||||
background: var(--pg-bg-hover);
|
background: var(--pg-bg-hover);
|
||||||
@@ -183,4 +183,4 @@ export default {
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style> -->
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export default {
|
|||||||
.app-main {
|
.app-main {
|
||||||
/* 50= navbar 50 */
|
/* 50= navbar 50 */
|
||||||
min-height: calc(100vh - 50px);
|
min-height: calc(100vh - 50px);
|
||||||
background-color: #3f4449;
|
// background-color: #3f4449;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@@ -104,7 +104,7 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
// 金属质感渐变背景
|
// 金属质感渐变背景
|
||||||
background: #454c51;
|
// background: #454c51;
|
||||||
border-bottom: 1px solid #8d939b;
|
border-bottom: 1px solid #8d939b;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
|
||||||
0 1px 1px rgba(255, 255, 255, 0.08) inset;
|
0 1px 1px rgba(255, 255, 255, 0.08) inset;
|
||||||
@@ -156,7 +156,7 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
// 金属风格文字色
|
// 金属风格文字色
|
||||||
color: #ddd;
|
color: #111;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
|||||||
@@ -3,11 +3,11 @@
|
|||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
active-text-color="#fff"
|
active-text-color="#000"
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
text-color="#111"
|
||||||
:unique-opened="true"
|
:unique-opened="true"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
|
|||||||
@@ -242,7 +242,7 @@ export default {
|
|||||||
height: 34px;
|
height: 34px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// 金属浅色渐变背景（直接写死渐变值）
|
// 金属浅色渐变背景（直接写死渐变值）
|
||||||
background: #454c51;
|
// background: #454c51;
|
||||||
border-bottom: 1px solid #a0a6ad;
|
border-bottom: 1px solid #a0a6ad;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
|
||||||
|
|
||||||
@@ -254,9 +254,9 @@ export default {
|
|||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
border: 1px solid #a0a6ad;
|
border: 1px solid #a0a6ad;
|
||||||
color: #fff;
|
// color: #fff;
|
||||||
// 标签金属渐变背景
|
// 标签金属渐变背景
|
||||||
background: #454c51;
|
// background: #454c51;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|||||||
@@ -76,7 +76,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.drawer-bg {
|
.drawer-bg {
|
||||||
background: #000;
|
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import Element from 'element-ui'
|
|||||||
import './assets/styles/element-variables.scss'
|
import './assets/styles/element-variables.scss'
|
||||||
|
|
||||||
import '@/assets/styles/index.scss' // global css
|
import '@/assets/styles/index.scss' // global css
|
||||||
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
// import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ module.exports = {
|
|||||||
/**
|
/**
|
||||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||||
*/
|
*/
|
||||||
sideTheme: 'theme-dark',
|
sideTheme: 'theme-light',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 系统布局配置
|
* 系统布局配置
|
||||||
|
|||||||
@@ -44,8 +44,8 @@
|
|||||||
<Pagination
|
<Pagination
|
||||||
v-show="pagination.total>0"
|
v-show="pagination.total>0"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
v-model:page="pagination.currentPage"
|
:page.sync="pagination.currentPage"
|
||||||
v-model:limit="pagination.pageSize"
|
:limit.sync="pagination.pageSize"
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -175,7 +175,7 @@ export default {
|
|||||||
// 从父组件调用的查询方法
|
// 从父组件调用的查询方法
|
||||||
getList(params) {
|
getList(params) {
|
||||||
console.log('接收到父组件的搜索参数:', params)
|
console.log('接收到父组件的搜索参数:', params)
|
||||||
this.pagination.currentPage = 1
|
// this.pagination.currentPage = 1
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
<el-table-column prop="rolledLength" label="长度" width="70" />
|
<el-table-column prop="rolledLength" label="长度" width="70" />
|
||||||
<el-table-column prop="rolledWeight" label="重量" width="70" />
|
<el-table-column prop="rolledWeight" label="重量" width="70" />
|
||||||
<el-table-column prop="rolledCount" label="轧制数量" width="75" />
|
<el-table-column prop="rolledCount" label="轧制数量" width="75" />
|
||||||
<el-table-column prop="instalTime" label="装机时间" width="133" />
|
<el-table-column prop="instalTime" label="装机时间" width="160" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user