更新pc 三张一张图

src/assets/images/dark copy 2.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/light copy 2.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/mapjson/Chaangshazhen/yuan1.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","id":7307,"properties":{"_draw_type":"circle","_draw_prop_radius":1660.8554893541068,"_draw_prop_center":"121.28740321,32.42273768","_draw_prop_point":"121.2979530521,32.4138319714","_draw_prop_seg":90},"geometry":{"type":"Polygon","coordinates":[[[121.30232292870801,32.42273768],[121.30228658502308,32.42361618607393],[121.30217773103112,32.424490403661],[121.30199689705783,32.425356073846906],[121.30174496410817,32.42620897947952],[121.30142315957409,32.427044965708326],[121.30103305125499,32.427859960218406],[121.30057653971937,32.428649993060006],[121.30005584904548,32.42941121597766],[121.29947351598605,32.43013992114485],[121.29883237760914,32.43083255921296],[121.2981355574765,32.43148575658734],[121.29738645042579,32.43209633184606],[121.29658870603119,32.43266131122227],[121.29574621082328,32.433177943074625],[121.29486306935398,32.43364371127586],[121.29394358419978,32.43405634745457],[121.29299223499993,32.434413842030786],[121.29201365663207,32.43471445399197],[121.29101261663163,32.434956719362255],[121.28999399196493,32.43513945832334],[121.2889627452689,32.43526178095348],[121.28792390067385,32.435323091555816],[121.28688251932613,32.435323091555816],[121.28584367473105,32.43526178095348],[121.28481242803504,32.43513945832334],[121.28379380336834,32.434956719362255],[121.28279276336792,32.43471445399197],[121.28181418500006,32.434413842030786],[121.28086283580019,32.43405634745457],[121.27994335064596,32.43364371127586],[121.27906020917669,32.433177943074625],[121.27821771396876,32.43266131122227],[121.2774199695742,32.43209633184606],[121.27667086252346,32.43148575658734],[121.27597404239081,32.43083255921296],[121.2753329040139,32.43013992114485],[121.27475057095447,32.42941121597766],[121.27422988028061,32.428649993060006],[121.27377336874498,32.427859960218406],[121.27338326042589,32.427044965708326],[121.2730614558918,32.42620897947952],[121.27280952294213,32.425356073846906],[121.27262868896882,32.424490403661],[121.27251983497688,32.42361618607393],[121.27248349129196,32.42273768],[121.27251983497688,32.42185916537016],[121.27262868896882,32.420984922281946],[121.27280952294213,32.420119210145984],[121.2730614558918,32.419266246930945],[121.27338326042589,32.41843018860807],[121.27377336874498,32.41761510889555],[121.27422988028061,32.41682497940152],[121.27475057095447,32.41606365026259],[121.2753329040139,32.41533483137285],[121.27597404239081,32.41464207429433],[121.27667086252346,32.41398875493814],[121.2774199695742,32.4133780571004],[121.27821771396876,32.41281295693386],[121.27906020917669,32.412296208430874],[121.27994335064596,32.41183032998919],[121.28086283580019,32.41141759212592],[121.28181418500006,32.41106000640023],[121.28279276336792,32.410759315598725],[121.28379380336834,32.41051698523189],[121.28481242803504,32.41033419638302],[121.28584367473105,32.41021183994494],[121.28688251932613,32.4101505122725],[121.28792390067385,32.4101505122725],[121.2889627452689,32.41021183994494],[121.28999399196493,32.41033419638302],[121.29101261663163,32.41051698523189],[121.29201365663207,32.410759315598725],[121.29299223499993,32.41106000640023],[121.29394358419978,32.41141759212592],[121.29486306935398,32.41183032998919],[121.29574621082328,32.412296208430874],[121.29658870603119,32.41281295693386],[121.29738645042579,32.4133780571004],[121.2981355574765,32.41398875493814],[121.29883237760914,32.41464207429433],[121.29947351598605,32.41533483137285],[121.30005584904548,32.41606365026259],[121.30057653971937,32.41682497940152],[121.30103305125499,32.41761510889555],[121.30142315957409,32.41843018860807],[121.30174496410817,32.419266246930945],[121.30199689705783,32.420119210145984],[121.30217773103112,32.420984922281946],[121.30228658502308,32.42185916537016],[121.30232292870801,32.42273768]]]},"bbox":[121.27248349129196,32.4101505122725,121.30232292870801,32.435323091555816]}]}

