增加控制台组件及布局

src/assets/icons/Bell.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg t="1719402671307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2155" width="200" height="200"><path d="M512 170.66666667l55.52355555 13.65333333c115.59822222 28.21688889 200.24888889 133.80266667 200.2488889 251.22133333v289.45066667l20.9351111 20.93511111 28.2168889 29.12711111h-609.8488889l28.2168889-29.12711111 20.9351111-20.93511111V435.54133333c0-117.41866667 83.74044445-223.91466667 200.2488889-251.22133333l55.52355555-13.65333333M512 2.27555555c-41.87022222 0-72.81777778 34.58844445-72.81777778 77.3688889v34.58844444C294.45688889 147.91111111 183.40977778 278.98311111 183.40977778 435.54133333v260.32355556L84.19555555 797.80977778v50.97244444h855.6088889v-50.97244444l-99.21422223-101.94488889V435.54133333c0-156.55822222-111.04711111-287.63022222-255.77244444-322.21866666v-32.768c0-36.40888889-20.02488889-69.17688889-54.61333333-76.45866667-6.37155555-1.82044445-12.74311111-1.82044445-18.20444445-1.82044445z m100.12444445 919.32444445H411.87555555c0 56.43377778 43.69066667 100.12444445 100.12444445 100.12444445s100.12444445-43.69066667 100.12444445-100.12444445z" p-id="2156"></path></svg>
+	<svg t="1719486255500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3032" width="200" height="200"><path d="M921.6 750.9504l-68.1984-68.3008V469.3504c0-145.1008-93.9008-273.1008-221.9008-320 4.3008 0 4.3008 0 8.5504 4.2496v-25.6C640 55.4496 584.6016 0 512 0S384 55.4496 384 128c0 8.5504 0 17.0496 4.2496 25.6-128 46.9504-217.6 170.6496-217.6 315.7504v213.2992l-68.2496 68.3008c-51.2 51.2-17.0496 145.0496 59.7504 145.0496H857.6c81.0496 0 115.2-93.8496 64-145.0496z m-409.6-665.6c25.6 0 42.7008 17.0496 42.7008 42.6496v4.2496h8.5504c-17.0496-4.2496-34.1504-4.2496-51.2-4.2496-12.8 0-29.8496 0-42.6496 4.2496V128c0-25.6 17.0496-42.6496 42.6496-42.6496zM162.2528 810.6496L256 716.8V469.3504c0-140.8 115.2-256 256-256s256 115.2 256 256V716.8l93.8496 93.8496H162.2016z" p-id="3033"></path><path d="M341.3504 938.6496c-25.6 0-42.6496 17.1008-42.6496 42.7008 0 25.6 17.0496 42.6496 42.6496 42.6496h341.3504c25.6 0 42.6496-17.0496 42.6496-42.6496 0-25.6-17.0496-42.7008-42.6496-42.7008H341.3504z" p-id="3034"></path></svg>
 </template>
 
 <script>

