页面样式修改

guanqb

2022-11-03 476288d5a5d738d31133902d53dbebf9ab8d119b

页面样式修改

 src/styles/base/index.css

@@ -101,18 +101,23 @@
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 700px;
  width: 720px;
  height: 400px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.phone-details-box .el-dialog .el-dialog__header {
  height: 56px;
  line-height: 56px;
}

.phone-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

.phone-details-box .el-dialog .el-dialog__body .dialog-container {
.phone-details-box .el-dialog .dialog-container {
  flex: 1;
  display: flex;
  flex-direction: column;
@@ -120,33 +125,122 @@
  height: 100%;
}

.phone-details-box .el-dialog .el-dialog__body .dialog-side {
.phone-details-box .el-dialog .dialog-side {
  display: flex;
  height: 36px;
  line-height: 36px;
}

.phone-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) {
.phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}

.phone-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
  width: 100px;
  text-align: left;
}

.phone-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
.phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) > div:first-child {
  width: 100px;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.phone-details-box .el-dialog .dialog-side > div:nth-of-type(2) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.phone-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
.phone-details-box .el-dialog .dialog-side > div:nth-of-type(2) > div:first-child {
  width: 100px;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.phone-details-box .el-dialog .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.area-details-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 700px;
  height: 400px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.area-details-box .el-dialog .el-dialog__header {
  height: 56px;
  line-height: 56px;
}

.area-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

.area-details-box .el-dialog .el-dialog__body .dialog-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.area-details-box .el-dialog .el-dialog__body .dialog-side {
  display: flex;
  height: 36px;
  line-height: 36px;
}

.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
  text-align: left;
}

.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
  width: 100px;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
  width: 100px;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.equiment-details-box .el-dialog {
@@ -233,22 +327,38 @@
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
  text-align: left;
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
  width: 100px;
  text-align: left;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
  width: 100px;
  text-align: left;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content {
@@ -261,7 +371,14 @@

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content > div:first-child {
  width: 100px;
  text-align: left;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.activity-details-box .el-dialog {
@@ -303,20 +420,36 @@
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
  text-align: left;
}

.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
  width: 100px;
  text-align: left;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
  width: 100px;
  text-align: left;
  text-align: justify;
  display: inline-block;
  text-align-last: justify;
  margin-right: 20px;
}

.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

 src/styles/base/index.min.css

@@ -1 +1 @@
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:700px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog .el-dialog__body .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.phone-details-box .el-dialog .el-dialog__body .dialog-side{display:flex;height:36px;line-height:36px}.phone-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px}.phone-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:left}.phone-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between}.phone-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:left}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:800px;height:500px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side{display:flex;height:36px;line-height:36px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content{display:flex;height:36px;line-height:36px;flex-direction:row;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:first-child{width:100px;text-align:left}.activity-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:600px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.activity-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.activity-details-box .el-dialog .el-dialog__body{flex:1}.activity-details-box .el-dialog .el-dialog__body .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.activity-details-box .el-dialog .el-dialog__body .dialog-side{display:flex;height:36px;line-height:36px}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:left}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.phone-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.phone-details-box .el-dialog .dialog-side{display:flex;height:36px;line-height:36px}.phone-details-box .el-dialog .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px;text-align:left}.phone-details-box .el-dialog .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .dialog-side>div:nth-of-type(1)>div:nth-of-type(2){width:calc(100% - 120px)}.phone-details-box .el-dialog .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between;text-align:left}.phone-details-box .el-dialog .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .dialog-side>div:nth-of-type(2)>div:nth-of-type(2){width:calc(100% - 120px)}.area-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:700px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.area-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.area-details-box .el-dialog .el-dialog__body{flex:1}.area-details-box .el-dialog .el-dialog__body .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.area-details-box .el-dialog .el-dialog__body .dialog-side{display:flex;height:36px;line-height:36px}.area-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px;text-align:left}.area-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.area-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:nth-of-type(2){width:calc(100% - 120px)}.area-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between;text-align:left}.area-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.area-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:nth-of-type(2){width:calc(100% - 120px)}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:800px;height:500px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side{display:flex;height:36px;line-height:36px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:nth-of-type(2){width:calc(100% - 120px)}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:nth-of-type(2){width:calc(100% - 120px)}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content{display:flex;height:36px;line-height:36px;flex-direction:row;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:nth-of-type(2){width:calc(100% - 120px)}.activity-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:600px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.activity-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.activity-details-box .el-dialog .el-dialog__body{flex:1}.activity-details-box .el-dialog .el-dialog__body .dialog-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.activity-details-box .el-dialog .el-dialog__body .dialog-side{display:flex;height:36px;line-height:36px}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1){flex:1;display:flex;justify-content:space-between;margin-right:10px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(1)>div:nth-of-type(2){width:calc(100% - 120px)}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2){flex:1;display:flex;justify-content:space-between;text-align:left}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.activity-details-box .el-dialog .el-dialog__body .dialog-side>div:nth-of-type(2)>div:nth-of-type(2){width:calc(100% - 120px)}

 src/styles/base/index.scss

@@ -111,11 +111,85 @@
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 720px;
        height: 400px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);
        .el-dialog__header {
            height: 56px;
            line-height: 56px;
        }

        .el-dialog__body {
            flex: 1;
        }
        .dialog-container {
            flex: 1; 
            display: flex; 
            flex-direction:column; 
            width: 100%; 
            height: 100%;
        }
        .dialog-side {
            display: flex; 
            height: 36px; 
            line-height: 36px;
            &>div:nth-of-type(1) {
                flex: 1; 
                display: flex; 
                justify-content:space-between;
                margin-right: 10px; 
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
                    display: inline-block;
                    text-align-last: justify;
                    margin-right: 20px;
                }
                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }

            }
            &>div:nth-of-type(2) {
                flex: 1; 
                display: flex; 
                justify-content:space-between;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
                    display: inline-block;
                    text-align-last: justify;
                    margin-right: 20px;

                }
                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
            }
        }
    }
}

