diff --git a/src/assets/fonts/FileZilla_Server_1.9.4_win64-setup.exe b/src/assets/fonts/FileZilla_Server_1.9.4_win64-setup.exe new file mode 100644 index 0000000..49ad7b4 Binary files /dev/null and b/src/assets/fonts/FileZilla_Server_1.9.4_win64-setup.exe differ diff --git a/src/components/CustomTable/src/baseTable.scss b/src/components/CustomTable/src/baseTable.scss index 50f3dc8..fa28b69 100644 --- a/src/components/CustomTable/src/baseTable.scss +++ b/src/components/CustomTable/src/baseTable.scss @@ -2,6 +2,7 @@ /* 去掉表格整体边框 */ .el-table { border: none !important; + background-color: transparent; } /* 去掉表头下边框 */ .el-table__header-wrapper thead th { @@ -31,26 +32,30 @@ .el-scrollbar__view { background: transparent !important; } - .baseTable_box { + .el-table--large .el-table__cell { + padding: 8.5px 0; + } + + .baseTable_box { + cursor: pointer; .el-table__body { - background: linear-gradient(90deg, #082050 0%, #02102a 100%); + background: transparent; tr { color: #fff; - background: linear-gradient(90deg, #082050 0%, #02102a 100%); - &:nth-child(odd) { - background: linear-gradient(90deg, #082050 0%, #02102a 100%); - } - &:nth-child(even) { - background: linear-gradient(90deg, #102d65 0%, #081736 100%); - } + background: transparent; &:hover td { background-color: transparent; } + &:hover { + color: #37DBFF; + background: linear-gradient( 90deg, rgba(30,54,88,0) 0%, #0C4FAD 53%, rgba(65,117,190,0) 100%);; + } } } .el-table__header > thead { + color: #9fb5d7; background-color: #104284 !important; tr { background-color: #104284 !important; @@ -60,58 +65,41 @@ } } } - // .baseTable_box { - // position: relative; - // &.el-table td.el-table__cell, - // &.el-table th.el-table__cell.is-leaf { - // border-bottom: none !important; - // border-left: none !important; - // } - // .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { - // background-color: transparent; - // } - // .el-table__body { - // // border-collapse: collapse !important; - // /* 让边框独立,而不是合并 */ - // // border-spacing: -1px; - // /* 设置行与行之间的间距,可以根据需要调整值 */ - // // width: 100%; - - // /* 表格宽度占据父容器的100% */ - // tr { - // & > td:nth-child(1) { - // // border-left: 1px solid #dcdcdc; - // // border-radius: 4px 0 0 4px; - // border-left: none !important; - // border-right: none !important; - // } - - // & > td:nth-child(2n) { - // // border-left: 1px solid #dcdcdc; - // // border-radius: 4px 0 0 4px; - // } - // & > td { - // border-left: none !important; - // border-right: none !important; - // } - // color: #fff; - // &:nth-child(odd) { - // background: linear-gradient(90deg, #082050 0%, #02102a 100%); - // } - // &:nth-child(even) { - // background: linear-gradient(90deg, #102d65 0%, #081736 100%); - // } - // &:hover { - // background-color: transparent; - // } - // } - // } + /* full_table */ + &.full_table { + .el-table--large .el-table__cell { + padding: 4px 0; + } + .baseTable_box { + .el-table__body { + background: linear-gradient(90deg, #082050 0%, #02102a 100%); + tr { + color: #fff; + background: linear-gradient(90deg, #082050 0%, #02102a 100%); + &:nth-child(odd) { + background: linear-gradient(90deg, #082050 0%, #02102a 100%); + } + &:nth-child(even) { + background: linear-gradient(90deg, #102d65 0%, #081736 100%); + } + &:hover td { + background-color: transparent; + } + } + } - // &.el-table td.el-table__cell { - // border-bottom: none; - // border-top: none; - // } - // } + .el-table__header > thead { + color: #9fb5d7; + background-color: #104284 !important; + tr { + background-color: #104284 !important; + } + th { + background-color: #104284 !important; + } + } + } + } } .pagination_box { diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index d3bc441..8bf2ea0 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-06 15:42:11 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-11 14:24:17 + * @LastEditTime: 2025-03-11 15:42:37 * @FilePath: \vite-ai\data-dashboard\src\components\Navbar.vue * @Description: 标题栏 --> @@ -15,7 +15,6 @@ const logout = () => { userStore.logout() } -// TODO 完善整个导航栏交互 defineOptions({ name: "DsNavbar" }); @@ -46,9 +45,10 @@ function getTime() { const time = _formatNum(nowDate.getHours()) + ":" + - _formatNum(nowDate.getMinutes()) + - ":" + - _formatNum(nowDate.getSeconds()); + _formatNum(nowDate.getMinutes()) + // + + // ":" + + // _formatNum(nowDate.getSeconds()); let week = ""; switch (nowDate.getDay()) { case 0: @@ -134,10 +134,9 @@ onMounted(() => { .right { width: 30vw; .date_box { - // TODO 引入特殊字体 color: #009dff; font-size: 16px; - margin-right: 15px; + margin-right: 24px; font-family: DingTalk JinBuTi; &>span { padding-left: 5px; diff --git a/src/styles/common.scss b/src/styles/common.scss index bc1aa95..55a11e1 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -16,3 +16,7 @@ background-image: url("@/assets/header/title#{$i}.png"); } } + +.bg_basic_content{ + background: linear-gradient( 180deg, rgba(7,16,19,0) 0%, #081417 100%);; +} diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss index ddf9b03..2cacf7b 100644 --- a/src/styles/element-plus.scss +++ b/src/styles/element-plus.scss @@ -1,10 +1,29 @@ +// 覆盖 ElementPlus 的主色变量 + +// $--color-primary: #ff6600; // 设置主色为橙色 +// $--el-color-primary: red; +/* 自定义 Element Plus 变量 */ +@forward "element-plus/theme-chalk/src/common/var.scss" with ( + $colors: ( + "primary": ( + "base": #2de6ff, + ), + ), + $select-dropdown: ( + "background-color": red, + ) + // $el-pagination: ( +// --el-pagination-button-height-small: 24px; +// ) +); + +/* 引入 Element Plus 样式 */ +@use "element-plus/theme-chalk/src/index.scss" as *; /* 表格 */ -.ds_table{ +.ds_table { position: relative; } /* 分页栏 */ -.pagination_wrap { -} .fixed_pagination { // width: calc(100% - 136px); // background-color: white; @@ -15,7 +34,7 @@ justify-content: flex-end; right: 0; bottom: 0; - padding: 20px 0 10px; + padding: 28px 20px; } .noneFixed_pagination { display: flex; @@ -23,21 +42,78 @@ justify-content: flex-end; padding: 20px 0; } +.el-select--small .el-select__wrapper { + min-height: 28px; + line-height: 24px; +} +.el-pagination { + button { + background-color: transparent; + color: white; + } + button:disabled, + button.is-disabled { + background-color: transparent; + } + .el-pagination--small .btn-prev, + .el-pagination--small .btn-next, + .el-pagination--small .el-pager li { + height: 28px; + line-height: 28px; + min-width: 28px; + } + .el-select__placeholder { + color: white; + } + .el-select--small .el-select__wrapper { + width: 92px; + } + .el-select--small .el-select__wrapper { + padding: 2px 15px; + } + .el-pagination__jump { + color: white; + .el-input { + width: 40px; + height: 28px; + } + .el-input__wrapper { + background-color: transparent; + .el-input__inner { + color: white; + line-height: 24px; + } + } + } +} +.el-pager li { + background-color: transparent; + color: white; +} + +/* 下拉选择 */ .custom-select { - min-width: 150px; - max-width: 300px; + width: 150px; + .el-select__selected-item { + color: white; /* 文字颜色 */ + } .el-select__wrapper { background: rgba(74, 126, 191, 0.1); /* 下拉框背景色 */ border: 1px solid transparent; /* 边框 */ color: white; /* 文字颜色 */ - height: 40px; + height: 32px; box-shadow: none; + &::placeholder { color: rgba(255, 255, 255, 0.6); /* 占位符颜色 */ } } + .el-select__wrapper { + min-height: 32px; + line-height: 32px; + } .el-select__arrow { color: rgba(255, 255, 255, 0.6); /* 下拉箭头颜色 */ } @@ -46,31 +122,30 @@ } } -.el-select { - background-color: #032B5C; /* 自定义背景色 */ +.custom-select { + background-color: #032b5c; /* 自定义背景色 */ border: none; /* 可选:去掉边框 */ } /* 修改下拉菜单背景色 */ .el-select-dropdown { - background-color: #032B5C; /* 下拉菜单背景 */ + background-color: #032b5c; /* 下拉菜单背景 */ border: none; /* 可选:去掉下拉框边框 */ - border: 1px solid #032B5C; + border: 1px solid #032b5c; box-shadow: none; /* 可选:去掉阴影 */ } +/* 修改普通选项文字颜色 */ +.el-select-dropdown__item { + color: white; /* 下拉选项文字颜色 */ +} -.el-select__dropdown { - background: #002a5c; /* 下拉面板背景 */ - .el-select__item { - color: white; /* 下拉选项文字颜色 */ - &:hover { - background: rgba(74, 126, 191, 0.3); /* 选项悬停背景 */ - } - } +.el-select-dropdown__item.is-hovering { + background-color: #2de6ff; + color: white; } /* table */ -.el-table{ +.el-table { // background-color: transparent; } .table_action_box { @@ -84,4 +159,62 @@ .el-table--border::before, .el-table__inner-wrapper::before { background-color: transparent !important; -} \ No newline at end of file +} + +/* 分页 */ +.el-pagination { + .el-pagination__total { + color: white; + } + .el-select { + background-color: transparent; /* 自定义背景色 */ + border: none; /* 可选:去掉边框 */ + } + .el-select__wrapper { + background-color: transparent; + } +} + +/* 按钮 */ +.basic-btn { + height: 32px; + width: 76px; + margin: 0; + &.el-button { + margin-left: 0; + } +} + +.query-btn { + background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%); + border: 1px solid #42a5f5; + border-radius: 2px; + color: white; + margin-left: 0; + & .icon { + width: 14px; + height: 14px; + background-image: url("@/assets/common/search_icon.png"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-right: 5px; + } +} + +.reset-btn { + background: transparent; + border-radius: 2px; + border: 1px solid #088bd6; + color: white; + box-shadow: none; + & .icon { + width: 14px; + height: 14px; + background-image: url("@/assets/common/reset_icon.png"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-right: 5px; + } +} diff --git a/src/utils/local.ts b/src/utils/local.ts index 8c9296c..458c5f5 100644 --- a/src/utils/local.ts +++ b/src/utils/local.ts @@ -1,9 +1,17 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-03-10 13:45:52 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-03-11 15:29:40 + * @FilePath: \5G-Loading-Bay-Web\src\utils\local.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ /** * get localStorage 获取本地存储 * @param { String } key */ export function getLocal(key: string) { - if (!key) throw new Error("key is empty"); + // if (!key) throw new Error("key is empty"); const value = localStorage.getItem(key); return value ? JSON.parse(value) : null; } diff --git a/src/views/dashboard/DeviceStatus.scss b/src/views/dashboard/DeviceStatus.scss index 7cde320..871e9db 100644 --- a/src/views/dashboard/DeviceStatus.scss +++ b/src/views/dashboard/DeviceStatus.scss @@ -1,37 +1,11 @@ -.device-status-search-box { - display: flex; - align-items: center; - gap: 12px; - margin: 10px 0; - - - - .query-btn { - background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%); - border: 1px solid #42a5f5; - border-radius: 2px; - color: white; - padding: 8px 20px; - margin-left: 0; - } - - .reset-btn { - background: transparent; - border-radius: 2px; - border: 1px solid #088bd6; - color: white; - box-shadow: none; - margin-left: 0; - } -} .device-status-content-box{ .el-scrollbar__view { background: transparent !important; - height: 640px; + height: 600px; } .el-table__inner-wrapper{ - background-color: #002a5c !important; + background-color: transparent !important; } .el-table__body-wrapper, .el-scrollbar__wrap, .el-scrollbar{ background: transparent !important; diff --git a/src/views/dashboard/DeviceStatus.vue b/src/views/dashboard/DeviceStatus.vue index cb583ce..b8eed7f 100644 --- a/src/views/dashboard/DeviceStatus.vue +++ b/src/views/dashboard/DeviceStatus.vue @@ -1,69 +1,47 @@ - - @@ -127,25 +98,25 @@ const searchForm = ref({ faultType: 'all' }); const images = ref([ - 'https://picsum.photos/300/200?random=1', - 'https://picsum.photos/300/200?random=2', - 'https://picsum.photos/300/200?random=3', - 'https://picsum.photos/300/200?random=4', - 'https://picsum.photos/300/200?random=5' + 'https://picsum.photos/300/200?random=1', + 'https://picsum.photos/300/200?random=2', + 'https://picsum.photos/300/200?random=3', + 'https://picsum.photos/300/200?random=4', + 'https://picsum.photos/300/200?random=5' ]); const activeIndex = ref(-1); const handleSlideClick = (index) => { - console.log(index); - activeIndex.value = index; + console.log(index); + activeIndex.value = index; }; const swiperRef = ref(null); console.log(swiperRef.value); const onSwiper = (swiper) => { - swiperRef.value = swiper; - console.log('Swiper 实例已获取:', swiper); + swiperRef.value = swiper; + console.log('Swiper 实例已获取:', swiper); }; const onSlideChange = () => { - console.log("slide change"); + console.log("slide change"); }; const currentRow = ref>({}); @@ -195,11 +166,11 @@ const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 }); const listData = ref([]); -// const searchValue = ref(""); const formData = reactive({ name: "", - status: "" + status: "", + faultType: "", }); const dataLoading = ref(true); diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue index 92fc614..6bf1006 100644 --- a/src/views/login/Login.vue +++ b/src/views/login/Login.vue @@ -1,3 +1,11 @@ +