src/assets/mapjson/Chaangshazhen/yuan2.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","id":5373,"properties":{"_draw_type":"circle","_draw_prop_radius":1523.5522900439664,"_draw_prop_center":"121.32887752,32.39761384","_draw_prop_point":"121.3357216613,32.3876059496","_draw_prop_seg":90},"geometry":{"type":"Polygon","coordinates":[[[121.34256382308301,32.39761384],[121.34253048393657,32.39841994453457],[121.34243062892222,32.39922211466454],[121.34226474452356,32.40001644245405],[121.34203363891271,32.40079905827537],[121.34173843801295,32.40156614965615],[121.3413805800134,32.40231397984668],[121.3409618083623,32.4030389060163],[121.34048416327295,32.40373739699074],[121.33994997178432,32.40440605044403],[121.33936183642356,32.40504160946171],[121.33872262252711,32.40564097839453],[121.33803544428075,32.406201237925956],[121.33730364954785,32.40671965928022],[121.33653080355874,32.40719371750194],[121.33572067154151,32.40762110374312],[121.3348772003778,32.40799973649756],[121.33400449937437,32.408327771728686],[121.33310682024282,32.408603611841315],[121.33218853638557,32.40882591345404],[121.33125412158935,32.408993593934724],[121.33030812822908,32.40910583666714],[121.32935516508931,32.40916209502349],[121.32839987491069,32.40916209502349],[121.32744691177089,32.40910583666714],[121.32650091841062,32.408993593934724],[121.32556650361441,32.40882591345404],[121.32464821975717,32.408603611841315],[121.3237505406256,32.408327771728686],[121.32287783962218,32.40799973649756],[121.32203436845847,32.40762110374312],[121.32122423644122,32.40719371750194],[121.32045139045213,32.40671965928022],[121.31971959571923,32.406201237925956],[121.31903241747287,32.40564097839453],[121.3183932035764,32.40504160946171],[121.31780506821565,32.40440605044403],[121.31727087672702,32.40373739699074],[121.31679323163772,32.4030389060163],[121.3163744599866,32.40231397984668],[121.31601660198706,32.40156614965615],[121.31572140108727,32.40079905827537],[121.31549029547642,32.40001644245405],[121.31532441107775,32.39922211466454],[121.3152245560634,32.39841994453457],[121.31519121691696,32.39761384],[121.3152245560634,32.396807728268655],[121.31532441107775,32.39600553668846],[121.31549029547642,32.39521117361278],[121.31572140108727,32.394428509356175],[121.31601660198706,32.393661357333684],[121.3163744599866,32.392913455475366],[121.31679323163772,32.3921884480068],[121.31727087672702,32.39148986768466],[121.31780506821565,32.39082111857397],[121.3183932035764,32.390185459451025],[121.31903241747287,32.38958598791355],[121.31971959571923,32.389025625275124],[121.32045139045213,32.38850710231843],[121.32122423644122,32.38803294597635],[121.32203436845847,32.387605467006736],[121.32287783962218,32.38722674872063],[121.3237505406256,32.38689863681937],[121.32464821975717,32.38662273039045],[121.32556650361441,32.38640037410604],[121.32650091841062,32.386232651662404],[121.32744691177089,32.38612038049253],[121.32839987491069,32.38606410777772],[121.32935516508931,32.38606410777772],[121.33030812822908,32.38612038049253],[121.33125412158935,32.386232651662404],[121.33218853638557,32.38640037410604],[121.33310682024282,32.38662273039045],[121.33400449937437,32.38689863681937],[121.3348772003778,32.38722674872063],[121.33572067154151,32.387605467006736],[121.33653080355874,32.38803294597635],[121.33730364954785,32.38850710231843],[121.33803544428075,32.389025625275124],[121.33872262252711,32.38958598791355],[121.33936183642356,32.390185459451025],[121.33994997178432,32.39082111857397],[121.34048416327295,32.39148986768466],[121.3409618083623,32.3921884480068],[121.3413805800134,32.392913455475366],[121.34173843801295,32.393661357333684],[121.34203363891271,32.394428509356175],[121.34226474452356,32.39521117361278],[121.34243062892222,32.39600553668846],[121.34253048393657,32.396807728268655],[121.34256382308301,32.39761384]]]},"bbox":[121.31519121691696,32.38606410777772,121.34256382308301,32.40916209502349]}]}

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

