vue-openlayers-plugin 1.0.31 → 1.0.33

package/lib/style.css

@@ -1,5 +1,5 @@
 
-.map-info-panel[data-v-53c8deda] {
+.map-info-panel[data-v-9900e920] {
   position: absolute;
   gap: 12px;
   bottom: 0px;
@@ -1491,18 +1491,18 @@ label[data-v-21ab8d8c] {
 }
 
 .layer-dialog {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
   /* 全局样式面板样式 */
 
 /* 主标签页样式 */
 }
 .global-style-panel {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
     padding: 16px;
     border-bottom: 1px solid #eee;
     background-color: #f8f9fa;
 }
-.panel-title[data-v-2456ec00] {
+.panel-title[data-v-6929b38c] {
       margin: 0 0 16px 0;
       font-size: 14px;
       font-weight: 600;
@@ -1511,32 +1511,32 @@ label[data-v-21ab8d8c] {
       padding-bottom: 8px;
 }
 .config-section {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
       margin-bottom: 16px;
 }
-h5[data-v-2456ec00] {
+h5[data-v-6929b38c] {
         margin: 0 0 12px 0;
         font-size: 13px;
         font-weight: 500;
         color: #666;
 }
 .config-item {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
         display: flex;
         align-items: center;
         margin-bottom: 12px;
         gap: 8px;
 }
-label[data-v-2456ec00] {
+label[data-v-6929b38c] {
           flex: 0 0 60px;
           font-size: 12px;
           color: #666;
 }
-.el-slider[data-v-2456ec00] {
+.el-slider[data-v-6929b38c] {
           flex: 1;
           margin: 0 8px;
 }
-.value-text[data-v-2456ec00] {
+.value-text[data-v-6929b38c] {
           flex: 0 0 45px;
           font-size: 12px;
           color: #999;
@@ -1544,29 +1544,29 @@ label[data-v-2456ec00] {
 }
 }
 .preset-buttons {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
         display: flex;
         gap: 6px;
         flex-wrap: wrap;
 }
-.el-button[data-v-2456ec00] {
+.el-button[data-v-6929b38c] {
           flex: 1;
           min-width: 60px;
 }
 }
 }
-.panel-actions[data-v-2456ec00] {
+.panel-actions[data-v-6929b38c] {
       margin-top: 16px;
       padding-top: 12px;
       border-top: 1px solid #ddd;
       text-align: center;
 }
-.custom-css-input[data-v-2456ec00] {
+.custom-css-input[data-v-6929b38c] {
       font-family: 'Courier New', monospace;
       font-size: 12px;
       line-height: 1.4;
 }
-.custom-css-input[data-v-2456ec00] .el-textarea__inner {
+.custom-css-input[data-v-6929b38c] .el-textarea__inner {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        line-height: 1.4;
@@ -1574,37 +1574,37 @@ label[data-v-2456ec00] {
        border: 1px solid #e9ecef;
 }
 .style-tabs {
-[data-v-2456ec00] .el-tabs__header {
+[data-v-6929b38c] .el-tabs__header {
          margin: 0 0 16px 0;
 }
-[data-v-2456ec00] .el-tabs__nav-wrap {
+[data-v-6929b38c] .el-tabs__nav-wrap {
          padding: 0;
 }
-[data-v-2456ec00] .el-tabs__item {
+[data-v-6929b38c] .el-tabs__item {
          font-size: 12px;
          padding: 0 16px;
          height: 32px;
          line-height: 32px;
 }
-[data-v-2456ec00] .el-tabs__content {
+[data-v-6929b38c] .el-tabs__content {
          padding: 0;
 }
 }
 .current-style-display {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
        margin-top: 16px;
        padding: 12px;
        background-color: #f5f5f5;
        border-radius: 4px;
        border: 1px solid #e9ecef;
 }
-h6[data-v-2456ec00] {
+h6[data-v-6929b38c] {
          margin: 0 0 8px 0;
          font-size: 12px;
          font-weight: 500;
          color: #666;
 }
-.style-preview[data-v-2456ec00] {
+.style-preview[data-v-6929b38c] {
          font-family: 'Courier New', monospace;
          font-size: 11px;
          line-height: 1.4;
@@ -1620,17 +1620,17 @@ h6[data-v-2456ec00] {
 }
 }
 }
-.main-tabs[data-v-2456ec00] {
+.main-tabs[data-v-6929b38c] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.main-tabs .el-tabs__content[data-v-2456ec00] {
+.main-tabs .el-tabs__content[data-v-6929b38c] {
   flex: 1;
   overflow: hidden;
   padding: 0;
 }
-.main-tabs .el-tab-pane[data-v-2456ec00] {
+.main-tabs .el-tab-pane[data-v-6929b38c] {
   height: 100%;
   overflow: auto;
   display: flex;
@@ -1638,16 +1638,16 @@ h6[data-v-2456ec00] {
 }
 .layer-tree {
 .tree-node-content {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
       width: 100%;
 }
-.group-node[data-v-2456ec00] {
+.group-node[data-v-6929b38c] {
         display: flex;
         align-items: center;
         padding: 8px 0;
 }
 .layer-item {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -1655,17 +1655,17 @@ h6[data-v-2456ec00] {
           padding: 6px 0;
 }
 .layer-info {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
             display: flex;
             align-items: center;
             flex: 1;
             min-width: 0;
 }
-.layer-icon[data-v-2456ec00] {
+.layer-icon[data-v-6929b38c] {
               margin-right: 8px;
               flex-shrink: 0;
 }
-.layer-name[data-v-2456ec00] {
+.layer-name[data-v-6929b38c] {
               font-size: 14px;
               color: #333;
               white-space: nowrap;
@@ -1674,23 +1674,23 @@ h6[data-v-2456ec00] {
 }
 }
 .layer-controls {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
             display: flex;
             align-items: center;
             gap: 8px;
 }
 .opacity-control {
-&[data-v-2456ec00] {
+&[data-v-6929b38c] {
               display: flex;
               align-items: center;
               gap: 8px;
               min-width: 120px;
 }
-.opacity-slider[data-v-2456ec00] {
+.opacity-slider[data-v-6929b38c] {
                 flex: 1;
                 min-width: 80px;
 }
-.opacity-value[data-v-2456ec00] {
+.opacity-value[data-v-6929b38c] {
                 font-size: 12px;
                 color: #666;
                 min-width: 35px;
@@ -1698,7 +1698,7 @@ h6[data-v-2456ec00] {
                 white-space: nowrap;
 }
 }
-.style-config-btn[data-v-2456ec00] {
+.style-config-btn[data-v-6929b38c] {
               width: 24px;
               height: 24px;
               padding: 0;
@@ -1711,7 +1711,7 @@ h6[data-v-2456ec00] {
 }
 
 /* 样式配置面板样式 */
-[data-v-2456ec00] .layer-style-popover {
+[data-v-6929b38c] .layer-style-popover {
 .style-config-panel {
 & {
     padding: 0;
@@ -1790,7 +1790,7 @@ label {
 }
 }
 
-.ol-popup[data-v-90f1b0a2] {
+.ol-popup[data-v-9a5b6333] {
   position: absolute;
   background-color: white;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
@@ -1801,10 +1801,12 @@ label {
   left: -150px; /* 调整为更精确的居中对齐，考虑边框和内边距 */
   min-width: 280px;
   z-index: 1000;
+  /* 确保popup区域不会穿透点击事件到地图 */
+  pointer-events: auto;
 }
 
 /* 移除了重复的伪元素箭头样式，使用 .ol-popup-tip 元素代替 */
-.ol-popup-closer[data-v-90f1b0a2] {
+.ol-popup-closer[data-v-9a5b6333] {
   text-decoration: none;
   position: absolute;
   top: 2px;
@@ -1822,14 +1824,31 @@ label {
   align-items: center;
   justify-content: center;
 }
-.ol-popup-closer[data-v-90f1b0a2]:hover {
+.ol-popup-closer[data-v-9a5b6333]:hover {
   color: #999;
 }
-.ol-popup-content[data-v-90f1b0a2] {
+.ol-popup-content[data-v-9a5b6333] {
   max-height: 400px;
   overflow-y: auto;
+  /* 自定义滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 #f1f1f1;
+}
+.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar {
+  width: 6px;
+}
+.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
 }
-.ol-popup-tip[data-v-90f1b0a2] {
+.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+.ol-popup-tip[data-v-9a5b6333] {
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
@@ -1842,31 +1861,53 @@ label {
 }
 
 /* 不同位置的样式 */
-.ol-popup-top[data-v-90f1b0a2] {
+.ol-popup-top[data-v-9a5b6333] {
   bottom: 12px;
 }
-.ol-popup-bottom[data-v-90f1b0a2] {
+.ol-popup-bottom[data-v-9a5b6333] {
   top: 12px;
 }
-.ol-popup-bottom .ol-popup-tip[data-v-90f1b0a2] {
+.ol-popup-bottom .ol-popup-tip[data-v-9a5b6333] {
   border-top: none;
   border-bottom: 10px solid white;
   top: -10px;
   bottom: auto;
 }
-.ol-popup-left[data-v-90f1b0a2] {
+.ol-popup-left[data-v-9a5b6333] {
   right: 12px;
   left: auto;
 }
-.ol-popup-right[data-v-90f1b0a2] {
+.ol-popup-right[data-v-9a5b6333] {
   left: 12px;
 }
-.ol-popup-default[data-v-90f1b0a2] {
+.ol-popup-default[data-v-9a5b6333] {
   text-align: center;
   color: #666;
   font-style: italic;
 }
 
+/* 竖向显示样式 */
+.ol-popup-vertical[data-v-9a5b6333] {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  max-width: 300px;
+  width: auto;
+}
+.ol-popup-vertical .ol-popup-content[data-v-9a5b6333] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* 允许内容区域收缩 */
+}
+.ol-popup-vertical .ol-popup-closer[data-v-9a5b6333] {
+  position: relative;
+  top: auto;
+  right: auto;
+  align-self: flex-end;
+  margin-bottom: 8px;
+}
+
 .html-popup-content[data-v-0f5b8711] {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
@@ -2151,24 +2192,24 @@ label {
   border-radius: 50%;
 }
 
-.array-popup-content[data-v-620d344e] {
+.array-popup-content[data-v-4a372183] {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   max-width: 600px;
 }
-.array-popup-title[data-v-620d344e] {
+.array-popup-title[data-v-4a372183] {
   font-size: 16px;
   font-weight: 600;
   color: #333;
   margin-bottom: 8px;
   text-align: center;
 }
-.array-popup-description[data-v-620d344e] {
+.array-popup-description[data-v-4a372183] {
   font-size: 14px;
   color: #666;
   margin-bottom: 12px;
   text-align: center;
 }
-.view-switch[data-v-620d344e] {
+.view-switch[data-v-4a372183] {
   display: flex;
   gap: 4px;
   margin-bottom: 12px;
@@ -2176,7 +2217,7 @@ label {
   border-radius: 6px;
   padding: 2px;
 }
-.view-btn[data-v-620d344e] {
+.view-btn[data-v-4a372183] {
   flex: 1;
   padding: 6px 12px;
   border: none;
@@ -2186,17 +2227,17 @@ label {
   font-size: 12px;
   transition: all 0.2s ease;
 }
-.view-btn.active[data-v-620d344e] {
+.view-btn.active[data-v-4a372183] {
   background: #1890ff;
   color: white;
 }
-.view-btn[data-v-620d344e]:hover:not(.active) {
+.view-btn[data-v-4a372183]:hover:not(.active) {
   background: #e6f7ff;
 }
-.search-container[data-v-620d344e] {
+.search-container[data-v-4a372183] {
   margin-bottom: 12px;
 }
-.search-input[data-v-620d344e] {
+.search-input[data-v-4a372183] {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid #d9d9d9;
@@ -2205,10 +2246,10 @@ label {
   outline: none;
   transition: border-color 0.2s ease;
 }
-.search-input[data-v-620d344e]:focus {
+.search-input[data-v-4a372183]:focus {
   border-color: #1890ff;
 }
-.data-stats[data-v-620d344e] {
+.data-stats[data-v-4a372183] {
   font-size: 12px;
   color: #666;
   margin-bottom: 8px;
@@ -2216,18 +2257,18 @@ label {
 }
 
 /* 表格视图 */
-.table-container[data-v-620d344e] {
+.table-container[data-v-4a372183] {
   max-height: 300px;
   overflow: auto;
   border: 1px solid #f0f0f0;
   border-radius: 4px;
 }
-.data-table[data-v-620d344e] {
+.data-table[data-v-4a372183] {
   width: 100%;
   border-collapse: collapse;
   font-size: 12px;
 }
-.data-table th[data-v-620d344e] {
+.data-table th[data-v-4a372183] {
   background: #fafafa;
   padding: 8px;
   text-align: left;
@@ -2237,45 +2278,45 @@ label {
   top: 0;
   z-index: 1;
 }
-.data-table th.sortable[data-v-620d344e] {
+.data-table th.sortable[data-v-4a372183] {
   cursor: pointer;
   user-select: none;
 }
-.data-table th.sortable[data-v-620d344e]:hover {
+.data-table th.sortable[data-v-4a372183]:hover {
   background: #f0f0f0;
 }
-.sort-indicator[data-v-620d344e] {
+.sort-indicator[data-v-4a372183] {
   margin-left: 4px;
   font-size: 10px;
 }
-.data-table td[data-v-620d344e] {
+.data-table td[data-v-4a372183] {
   padding: 8px;
   border-bottom: 1px solid #f0f0f0;
 }
-.data-table tbody tr[data-v-620d344e]:hover {
+.data-table tbody tr[data-v-4a372183]:hover {
   background: #f5f5f5;
   cursor: pointer;
 }
-.table-image[data-v-620d344e] {
+.table-image[data-v-4a372183] {
   width: 40px;
   height: 40px;
   object-fit: cover;
   border-radius: 4px;
 }
-.table-link[data-v-620d344e] {
+.table-link[data-v-4a372183] {
   color: #1890ff;
   text-decoration: none;
 }
-.table-link[data-v-620d344e]:hover {
+.table-link[data-v-4a372183]:hover {
   text-decoration: underline;
 }
 
 /* 列表视图 */
-.list-view[data-v-620d344e] {
+.list-view[data-v-4a372183] {
   max-height: 300px;
   overflow-y: auto;
 }
-.list-item[data-v-620d344e] {
+.list-item[data-v-4a372183] {
   padding: 12px;
   border: 1px solid #f0f0f0;
   border-radius: 4px;
@@ -2283,100 +2324,100 @@ label {
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.list-item[data-v-620d344e]:hover {
+.list-item[data-v-4a372183]:hover {
   border-color: #1890ff;
   box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
 }
-.list-field[data-v-620d344e] {
+.list-field[data-v-4a372183] {
   display: flex;
   margin-bottom: 4px;
   font-size: 12px;
 }
-.list-field[data-v-620d344e]:last-child {
+.list-field[data-v-4a372183]:last-child {
   margin-bottom: 0;
 }
-.field-label[data-v-620d344e] {
+.field-label[data-v-4a372183] {
   font-weight: 600;
   color: #666;
   min-width: 80px;
   margin-right: 8px;
 }
-.field-value[data-v-620d344e] {
+.field-value[data-v-4a372183] {
   flex: 1;
   color: #333;
 }
-.list-image[data-v-620d344e] {
+.list-image[data-v-4a372183] {
   width: 30px;
   height: 30px;
   object-fit: cover;
   border-radius: 4px;
 }
-.list-link[data-v-620d344e] {
+.list-link[data-v-4a372183] {
   color: #1890ff;
   text-decoration: none;
 }
-.list-link[data-v-620d344e]:hover {
+.list-link[data-v-4a372183]:hover {
   text-decoration: underline;
 }
 
 /* 卡片视图 */
-.card-view[data-v-620d344e] {
+.card-view[data-v-4a372183] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 12px;
   max-height: 300px;
   overflow-y: auto;
 }
-.card-item[data-v-620d344e] {
+.card-item[data-v-4a372183] {
   border: 1px solid #f0f0f0;
   border-radius: 8px;
   padding: 12px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.card-item[data-v-620d344e]:hover {
+.card-item[data-v-4a372183]:hover {
   border-color: #1890ff;
   box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
 }
-.card-header h4[data-v-620d344e] {
+.card-header h4[data-v-4a372183] {
   margin: 0 0 8px 0;
   font-size: 14px;
   font-weight: 600;
   color: #333;
 }
-.card-field[data-v-620d344e] {
+.card-field[data-v-4a372183] {
   display: flex;
   flex-direction: column;
   margin-bottom: 6px;
   font-size: 12px;
 }
-.card-field[data-v-620d344e]:last-child {
+.card-field[data-v-4a372183]:last-child {
   margin-bottom: 0;
 }
-.card-field .field-label[data-v-620d344e] {
+.card-field .field-label[data-v-4a372183] {
   font-weight: 600;
   color: #666;
   margin-bottom: 2px;
 }
-.card-field .field-value[data-v-620d344e] {
+.card-field .field-value[data-v-4a372183] {
   color: #333;
 }
-.card-image[data-v-620d344e] {
+.card-image[data-v-4a372183] {
   width: 40px;
   height: 40px;
   object-fit: cover;
   border-radius: 4px;
 }
-.card-link[data-v-620d344e] {
+.card-link[data-v-4a372183] {
   color: #1890ff;
   text-decoration: none;
 }
-.card-link[data-v-620d344e]:hover {
+.card-link[data-v-4a372183]:hover {
   text-decoration: underline;
 }
 
 /* 分页 */
-.pagination[data-v-620d344e] {
+.pagination[data-v-4a372183] {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2384,7 +2425,7 @@ label {
   padding-top: 12px;
   border-top: 1px solid #f0f0f0;
 }
-.page-btn[data-v-620d344e] {
+.page-btn[data-v-4a372183] {
   padding: 6px 12px;
   border: 1px solid #d9d9d9;
   background: white;
@@ -2393,34 +2434,34 @@ label {
   font-size: 12px;
   transition: all 0.2s ease;
 }
-.page-btn[data-v-620d344e]:hover:not(:disabled) {
+.page-btn[data-v-4a372183]:hover:not(:disabled) {
   border-color: #1890ff;
   color: #1890ff;
 }
-.page-btn[data-v-620d344e]:disabled {
+.page-btn[data-v-4a372183]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.page-info[data-v-620d344e] {
+.page-info[data-v-4a372183] {
   font-size: 12px;
   color: #666;
 }
 
 /* 空数据 */
-.empty-data[data-v-620d344e] {
+.empty-data[data-v-4a372183] {
   text-align: center;
   padding: 40px 20px;
   color: #999;
 }
-.empty-icon[data-v-620d344e] {
+.empty-icon[data-v-4a372183] {
   font-size: 48px;
   margin-bottom: 12px;
 }
-.empty-text[data-v-620d344e] {
+.empty-text[data-v-4a372183] {
   font-size: 14px;
 }
 
-.context-menu[data-v-7dc7f994] {
+.context-menu[data-v-78070f98] {
   background: white;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
@@ -2428,7 +2469,7 @@ label {
   padding: 4px 0;
   min-width: 120px;
 }
-.context-menu-item[data-v-7dc7f994] {
+.context-menu-item[data-v-78070f98] {
   display: flex;
   align-items: center;
   padding: 8px 12px;
@@ -2437,10 +2478,10 @@ label {
   color: #606266;
   transition: background-color 0.3s;
 }
-.context-menu-item[data-v-7dc7f994]:hover {
+.context-menu-item[data-v-78070f98]:hover {
   background-color: #f5f7fa;
 }
-.context-menu-item .el-icon[data-v-7dc7f994] {
+.context-menu-item .el-icon[data-v-78070f98] {
   margin-right: 8px;
   font-size: 16px;
 }