src/assets/icons/Full.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719485268450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2762" width="200" height="200"><path d="M652.8 128a51.2 51.2 0 0 1 51.2-51.2h192a51.2 51.2 0 0 1 51.2 51.2v192a51.2 51.2 0 1 1-102.4 0V179.2h-140.8a51.2 51.2 0 0 1-51.2-51.2zM896 652.8a51.2 51.2 0 0 1 51.2 51.2v192a51.2 51.2 0 0 1-51.2 51.2h-192a51.2 51.2 0 1 1 0-102.4h140.8v-140.8a51.2 51.2 0 0 1 51.2-51.2zM128 652.8a51.2 51.2 0 0 1 51.2 51.2v140.8h140.8a51.2 51.2 0 1 1 0 102.4H128a51.2 51.2 0 0 1-51.2-51.2v-192a51.2 51.2 0 0 1 51.2-51.2zM76.8 128a51.2 51.2 0 0 1 51.2-51.2h192a51.2 51.2 0 0 1 0 102.4H179.2v140.8a51.2 51.2 0 0 1-102.4 0V128z" p-id="2763"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "Full"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/Refresh.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719486212450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2890" width="200" height="200"><path d="M951.296 390.8608h-181.9136a45.4656 45.4656 0 0 1 0-90.9312h74.1888a394.496 394.496 0 1 0 61.2352 227.328h0.768a45.5168 45.5168 0 1 1 90.2144 8.3456 484.7616 484.7616 0 1 1-90.0096-306.176V163.4816a45.4656 45.4656 0 1 1 90.9824 0v181.9136a45.568 45.568 0 0 1-45.5168 45.4656z" p-id="2891"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "Refresh"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/Search.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719485462822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2823" width="200" height="200"><path d="M34.0992 448a413.8496 413.8496 0 1 1 827.7504 0 413.8496 413.8496 0 0 1-827.7504 0z m413.8496-311.4496a311.4496 311.4496 0 1 0 0 622.8992 311.4496 311.4496 0 0 0 0-622.8992z" p-id="2824"></path><path d="M672.512 672.512a51.2 51.2 0 0 1 72.3968 0l180.992 181.0432a51.2 51.2 0 1 1-72.3968 72.3968l-180.992-181.0432a51.2 51.2 0 0 1 0-72.3968z" p-id="2825"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "Search"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/home/chart.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719478561984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3342" width="200" height="200"><path d="M0 0m192 0l640 0q192 0 192 192l0 640q0 192-192 192l-640 0q-192 0-192-192l0-640q0-192 192-192Z" fill="#D6EAFF" p-id="3343"></path><path d="M489.136 237.712C325.008 237.712 192 370.752 192 534.88 192 698.96 325.008 832 489.136 832c164.112 0 297.152-133.04 297.152-297.136H489.12V237.712z m247.28 342.864c-21.552 116.896-124.24 205.712-247.28 205.712-138.64 0-251.424-112.8-251.424-251.424 0-123.04 88.816-225.728 205.712-247.28v292.992h292.992zM534.88 192v297.136H832C832 325.04 698.96 192 534.864 192z m45.712 49.872c102.08 18.816 182.72 99.488 201.552 201.552H580.576V241.872z" fill="#1367C1" p-id="3344"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "chart"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/home/earlyWarn.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719478524747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3198" width="200" height="200"><path d="M0 0m192 0l640 0q192 0 192 192l0 640q0 192-192 192l-640 0q-192 0-192-192l0-640q0-192 192-192Z" fill="#D6EAFF" p-id="3199"></path><path d="M192 192h640v640H192V192z" fill="#1367C1" opacity=".01" p-id="3200"></path><path d="M512 192a21.328 21.328 0 0 1 21.328 21.328V256a21.328 21.328 0 1 1-42.656 0v-42.672A21.328 21.328 0 0 1 512 192z m249.76 100.416l-42.672 42.672a21.36 21.36 0 0 1-35.088-6.752 21.328 21.328 0 0 1 4.912-23.424l42.672-42.656a21.296 21.296 0 0 1 30.432-0.272 21.344 21.344 0 0 1-0.272 30.432z m48.912 198.24a21.328 21.328 0 0 0 0-42.656H768a21.328 21.328 0 0 0 0 42.672h42.672z m-554.672 0A21.328 21.328 0 1 0 256 448h-42.672a21.344 21.344 0 0 0 0 42.672H256z m79.088-155.568a21.344 21.344 0 0 1-30.176 0l-42.656-42.672a21.344 21.344 0 0 1 30.16-30.16l42.672 42.656a21.344 21.344 0 0 1 0 30.176zM512 298.672c-117.824 0-213.328 95.504-213.328 213.328v256H256a21.328 21.328 0 0 0 0 42.672h512A21.328 21.328 0 1 0 768 768h-42.672V512c0-117.824-95.504-213.328-213.328-213.328zM682.672 768H341.328V512a170.672 170.672 0 1 1 341.344 0v256z m-149.344-298.672a21.328 21.328 0 0 0-42.656 0V576a21.328 21.328 0 1 0 42.656 0v-106.672z m0 192a21.328 21.328 0 0 0-42.656 0v21.344a21.328 21.328 0 0 0 42.656 0v-21.344z" fill="#1367C1" p-id="3201"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "earlyWarn"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/home/gather.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719478322887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2619" width="200" height="200"><path d="M0 0m192 0l640 0q192 0 192 192l0 640q0 192-192 192l-640 0q-192 0-192-192l0-640q0-192 192-192Z" fill="#D6EAFF" p-id="2620"></path><path d="M713.68 514.32v159.84a55.584 55.584 0 0 1-55.504 55.52h-308.32a55.584 55.584 0 0 1-55.52-55.52v-159.84h-36.992v159.84a92.528 92.528 0 0 0 92.496 92.512h308.336a92.528 92.528 0 0 0 92.496-92.512v-159.84h-36.992z" fill="#1367C1" p-id="2621"></path><path d="M337.984 399.136c4.56 0 8.88-0.496 13.2-1.488 12.96 23.568 38.848 78.688 40.816 143.2h-41.808l60.56 60.56 60.56-60.56h-42.304c-1.968-73.392-30.72-134.432-45.504-161.328a62.944 62.944 0 0 0 17.872-43.904 63.456 63.456 0 0 0-63.392-63.392 63.456 63.456 0 0 0-63.392 63.392c0 35.04 28.48 63.52 63.392 63.52z m0-89.792c14.56 0 26.4 11.84 26.4 26.4 0 14.56-11.84 26.4-26.4 26.4-14.56 0-26.4-11.84-26.4-26.4 0-14.56 11.84-26.4 26.4-26.4z" fill="#1367C1" p-id="2622"></path><path d="M485.488 396.048v221.76h-42.064l60.56 60.56 60.56-60.56h-42.064v-221.76c25.92-8 44.896-31.824 44.896-60.32a63.456 63.456 0 0 0-63.392-63.376 63.456 63.456 0 0 0-63.392 63.392c0 28.48 18.992 52.288 44.896 60.32z m18.496-86.704c14.56 0 26.4 11.84 26.4 26.4 0 14.56-11.84 26.4-26.4 26.4-14.56 0-26.4-11.84-26.4-26.4 0-14.56 11.84-26.4 26.4-26.4z" fill="#1367C1" p-id="2623"></path><path d="M569.36 527.28h-42.304l60.56 60.56 60.56-60.56h-41.92c-0.512-58.592 28.48-111.248 44.512-135.68 8.88 4.688 18.736 7.52 29.344 7.52a63.36 63.36 0 1 0 0-126.784 63.36 63.36 0 0 0-63.392 63.408 62.4 62.4 0 0 0 7.408 28.976c-17.024 24.672-55.264 88.192-54.768 162.56z m111.008-217.92c14.56 0 26.4 11.84 26.4 26.384 0 14.56-11.84 26.4-26.4 26.4-14.56 0-26.4-11.84-26.4-26.4 0-14.56 11.84-26.4 26.4-26.4z" fill="#1367C1" p-id="2624"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "gather"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/home/repaired.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719478433449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2765" width="200" height="200"><path d="M0 0m192 0l640 0q192 0 192 192l0 640q0 192-192 192l-640 0q-192 0-192-192l0-640q0-192 192-192Z" fill="#D6EAFF" p-id="2766"></path><path d="M520.992 636.848a100.064 100.064 0 0 0 74.64 49.28l40 69.312a60.016 60.016 0 0 0 82 21.92l-20.048-34.608a20 20 0 0 1-27.312-7.312l-51.728-89.6a59.952 59.952 0 0 1-69.952-48 60 60 0 0 0 68.992 6.368l-20-34.688a20 20 0 0 1-27.312-7.312L541.264 512a100 100 0 0 0-20.272 124.848z" fill="#1367C1" p-id="2767"></path><path d="M694.24 536.8a100.032 100.032 0 0 1 5.312 89.328l40 69.28a60 60 0 0 1-21.952 81.984L697.6 742.72a20 20 0 0 0 7.36-27.328l-51.728-89.6a59.936 59.936 0 0 0-6.624-84.56 60 60 0 0 1-28.96 62.928l-20-34.64a20 20 0 0 0 7.264-27.312L576 492a100 100 0 0 1 118.272 44.8h-0.032z" fill="#1367C1" p-id="2768"></path><path d="M272 712a40 40 0 0 0 40 40h180a20 20 0 0 0 0-40H312v-400h400v180a20 20 0 0 0 40 0V312a40 40 0 0 0-40-40h-400a40 40 0 0 0-40 40v400z" fill="#1367C1" p-id="2769"></path><path d="M412 232h40c13.328 0 20 6.672 20 20v40c0 13.328-6.672 20-20 20h-40c-13.328 0-20-6.672-20-20v-40c0-13.328 6.672-20 20-20zM572 232h40c13.328 0 20 6.672 20 20v40c0 13.328-6.672 20-20 20h-40c-13.328 0-20-6.672-20-20v-40c0-13.328 6.672-20 20-20zM412 392h160c13.328 0 20 6.672 20 20S585.328 432 572 432h-160c-13.328 0-20-6.672-20-20s6.672-20 20-20zM412 472h80c13.328 0 20 6.672 20 20S505.328 512 492 512h-80c-13.328 0-20-6.672-20-20s6.672-20 20-20z" fill="#1367C1" p-id="2770"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "repaired"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/home/setup.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719478447892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2911" width="200" height="200"><path d="M0 0m192 0l640 0q192 0 192 192l0 640q0 192-192 192l-640 0q-192 0-192-192l0-640q0-192 192-192Z" fill="#D6EAFF" p-id="2912"></path><path d="M192 192h640v640H192z" fill="#D7EBFF" p-id="2913"></path><path d="M314.672 786.672c-21.344 0-40-8-53.344-21.344C248 752 240 730.672 240 712c0-18.672 8-40 21.328-53.328l176-176c-13.328-32-16-64-8-96 5.344-37.344 24-69.344 50.672-96C506.672 264 538.672 248 576 240c37.328-5.328 72-2.672 106.672 13.328 5.328 2.672 10.656 8 10.656 13.344 0 5.328 0 13.328-5.328 18.656l-101.328 101.344s-2.672 2.656-2.672 5.328 0 2.672 2.672 5.328l42.656 42.672c2.672 2.672 5.344 2.672 8 0l101.344-101.328c5.328-5.344 10.656-8 18.656-5.344 5.344 0 10.672 5.344 13.344 10.672 16 34.672 18.656 69.328 13.328 106.672-5.328 37.328-24 69.328-50.672 96-26.656 26.656-58.656 42.656-96 50.656-32 5.344-64 2.672-93.328-8l-176 176c-13.328 13.344-32 21.344-53.328 21.344z m290.656-509.344c-8 0-16 0-24 2.672-29.328 5.328-53.328 18.672-74.656 40-21.344 21.328-34.672 45.328-40 74.672-5.344 29.328-2.672 56 10.656 82.656 2.672 8 2.672 16-5.328 21.344L288 682.672c-8 8-10.672 16-10.672 26.656C277.328 720 280 728 288 736c13.328 13.328 37.328 13.328 50.672 0l184-184c5.328-5.328 16-8 21.328-5.328 26.672 10.656 56 16 82.672 10.656 29.328-5.328 53.328-18.656 74.656-40C722.672 496 736 472 741.328 442.672c2.672-18.672 2.672-37.344 0-53.344L664 466.672c-18.672 18.656-48 16-66.672 0L554.672 424c-8-8-13.344-21.328-13.344-32s5.344-24 13.344-32l77.328-77.328c-8-2.672-16-5.344-26.672-5.344z" fill="#1367C1" p-id="2914"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "setup"
+}
+</script>
+
+<style scoped>
+
+</style>

