diff --git a/src/assets/images/commandScreen/bg10.png b/src/assets/images/commandScreen/bg10.png new file mode 100644 index 0000000..4295d48 Binary files /dev/null and b/src/assets/images/commandScreen/bg10.png differ diff --git a/src/assets/images/commandScreen/bg7.png b/src/assets/images/commandScreen/bg7.png new file mode 100644 index 0000000..c1d01de Binary files /dev/null and b/src/assets/images/commandScreen/bg7.png differ diff --git a/src/assets/images/commandScreen/bg8.png b/src/assets/images/commandScreen/bg8.png new file mode 100644 index 0000000..15a5053 Binary files /dev/null and b/src/assets/images/commandScreen/bg8.png differ diff --git a/src/assets/images/commandScreen/bg9.png b/src/assets/images/commandScreen/bg9.png new file mode 100644 index 0000000..0fd1c4f Binary files /dev/null and b/src/assets/images/commandScreen/bg9.png differ diff --git a/src/views/commandScreen/commandCenter/centerTop.vue b/src/views/commandScreen/commandCenter/centerTop.vue index ba206c5..49ff8a8 100644 --- a/src/views/commandScreen/commandCenter/centerTop.vue +++ b/src/views/commandScreen/commandCenter/centerTop.vue @@ -246,18 +246,29 @@ onMounted(async () => { background-position: center; background-repeat: no-repeat; .content-div{ + width: 30%; + height: 30%; position: absolute; display: flex; flex-direction: column; align-items: center; .circle-box{ + width: 70px; + height: 70px; color: white; font-size: 14px; text-align: center; - padding: 23px 20px; - border: 2px solid #318FF7; + // padding: 23px 20px; + // border: 2px solid #318FF7; + background: url("@/assets/images/commandScreen/bg10.png") no-repeat; + background-size: 100% 100%; border-radius: 50%; + display: flex; + justify-content: center; + span{ + margin-top: 10px; + } } >span{ margin-top: 10px; @@ -267,32 +278,32 @@ onMounted(async () => { .aq{ // left: 40px; // top: 180px; - left: 9%; - top: 37%; + left: 0%; + top: 45%; } .wd{ // left: 200px; // top: 80px; - left: 23%; - top: 15%; + left: 12%; + top: 20%; } .jy{ // left: 400px; // top: 5px; - left: 45.5%; + left: 35%; top: 0%; } .fx{ // right: 180px; // top: 80px; - right: 23%; - top: 15%; + right: 12%; + top: 20%; } .zn{ // right: 40px; // top: 180px; - right: 9%; - top: 37%; + right: 0%; + top: 45%; } .count-div{ width: 60%; @@ -345,9 +356,20 @@ onMounted(async () => { align-items: center; justify-content: space-between; &-item{ - background-color: #0090D8; - padding: 10px 20px; - border-radius: 24px; + width: 180px; + height: 75px; + // background-color: #0090D8; + // padding: 10px 20px; + // border-radius: 24px; + background: url("@/assets/images/commandScreen/bg9.png") no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + span{ + margin-top: 10px; + } } } } diff --git a/src/views/commandScreen/dialogCompnnents/ai-alarm.vue b/src/views/commandScreen/dialogCompnnents/ai-alarm.vue index e260478..c2d0b93 100644 --- a/src/views/commandScreen/dialogCompnnents/ai-alarm.vue +++ b/src/views/commandScreen/dialogCompnnents/ai-alarm.vue @@ -420,14 +420,14 @@ onMounted(async () => { background: url("@/assets/images/commandScreen/bg2.png") no-repeat; background-size: 100% 100%; } - // .statistics-item:nth-child(3){ - // background: url("@/assets/images/commandScreen/bg4.png") no-repeat; - // background-size: 100% 100%; - // } - // .statistics-item:nth-child(4){ - // background: url("@/assets/images/commandScreen/bg1.png") no-repeat; - // background-size: 100% 100%; - // } + .statistics-item:nth-child(3){ + background: url("@/assets/images/commandScreen/bg7.png") no-repeat; + background-size: 100% 100%; + } + .statistics-item:nth-child(4){ + background: url("@/assets/images/commandScreen/bg8.png") no-repeat; + background-size: 100% 100%; + } .statistics-item:nth-child(5){ background: url("@/assets/images/commandScreen/bg1.png") no-repeat; background-size: 100% 100%;