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 @@
-
-