src/assets/icons/home/user.vue

@@ -0,0 +1,13 @@
+<template>
+	<svg t="1719478481210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3055" width="200" height="200"><path d="M0 0m192 0l640 0q192 0 192 192l0 640q0 192-192 192l-640 0q-192 0-192-192l0-640q0-192 192-192Z" fill="#D6EAFF" p-id="3056"></path><path d="M606.16 558.8a163.456 163.456 0 0 0 70.992-135.264c0-91.28-74.384-165.68-165.68-165.68s-164.544 74.4-164.544 164.56c0 56.352 28.16 105.952 71.008 135.248-96.944 38.32-164.56 131.872-164.56 241.2h46.208c0-108.208 82.272-198.368 187.104-210.768 1.12 0 29.296-2.24 52.96 0h2.256a211.52 211.52 0 0 1 181.472 209.632h47.328c-1.12-108.192-68.752-201.744-164.544-238.928z m-94.688-12.4a123.616 123.616 0 0 1-123.968-124 123.616 123.616 0 0 1 123.968-123.968 123.616 123.616 0 0 1 123.984 123.984 123.616 123.616 0 0 1-123.984 123.984z" fill="#1367C1" p-id="3057"></path></svg>
+</template>
+
+<script>
+export default {
+	name: "user"
+}
+</script>
+
+<style scoped>
+
+</style>

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'
+
 