.area-details-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 700px;
        height: 400px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);
        .el-dialog__header {
            height: 56px;
            line-height: 56px;
        }

        .el-dialog__body {
            flex: 1;
@@ -135,9 +209,17 @@
                    display: flex; 
                    justify-content:space-between;
                    margin-right: 10px; 
                    text-align: left;

                    &>div:first-child {
                        width: 100px;
                        text-align: left;
                        text-align: justify;
                        display: inline-block;
                        text-align-last: justify;
                        margin-right: 20px;
                    }
                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }

                }
@@ -145,9 +227,18 @@
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    text-align: left;

                    &>div:first-child {
                        width: 100px;
                        text-align: left;
                        text-align: justify;
                        display: inline-block;
                        text-align-last: justify;
                        margin-right: 20px;

                    }
                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }
                }
            }
@@ -238,9 +329,17 @@
                    display: flex; 
                    justify-content:space-between;
                    margin-right: 10px; 
                    text-align: left;

                    &>div:first-child {
                        width: 100px;
                        text-align: left;
                        text-align: justify;
                        display: inline-block;
                        text-align-last: justify;
                        margin-right: 20px;
                    }
                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }

                }
@@ -248,9 +347,18 @@
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    text-align: left;

                    &>div:first-child {
                        width: 100px;
                        text-align: left;
                        text-align: justify;
                        display: inline-block;
                        text-align-last: justify;
                        margin-right: 20px;

                    }
                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }
                }
            }
@@ -262,7 +370,14 @@
                text-align: left;
                &>div:first-child {
                    width: 100px;
                    text-align: left;
                    text-align: justify;
                    display: inline-block;
                    text-align-last: justify;
                    margin-right: 20px;

                }
                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
            }
        }
@@ -302,9 +417,17 @@
                    display: flex; 
                    justify-content:space-between;
                    margin-right: 10px; 
                    text-align: left;

                    &>div:first-child {
                        width: 100px;
                        text-align: left;
                        text-align: justify;
                        display: inline-block;
                        text-align-last: justify;
                        margin-right: 20px;
                    }
                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }

                }
@@ -312,9 +435,18 @@
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    text-align: left;

                    &>div:first-child {
                        width: 100px;
                        text-align: left;
                        text-align: justify;
                        display: inline-block;
                        text-align-last: justify;
                        margin-right: 20px;

                    }
                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }
                }
            }

 src/styles/element-ui/element-ui.scss

@@ -45,14 +45,15 @@
// ------------------------------------------------------------------

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgba(0, 92, 169, 1.0);
    background-color: rgba(29, 38, 105, 1.0);
    color: #ffffff !important;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background-color: #fff;
    background-color: rgba(0, 92, 169, 1.0);
    color: #fff;
}