@@ -0,0 +1,168 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+  margin-bottom: 10px;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
+  display: none;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: 100% !important;
+}
+
+.el-pagination__jump {
+  margin-left: 0;
+}
+
+.el-table th.el-table__cell>.cell {
+  font-family: "Source Han Sans CN-Bold";
+  color: #333333;
+
+}
+
+tbody .el-table__row .el-table__cell .cell {
+  font-family: "Source Han Sans CN-Regular";
+  color: #292F38;
+}
+
+tbody .el-table__row .el-table__cell:first-child .cell {
+  color: #4D5158;
+  font-family: "DIN-Regular";
+}
+
+.el-dialog__header {
+  padding-top: 10px;
+  font-size: 16px;
+  font-family: "Source Han Sans CN-Regular";
+  background: #F8F9FA;
+}
+
+.el-dialog__headerbtn {
+  top: 14px;
+}
+
+.el-form-item__label {
+  font-family: "Source Han Sans CN-Regular";
+  color: #292F38;
+  font-weight: normal;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.el-dialog__body {
+  padding: 20px;
+}
+
+.el-dialog__footer {
+  padding-bottom: 20px;
+  padding-right: 20px;
+}
+
+.el-descriptions-row th {
+  width: 15%;
+  background: #F5F7FA !important;
+  font-size: 14px;
+  font-family: "Source Han Sans CN-Medium" ;
+  font-weight: 500;
+  color: #292F38 !important;
+}
+.el-descriptions-row td {
+  font-size: 14px;
+  font-family: "Source Han Sans CN-Regular";
+  font-weight: 400;
+  line-height: 40px;
+  color: #4D5158 !important;
+}
+// 去除数字输入框后面的加减号
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"]{
+  -moz-appearance: textfield;
+}

src/assets/styles/index.scss

@@ -7,6 +7,9 @@
 @import '../font/font.css';
 @import './amap.scss';
 @import './rightleft.scss';
+@import './leaflet.scss';
+@import './layout.scss';
+
 
 
 

src/assets/styles/leaflet.scss