src/config/index.js

@@ -55,7 +55,7 @@ const DEFAULT_CONFIG = {
 	LANG: "zh-cn",
 
 	//主题颜色
-	COLOR: "",
+	COLOR: "#1367C1",
 
 	//是否加密localStorage, 为空不加密，可填写AES(模式ECB,移位Pkcs7)加密
 	LS_ENCRYPTION: "",

src/layout/components/userbar.vue

@@ -1,13 +1,16 @@
 <template>
 	<div class="user-bar">
 		<div class="panel-item hidden-sm-and-down" @click="search">
-			<el-icon><el-icon-search /></el-icon>
+			<el-icon><sc-icon-Search /></el-icon>
 		</div>
 		<div class="screen panel-item hidden-sm-and-down" @click="screen">
-			<el-icon><el-icon-full-screen /></el-icon>
+			<el-icon><sc-icon-Full /></el-icon>
 		</div>
-		<div class="tasks panel-item" @click="tasks">
+<!--		<div class="tasks panel-item" @click="tasks">-->
-			<el-icon><el-icon-sort /></el-icon>
+<!--			<el-icon><el-icon-sort /></el-icon>-->
+<!--		</div>-->
+		<div class="tasks panel-item">
+			<el-icon><sc-icon-Refresh /></el-icon>
 		</div>
 		<div class="msg panel-item" @click="showMsg">
 			<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
@@ -50,7 +53,7 @@
 		</div>
 		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
 			<div class="user-avatar">
-				<el-avatar :size="24">{{ userNameF }}</el-avatar>
+				<el-avatar :size="22">{{ userNameF }}</el-avatar>
 				<label>{{ userName }}</label>
 				<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
 			</div>

src/layout/index.vue

@@ -55,8 +55,8 @@
 		<header class="adminui-header">
 			<div class="adminui-header-left">
 				<div class="logo-bar">
-					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
+<!--					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">-->
-<!--					<span>{{ $CONFIG.APP_NAME }}</span>-->
+					<span>{{ $CONFIG.APP_NAME }}</span>
 				</div>
 				<Topbar v-if="!ismobile"></Topbar>
 			</div>

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;

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;
+	}
+}
+
+

