diff --git a/src/assets/icons/Bell.vue b/src/assets/icons/Bell.vue index d8c21fe..0acd162 100644 --- a/src/assets/icons/Bell.vue +++ b/src/assets/icons/Bell.vue @@ -1,5 +1,5 @@ - + + + diff --git a/src/assets/icons/Refresh.vue b/src/assets/icons/Refresh.vue new file mode 100644 index 0000000..3f80d6a --- /dev/null +++ b/src/assets/icons/Refresh.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/Search.vue b/src/assets/icons/Search.vue new file mode 100644 index 0000000..4210d2b --- /dev/null +++ b/src/assets/icons/Search.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/home/chart.vue b/src/assets/icons/home/chart.vue new file mode 100644 index 0000000..0c51a60 --- /dev/null +++ b/src/assets/icons/home/chart.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/home/earlyWarn.vue b/src/assets/icons/home/earlyWarn.vue new file mode 100644 index 0000000..4fbd220 --- /dev/null +++ b/src/assets/icons/home/earlyWarn.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/home/gather.vue b/src/assets/icons/home/gather.vue new file mode 100644 index 0000000..95351b9 --- /dev/null +++ b/src/assets/icons/home/gather.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/home/repaired.vue b/src/assets/icons/home/repaired.vue new file mode 100644 index 0000000..b187bdd --- /dev/null +++ b/src/assets/icons/home/repaired.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/home/setup.vue b/src/assets/icons/home/setup.vue new file mode 100644 index 0000000..063ff86 --- /dev/null +++ b/src/assets/icons/home/setup.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/home/user.vue b/src/assets/icons/home/user.vue new file mode 100644 index 0000000..7a19aa4 --- /dev/null +++ b/src/assets/icons/home/user.vue @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index c7ac7d2..a47d338 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -10,6 +10,10 @@ export { default as FilePpt } from './FilePpt.vue' export { default as Organization } from './Organization.vue' export { default as Upload } from './Upload.vue' export { default as Download } from './Download.vue' +export { default as Bell } from './Bell.vue' +export { default as Full } from './Full.vue' +export { default as Refresh } from './Refresh.vue' +export { default as Search } from './Search.vue' export { default as Home } from './menu/Home.vue' export { default as Setup } from './menu/Setup.vue' @@ -40,5 +44,11 @@ export { default as ReportForms } from './menu/ReportForms.vue' export { default as Shipment } from './menu/Shipment.vue' export { default as Stock } from './menu/Stock.vue' -export { default as Bell } from './Bell.vue' +export { default as Gather } from './home/gather.vue' +export { default as HomeChart } from './home/chart.vue' +export { default as EarlyWarn } from './home/earlyWarn.vue' +export { default as HomeSetup } from './home/setup.vue' +export { default as HomeUser } from './home/user.vue' +export { default as Repaired } from './home/repaired.vue' + diff --git a/src/config/index.js b/src/config/index.js index 8205b77..9028d9d 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -55,7 +55,7 @@ const DEFAULT_CONFIG = { LANG: "zh-cn", //主题颜色 - COLOR: "", + COLOR: "#1367C1", //是否加密localStorage, 为空不加密,可填写AES(模式ECB,移位Pkcs7)加密 LS_ENCRYPTION: "", diff --git a/src/layout/components/userbar.vue b/src/layout/components/userbar.vue index df1f347..f145bb8 100644 --- a/src/layout/components/userbar.vue +++ b/src/layout/components/userbar.vue @@ -1,13 +1,16 @@ - + - + - - + + + + + @@ -50,7 +53,7 @@ - {{ userNameF }} + {{ userNameF }} {{ userName }} diff --git a/src/layout/index.vue b/src/layout/index.vue index ee426f9..0a15d14 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -55,8 +55,8 @@ - - + + {{ $CONFIG.APP_NAME }} diff --git a/src/style/fix.scss b/src/style/fix.scss index 05ff168..fd67430 100644 --- a/src/style/fix.scss +++ b/src/style/fix.scss @@ -1,6 +1,9 @@ /* 覆盖element-plus样式 */ :root { + --el-color-white: #ffffff; + --el-color-dark: #222222; + --el-color-primary: #1367C1; --el-color-primary-light-1: #2a76c7; --el-color-primary-light-2: #4285cd; diff --git a/src/style/home.scss b/src/style/home.scss new file mode 100644 index 0000000..ed746ed --- /dev/null +++ b/src/style/home.scss @@ -0,0 +1,162 @@ +.cardBox{ + background: #fff; + height: 100%; + border-radius: 8px; + padding: 12px; + box-sizing: border-box; + display: flex; + flex-direction: column; + .cardTitle{ + flex-basis: 30px; + font-weight: 500; + color: var(--el-color-dark); + font-size: 14px; + } + .cardBody{ + flex: 1; + display: flex; + overflow: hidden; + .boxScrollbar{ + display: flex; + align-items: center; + } + } +} + +.headerBox{ + .cardBox{ + .inletView{ + display: flex; + align-items: center; + .leftBox{ + display: flex; + align-items: center; + } + .item{ + display: flex; + align-items: center; + flex-direction: column; + margin-right: 30px; + .img{ + width: 50px; + } + .text{ + margin-top: 8px; + } + } + .add{ + display: flex; + justify-content: center; + align-items: center; + margin: 0; + .icon{ + background: #f2f2f2; + border-radius: 8px; + width: 50px; + height: 50px; + } + .text{ + width: 50px; + text-align: center; + } + } + } + .newBell{ + display: flex; + flex-wrap: wrap; + .item{ + width: calc(50% - 10px); + margin-bottom: 15px; + box-sizing: border-box; + .title{ + color: var(--el-color-dark); + font-weight: 500; + display: flex; + align-items: center; + font-size: 13px; + .status{ + background: var(--el-color-danger); + color: var(--el-color-white); + font-weight: normal; + padding: 0 4px; + font-size: 12px; + border-radius: 3px; + margin-right: 6px; + display: flex; + align-items: center; + justify-content: center; + } + } + .com{ + margin-top: 5px; + color: #888; + } + .text{ + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + .item:nth-child(odd){ + margin-right: 10px; + } + .item:nth-child(even){ + margin-left: 10px; + } + } + } +} +.middleBox{ + .briefing{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + .item{ + width: calc(33% - 6px); + background: #E9F3FF; + box-sizing: border-box; + margin-top: 15px; + padding: 12px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + .comMain{ + .num{ + color: var(--el-color-dark); + font-size: 30px; + font-weight: 500; + .unit{ + font-weight: normal; + font-size: 12px; + } + } + .name{ + margin-top: 8px; + color: #555; + } + } + .comChart{ + .icon{ + width: 50px; + height: 50px; + } + } + } + .item:nth-child(1),.item:nth-child(2),.item:nth-child(3){ + margin-top: 0; + } + .item:nth-child(3n){ + margin-right: 0; + } + } +} + +.boxScrollbar{ + .el-scrollbar__wrap{ + display: flex; + align-items: center; + } +} + + diff --git a/src/style/style.scss b/src/style/style.scss index 2ce45bb..3076007 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -3,3 +3,4 @@ @import 'pages.scss'; @import 'media.scss'; @import 'dark.scss'; +@import 'home.scss'; diff --git a/src/views/home/console/index.vue b/src/views/home/console/index.vue index 18abb00..ca58725 100644 --- a/src/views/home/console/index.vue +++ b/src/views/home/console/index.vue @@ -1,29 +1,194 @@ - - - 8990 - 8990 - 8990 - - - 8990 - 8990 - 8990 - - - 8990 - 8990 - 8990 - - + + + + + + + 快捷功能入口 + + + + + + {{item.name}} + + + + + + 添加 + + + + + + + 待办消息 + + + + + + {{item.status}} + {{item.title}} + + {{item.text}} + + + + + + + + + 不良率 + + + + + + + + + + + + 数据简报 + + + + + {{item.num}} + 条 + + {{item.name}} + + + + + + + + + + + 占位 + + + + + + + + + + -