diff --git a/src/assets/privateOrder/common/按钮背景.png b/src/assets/privateOrder/common/按钮背景.png new file mode 100644 index 0000000..0998054 Binary files /dev/null and b/src/assets/privateOrder/common/按钮背景.png differ diff --git a/src/assets/privateOrder/general/圆环背景.png b/src/assets/privateOrder/general/圆环背景.png new file mode 100644 index 0000000..2596631 Binary files /dev/null and b/src/assets/privateOrder/general/圆环背景.png differ diff --git a/src/assets/privateOrder/topNar/时间.png b/src/assets/privateOrder/topNar/时间.png new file mode 100644 index 0000000..683850c Binary files /dev/null and b/src/assets/privateOrder/topNar/时间.png differ diff --git a/src/assets/privateOrder/topNar/消息.png b/src/assets/privateOrder/topNar/消息.png new file mode 100644 index 0000000..bf6d556 Binary files /dev/null and b/src/assets/privateOrder/topNar/消息.png differ diff --git a/src/assets/privateOrder/topNar/退出.png b/src/assets/privateOrder/topNar/退出.png new file mode 100644 index 0000000..b3b00a0 Binary files /dev/null and b/src/assets/privateOrder/topNar/退出.png differ diff --git a/src/views/privateOrder/Screen.vue b/src/views/privateOrder/Screen.vue index 71f9521..cf4d2b9 100644 --- a/src/views/privateOrder/Screen.vue +++ b/src/views/privateOrder/Screen.vue @@ -4,27 +4,15 @@
- + {{ item.name }}
- + {{ item.name }}
@@ -47,38 +35,27 @@
-
+
+
时间
+
消息
+
退出
+
- 切换 + " @click="dialogDetails = !dialogDetails">切换
- +
@@ -188,6 +165,7 @@ export default { height: $ScreenHeight; overflow: scroll; } + .iframeBox { position: relative; width: 3305px; @@ -218,6 +196,7 @@ export default { flex-direction: column; background-color: #001832; height: $iframeHeight; + .nav_item_two { // width: 281px; // width: 250px; @@ -242,6 +221,7 @@ export default { // transform-origin: left bottom; /* 设置旋转的基点为左上角 */ // white-space: nowrap; /* 防止文本换行 */ } + .selected_nav_two { // width: 281px; // width: 250px; @@ -260,6 +240,7 @@ export default { // transform-origin: left bottom; /* 设置旋转的基点为左上角 */ // white-space: nowrap; /* 防止文本换行 */ } + .selected_nav_two::before { content: ""; position: absolute; @@ -269,11 +250,15 @@ export default { height: 30px; background: url("~@/assets/privateOrder/topNar/seleted_nav.png"); background-size: 100% 100%; - transform: rotate(90deg); /* 旋转90度 */ - transform-origin: left bottom; /* 设置旋转的基点为左上角 */ - clip-path: inset(0 0 0 0); /* 调整裁剪区域 */ + transform: rotate(90deg); + /* 旋转90度 */ + transform-origin: left bottom; + /* 设置旋转的基点为左上角 */ + clip-path: inset(0 0 0 0); + /* 调整裁剪区域 */ z-index: -1; } + // div { // font-size: 28px; // color: #fff; @@ -353,6 +338,7 @@ export default { justify-content: center; cursor: pointer; } + .selected_right_nav { width: 281px; height: 50px; @@ -364,6 +350,7 @@ export default { justify-content: center; cursor: pointer; } + .left_nav { background: url("~@/assets/sentimeent/top-left.png"); background-size: 100% 100%; @@ -460,6 +447,7 @@ export default { z-index: 11; background: url("~@/assets/sentimeent/时间背景图.png"); background-size: 100% 100%; + .line-style { width: 2px; height: 24px; @@ -467,6 +455,7 @@ export default { opacity: 0.5; margin: 0 30px; } + .time-date-box { display: flex; flex-direction: column; @@ -507,6 +496,7 @@ export default { border-radius: 4px; height: 60px; flex-grow: 1; + .tab-active { width: 90px; height: 75px; @@ -518,6 +508,7 @@ export default { margin-right: 20px; align-content: center; justify-content: center; + span { font-family: MicrosoftYaHei; font-size: 28px; @@ -536,6 +527,7 @@ export default { justify-content: space-between; color: #ffffff; font-size: 20px; + span { font-family: AlibabaPuHuiTiH; font-size: 28px; @@ -545,6 +537,7 @@ export default { font-style: normal; text-transform: none; } + .tab-container { width: 100%; display: flex; @@ -586,11 +579,52 @@ export default { position: absolute; display: flex; align-items: center; - align-content: space-between; - right: 30px; - width: 460px; + justify-content: space-between; + right: 60px; + width: 520px; height: 67px; - //background-color: #1fb6e5; + color: #00A8FF; + // background-color: #1fb6e5; + + div:nth-child(1) { + width: 150px; + height: 100%; + display: flex; + // justify-content: center; + padding-left: 14%; + font-size: 20px; + align-items: center; + // background-image: url(“~@/assets/privateOrder/topNar/时间.png”); + background-image: url("~@/assets/privateOrder/topNar/时间.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + div:nth-child(2) { + width: 150px; + height: 100%; + display: flex; + // justify-content: center; + padding-left: 14%; + font-size: 20px; + align-items: center; + // background-image: url(“~@/assets/privateOrder/topNar/时间.png”); + background-image: url("~@/assets/privateOrder/topNar/消息.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + div:nth-child(3) { + width: 150px; + height: 100%; + display: flex; + // justify-content: center; + padding-left: 14%; + font-size: 20px; + align-items: center; + // background-image: url(“~@/assets/privateOrder/topNar/时间.png”); + background-image: url("~@/assets/privateOrder/topNar/退出.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + } } .time_name { @@ -607,6 +641,7 @@ export default { color: #68cff9; cursor: pointer; } + .active_time { width: 110px; text-align: center; @@ -621,6 +656,7 @@ export default { color: #ffffff; cursor: pointer; } + .wrap-bottom { margin-top: 10px; width: 110px; @@ -628,6 +664,7 @@ export default { background: url("~@/assets/privateOrder/topNar/tab-act-line.png") 50% 100%; border-radius: 2px; } + .line { position: absolute; z-index: 999; @@ -663,14 +700,17 @@ export default { height: 100%; z-index: 1; } + ::-webkit-scrollbar { width: 10px; height: 10px; background-color: rgba(#1fb6e5, 0.06); } + .screen-dialog { position: absolute; z-index: 9999; + .dialog-btn { background: url("~@/assets/dialog/btn-bg.png") no-repeat; background-size: 100% 100%; @@ -684,6 +724,7 @@ export default { letter-spacing: 2px; color: #ffffff; } + // ::v-deep .el-button { // border: none; // } @@ -693,10 +734,12 @@ export default { background-size: 100% 100%; } } + ::v-deep .el-dialog__header { background: rgba(255, 255, 255, 0); text-align: left; padding-left: 40px; + .el-dialog__title { font-family: SourceHanSansCN-Bold, san-serif; font-size: 24px; @@ -707,6 +750,7 @@ export default { color: #ffffff; } } + ::v-deep .el-dialog { background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat; width: 1820px; @@ -714,40 +758,50 @@ export default { overflow: hidden; background-size: 100% 100%; } + ::v-deep .el-dialog_body { height: 1092px; } + ::v-deep .el-dialog__headerbtn { top: 0; font-size: 30px; font-weight: bolder; } + ::v-deep .el-dialog__footer { background: rgba(255, 255, 255, 0); } + ::v-deep .el-table th.el-table__cell { background-color: rgba(0, 0, 0, 0); } + ::v-deep .el-table { background-color: rgba(0, 0, 0, 0); color: #fff; border: none; } + ::v-deep.el-table::before { display: none; } + ::v-deep .el-table tr { background-color: rgba(0, 0, 0, 0); } + ::v-deep .el-table .cell { font-size: 26px; height: 40px; line-height: 40px; } + ::v-deep .el-table__header { background-color: rgba(76, 162, 248, 0.2); color: #fff; } + ::v-deep .el-table__row { font-family: SourceHanSansCN-Regular, sans-serif; font-size: 26px; @@ -758,6 +812,7 @@ export default { background-color: rgba(106, 184, 255, 0.2); border: solid 1px #6ab8ff; } + ::v-deep .el-table { tbody tr { &:hover { @@ -767,9 +822,11 @@ export default { } } } + ::v-deep .el-table td.el-table__cell { border: none; } + ::v-deep .el-table th.el-table__cell { border: none; } diff --git a/src/views/privateOrder/security/components/Localnotification.vue b/src/views/privateOrder/security/components/Localnotification.vue index 23835d9..e6a7f9e 100644 --- a/src/views/privateOrder/security/components/Localnotification.vue +++ b/src/views/privateOrder/security/components/Localnotification.vue @@ -28,7 +28,7 @@ export default { var nmonth = moment().month() + 1; console.log(nmonth, "sssss"); return { - colorMap: ["lightblue", "#00ffde", "#ff7e2b", "#fbe84f", "#9a60b4", "#ea7ccc", "#91cc75", "#91cc75", "#fbe84f"], + colorMap: ["#1C6CE5", "#1CA6E5", "#1AF8CC", "#B9D5E0", "#FF9C71", "#EFC91C", "#9AA0E8", "#EE77D6", "#51E77E"], pieData: [ { value: 25, name: "娄薪街道" }, { value: 20, name: "胜浦街道" }, @@ -75,7 +75,7 @@ export default { name: "Access From", type: "pie", hoverAnimation: true, - radius: ["35%", "50%"], + radius: ["39%", "50%"], labelLine: { show: false, length: 30, @@ -121,7 +121,7 @@ export default { label: { show: true, position: "outside", - formatter: "{b}{c}%", + formatter: "{c}%", borderWidth: 1, borderRadius: 4, rich: { @@ -156,8 +156,8 @@ export default { }; const warningIcon = { type: "group", - left: 60, - top: "85%", + left: "46%", + top: "45%", z: 100, children: [ { @@ -168,8 +168,36 @@ export default { height: 24, x: -12, y: -12, + src: require('@/assets/privateOrder/general/圆环背景.png') }, }, + { + type: "text", + z: 101, + left: "40%", + top: 20, + style: { + text: "总模块", + fill: "#fff", + fontSize: 12, + fontWeight: "bold", + } + }, + { + type: "text", + z: 101, + left: 10, + top: "middle", + style: { + text: 9, + fill: "#fff", + fontSize: 20, + fontfamily: "DIN-bold", + fontWeight: "bold", + textAlign: "center", + y: 0 + } + } ], }; @@ -201,12 +229,13 @@ export default { flex-direction: column; justify-content: flex-start; align-items: center; + #pie { position: relative; top: 0px; left: 5px; width: 100%; - height: 70%; + height: 80%; } } } @@ -217,7 +246,7 @@ export default { display: flex; flex-wrap: wrap; justify-content: flex-start; - margin-top: -10px; + margin-top: -60px; gap: 20px; width: 70%; diff --git a/src/views/privateOrder/security/components/componentLeft.vue b/src/views/privateOrder/security/components/componentLeft.vue index d980cec..0ae0f96 100644 --- a/src/views/privateOrder/security/components/componentLeft.vue +++ b/src/views/privateOrder/security/components/componentLeft.vue @@ -145,7 +145,7 @@ :class="{ active: currentIndex === idx }" @click="currentIndex = idx"> {{ item }}
-
+ @@ -1172,43 +1172,40 @@ export default { .btn { height: 43px; - width: 150px; - font-family: SourceHanSansCN-Regular; + width: auto; + font-family: AlibabaPuHuiTiR; font-size: 18px; display: flex; justify-content: center; align-items: center; + // gap: 5px; color: #b7dfff; - border: 1px solid #ccc; + // border: 1px solid #ccc; padding: 10px; &.active { color: #fff; - font-weight: bold; + display: flex; + justify-content: center; + // background-color: red?; + // C:\Users\19821\Desktop\网络安全大屏\network-zz\src\assets\privateOrder\common + background-image: url("~@/assets/privateOrder/common/按钮背景.png"); .topIP { - width: 154px; - height: 10px; position: relative; - left: -3px; - top: -13px; // background: url("~@/assets/privateOrder/general/tab-act.png"); - // background-size: 100% 100%; - font-family: SourceHanSansCN-Bold; - font-size: 30px; + background-size: 100% 100%; + font-family: AlibabaPuHuiTiR; color: #ffffff; z-index: -1; } .distributed { - width: 107px; - height: 10px; position: relative; left: -3px; top: -13px; // background: url("~@/assets/privateOrder/general/tab-act.png"); // background-size: 100% 100%; - font-family: SourceHanSansCN-Bold; - font-size: 30px; + font-family: AlibabaPuHuiTiR; color: #ffffff; z-index: -1; } diff --git a/src/views/privateOrder/security/components/componentRight.vue b/src/views/privateOrder/security/components/componentRight.vue index 49f1c9a..1a15073 100644 --- a/src/views/privateOrder/security/components/componentRight.vue +++ b/src/views/privateOrder/security/components/componentRight.vue @@ -50,7 +50,7 @@ -
+
时间
通报数量
@@ -118,10 +118,10 @@
- + - - + +
-
+
-
+
单位名称
隐患名称
@@ -937,7 +937,7 @@ export default { .section-areaStatistics { width: 738px; - height: 460px; + height: 520px; } .section-newestRisk { @@ -1105,33 +1105,49 @@ export default { } //按钮切换 + //btn title 切换 .btn-wrap { display: flex; + cursor: pointer; .btn { - width: 122px; height: 43px; - font-family: SourceHanSansCN-Regular; - font-size: 30px; - text-align: center; - line-height: 43px; - margin-left: 20px; - + width: auto; + font-family: AlibabaPuHuiTiR; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + // gap: 5px; color: #b7dfff; + // border: 1px solid #ccc; + padding: 10px; &.active { color: #fff; + display: flex; + justify-content: center; + // background-color: red?; + // C:\Users\19821\Desktop\网络安全大屏\network-zz\src\assets\privateOrder\common + background-image: url("~@/assets/privateOrder/common/按钮背景.png"); - div { - font-family: SourceHanSansCN-Bold; - font-size: 30px; - width: 107px; - height: 10px; + .topIP { + position: relative; + // background: url("~@/assets/privateOrder/general/tab-act.png"); + background-size: 100% 100%; + font-family: AlibabaPuHuiTiR; + color: #ffffff; + z-index: -1; + } + + .distributed { position: relative; left: -3px; top: -13px; - background: url("~@/assets/privateOrder/general/tab-act.png"); - background-size: 100% 100%; + // background: url("~@/assets/privateOrder/general/tab-act.png"); + // background-size: 100% 100%; + font-family: AlibabaPuHuiTiR; + color: #ffffff; z-index: -1; } }