@@ -0,0 +1,681 @@
+.leaflet-popup-content-wrapper {
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.leaflet-popup-close-button {
+  display: none;
+}
+
+.leaflet-popup-tip-container {
+  display: none;
+}
+
+// 事件分布
+.event-popup {
+  width: 252px;
+  // height: 244px;
+  background-image: url("~@/assets/images/popup/popup.png");
+  background-size: 100% 100%;
+  z-index: 600;
+
+  .event-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 194px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9, 32, 53, 0) 0%, rgba(8, 37, 64, 0.98) 51%, rgba(9, 34, 56, 0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+
+    .mask {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+  }
+
+  .event-main {
+    padding: 12px 18px 25px 18px;
+    display: grid;
+    grid-column: 1fr;
+    grid-row-gap: 9px;
+
+    .event-info {
+      display: flex;
+      align-items: center;
+
+      .dot {
+        width: 4px;
+        height: 4px;
+        line-height: 17px;
+        background: #DAEBFF;
+        box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25), 0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 7px;
+      }
+
+      .name,
+      .position {
+        font-size: 12px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #E9F4FF;
+        line-height: 17px;
+      }
+
+      .name {
+        // flex: 1;
+        flex-wrap: nowrap;
+      }
+
+      .position {
+        width: 120px;
+        // flex: 1;
+        // flex-wrap: wrap;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .btn {
+      margin-top: 10px;
+      background-image: url('~@/assets/images/popup/icon1btn.png');
+      background-size: 100% 100%;
+      width: 100%;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #D3EEF2;
+      line-height: 20px;
+      cursor: pointer;
+    }
+  }
+}
+
+
+// 执法人员
+.person-popup {
+  // width: 242px;
+  // width: 470px;
+  width: 390px;
+  height: 244px;
+  background-image: url("~@/assets/images/popup/popup.png");
+  background-size: 100% 100%;
+  z-index: 600;
+  overflow: hidden;
+
+  .person-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // width: 194px;
+      width: 404px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9, 32, 53, 0) 0%, rgba(8, 37, 64, 0.98) 51%, rgba(9, 34, 56, 0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+
+    .mask {
+      // width: 13px;
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+  }
+
+  .person-main {
+    padding: 12px 32px 25px 30px;
+
+    .person-info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      .info-left {
+        display: flex;
+        align-items: center;
+        width: 25%;
+        .dot {
+          width: 4px;
+          height: 4px;
+          background: #DAEBFF;
+          box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25), 0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+          border-radius: 20px 20px 20px 20px;
+          margin-right: 10px;
+        }
+  
+        .name {
+          text-align: right;
+          flex: 1;
+          font-size: 12px;
+          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+          font-weight: 500;
+          color: #E9F4FF;
+          line-height: 14px;
+        }
+      }
+
+      .position {
+        font-size: 12px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #E9F4FF;
+        line-height: 14px;
+        margin-right: 9px;
+        flex: 1;
+      }
+    }
+
+    .btns {
+      display: grid;
+      // grid-column: 1fr;
+      // grid-row-gap: 6px;
+      grid-template-columns: repeat(2, 50%);
+      grid-column-gap: 6px;
+
+      div {
+        background-image: url('~@/assets/images/popup/icon1btn.png');
+        width: 100%;
+        height: 30px;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+// 执法人员
+.person-popupTow {
+  width: 230px;
+  // width: 470px;
+  height: 264px;
+  background-image: url("~@/assets/images/popup/popup.png");
+  background-size: 100% 100%;
+  z-index: 600;
+  overflow: hidden;
+
+  .person-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // width: 194px;
+      width: 404px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9, 32, 53, 0) 0%, rgba(8, 37, 64, 0.98) 51%, rgba(9, 34, 56, 0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+
+    .mask {
+      // width: 13px;
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+  }
+  .myluxian{
+    width: 100%;
+    height: 264px;
+    padding: 10px;
+    overflow: auto;
+    .luxianigem{
+      width: 100%;
+      padding: 10px;
+      font-size: 14px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      color: #ffffff;
+      .zhongdian{
+        font-weight: 600;
+      }
+      .lucheng{
+        display: grid;
+        grid-template-columns:80px 100px;
+        margin: 10px 0;
+        div{
+          // text-align: right;
+        }
+      }
+    }
+  }
+}
+.person-popupShow{
+  height: 180px;
+
+
+}
+
+// 执法车辆
+.car-popup {
+  width: 262px;
+  height: 138px;
+  overflow: hidden;
+  background-image: url("~@/assets/images/popup/popup.png");
+  background-size: 100% 100%;
+  z-index: 600;
+
+  .car-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 194px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9, 32, 53, 0) 0%, rgba(8, 37, 64, 0.98) 51%, rgba(9, 34, 56, 0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+
+    .mask {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+  }
+
+  .car-main {
+    padding: 12px 10px 25px 15px;
+    display: grid;
+    grid-column: 1fr;
+    grid-row-gap: 9px;
+
+    .car-info {
+      display: flex;
+      align-items: center;
+
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #DAEBFF;
+        box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25), 0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 7px;
+      }
+
+      .name,
+      .position {
+        font-size: 12px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #E9F4FF;
+        line-height: 17px;
+        margin-right: 8px;
+      }
+    }
+
+    // .btn {
+    //   margin-top: 19px;
+    //   background-image: url('../images/popup/icon1btn.png');
+    //   background-size: 100% 100%;
+    //   width: 100%;
+    //   height: 30px;
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   font-size: 14px;
+    //   font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    //   font-weight: 400;
+    //   color: #D3EEF2;
+    //   line-height: 20px;
+    //   cursor: pointer;
+    // }
+    .btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 19px;
+
+      .btn {
+        background-image: url("~@/assets/images/popup/icon2btn.png");
+        background-size: 100% 100%;
+        width: 91px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+// 监控视频
+.monitoring-popup {
+  width: 282px;
+  // height: 230px;
+  // height: 220px;
+  background-image: url("~@/assets/images/popup/popup.png");
+  background-size: 100% 100%;
+  z-index: 600;
+
+  .monitoring-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // width: 194px;
+      width: 234px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9, 32, 53, 0) 0%, rgba(8, 37, 64, 0.98) 51%, rgba(9, 34, 56, 0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+
+    .mask {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+  }
+
+  .monitoring {
+    padding: 11px 0 0 0;
+
+    .monitoring-list {
+      padding: 12px 32px 10px 30px;
+
+      .person-info {
+        display: flex;
+        // align-items: center;
+        margin-bottom: 10px;
+        .info-left {
+          display: flex;
+          // align-items: center;
+          width: 35%;
+          .dot {
+            width: 4px;
+            height: 4px;
+            background: #DAEBFF;
+            box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25), 0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+            border-radius: 20px 20px 20px 20px;
+            margin-right: 10px;
+            margin-top: 7px;
+          }
+    
+          .name {
+            text-align: right;
+            flex: 1;
+            font-size: 12px;
+            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+            font-weight: 500;
+            color: #E9F4FF;
+            line-height: 14px;
+          }
+        }
+
+        .position {
+          font-size: 12px;
+          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+          font-weight: 500;
+          color: #E9F4FF;
+          line-height: 14px;
+          margin-right: 9px;
+          flex: 1;
+        }
+      }
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      // margin-top: 16px;
+      padding: 0 25px 15px 25px;
+
+      .btn {
+        background-image: url("~@/assets/images/popup/icon2btn.png");
+        background-size: 100% 100%;
+        width: 91px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.popup-pc-person {
+  bottom: 20px !important;
+}
+
+.popup-pc-common {
+  bottom: 23px !important;
+}
+
+.popup-pc-emphasis {
+  bottom: 25px !important;
+}
+
+.popup-pc-car {
+  bottom: 25px !important;
+}
+
+.popup-pc-monitoring {
+  bottom: 20px !important;
+}
+
+// 重点区域文字
+.region-name1 {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  color: #F44444;
+}
+
+// 重点路段文字
+.region-name2 {
+  display: flex !important;
+  // justify-content: center;
+  align-items: center;
+  color: #46FF77;
+}
+
+.land-name2 {
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  // font-style: italic;
+  color: rgba(181, 207, 255, 0.5);
+  // background: linear-gradient(0deg, #B5CFFF 0%, #fff7cf 100%);
+  // -webkit-background-clip: text;
+  // -webkit-text-fill-color: transparent;
+  // line-height: 24px;
+  // letter-spacing: 2px;
+  white-space: nowrap;
+  // filter: drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5));
+}
+
+.land-name5 {
+  // font-size: 16px;
+  // font-weight: bold;
+  text-align: center;
+  color: #62E1FA;
+  line-height: 24px;
+  letter-spacing: 2px;
+  white-space: nowrap;
+  // filter: drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5));
+}
+
+// .leaflet-zoom-animated img {
+//   -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+//   -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+//   -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+// filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(10deg) sepia(100%) !important;
+// filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(195deg) !important;
+// }
+// 执法人员icon
+.divIcon-marker {
+  .markers {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .marker-title {
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      padding: 5px;
+      font-size: 14px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 20px;
+      background-image: url('~@/assets/images/personInfo.png');
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.travel {
+  background-image: url("~@/assets/images/dialogbg/dialog1.png");
+  background-size: 100% 100%;
+  background-color: transparent;
+  .el-dialog__header {
+    padding: 10px 20px;
+    .closeClick {
+      // display: flex;
+      height: 46px;
+      // justify-content: space-between;
+      position: relative;
+      padding-top: 10px;
+      .headline {
+        background-image: url("~@/assets/images/dialogtitlebg.png");
+        width: 451px;
+        background-size: 100% 100%;
+        padding-left: 22px;
+        height: 38px;
+        .headlinetitle {
+          font-size: 20px;
+          font-family: "YouSheBiaoTiHei";
+          font-weight: 400;
+          // line-height: 26px;
+          color: #ffffff;
+          display: flex;
+          flex: 1;
+          text-shadow: 1px 1px 0px #1a3f76;
+          &::before {
+            content: attr(text);
+            position: absolute;
+            z-index: 10;
+            color: #ffffff;
+            // 渐变样式
+            background: linear-gradient(180deg, #ffffff 0%, #43b4c5 100%);
+            -webkit-background-clip: text;
+            color: transparent;
+            // 去除继承父级样式
+            text-shadow: none;
+          }
+        }
+      }
+      .closeimg {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        right: 0px;
+        top: 6px;
+        cursor: pointer;
+      }
+    }
+  }
+  .el-dialog__body {
+    padding: 22px 20px 60px 20px;
+  }
+  // 视频播放
+  .watch-video-play {
+    width: 100%;
+    height: 500px;
+    .flv-js {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/assets/styles/sidebar.scss

@@ -3,7 +3,7 @@
   .main-container {
     height: 100%;
     transition: margin-left .28s;
-    margin-left: 260px;
+    margin-left: 250px;
     position: relative;
   }
 

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 230px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/layout/components/AppMain.vue

@@ -65,6 +65,8 @@ export default {
   border-radius: 5px;
   height: calc(100vh - 100px);
   overflow-y: auto;
+  background: #ffffff;
+  padding: 10px;
 }
 
 .fixed-header+.app-main {