src/style/style.scss

@@ -3,3 +3,4 @@
 @import 'pages.scss';
 @import 'media.scss';
 @import 'dark.scss';
+@import 'home.scss';

src/views/home/console/index.vue

@@ -1,29 +1,194 @@
 <template>
-	<div class="consoleView">
+	<el-scrollbar class="scrollbar">
-		<el-row :gutter="20">
+		<div class="consoleView">
-			<el-col :span="10" :md="10" :sm="10" :xs="24">8990</el-col>
+			<div class="headerBox">
-			<el-col :span="10">8990</el-col>
+				<el-row class="colRow" :gutter="20">
-			<el-col :span="4">8990</el-col>
+					<el-col :span="10" :md="10" :sm="24" :xs="24">
-		</el-row>
+						<div class="cardBox">
-		<el-row :gutter="20">
+							<div class="cardTitle">快捷功能入口</div>
-			<el-col :span="9">8990</el-col>
+							<div class="cardBody inletView">
-			<el-col :span="9">8990</el-col>
+								<el-scrollbar class="boxScrollbar">
-			<el-col :span="6">8990</el-col>
+									<div class="leftBox">
-		</el-row>
+										<div class="item" v-for="(item,index) in inletList" :key="index">
-		<el-row :gutter="20">
+											<el-image class="img" :src="item.url"></el-image>
-			<el-col :span="9">8990</el-col>
+											<text class="text">{{item.name}}</text>
-			<el-col :span="9">8990</el-col>
+										</div>
-			<el-col :span="6">8990</el-col>
+									</div>
-		</el-row>
+								</el-scrollbar>
-	</div>
+								<div class="item add">
+									<i class="icon"></i>
+									<text class="text">添加</text>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="10" :md="10" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">待办消息</div>
+							<div class="cardBody">
+								<el-scrollbar>
+									<div class="newBell">
+										<div class="item" v-for="(item,index) in newList" :key="index">
+											<div class="title text">
+												<text class="status" v-if="item.status">{{item.status}}</text>
+												{{item.title}}
+											</div>
+											<div class="com text">{{item.text}}</div>
+										</div>
+									</div>
+								</el-scrollbar>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="4" :md="4" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">不良率</div>
+							<div class="cardBody">
+
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<div class="middleBox">
+				<el-row class="colRow" :gutter="20">
+					<el-col :span="16" :md="16" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">数据简报</div>
+							<div class="cardBody briefing">
+								<div class="item" v-for="(item,index) in briefing" :key="index">
+									<div class="comMain">
+										<div class="num">
+											{{item.num}}
+											<text class="unit">条</text>
+										</div>
+										<div class="name">{{item.name}}</div>
+									</div>
+									<div class="comChart">
+										<el-icon class="icon"><component :is="item.icon" /></el-icon>
+									</div>
+								</div>
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8" :md="8" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">占位</div>
+							<div class="cardBody">
+
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+			<div class="footerBox">
+				<el-row class="colRow" :gutter="20">
+					<el-col :span="8" :md="8" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">实时数据</div>
+							<div class="cardBody">
+
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8" :md="8" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">占位</div>
+							<div class="cardBody">
+
+							</div>
+						</div>
+					</el-col>
+					<el-col :span="8" :md="8" :sm="24" :xs="24">
+						<div class="cardBox">
+							<div class="cardTitle">占位</div>
+							<div class="cardBody">
+
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+		</div>
+	</el-scrollbar>
 </template>
 
 <script>
 export default {
-	name: "index"
+	name: "index",
+	data(){
+		return{
+			inletList:[
+				{name:'日报',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home1.png'},
+				{name:'销售订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home2.png'},
+				{name:'库存列表',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home3.png'},
+				{name:'统计',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
+				{name:'维修订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
+			],
+			briefing:[
+				{num:189376,name:'数据采集条数',icon:'sc-icon-Gather'},
+				{num:12496,name:'维保待维修',icon:'sc-icon-HomeSetup'},
+				{num:756,name:'已维修工单',icon:'sc-icon-Repaired'},
+				{num:97662,name:'预警工单',icon:'sc-icon-EarlyWarn'},
+				{num:3553,name:'个人中心',icon:'sc-icon-HomeUser'},
+				{num:253,name:'个人中心',icon:'sc-icon-HomeChart'},
+			],
+			newList:[
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审',status:'紧急'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审，在今晚九点之前一定操作，配合财务打款。',status:'紧急'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审 在今晚九点之前一定操作，配合财务打款。',status:'紧急'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
+			],
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+
+	}
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+	.consoleView{
+		height: calc(100vh - 70px);
+		display: flex;
+		flex-direction: column;
+		.headerBox{
+			flex: 2;
+			overflow: hidden;
+		}
+		.middleBox{
+			flex: 3;
+		}
+		.footerBox{
+			flex: 5;
+		}
+	}
+	.colRow{
+		height: 100%;
+		padding: 0 !important;
+		margin: 0 !important;
+		.el-col{
+			padding: 7px !important;
+			box-sizing: border-box;
+			height: 100%;
+		}
+	}
 
+
+	@media (max-width: 992px){
+		.consoleView{
+			display: block;
+			height: 100%;
+		}
+	}
 </style>