.el-pagination.is-background .el-pager li:hover {

 src/views/activity/index.vue

@@ -18,8 +18,12 @@
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select size="small" v-model="activityType" placeholder="请选择">
                            <el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
@@ -33,16 +37,25 @@
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期"
                            style="width:268px"></el-date-picker>
                        <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div class="row-box" :class="{ on: currentClickIndex === index }"
                    <div
                        class="row-box"
                        :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index" @click="goAbDetail(item, index)">
                        :key="index"
                        @click="goAbDetail(item, index)"
                    >
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -51,7 +64,9 @@
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
@@ -61,9 +76,15 @@
                    </div>
                </div>
                <div class="pages">
                    <el-pagination background layout="prev, pager, next" :total="activityList.length"
                        :page-size="pagesize" pager-count="3" :current-page="currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="activityList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
@@ -110,8 +131,13 @@
        </div>

        <div class="second-container">
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick" @node-click="treeNodeClick">
            </el-tree>
            <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                @check="treeCheckClick"
                @node-click="treeNodeClick"
            ></el-tree>
        </div>

        <div v-show="dialogVisible" class="activity-details-box">
@@ -134,14 +160,18 @@

            <div class="row-box">
                <div class="category">活动内容1：</div>
                <div class="category-value">在接到停电通知的状况下，管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户，并在主要出入口发布停电通告；同时，
                    工程物料部应做好停电前的应变工作。</div>
                <div class="category-value">
                    在接到停电通知的状况下，管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户，并在主要出入口发布停电通告；同时，
                    工程物料部应做好停电前的应变工作。
                </div>
            </div>

            <div class="row-box">
                <div class="category">活动内容2：</div>
                <div class="category-value">在没有接到任何通知、突然发生停电的状况下，工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电，应立即派人查找原因采取措施，防止故障扩
                    大；若系外部停电，一方面要防止突然来电引发事故，一方面致电电力局查询停电状 况，了解何时恢复供电，并将了解的状况通知管理运作部。</div>
                <div class="category-value">
                    在没有接到任何通知、突然发生停电的状况下，工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电，应立即派人查找原因采取措施，防止故障扩
                    大；若系外部停电，一方面要防止突然来电引发事故，一方面致电电力局查询停电状 况，了解何时恢复供电，并将了解的状况通知管理运作部。
                </div>
            </div>

            <div class="row-box">
@@ -152,16 +182,25 @@
            <div class="row-box">
                <div class="category">撤离路线：</div>
                <div class="category-value">
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                    <el-switch
                        v-model="polylineSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

            <div class="row-box">
                <div class="category">分析范围：</div>
                <div class="category-value">
                    <el-input @input="analyseChange" size="mini" type="number" v-model="analyseInput"
                        placeholder="请输入范围"></el-input>
                    <el-input
                        @input="analyseChange"
                        size="mini"
                        type="number"
                        v-model="analyseInput"
                        placeholder="请输入范围"
                    ></el-input>
                </div>
            </div>
        </div>
@@ -615,17 +654,17 @@
    },

    destroyed () {
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activeLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activityLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })
@@ -662,11 +701,11 @@
        .search-box {
            padding: 0 10px;

            &>div:first-child {
            & > div:first-child {
                margin-top: 0;
            }

            &>div {
            & > div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -740,7 +779,7 @@
                    font-size: 14px;

                    .row-content {
                        &>div {
                        & > div {
                            display: flex;
                            line-height: 28px;

@@ -781,7 +820,6 @@
                    width: 300px;
                }
            }


            .pages {
                height: 40px;
@@ -871,7 +909,7 @@
            line-height: 28px;
            display: flex;

            &>div {
            & > div {
                text-align: left;
            }


 src/views/home/index.vue

@@ -139,32 +139,42 @@
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>活动名称</div>
                        <div>活动名称:</div>
                        <div>{{activityDetailArr.activityName}}</div>
                    </div>
                    <div>
                        <div>开始时间</div>
                        <div>开始时间:</div>
                        <div>{{activityDetailArr.startTime}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>结束时间</div>
                        <div>结束时间:</div>
                        <div>{{activityDetailArr.endTime}}</div>
                    </div>
                    <div>
                        <div>规模</div>
                        <div>规模:</div>
                        <div>{{activityDetailArr.scale}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>所属派出所</div>
                        <div>所属派出所:</div>
                        <div>{{activityDetailArr.policeStationName}}</div>
                    </div>
                    <div>
                        <div>坐标</div>
                        <div>坐标:</div>
                        <div>{{activityDetailArr.position}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>经度:</div>
                        <div>{{activityDetailArr.lng}}</div>
                    </div>
                    <div>
                        <div>纬度:</div>
                        <div>{{activityDetailArr.lat}}</div>
                    </div>
                </div>
            </div>
@@ -178,30 +188,26 @@
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div style="flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%;">
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>责任人：</div>
                    <div>{{phoneDetails.person}}</div>
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>责任人：</div>
                        <div>{{phoneDetails.person}}</div>
                    </div>
                    <div>
                        <div>联系方式：</div>
                        <div>{{phoneDetails.phoneID}}</div>
                    </div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>联系方式：</div>
                    <div>{{phoneDetails.phoneID}}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>手台类型：</div>
                    <div>{{phoneDetails.phoneType}}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>所在地址：</div>
                    <div>{{phoneDetails.location}}</div>
                <div class="dialog-side">
                    <div>
                        <div>手台类型：</div>
                        <div>{{phoneDetails.phoneType}}</div>
                    </div>
                    <div>
                        <div>所在地址：</div>
                        <div>{{phoneDetails.location}}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
@@ -212,7 +218,7 @@
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
            class="area-details-box"
        >
            <div class="dialog-container">
                <div class="dialog-side">
@@ -370,56 +376,56 @@
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>序号</div>
                        <div>{{policeSituationDetailArr.num}}</div>
                        <div>所属派出所:</div>
                        <div>{{policeSituationDetailArr.policeName}}</div>
                    </div>
                    <div>
                        <div>警情类别</div>
                        <div>警情类别:</div>
                        <div>{{policeSituationDetailArr.type}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>警情状态</div>
                        <div>警情状态:</div>
                        <div>{{policeSituationDetailArr.state}}</div>
                    </div>
                    <div>
                        <div>报警电话</div>
                        <div>报警电话:</div>
                        <div>{{policeSituationDetailArr.comingPhone}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>接警时间</div>
                        <div>接警时间:</div>
                        <div>{{policeSituationDetailArr.dealTime}}</div>
                    </div>
                    <div>
                        <div>经办民警</div>
                        <div>经办民警:</div>
                        <div>{{policeSituationDetailArr.dealPolice}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>报警人</div>
                        <div>报警人:</div>
                        <div>{{policeSituationDetailArr.callPeople}}</div>
                    </div>
                    <div>
                        <div>报警人联系人</div>
                        <div>报警人联系人:</div>
                        <div>{{policeSituationDetailArr.callPhone}}</div>
                    </div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>所属派出所</div>
                        <div>{{policeSituationDetailArr.policeName}}</div>
                        <div>经度:</div>
                        <div>{{policeSituationDetailArr.lng}}</div>
                    </div>
                    <div>
                        <div>坐标</div>
                        <div>{{policeSituationDetailArr.position}}</div>
                        <div>纬度:</div>
                        <div>{{policeSituationDetailArr.lat}}</div>
                    </div>
                </div>
                <div class="dialog-content">
                    <div>报警内容</div>
                    <div>报警内容:</div>
                    <div>{{policeSituationDetailArr.callContent}}</div>
                </div>
            </div>
@@ -812,7 +818,7 @@
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                this.$EventBus.$emit('', {
                    layerName: 'houseLayers',
                    type: 'VectorLayer'
                })
@@ -971,7 +977,7 @@
                    if (item.state == '紧急') {
                        timer = setInterval(() => {
                            num++
                            if (num >= 15) {
                            if (num >= 10) {
                                num = 0
                            }
                            point.setStyle({
@@ -983,7 +989,7 @@
                    } else {
                        timer = setInterval(() => {
                            num++
                            if (num >= 15) {
                            if (num >= 10) {
                                num = 0
                            }
                            point.setStyle({
@@ -1497,35 +1503,35 @@
    watch: {},

    destroyed () {
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polygonLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
        })
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'houseLayers',
            type: 'VectorLayer'
        })
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'phoneLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'panoramaLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activityLayers',
            type: 'VectorLayer'
        })

 src/views/police/index.vue

@@ -582,27 +582,27 @@
    },

    destroyed () {
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'phoneLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'zfLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'dtLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })

 src/views/video/index.vue

@@ -175,7 +175,7 @@
    },

    destroyed () {
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })