forked from srs-police-affairs
| src/styles/base/index.css | ●●●●● patch | view | raw | blame | history | |
| src/styles/base/index.min.css | ●●●●● patch | view | raw | blame | history | |
| src/styles/base/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index.vue | ●●●●● patch | view | raw | blame | history |
src/styles/base/index.css
@@ -127,24 +127,23 @@ .phone-details-box .el-dialog .el-dialog__body { flex: 1; display: flex; flex-direction: column; flex-direction: row; flex-wrap: wrap; justify-self: flex-start; align-content: flex-start; } .phone-details-box .el-dialog .dialog-side { .phone-details-box .el-dialog .el-dialog__body .item { display: flex; flex-direction: row; width: calc(50% - 20px); 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; margin: 0 10px; text-align: left; } .phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) > div:first-child { .phone-details-box .el-dialog .el-dialog__body .item > div:first-child { width: 100px; text-align: justify; display: inline-block; @@ -152,26 +151,7 @@ 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) { .phone-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) { width: calc(100% - 120px); } @@ -194,24 +174,23 @@ .area-details-box .el-dialog .el-dialog__body { flex: 1; display: flex; flex-direction: column; flex-direction: row; flex-wrap: wrap; justify-self: flex-start; align-content: flex-start; } .area-details-box .el-dialog .el-dialog__body .dialog-side { .area-details-box .el-dialog .el-dialog__body .item { display: flex; flex-direction: row; width: calc(50% - 20px); 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; margin: 0 10px; text-align: left; } .area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child { .area-details-box .el-dialog .el-dialog__body .item > div:first-child { width: 100px; text-align: justify; display: inline-block; @@ -219,26 +198,7 @@ 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) { .area-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) { width: calc(100% - 120px); } @@ -306,24 +266,23 @@ .policeSituation-details-box .el-dialog .el-dialog__body { flex: 1; display: flex; flex-direction: column; flex-direction: row; flex-wrap: wrap; justify-self: flex-start; align-content: flex-start; } .policeSituation-details-box .el-dialog .el-dialog__body .dialog-side { .policeSituation-details-box .el-dialog .el-dialog__body .item { display: flex; flex-direction: row; width: calc(50% - 20px); 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; margin: 0 10px; text-align: left; } .policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child { .policeSituation-details-box .el-dialog .el-dialog__body .item > div:first-child { width: 100px; text-align: justify; display: inline-block; @@ -331,26 +290,7 @@ 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) { .policeSituation-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) { width: calc(100% - 120px); } @@ -360,6 +300,7 @@ line-height: 36px; flex-direction: row; text-align: left; margin-left: 10px; } .policeSituation-details-box .el-dialog .el-dialog__body .dialog-content > div:first-child { @@ -378,7 +319,7 @@ margin: 0 !important; display: flex; flex-direction: column; width: 600px; width: 640px; height: 400px; top: 50%; left: 50% !important; @@ -393,24 +334,23 @@ .activity-details-box .el-dialog .el-dialog__body { flex: 1; display: flex; flex-direction: column; flex-direction: row; flex-wrap: wrap; justify-self: flex-start; align-content: flex-start; } .activity-details-box .el-dialog .el-dialog__body .dialog-side { .activity-details-box .el-dialog .el-dialog__body .item { display: flex; flex-direction: row; width: calc(50% - 20px); 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; margin: 0 10px; text-align: left; } .activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child { .activity-details-box .el-dialog .el-dialog__body .item > div:first-child { width: 100px; text-align: justify; display: inline-block; @@ -418,25 +358,6 @@ 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) { .activity-details-box .el-dialog .el-dialog__body .item > 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}.panorama-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:960px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.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;display:flex;flex-direction:column}.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;display:flex;flex-direction:column}.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;display:flex;flex-direction:column}.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;display:flex;flex-direction:column}.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)} *{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}.panorama-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:960px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.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;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.phone-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.phone-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .el-dialog__body .item>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;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.area-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.area-details-box .el-dialog .el-dialog__body .item>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 .item>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;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.policeSituation-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .item>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 .item>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;margin-left:10px}.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:640px;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;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.activity-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .item>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 .item>div:nth-of-type(2){width:calc(100% - 120px)} src/styles/base/index.scss
@@ -139,21 +139,18 @@ .el-dialog__body { flex: 1; display: flex; flex-direction: column; } .dialog-side { display: flex; height: 36px; line-height: 36px; &>div:nth-of-type(1) { flex: 1; flex-direction: row; flex-wrap:wrap; justify-self: flex-start; align-content: flex-start; .item { display: flex; justify-content: space-between; margin-right: 10px; flex-direction:row; width: calc(50% - 20px); height: 36px; line-height: 36px; margin: 0 10px; text-align: left; &>div:first-child { width: 100px; text-align: justify; @@ -161,34 +158,15 @@ 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 { @@ -210,51 +188,29 @@ .el-dialog__body { flex: 1; display: flex; flex-direction: column; flex-direction: row; flex-wrap:wrap; justify-self: flex-start; align-content: flex-start; .dialog-side { .item { display: flex; flex-direction:row; width: calc(50% - 20px); 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); } margin: 0 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) { 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); } width: calc(100% - 120px); } } } @@ -331,52 +287,29 @@ .el-dialog__body { flex: 1; display: flex; flex-direction: column; flex-direction: row; flex-wrap:wrap; justify-self: flex-start; align-content: flex-start; .dialog-side { .item { display: flex; flex-direction:row; width: calc(50% - 20px); 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); } margin: 0 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) { 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); } width: calc(100% - 120px); } } @@ -386,6 +319,7 @@ line-height: 36px; flex-direction: row; text-align: left; margin-left: 10px; &>div:first-child { width: 100px; @@ -409,7 +343,7 @@ margin: 0 !important; display: flex; flex-direction: column; width: 600px; width: 640px; height: 400px; top: 50%; left: 50% !important; @@ -423,52 +357,28 @@ .el-dialog__body { flex: 1; display: flex; flex-direction: column; .dialog-side { flex-direction: row; flex-wrap:wrap; justify-self: flex-start; align-content: flex-start; .item { display: flex; flex-direction:row; width: calc(50% - 20px); 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); } margin: 0 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) { 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); } width: calc(100% - 120px); } } } src/views/home/index.vue
@@ -11,16 +11,29 @@ <template> <div class="container"> <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail" @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container> <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail" @showkeypersondetail="showkeypersondetail" ref="leftContainer" ></left-container> <right-container class="right-container" @showequimentdetail="showequimentdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType" @activityChange="activityChange" ref="rightContainer"></right-container> <right-container class="right-container" @showequimentdetail="showequimentdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType" @activityChange="activityChange" ref="rightContainer" ></right-container> <bottom-container class="bottom-container" ref="bottomContainer" @changePoliceSituationType="changePoliceSituationType" @policeSituationChange="policeSituationChange"> </bottom-container> <bottom-container class="bottom-container" ref="bottomContainer" @changePoliceSituationType="changePoliceSituationType" @policeSituationChange="policeSituationChange" ></bottom-container> <div class="center-container"> <div class="layers-control-btn house"> @@ -47,161 +60,243 @@ </div> <div ref="RegionSelect" style="left: 0;" class="region-select"> <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue" :options="policeStationOptions" :optionsName="'policeStationName'"></map-select> <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue" :options="policeStationOptions" :optionsName="'policeStationName'" ></map-select> <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions" :optionsName="'areaCheckName'"></map-select> <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions" :optionsName="'areaCheckName'" ></map-select> <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue" :options="housingOptions" :optionsName="'housingsName'"></map-select> <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue" :options="housingOptions" :optionsName="'housingsName'" ></map-select> </div> <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" > <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> </el-dialog> <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible" :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box"> <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe> <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible" :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box" > <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0" ></iframe> </el-dialog> <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible" :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box"> <div class="dialog-side"> <div> <div>活动名称:</div> <div>{{ activityDetailArr.activityName }}</div> </div> <div> <div>开始时间:</div> <div>{{ activityDetailArr.startTime }}</div> </div> <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible" :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box" > <div class="item"> <div>活动名称:</div> <div>{{ activityDetailArr.activityName }}</div> </div> <div class="dialog-side"> <div> <div>结束时间:</div> <div>{{ activityDetailArr.endTime }}</div> </div> <div> <div>规模:</div> <div>{{ activityDetailArr.scale }}</div> </div> <div class="item"> <div>开始时间:</div> <div>{{ activityDetailArr.startTime }}</div> </div> <div class="dialog-side"> <div> <div>所属派出所:</div> <div>{{ activityDetailArr.policeStationName }}</div> </div> <div> <div>坐标:</div> <div>{{ activityDetailArr.position }}</div> </div> <div class="item"> <div>结束时间:</div> <div>{{ activityDetailArr.endTime }}</div> </div> <div class="dialog-side"> <div> <div>经度:</div> <div>{{ activityDetailArr.lng }}</div> </div> <div> <div>纬度:</div> <div>{{ activityDetailArr.lat }}</div> </div> <div class="item"> <div>规模:</div> <div>{{ activityDetailArr.scale }}</div> </div> <div class="item"> <div>所属派出所:</div> <div>{{ activityDetailArr.policeStationName }}</div> </div> <div class="item"> <div>坐标:</div> <div>{{ activityDetailArr.position }}</div> </div> <div class="item"> <div>经度:</div> <div>{{ activityDetailArr.lng }}</div> </div> <div class="item"> <div>纬度:</div> <div>{{ activityDetailArr.lat }}</div> </div> </el-dialog> <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :close-on-click-modal="true" class="phone-details-box"> <div class="dialog-side"> <div> <div>责任人：</div> <div>{{ phoneDetails.person }}</div> </div> <div> <div>联系方式：</div> <div>{{ phoneDetails.phoneID }}</div> </div> <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :close-on-click-modal="true" class="phone-details-box" > <div class="item"> <div>责任人：</div> <div>{{ phoneDetails.person }}</div> </div> <div class="dialog-side"> <div> <div>手台类型：</div> <div>{{ phoneDetails.phoneType }}</div> </div> <div> <div>所在地址：</div> <div>{{ phoneDetails.location }}</div> </div> <div class="item"> <div>联系方式：</div> <div>{{ phoneDetails.phoneID }}</div> </div> <div class="item"> <div>手台类型：</div> <div>{{ phoneDetails.phoneType }}</div> </div> <div class="item"> <div>所在地址：</div> <div>{{ phoneDetails.location }}</div> </div> </el-dialog> <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose" :close-on-click-modal="true" class="area-details-box"> <div class="dialog-side"> <div> <div>责任区负责人：</div> <div>王某某</div> </div> <div> <div>责任区人口：</div> <div>10000</div> </div> <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose" :close-on-click-modal="true" class="area-details-box" > <div class="item"> <div>责任区负责人：</div> <div>王某某</div> </div> <div class="dialog-side"> <div> <div>男女比例：</div> <div>0.92:1</div> </div> <div> <div>所在地址：</div> <div>XXXXXXX</div> </div> <div class="item"> <div>责任区人口：</div> <div>10000</div> </div> <div class="item"> <div>男女比例：</div> <div>0.92:1</div> </div> <div class="item"> <div>所在地址：</div> <div>XXXXXXX</div> </div> </el-dialog> <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box"> <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box" > <div class="equimentDetail"> <div class="left"> <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick" ref="tree" node-key="id"></el-tree> <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick" ref="tree" node-key="id" ></el-tree> </div> <div class="right"> <div class="monitor" v-if="monitorContent"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> </div> <div class="others" v-if="othersContent"> <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)" <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName"> :row-class-name="tableRowClassName" > <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column> <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column> <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column> <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column> <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column> <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column> <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow" ></el-table-column> <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow" ></el-table-column> <el-table-column prop="policeStation" label="所属派出所"></el-table-column> <el-table-column prop="area" label="所属责任区"></el-table-column> </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :total="showArr.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> <el-pagination background layout="prev, pager, next" :total="showArr.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div> </div> </div> </div> </el-dialog> <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose" :close-on-click-modal="true" class="land-details-box"> <el-table :data="landDetailArr" style="width: 100%" <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose" :close-on-click-modal="true" class="land-details-box" > <el-table :data="landDetailArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" > <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column> <el-table-column prop="location" label="位置" width="140"></el-table-column> <el-table-column prop="area" label="面积" width="120"></el-table-column> @@ -210,11 +305,20 @@ </el-table> </el-dialog> <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box"> <el-table :data="keyPersonDetailArr" style="width: 100%" <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box" > <el-table :data="keyPersonDetailArr" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" > <el-table-column prop="type" label="重点人员类型"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> @@ -225,57 +329,53 @@ </el-table> </el-dialog> <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible" :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box"> <div class="dialog-side"> <div> <div>所属派出所:</div> <div>{{ policeSituationDetailArr.policeName }}</div> </div> <div> <div>警情类别:</div> <div>{{ policeSituationDetailArr.type }}</div> </div> <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible" :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box" > <div class="item"> <div>所属派出所:</div> <div>{{ policeSituationDetailArr.policeName }}</div> </div> <div class="dialog-side"> <div> <div>警情状态:</div> <div>{{ policeSituationDetailArr.state }}</div> </div> <div> <div>报警电话:</div> <div>{{ policeSituationDetailArr.comingPhone }}</div> </div> <div class="item"> <div>警情类别:</div> <div>{{ policeSituationDetailArr.type }}</div> </div> <div class="dialog-side"> <div> <div>接警时间:</div> <div>{{ policeSituationDetailArr.dealTime }}</div> </div> <div> <div>经办民警:</div> <div>{{ policeSituationDetailArr.dealPolice }}</div> </div> <div class="item"> <div>警情状态:</div> <div>{{ policeSituationDetailArr.state }}</div> </div> <div class="dialog-side"> <div> <div>报警人:</div> <div>{{ policeSituationDetailArr.callPeople }}</div> </div> <div> <div>报警人联系人:</div> <div>{{ policeSituationDetailArr.callPhone }}</div> </div> <div class="item"> <div>报警电话:</div> <div>{{ policeSituationDetailArr.comingPhone }}</div> </div> <div class="dialog-side"> <div> <div>经度:</div> <div>{{ policeSituationDetailArr.lng }}</div> </div> <div> <div>纬度:</div> <div>{{ policeSituationDetailArr.lat }}</div> </div> <div class="item"> <div>接警时间:</div> <div>{{ policeSituationDetailArr.dealTime }}</div> </div> <div class="item"> <div>经办民警:</div> <div>{{ policeSituationDetailArr.dealPolice }}</div> </div> <div class="item"> <div>报警人:</div> <div>{{ policeSituationDetailArr.callPeople }}</div> </div> <div class="item"> <div>报警人联系人:</div> <div>{{ policeSituationDetailArr.callPhone }}</div> </div> <div class="item"> <div>经度:</div> <div>{{ policeSituationDetailArr.lng }}</div> </div> <div class="item"> <div>纬度:</div> <div>{{ policeSituationDetailArr.lat }}</div> </div> <div class="dialog-content"> <div>报警内容:</div> @@ -1583,7 +1683,9 @@ background-color: #66b1ff87; } :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { background: #454545; }
