vue-openlayers-plugin 1.0.66 → 1.0.68

package/lib/style.css

@@ -1,5 +1,5 @@
 
-.ol-popup[data-v-9a5b6333] {
+.ol-popup {
   position: absolute;
   background-color: white;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
@@ -15,7 +15,7 @@
 }
 
 /* 移除了重复的伪元素箭头样式，使用 .ol-popup-tip 元素代替 */
-.ol-popup-closer[data-v-9a5b6333] {
+.ol-popup-closer {
   text-decoration: none;
   position: absolute;
   top: 2px;
@@ -33,31 +33,31 @@
   align-items: center;
   justify-content: center;
 }
-.ol-popup-closer[data-v-9a5b6333]:hover {
+.ol-popup-closer:hover {
   color: #999;
 }
-.ol-popup-content[data-v-9a5b6333] {
+.ol-popup-content {
   max-height: 400px;
   overflow-y: auto;
   /* 自定义滚动条样式 */
   scrollbar-width: thin;
   scrollbar-color: #c1c1c1 #f1f1f1;
 }
-.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar {
+.ol-popup-content::-webkit-scrollbar {
   width: 6px;
 }
-.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar-track {
+.ol-popup-content::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 3px;
 }
-.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar-thumb {
+.ol-popup-content::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   border-radius: 3px;
 }
-.ol-popup-content[data-v-9a5b6333]::-webkit-scrollbar-thumb:hover {
+.ol-popup-content::-webkit-scrollbar-thumb:hover {
   background: #a1a1a1;
 }
-.ol-popup-tip[data-v-9a5b6333] {
+.ol-popup-tip {
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
@@ -70,46 +70,46 @@
 }
 
 /* 不同位置的样式 */
-.ol-popup-top[data-v-9a5b6333] {
+.ol-popup-top {
   bottom: 12px;
 }
-.ol-popup-bottom[data-v-9a5b6333] {
+.ol-popup-bottom {
   top: 12px;
 }
-.ol-popup-bottom .ol-popup-tip[data-v-9a5b6333] {
+.ol-popup-bottom .ol-popup-tip {
   border-top: none;
   border-bottom: 10px solid white;
   top: -10px;
   bottom: auto;
 }
-.ol-popup-left[data-v-9a5b6333] {
+.ol-popup-left {
   right: 12px;
   left: auto;
 }
-.ol-popup-right[data-v-9a5b6333] {
+.ol-popup-right {
   left: 12px;
 }
-.ol-popup-default[data-v-9a5b6333] {
+.ol-popup-default {
   text-align: center;
   color: #666;
   font-style: italic;
 }
 
 /* 竖向显示样式 */
-.ol-popup-vertical[data-v-9a5b6333] {
+.ol-popup-vertical {
   display: flex;
   flex-direction: column;
   min-width: 200px;
   max-width: 300px;
   width: auto;
 }
-.ol-popup-vertical .ol-popup-content[data-v-9a5b6333] {
+.ol-popup-vertical .ol-popup-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0; /* 允许内容区域收缩 */
 }
-.ol-popup-vertical .ol-popup-closer[data-v-9a5b6333] {
+.ol-popup-vertical .ol-popup-closer {
   position: relative;
   top: auto;
   right: auto;
@@ -117,10 +117,10 @@
   margin-bottom: 8px;
 }
 
-.html-popup-content[data-v-0f5b8711] {
+.html-popup-content {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
-.html-popup-title[data-v-0f5b8711] {
+.html-popup-title {
   font-size: 16px;
   font-weight: 600;
   color: #333;
@@ -128,68 +128,68 @@
   padding-bottom: 8px;
   border-bottom: 1px solid #eee;
 }
-.html-popup-body[data-v-0f5b8711] {
+.html-popup-body {
   font-size: 14px;
   line-height: 1.5;
   color: #666;
 }
 
 /* HTML 内容样式 */
-.html-popup-body[data-v-0f5b8711] h1,
-.html-popup-body[data-v-0f5b8711] h2,
-.html-popup-body[data-v-0f5b8711] h3,
-.html-popup-body[data-v-0f5b8711] h4,
-.html-popup-body[data-v-0f5b8711] h5,
-.html-popup-body[data-v-0f5b8711] h6 {
+.html-popup-body :deep(h1),
+.html-popup-body :deep(h2),
+.html-popup-body :deep(h3),
+.html-popup-body :deep(h4),
+.html-popup-body :deep(h5),
+.html-popup-body :deep(h6) {
   margin: 0 0 8px 0;
   color: #333;
 }
-.html-popup-body[data-v-0f5b8711] p {
+.html-popup-body :deep(p) {
   margin: 0 0 8px 0;
 }
-.html-popup-body[data-v-0f5b8711] ul,
-.html-popup-body[data-v-0f5b8711] ol {
+.html-popup-body :deep(ul),
+.html-popup-body :deep(ol) {
   margin: 0 0 8px 0;
   padding-left: 20px;
 }
-.html-popup-body[data-v-0f5b8711] li {
+.html-popup-body :deep(li) {
   margin-bottom: 4px;
 }
-.html-popup-body[data-v-0f5b8711] a {
+.html-popup-body :deep(a) {
   color: #1890ff;
   text-decoration: none;
 }
-.html-popup-body[data-v-0f5b8711] a:hover {
+.html-popup-body :deep(a:hover) {
   text-decoration: underline;
 }
-.html-popup-body[data-v-0f5b8711] img {
+.html-popup-body :deep(img) {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
 }
-.html-popup-body[data-v-0f5b8711] table {
+.html-popup-body :deep(table) {
   width: 100%;
   border-collapse: collapse;
   margin: 8px 0;
 }
-.html-popup-body[data-v-0f5b8711] th,
-.html-popup-body[data-v-0f5b8711] td {
+.html-popup-body :deep(th),
+.html-popup-body :deep(td) {
   padding: 8px;
   text-align: left;
   border-bottom: 1px solid #eee;
 }
-.html-popup-body[data-v-0f5b8711] th {
+.html-popup-body :deep(th) {
   background-color: #f5f5f5;
   font-weight: 600;
 }
-.html-popup-body[data-v-0f5b8711] code {
+.html-popup-body :deep(code) {
   background-color: #f5f5f5;
   padding: 2px 4px;
   border-radius: 3px;
   font-family: 'Monaco', 'Consolas', monospace;
   font-size: 12px;
 }
-.html-popup-body[data-v-0f5b8711] pre {
+.html-popup-body :deep(pre) {
   background-color: #f5f5f5;
   padding: 12px;
   border-radius: 4px;
@@ -197,7 +197,7 @@
   font-family: 'Monaco', 'Consolas', monospace;
   font-size: 12px;
 }
-.html-popup-body[data-v-0f5b8711] blockquote {
+.html-popup-body :deep(blockquote) {
   margin: 8px 0;
   padding: 8px 16px;
   background-color: #f9f9f9;
@@ -205,26 +205,26 @@
   font-style: italic;
 }
 
-.image-popup-content[data-v-2b939e35] {
+.image-popup-content {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
-.image-popup-title[data-v-2b939e35] {
+.image-popup-title {
   font-size: 16px;
   font-weight: 600;
   color: #333;
   margin-bottom: 8px;
   text-align: center;
 }
-.image-popup-description[data-v-2b939e35] {
+.image-popup-description {
   font-size: 14px;
   color: #666;
   margin-bottom: 12px;
   text-align: center;
 }
-.image-popup-main[data-v-2b939e35] {
+.image-popup-main {
   margin-bottom: 12px;
 }
-.image-container[data-v-2b939e35] {
+.image-container {
   position: relative;
   display: flex;
   justify-content: center;
@@ -234,18 +234,18 @@
   overflow: hidden;
   min-height: 200px;
 }
-.main-image[data-v-2b939e35] {
+.main-image {
   max-width: 100%;
   max-height: 300px;
   object-fit: contain;
   cursor: pointer;
   transition: transform 0.2s ease;
 }
-.main-image[data-v-2b939e35]:hover {
+.main-image:hover {
   transform: scale(1.02);
 }
-.image-loading[data-v-2b939e35],
-.image-error[data-v-2b939e35] {
+.image-loading,
+.image-error {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -255,22 +255,22 @@
   align-items: center;
   color: #666;
 }
-.loading-spinner[data-v-2b939e35] {
+.loading-spinner {
   width: 20px;
   height: 20px;
   border: 2px solid #f3f3f3;
   border-top: 2px solid #1890ff;
   border-radius: 50%;
-  animation: spin-2b939e35 1s linear infinite;
+  animation: spin 1s linear infinite;
   margin-bottom: 8px;
 }
-@keyframes spin-2b939e35 {
+@keyframes spin {
 0% { transform: rotate(0deg);
 }
 100% { transform: rotate(360deg);
 }
 }
-.image-navigation[data-v-2b939e35] {
+.image-navigation {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -280,7 +280,7 @@
   padding: 0 10px;
   pointer-events: none;
 }
-.nav-btn[data-v-2b939e35] {
+.nav-btn {
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
@@ -292,14 +292,14 @@
   pointer-events: auto;
   transition: background-color 0.2s ease;
 }
-.nav-btn[data-v-2b939e35]:hover:not(:disabled) {
+.nav-btn:hover:not(:disabled) {
   background: rgba(0, 0, 0, 0.7);
 }
-.nav-btn[data-v-2b939e35]:disabled {
+.nav-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
-.image-counter[data-v-2b939e35] {
+.image-counter {
   position: absolute;
   bottom: 10px;
   right: 10px;
@@ -309,13 +309,13 @@
   border-radius: 12px;
   font-size: 12px;
 }
-.image-thumbnails[data-v-2b939e35] {
+.image-thumbnails {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding: 8px 0;
 }
-.thumbnail[data-v-2b939e35] {
+.thumbnail {
   flex-shrink: 0;
   width: 60px;
   height: 60px;
@@ -325,19 +325,19 @@
   border: 2px solid transparent;
   transition: border-color 0.2s ease;
 }
-.thumbnail.active[data-v-2b939e35] {
+.thumbnail.active {
   border-color: #1890ff;
 }
-.thumbnail img[data-v-2b939e35] {
+.thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.slideshow-controls[data-v-2b939e35] {
+.slideshow-controls {
   text-align: center;
   margin-top: 8px;
 }
-.slideshow-btn[data-v-2b939e35] {
+.slideshow-btn {
   background: #1890ff;
   color: white;
   border: none;
@@ -347,18 +347,18 @@
   font-size: 12px;
   transition: background-color 0.2s ease;
 }
-.slideshow-btn[data-v-2b939e35]:hover {
+.slideshow-btn:hover {
   background: #40a9ff;
 }
-.slideshow-btn.active[data-v-2b939e35] {
+.slideshow-btn.active {
   background: #ff4d4f;
 }
-.slideshow-btn.active[data-v-2b939e35]:hover {
+.slideshow-btn.active:hover {
   background: #ff7875;
 }
 
 /* 全屏查看器 */
-.image-fullscreen[data-v-2b939e35] {
+.image-fullscreen {
   position: fixed;
   top: 0;
   left: 0;
@@ -371,17 +371,17 @@
   z-index: 9999;
   cursor: pointer;
 }
-.fullscreen-container[data-v-2b939e35] {
+.fullscreen-container {
   position: relative;
   max-width: 90vw;
   max-height: 90vh;
 }
-.fullscreen-image[data-v-2b939e35] {
+.fullscreen-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }
-.fullscreen-close[data-v-2b939e35] {
+.fullscreen-close {
   position: absolute;
   top: -40px;
   right: 0;
@@ -396,29 +396,29 @@
   align-items: center;
   justify-content: center;
 }
-.fullscreen-close[data-v-2b939e35]:hover {
+.fullscreen-close:hover {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
 }
 
-.array-popup-content[data-v-140dd964] {
+.array-popup-content {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   max-width: 600px;
 }
-.array-popup-title[data-v-140dd964] {
+.array-popup-title {
   font-size: 16px;
   font-weight: 600;
   color: #333;
   margin-bottom: 8px;
   text-align: center;
 }
-.array-popup-description[data-v-140dd964] {
+.array-popup-description {
   font-size: 14px;
   color: #666;
   margin-bottom: 12px;
   text-align: center;
 }
-.view-switch[data-v-140dd964] {
+.view-switch {
   display: flex;
   gap: 4px;
   margin-bottom: 12px;
@@ -426,7 +426,7 @@
   border-radius: 6px;
   padding: 2px;
 }
-.view-btn[data-v-140dd964] {
+.view-btn {
   flex: 1;
   padding: 6px 12px;
   border: none;
@@ -436,17 +436,17 @@
   font-size: 12px;
   transition: all 0.2s ease;
 }
-.view-btn.active[data-v-140dd964] {
+.view-btn.active {
   background: #1890ff;
   color: white;
 }
-.view-btn[data-v-140dd964]:hover:not(.active) {
+.view-btn:hover:not(.active) {
   background: #e6f7ff;
 }
-.search-container[data-v-140dd964] {
+.search-container {
   margin-bottom: 12px;
 }
-.search-input[data-v-140dd964] {
+.search-input {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid #d9d9d9;
@@ -455,10 +455,10 @@
   outline: none;
   transition: border-color 0.2s ease;
 }
-.search-input[data-v-140dd964]:focus {
+.search-input:focus {
   border-color: #1890ff;
 }
-.data-stats[data-v-140dd964] {
+.data-stats {
   font-size: 12px;
   color: #666;
   margin-bottom: 8px;
@@ -466,18 +466,18 @@
 }
 
 /* 表格视图 */
-.table-container[data-v-140dd964] {
+.table-container {
   max-height: 300px;
   overflow: auto;
   border: 1px solid #f0f0f0;
   border-radius: 4px;
 }
-.data-table[data-v-140dd964] {
+.data-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 12px;
 }
-.data-table th[data-v-140dd964] {
+.data-table th {
   background: #fafafa;
   padding: 8px;
   text-align: left;
@@ -487,45 +487,45 @@
   top: 0;
   z-index: 1;
 }
-.data-table th.sortable[data-v-140dd964] {
+.data-table th.sortable {
   cursor: pointer;
   user-select: none;
 }
-.data-table th.sortable[data-v-140dd964]:hover {
+.data-table th.sortable:hover {
   background: #f0f0f0;
 }
-.sort-indicator[data-v-140dd964] {
+.sort-indicator {
   margin-left: 4px;
   font-size: 10px;
 }
-.data-table td[data-v-140dd964] {
+.data-table td {
   padding: 8px;
   border-bottom: 1px solid #f0f0f0;
 }
-.data-table tbody tr[data-v-140dd964]:hover {
+.data-table tbody tr:hover {
   background: #f5f5f5;
   cursor: pointer;
 }
-.table-image[data-v-140dd964] {
+.table-image {
   width: 40px;
   height: 40px;
   object-fit: cover;
   border-radius: 4px;
 }
-.table-link[data-v-140dd964] {
+.table-link {
   color: #1890ff;
   text-decoration: none;
 }
-.table-link[data-v-140dd964]:hover {
+.table-link:hover {
   text-decoration: underline;
 }
 
 /* 列表视图 */
-.list-view[data-v-140dd964] {
+.list-view {
   max-height: 300px;
   overflow-y: auto;
 }
-.list-item[data-v-140dd964] {
+.list-item {
   padding: 12px;
   border: 1px solid #f0f0f0;
   border-radius: 4px;
@@ -533,100 +533,100 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.list-item[data-v-140dd964]:hover {
+.list-item:hover {
   border-color: #1890ff;
   box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
 }
-.list-field[data-v-140dd964] {
+.list-field {
   display: flex;
   margin-bottom: 4px;
   font-size: 12px;
 }
-.list-field[data-v-140dd964]:last-child {
+.list-field:last-child {
   margin-bottom: 0;
 }
-.field-label[data-v-140dd964] {
+.field-label {
   font-weight: 600;
   color: #666;
   min-width: 80px;
   margin-right: 8px;
 }
-.field-value[data-v-140dd964] {
+.field-value {
   flex: 1;
   color: #333;
 }
-.list-image[data-v-140dd964] {
+.list-image {
   width: 30px;
   height: 30px;
   object-fit: cover;
   border-radius: 4px;
 }
-.list-link[data-v-140dd964] {
+.list-link {
   color: #1890ff;
   text-decoration: none;
 }
-.list-link[data-v-140dd964]:hover {
+.list-link:hover {
   text-decoration: underline;
 }
 
 /* 卡片视图 */
-.card-view[data-v-140dd964] {
+.card-view {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 12px;
   max-height: 300px;
   overflow-y: auto;
 }
-.card-item[data-v-140dd964] {
+.card-item {
   border: 1px solid #f0f0f0;
   border-radius: 8px;
   padding: 12px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.card-item[data-v-140dd964]:hover {
+.card-item:hover {
   border-color: #1890ff;
   box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
 }
-.card-header h4[data-v-140dd964] {
+.card-header h4 {
   margin: 0 0 8px 0;
   font-size: 14px;
   font-weight: 600;
   color: #333;
 }
-.card-field[data-v-140dd964] {
+.card-field {
   display: flex;
   flex-direction: column;
   margin-bottom: 6px;
   font-size: 12px;
 }
-.card-field[data-v-140dd964]:last-child {
+.card-field:last-child {
   margin-bottom: 0;
 }
-.card-field .field-label[data-v-140dd964] {
+.card-field .field-label {
   font-weight: 600;
   color: #666;
   margin-bottom: 2px;
 }
-.card-field .field-value[data-v-140dd964] {
+.card-field .field-value {
   color: #333;
 }
-.card-image[data-v-140dd964] {
+.card-image {
   width: 40px;
   height: 40px;
   object-fit: cover;
   border-radius: 4px;
 }
-.card-link[data-v-140dd964] {
+.card-link {
   color: #1890ff;
   text-decoration: none;
 }
-.card-link[data-v-140dd964]:hover {
+.card-link:hover {
   text-decoration: underline;
 }
 
 /* 分页 */
-.pagination[data-v-140dd964] {
+.pagination {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -634,7 +634,7 @@
   padding-top: 12px;
   border-top: 1px solid #f0f0f0;
 }
-.page-btn[data-v-140dd964] {
+.page-btn {
   padding: 6px 12px;
   border: 1px solid #d9d9d9;
   background: white;
@@ -643,34 +643,34 @@
   font-size: 12px;
   transition: all 0.2s ease;
 }
-.page-btn[data-v-140dd964]:hover:not(:disabled) {
+.page-btn:hover:not(:disabled) {
   border-color: #1890ff;
   color: #1890ff;
 }
-.page-btn[data-v-140dd964]:disabled {
+.page-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.page-info[data-v-140dd964] {
+.page-info {
   font-size: 12px;
   color: #666;
 }
 
 /* 空数据 */
-.empty-data[data-v-140dd964] {
+.empty-data {
   text-align: center;
   padding: 40px 20px;
   color: #999;
 }
-.empty-icon[data-v-140dd964] {
+.empty-icon {
   font-size: 48px;
   margin-bottom: 12px;
 }
-.empty-text[data-v-140dd964] {
+.empty-text {
   font-size: 14px;
 }
 
-.map-info-panel[data-v-9ef2c9f4] {
+.map-info-panel {
   position: absolute;
   gap: 12px;
   bottom: 0px;
@@ -685,19 +685,19 @@
 
 
 /* 右侧滑入动画 */
-.fixed.items-stretch.justify-end .bg-white[data-v-58c6b59c] {
-  animation: slideInRight-58c6b59c 0.3s ease-out;
+.fixed.items-stretch.justify-end .bg-white {
+  animation: slideInRight 0.3s ease-out;
 }
-.fixed.items-stretch.justify-start .bg-white[data-v-58c6b59c] {
-  animation: slideInLeft-58c6b59c 0.3s ease-out;
+.fixed.items-stretch.justify-start .bg-white {
+  animation: slideInLeft 0.3s ease-out;
 }
-.fixed.items-start.justify-center .bg-white[data-v-58c6b59c] {
-  animation: slideInTop-58c6b59c 0.3s ease-out;
+.fixed.items-start.justify-center .bg-white {
+  animation: slideInTop 0.3s ease-out;
 }
-.fixed.items-end.justify-center .bg-white[data-v-58c6b59c] {
-  animation: slideInBottom-58c6b59c 0.3s ease-out;
+.fixed.items-end.justify-center .bg-white {
+  animation: slideInBottom 0.3s ease-out;
 }
-@keyframes slideInRight-58c6b59c {
+@keyframes slideInRight {
 from {
     transform: translateX(100%);
 }
@@ -705,7 +705,7 @@ to {
     transform: translateX(0);
 }
 }
-@keyframes slideInLeft-58c6b59c {
+@keyframes slideInLeft {
 from {
     transform: translateX(-100%);
 }
@@ -713,7 +713,7 @@ to {
     transform: translateX(0);
 }
 }
-@keyframes slideInTop-58c6b59c {
+@keyframes slideInTop {
 from {
     transform: translateY(-100%);
 }
@@ -721,7 +721,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes slideInBottom-58c6b59c {
+@keyframes slideInBottom {
 from {
     transform: translateY(100%);
 }
@@ -731,8 +731,8 @@ to {
 }
 
 /* 调整右侧对话框的样式 */
-.fixed.items-stretch.justify-end .bg-white[data-v-58c6b59c],
-.fixed.items-stretch.justify-start .bg-white[data-v-58c6b59c] {
+.fixed.items-stretch.justify-end .bg-white,
+.fixed.items-stretch.justify-start .bg-white {
   max-width: none;
   max-height: none;
   border-radius: 0;
@@ -740,64 +740,64 @@ to {
 }
 
 /* 调整上下对话框的样式 */
-.fixed.items-start.justify-center .bg-white[data-v-58c6b59c],
-.fixed.items-end.justify-center .bg-white[data-v-58c6b59c] {
+.fixed.items-start.justify-center .bg-white,
+.fixed.items-end.justify-center .bg-white {
   max-height: none;
   width: 100vw;
   border-radius: 0;
 }
 
 /* 调整大小控制点样式 */
-.resize-n[data-v-58c6b59c] {
+.resize-n {
   top: -3px;
   left: 0;
   right: 0;
   height: 6px;
   cursor: n-resize;
 }
-.resize-ne[data-v-58c6b59c] {
+.resize-ne {
   top: -3px;
   right: -3px;
   width: 6px;
   height: 6px;
   cursor: ne-resize;
 }
-.resize-e[data-v-58c6b59c] {
+.resize-e {
   top: 0;
   right: -3px;
   bottom: 0;
   width: 6px;
   cursor: e-resize;
 }
-.resize-se[data-v-58c6b59c] {
+.resize-se {
   bottom: -3px;
   right: -3px;
   width: 6px;
   height: 6px;
   cursor: se-resize;
 }
-.resize-s[data-v-58c6b59c] {
+.resize-s {
   bottom: -3px;
   left: 0;
   right: 0;
   height: 6px;
   cursor: s-resize;
 }
-.resize-sw[data-v-58c6b59c] {
+.resize-sw {
   bottom: -3px;
   left: -3px;
   width: 6px;
   height: 6px;
   cursor: sw-resize;
 }
-.resize-w[data-v-58c6b59c] {
+.resize-w {
   top: 0;
   left: -3px;
   bottom: 0;
   width: 6px;
   cursor: w-resize;
 }
-.resize-nw[data-v-58c6b59c] {
+.resize-nw {
   top: -3px;
   left: -3px;
   width: 6px;
@@ -806,19 +806,19 @@ to {
 }
 
 /* 底图对话框样式 */
-.basemap-dialog[data-v-156831b6] {
+.basemap-dialog {
   /* CustomDialog 会处理右侧滑入动画 */
 }
 
 /* 底图内容容器 */
-.basemap-content[data-v-156831b6] {
+.basemap-content {
   padding: 16px;
   height: 100%;
   overflow: visible;
 }
 
 /* 底图网格布局 */
-.basemap-grid[data-v-156831b6] {
+.basemap-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 16px;
@@ -826,7 +826,7 @@ to {
 }
 
 /* 底图项目 */
-.basemap-item[data-v-156831b6] {
+.basemap-item {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -839,20 +839,20 @@ to {
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
-.basemap-item[data-v-156831b6]:hover {
+.basemap-item:hover {
   transform: translateY(-2px) scale(1.02);
   border-color: rgba(59, 130, 246, 0.3);
   box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 1) 100%);
 }
-.basemap-item.active[data-v-156831b6] {
+.basemap-item.active {
   border-color: #3b82f6;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.15) 100%);
   box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 /* 底图预览图片 */
-.basemap-preview[data-v-156831b6] {
+.basemap-preview {
   width: 100px;
   height: 75px;
   border-radius: 8px;
@@ -861,11 +861,11 @@ to {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }
-.basemap-item:hover .basemap-preview[data-v-156831b6] {
+.basemap-item:hover .basemap-preview {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   transform: scale(1.05);
 }
-.basemap-preview img[data-v-156831b6] {
+.basemap-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -875,7 +875,7 @@ to {
 }
 
 /* 底图名称 */
-.basemap-name[data-v-156831b6] {
+.basemap-name {
   font-size: 12px;
   font-weight: 500;
   color: #374151;
@@ -883,24 +883,24 @@ to {
   line-height: 1.4;
   transition: all 0.3s ease;
 }
-.basemap-item:hover .basemap-name[data-v-156831b6] {
+.basemap-item:hover .basemap-name {
   color: #1f2937;
   font-weight: 600;
 }
-.basemap-item.active .basemap-name[data-v-156831b6] {
+.basemap-item.active .basemap-name {
   color: #3b82f6;
   font-weight: 600;
 }
 
 /* 底图网格 */
-.basemap-grid[data-v-156831b6] {
+.basemap-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 16px;
 }
 
 /* 底图项 */
-.basemap-item[data-v-156831b6] {
+.basemap-item {
   cursor: pointer;
   border-radius: 12px;
   overflow: hidden;
@@ -910,7 +910,7 @@ to {
   backdrop-filter: blur(10px);
   position: relative;
 }
-.basemap-item[data-v-156831b6]::before {
+.basemap-item::before {
   content: '';
   position: absolute;
   top: 0;
@@ -922,25 +922,25 @@ to {
   transition: opacity 0.3s ease;
   z-index: 1;
 }
-.basemap-item[data-v-156831b6]:hover {
+.basemap-item:hover {
   transform: translateY(-4px) scale(1.02);
   border-color: rgba(59, 130, 246, 0.3);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }
-.basemap-item[data-v-156831b6]:hover::before {
+.basemap-item:hover::before {
   opacity: 1;
 }
-.basemap-item.active[data-v-156831b6] {
+.basemap-item.active {
   border-color: #3b82f6;
   box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
   transform: translateY(-2px);
 }
-.basemap-item.active[data-v-156831b6]::before {
+.basemap-item.active::before {
   opacity: 0.7;
 }
 
 /* 底图预览 */
-.basemap-preview[data-v-156831b6] {
+.basemap-preview {
   width: 100%;
   height: 80px;
   background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
@@ -951,18 +951,18 @@ to {
   position: relative;
   z-index: 2;
 }
-.basemap-preview img[data-v-156831b6] {
+.basemap-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
-.basemap-item:hover .basemap-preview img[data-v-156831b6] {
+.basemap-item:hover .basemap-preview img {
   transform: scale(1.1);
 }
 
 /* 底图名称 */
-.basemap-name[data-v-156831b6] {
+.basemap-name {
   padding: 12px 16px;
   text-align: center;
   font-size: 13px;
@@ -974,26 +974,26 @@ to {
   z-index: 2;
   letter-spacing: 0.3px;
 }
-.basemap-item.active .basemap-name[data-v-156831b6] {
+.basemap-item.active .basemap-name {
   color: #1f2937;
   font-weight: 600;
 }
 
 /* 响应式设计 */
 @media (max-width: 480px) {
-.basemap-panel[data-v-156831b6] {
+.basemap-panel {
     width: 100%;
 }
-.basemap-grid[data-v-156831b6] {
+.basemap-grid {
     grid-template-columns: 1fr;
 }
-.panel-content[data-v-156831b6] {
+.panel-content {
     padding: 16px;
 }
 }
 
 /* 动画关键帧 */
-@keyframes slideInRight-156831b6 {
+@keyframes slideInRight {
 from {
     transform: translateX(100%);
     opacity: 0;
@@ -1003,7 +1003,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes slideOutRight-156831b6 {
+@keyframes slideOutRight {
 from {
     transform: translateX(0);
     opacity: 1;
@@ -1101,53 +1101,53 @@ to {
 .dialog-footer[data-v-d868b567] {
 @apply hidden;
 }
-.coordinate-dialog[data-v-26c1acac] {
+.coordinate-dialog {
   --el-dialog-bg-color: #1a1a1a;
 }
-.coordinate-content[data-v-26c1acac] {
+.coordinate-content {
   padding: 10px 0;
 }
-.format-selection[data-v-26c1acac] {
+.format-selection {
   margin-bottom: 20px;
   padding: 15px;
   background: #f8f9fa;
   border-radius: 6px;
   border: 1px solid #e9ecef;
 }
-.format-title[data-v-26c1acac] {
+.format-title {
   font-weight: 500;
   margin-bottom: 10px;
   color: #495057;
 }
-.format-options[data-v-26c1acac] {
+.format-options {
   display: flex;
   gap: 20px;
 }
-.format-options[data-v-26c1acac] .el-radio {
+.format-options :deep(.el-radio) {
   margin-right: 0;
 }
-.coordinate-input[data-v-26c1acac] {
+.coordinate-input {
   margin-bottom: 20px;
 }
-.dialog-footer[data-v-26c1acac] {
+.dialog-footer {
   text-align: right;
 }
-.dialog-footer .el-button[data-v-26c1acac] {
+.dialog-footer .el-button {
   margin-left: 10px;
 }
 
 .region-dialog {
-.region-content[data-v-e968a62a] {
+.region-content {
     max-height: 500px;
     overflow-y: auto;
 }
-[data-v-e968a62a] .el-tabs__header {
+:deep(.el-tabs__header) {
     margin: 0 0 20px 0;
 }
-[data-v-e968a62a] .el-tabs__nav-wrap {
+:deep(.el-tabs__nav-wrap) {
     padding: 0 20px;
 }
-[data-v-e968a62a] .el-tabs__item {
+:deep(.el-tabs__item) {
     font-size: 16px;
     font-weight: 500;
     color: #606266;
@@ -1156,15 +1156,13 @@ to {
       font-weight: 600;
 }
 }
-[data-v-e968a62a] .el-tabs__active-bar {
+:deep(.el-tabs__active-bar) {
     background-color: #409eff;
 }
 .region-categories {
-.region-group {
-&[data-v-e968a62a] {
+.region-group {
       margin-bottom: 20px;
-}
-.group-title[data-v-e968a62a] {
+.group-title {
         font-size: 14px;
         font-weight: 600;
         color: #606266;
@@ -1172,14 +1170,11 @@ to {
         padding-left: 8px;
         border-left: 3px solid #409eff;
 }
-.region-items {
-&[data-v-e968a62a] {
+.region-items {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
-}
-.region-btn {
-&[data-v-e968a62a] {
+.region-btn {
           margin: 0;
           padding: 8px 16px;
           border: 1px solid #dcdfe6;
@@ -1187,8 +1182,7 @@ to {
           background: #fff;
           color: #606266;
           transition: all 0.3s;
-}
-&[data-v-e968a62a]:hover {
+&:hover {
             color: #409eff;
             border-color: #409eff;
             background: #ecf5ff;
@@ -1198,15 +1192,12 @@ to {
 }
 }
 .beijing-districts {
-.district-grid {
-&[data-v-e968a62a] {
+.district-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 12px;
       padding: 10px;
-}
-.district-btn {
-&[data-v-e968a62a] {
+.district-btn {
         padding: 12px 8px;
         border: 1px solid #dcdfe6;
         border-radius: 6px;
@@ -1220,15 +1211,14 @@ to {
         display: flex;
         align-items: center;
         justify-content: center;
-}
-&[data-v-e968a62a]:hover {
+&:hover {
           color: #409eff;
           border-color: #409eff;
           background: #ecf5ff;
           transform: translateY(-2px);
           box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
 }
-&.active[data-v-e968a62a] {
+&.active {
           color: #fff;
           background: #409eff;
           border-color: #409eff;
@@ -1241,7 +1231,7 @@ to {
 @media (max-width: 768px) {
 .region-dialog {
 .beijing-districts {
-.district-grid[data-v-e968a62a] {
+.district-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
 }
@@ -1251,30 +1241,30 @@ to {
 @media (max-width: 480px) {
 .region-dialog {
 .beijing-districts {
-.district-grid[data-v-e968a62a] {
+.district-grid {
         grid-template-columns: repeat(2, 1fr);
 }
 }
 }
 }
 
-.markers-dialog[data-v-940a2ace] {
+.markers-dialog {
   --el-dialog-bg-color: #1a1a1a;
 }
-.markers-content[data-v-940a2ace] {
+.markers-content {
   padding: 10px 0;
 }
-.toolbar[data-v-940a2ace] {
+.toolbar {
   margin-bottom: 15px;
   display: flex;
   gap: 10px;
 }
-.toolbar .adding-marker[data-v-940a2ace] {
+.toolbar .adding-marker {
   background-color: #f56c6c !important;
   border-color: #f56c6c !important;
-  animation: pulse-940a2ace 1.5s infinite;
+  animation: pulse 1.5s infinite;
 }
-@keyframes pulse-940a2ace {
+@keyframes pulse {
 0% {
     box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
 }
@@ -1285,57 +1275,57 @@ to {
     box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
 }
 }
-.search-filter[data-v-940a2ace] {
+.search-filter {
   margin-bottom: 15px;
   display: flex;
   align-items: center;
 }
-.markers-list[data-v-940a2ace] {
+.markers-list {
   margin-bottom: 20px;
 }
-.markers-table[data-v-940a2ace] {
+.markers-table {
   --el-table-bg-color: transparent;
   --el-table-tr-bg-color: transparent;
   --el-table-header-bg-color: rgba(255, 255, 255, 0.05);
 }
-.marker-name[data-v-940a2ace] {
+.marker-name {
   display: flex;
   align-items: center;
   gap: 5px;
 }
-.delete-btn[data-v-940a2ace] {
+.delete-btn {
   color: #f56c6c;
 }
-.delete-btn[data-v-940a2ace]:hover {
+.delete-btn:hover {
   color: #f78989;
 }
-.statistics[data-v-940a2ace] {
+.statistics {
   padding: 15px;
   background: rgba(64, 158, 255, 0.05);
   border-radius: 6px;
   border: 1px solid rgba(64, 158, 255, 0.2);
 }
-.dialog-footer[data-v-940a2ace] {
+.dialog-footer {
   text-align: right;
 }
 
-.bookmarks-dialog[data-v-f533ea83] {
+.bookmarks-dialog {
   --el-dialog-bg-color: #1a1a1a;
 }
-.bookmarks-content[data-v-f533ea83] {
+.bookmarks-content {
   padding: 10px 0;
 }
-.toolbar[data-v-f533ea83] {
+.toolbar {
   margin-bottom: 15px;
   display: flex;
   gap: 10px;
 }
-.search-filter[data-v-f533ea83] {
+.search-filter {
   margin-bottom: 15px;
   display: flex;
   align-items: center;
 }
-.bookmarks-grid[data-v-f533ea83] {
+.bookmarks-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 15px;
@@ -1343,7 +1333,7 @@ to {
   max-height: 400px;
   overflow-y: auto;
 }
-.bookmark-card[data-v-f533ea83] {
+.bookmark-card {
   border: 1px solid #303133;
   border-radius: 8px;
   overflow: hidden;
@@ -1351,12 +1341,12 @@ to {
   transition: all 0.3s ease;
   cursor: pointer;
 }
-.bookmark-card[data-v-f533ea83]:hover {
+.bookmark-card:hover {
   border-color: #409eff;
   box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
   transform: translateY(-2px);
 }
-.bookmark-thumbnail[data-v-f533ea83] {
+.bookmark-thumbnail {
   position: relative;
   height: 120px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -1364,10 +1354,10 @@ to {
   align-items: center;
   justify-content: center;
 }
-.thumbnail-placeholder[data-v-f533ea83] {
+.thumbnail-placeholder {
   opacity: 0.6;
 }
-.bookmark-overlay[data-v-f533ea83] {
+.bookmark-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -1380,13 +1370,13 @@ to {
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-.bookmark-card:hover .bookmark-overlay[data-v-f533ea83] {
+.bookmark-card:hover .bookmark-overlay {
   opacity: 1;
 }
-.bookmark-info[data-v-f533ea83] {
+.bookmark-info {
   padding: 12px;
 }
-.bookmark-title[data-v-f533ea83] {
+.bookmark-title {
   font-size: 16px;
   font-weight: bold;
   color: #e4e7ed;
@@ -1395,17 +1385,17 @@ to {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.bookmark-meta[data-v-f533ea83] {
+.bookmark-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
 }
-.use-count[data-v-f533ea83] {
+.use-count {
   font-size: 12px;
   color: #909399;
 }
-.bookmark-description[data-v-f533ea83] {
+.bookmark-description {
   font-size: 12px;
   color: #c0c4cc;
   margin-bottom: 8px;
@@ -1415,73 +1405,73 @@ to {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.bookmark-details[data-v-f533ea83] {
+.bookmark-details {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-bottom: 8px;
 }
-.detail-item[data-v-f533ea83] {
+.detail-item {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   color: #909399;
 }
-.bookmark-time[data-v-f533ea83] {
+.bookmark-time {
   font-size: 11px;
   color: #606266;
   text-align: right;
 }
-.delete-btn[data-v-f533ea83] {
+.delete-btn {
   color: #f56c6c;
 }
-.delete-btn[data-v-f533ea83]:hover {
+.delete-btn:hover {
   color: #f78989;
 }
-.empty-state[data-v-f533ea83] {
+.empty-state {
   text-align: center;
   padding: 40px 0;
 }
-.statistics[data-v-f533ea83] {
+.statistics {
   padding: 15px;
   background: rgba(64, 158, 255, 0.05);
   border-radius: 6px;
   border: 1px solid rgba(64, 158, 255, 0.2);
 }
-.dialog-footer[data-v-f533ea83] {
+.dialog-footer {
   text-align: right;
 }
 
 /* 自定义滚动条 */
-.bookmarks-grid[data-v-f533ea83]::-webkit-scrollbar {
+.bookmarks-grid::-webkit-scrollbar {
   width: 6px;
 }
-.bookmarks-grid[data-v-f533ea83]::-webkit-scrollbar-track {
+.bookmarks-grid::-webkit-scrollbar-track {
   background: #2c2c2c;
   border-radius: 3px;
 }
-.bookmarks-grid[data-v-f533ea83]::-webkit-scrollbar-thumb {
+.bookmarks-grid::-webkit-scrollbar-thumb {
   background: #409eff;
   border-radius: 3px;
 }
-.bookmarks-grid[data-v-f533ea83]::-webkit-scrollbar-thumb:hover {
+.bookmarks-grid::-webkit-scrollbar-thumb:hover {
   background: #66b1ff;
 }
 
 /* 地图预览容器样式 */
-.map-preview-container > div[data-v-b6e68ef8] {
+.map-preview-container > div {
   width: 100% !important;
   height: 100% !important;
 }
 
 /* 预览页面缩放变换 */
-.preview-page[data-v-b6e68ef8] {
+.preview-page {
   transform-origin: top center;
 }
 
 /* 确保地图容器有明确的尺寸 */
-#map-preview-container[data-v-b6e68ef8] {
+#map-preview-container {
   width: 100% !important;
   height: 400px !important;
   min-height: 400px !important;
@@ -1489,27 +1479,27 @@ to {
 }
 
 /* OpenLayers地图容器样式 */
-#map-preview-container .ol-viewport[data-v-b6e68ef8] {
+#map-preview-container .ol-viewport {
   width: 100% !important;
   height: 100% !important;
 }
 
 /* 确保Canvas元素正确显示 */
-#map-preview-container canvas[data-v-b6e68ef8] {
+#map-preview-container canvas {
   width: 100% !important;
   height: 100% !important;
 }
-.mark-tab-container[data-v-2ce9f7a4] {
+.mark-tab-container[data-v-127b85ab] {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 12px;
 }
-.type-select[data-v-2ce9f7a4] {
+.type-select[data-v-127b85ab] {
   width: 100%;
   margin-bottom: 12px;
 }
-.continuous-switch[data-v-2ce9f7a4] {
+.continuous-switch[data-v-127b85ab] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1518,18 +1508,18 @@ to {
   background-color: #f9fafb;
   border-radius: 6px;
 }
-.switch-label[data-v-2ce9f7a4] {
+.switch-label[data-v-127b85ab] {
   font-size: 14px;
   color: #374151;
 }
-.tools-grid[data-v-2ce9f7a4] {
+.tools-grid[data-v-127b85ab] {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   flex: 1;
   overflow: auto;
 }
-.tool-item[data-v-2ce9f7a4] {
+.tool-item[data-v-127b85ab] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1540,39 +1530,39 @@ to {
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.tool-item[data-v-2ce9f7a4]:hover {
+.tool-item[data-v-127b85ab]:hover {
   background-color: #f3f4f6;
   border-color: #60a5fa;
 }
-.tool-image[data-v-2ce9f7a4] {
+.tool-image[data-v-127b85ab] {
   width: 24px;
   height: 24px;
   margin-bottom: 4px;
 }
-.tool-icon-large[data-v-2ce9f7a4] {
+.tool-icon-large[data-v-127b85ab] {
   font-size: 24px;
   margin-bottom: 4px;
 }
-.tool-label[data-v-2ce9f7a4] {
+.tool-label[data-v-127b85ab] {
   font-size: 12px;
   color: #6b7280;
   text-align: center;
 }
-.tool-item:hover .tool-label[data-v-2ce9f7a4] {
+.tool-item:hover .tool-label[data-v-127b85ab] {
   color: #3b82f6;
 }
-.stop-drawing-section[data-v-2ce9f7a4] {
+.stop-drawing-section[data-v-127b85ab] {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid #e5e7eb;
 }
-.stop-drawing-section[data-v-2ce9f7a4] {
+.stop-drawing-section {
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid #e4e7ed;
   text-align: center;
 }
-.stop-drawing-section .el-button[data-v-2ce9f7a4] {
+.stop-drawing-section .el-button {
   width: 100%;
   font-weight: 500;
 }
@@ -1912,106 +1902,102 @@ to {
 [data-v-45410a30] .el-button,[data-v-45410a30] .el-slider,[data-v-45410a30] .el-icon {
   pointer-events: auto;
 }
-.absolute[data-v-d37bba0b] { 
+.absolute { 
   position: absolute;
 }
-.bottom-40px[data-v-d37bba0b] {
+.bottom-40px {
   bottom: 40px;
 }
 
 /* 图例面板样式 */
-.legend-collapsed[data-v-d37bba0b] {
+.legend-collapsed {
   transform: translateX(calc(100% - 40px));
 }
-.legend-collapsed[data-v-d37bba0b]:hover {
+.legend-collapsed:hover {
   transform: translateX(0);
 }
 
 /* 图例项样式 */
-.legend-item[data-v-d37bba0b] {
+.legend-item {
 @apply mb-2 last:mb-0;
 }
-.legend-title[data-v-d37bba0b] {
+.legend-title {
 @apply text-sm font-medium text-gray-700 mb-2;
 }
-.legend-content[data-v-d37bba0b] {
+.legend-content {
 @apply space-y-1;
 }
-.legend-symbol[data-v-d37bba0b] {
+.legend-symbol {
 @apply inline-block mr-2 align-middle;
 }
-.legend-label[data-v-d37bba0b] {
+.legend-label {
 @apply text-xs text-gray-600 align-middle;
 }
 
 /* 渐变图例样式 */
-.gradient-legend[data-v-d37bba0b] {
+.gradient-legend {
 @apply h-4 rounded mb-1;
 }
-.gradient-labels[data-v-d37bba0b] {
+.gradient-labels {
 @apply flex justify-between text-xs text-gray-500;
 }
 
 /* 分类图例样式 */
-.category-legend[data-v-d37bba0b] {
+.category-legend {
 @apply flex items-center mb-1;
 }
-.category-symbol[data-v-d37bba0b] {
+.category-symbol {
 @apply w-4 h-4 mr-2 rounded-sm;
 }
 
 /* 符号图例样式 */
-.symbol-legend[data-v-d37bba0b] {
+.symbol-legend {
 @apply flex items-center mb-1;
 }
-.symbol-item[data-v-d37bba0b] {
+.symbol-item {
 @apply w-4 h-4 mr-2;
 }
 
 /* 面板头部样式 */
-.legend-header[data-v-d37bba0b] {
+.legend-header {
 @apply flex items-center justify-between p-3 border-b border-gray-200;
 }
-.legend-body[data-v-d37bba0b] {
+.legend-body {
 @apply p-3 max-h-96 overflow-y-auto;
 }
 
 /* 折叠按钮样式 */
-.collapse-btn[data-v-d37bba0b] {
+.collapse-btn {
 @apply p-1 rounded hover:bg-gray-100 transition-colors;
 }
-.close-btn[data-v-d37bba0b] {
+.close-btn {
 @apply p-1 rounded hover:bg-gray-100 transition-colors text-gray-500 hover:text-gray-700;
 }
 
 .filter-panel {
 .config-section {
-&[data-v-c78acf80] {
     margin-bottom: 16px;
-}
-h5[data-v-c78acf80] {
+h5 {
       margin: 0 0 12px 0;
       font-size: 13px;
       font-weight: 500;
       color: #666;
 }
 .config-item {
-&[data-v-c78acf80] {
       display: flex;
       align-items: center;
       margin-bottom: 12px;
       gap: 8px;
-}
-label[data-v-c78acf80] {
+label {
         flex: 0 0 60px;
         font-size: 12px;
         color: #666;
 }
-.el-slider[data-v-c78acf80] {
+.el-slider {
         flex: 1;
         margin: 0 8px;
 }
-.value-text[data-v-c78acf80] {
+.value-text {
         flex: 0 0 45px;
         font-size: 12px;
         color: #999;
@@ -2019,12 +2005,10 @@ label[data-v-c78acf80] {
 }
 }
 .preset-buttons {
-&[data-v-c78acf80] {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
-}
-.el-button[data-v-c78acf80] {
+.el-button {
         flex: 1;
         min-width: 60px;
 }
@@ -2033,10 +2017,8 @@ label[data-v-c78acf80] {
 }
 
 .style-config-panel {
-&[data-v-21ab8d8c] {
   padding: 0;
-}
-.panel-title[data-v-21ab8d8c] {
+.panel-title {
     margin: 0 0 16px 0;
     font-size: 14px;
     font-weight: 600;
@@ -2045,35 +2027,31 @@ label[data-v-c78acf80] {
     padding-bottom: 8px;
 }
 .config-section {
-&[data-v-21ab8d8c] {
     margin-bottom: 16px;
-}
-h5[data-v-21ab8d8c] {
+h5 {
       margin: 0 0 12px 0;
       font-size: 13px;
       font-weight: 500;
       color: #666;
 }
 .config-item {
-&[data-v-21ab8d8c] {
       display: flex;
       align-items: center;
       margin-bottom: 12px;
       gap: 8px;
-}
-label[data-v-21ab8d8c] {
+label {
         flex: 0 0 60px;
         font-size: 12px;
         color: #666;
 }
-.el-slider[data-v-21ab8d8c] {
+.el-slider {
         flex: 1;
         margin: 0 8px;
 }
-.el-select[data-v-21ab8d8c] {
+.el-select {
         flex: 1;
 }
-.value-text[data-v-21ab8d8c] {
+.value-text {
         flex: 0 0 45px;
         font-size: 12px;
         color: #999;
@@ -2081,45 +2059,41 @@ label[data-v-21ab8d8c] {
 }
 }
 }
-.panel-actions[data-v-21ab8d8c] {
+.panel-actions {
     padding-top: 12px;
     border-top: 1px solid #eee;
     text-align: center;
 }
 }
 
-.tree-node-content[data-v-0c99df63] {
+.tree-node-content {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 4px 0;
 }
-.group-node[data-v-0c99df63] {
+.group-node {
   display: flex;
   align-items: center;
   font-weight: 500;
   color: #333;
 }
 .layer-item {
-&[data-v-0c99df63] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 2px 0;
-  }
 .layer-info {
-&[data-v-0c99df63] {
     display: flex;
     align-items: center;
     flex: 1;
     min-width: 0;
-    }
-.layer-icon[data-v-0c99df63] {
+.layer-icon {
       margin-right: 8px;
       font-size: 14px;
 }
-.layer-name[data-v-0c99df63] {
+.layer-name {
       font-size: 13px;
       color: #333;
       white-space: nowrap;
@@ -2128,29 +2102,25 @@ label[data-v-21ab8d8c] {
 }
 }
 .layer-controls {
-&[data-v-0c99df63] {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
-    }
 .opacity-control {
-&[data-v-0c99df63] {
       display: flex;
       align-items: center;
       gap: 4px;
-      }
-.opacity-slider[data-v-0c99df63] {
+.opacity-slider {
         width: 60px;
 }
-.opacity-value[data-v-0c99df63] {
+.opacity-value {
         font-size: 11px;
         color: #999;
         min-width: 30px;
         text-align: right;
 }
 }
-.style-config-btn[data-v-0c99df63] {
+.style-config-btn {
       width: 24px;
       height: 24px;
       padding: 0;
@@ -2159,19 +2129,13 @@ label[data-v-21ab8d8c] {
 }
 }
 
-.layer-dialog {
-&[data-v-f32ce80e] {
-  /* 全局样式面板样式 */
-
-  /* 主标签页样式 */
-}
-.global-style-panel {
-&[data-v-f32ce80e] {
+.layer-dialog {
+  /* 全局样式面板样式 */
+.global-style-panel {
     padding: 16px;
     border-bottom: 1px solid #eee;
     background-color: #f8f9fa;
-}
-.panel-title[data-v-f32ce80e] {
+.panel-title {
       margin: 0 0 16px 0;
       font-size: 14px;
       font-weight: 600;
@@ -2179,63 +2143,57 @@ label[data-v-21ab8d8c] {
       border-bottom: 1px solid #ddd;
       padding-bottom: 8px;
 }
-.config-section {
-&[data-v-f32ce80e] {
+.config-section {
       margin-bottom: 16px;
-}
-h5[data-v-f32ce80e] {
+h5 {
         margin: 0 0 12px 0;
         font-size: 13px;
         font-weight: 500;
         color: #666;
 }
-.config-item {
-&[data-v-f32ce80e] {
+.config-item {
         display: flex;
         align-items: center;
         margin-bottom: 12px;
         gap: 8px;
-}
-label[data-v-f32ce80e] {
+label {
           flex: 0 0 60px;
           font-size: 12px;
           color: #666;
 }
-.el-slider[data-v-f32ce80e] {
+.el-slider {
           flex: 1;
           margin: 0 8px;
 }
-.value-text[data-v-f32ce80e] {
+.value-text {
           flex: 0 0 45px;
           font-size: 12px;
           color: #999;
           text-align: right;
 }
 }
-.preset-buttons {
-&[data-v-f32ce80e] {
+.preset-buttons {
         display: flex;
         gap: 6px;
         flex-wrap: wrap;
-}
-.el-button[data-v-f32ce80e] {
+.el-button {
           flex: 1;
           min-width: 60px;
 }
 }
 }
-.panel-actions[data-v-f32ce80e] {
+.panel-actions {
       margin-top: 16px;
       padding-top: 12px;
       border-top: 1px solid #ddd;
       text-align: center;
 }
-.custom-css-input[data-v-f32ce80e] {
+.custom-css-input {
       font-family: "Courier New", monospace;
       font-size: 12px;
       line-height: 1.4;
 }
-.custom-css-input[data-v-f32ce80e] .el-textarea__inner {
+.custom-css-input :deep(.el-textarea__inner) {
       font-family: "Courier New", monospace;
       font-size: 12px;
       line-height: 1.4;
@@ -2243,37 +2201,35 @@ label[data-v-f32ce80e] {
       border: 1px solid #e9ecef;
 }
 .style-tabs {
-[data-v-f32ce80e] .el-tabs__header {
+:deep(.el-tabs__header) {
         margin: 0 0 16px 0;
 }
-[data-v-f32ce80e] .el-tabs__nav-wrap {
+:deep(.el-tabs__nav-wrap) {
         padding: 0;
 }
-[data-v-f32ce80e] .el-tabs__item {
+:deep(.el-tabs__item) {
         font-size: 12px;
         padding: 0 16px;
         height: 32px;
         line-height: 32px;
 }
-[data-v-f32ce80e] .el-tabs__content {
+:deep(.el-tabs__content) {
         padding: 0;
 }
 }
-.current-style-display {
-&[data-v-f32ce80e] {
+.current-style-display {
       margin-top: 16px;
       padding: 12px;
       background-color: #f5f5f5;
       border-radius: 4px;
       border: 1px solid #e9ecef;
-}
-h6[data-v-f32ce80e] {
+h6 {
         margin: 0 0 8px 0;
         font-size: 12px;
         font-weight: 500;
         color: #666;
 }
-.style-preview[data-v-f32ce80e] {
+.style-preview {
         font-family: "Courier New", monospace;
         font-size: 11px;
         line-height: 1.4;
@@ -2288,53 +2244,49 @@ h6[data-v-f32ce80e] {
         overflow-y: auto;
 }
 }
-}
-.main-tabs[data-v-f32ce80e] {
+}
+
+  /* 主标签页样式 */
+.main-tabs {
     height: 100%;
     display: flex;
     flex-direction: column;
 }
-.main-tabs .el-tabs__content[data-v-f32ce80e] {
+.main-tabs .el-tabs__content {
     flex: 1;
     overflow: hidden;
     padding: 0;
 }
-.main-tabs .el-tab-pane[data-v-f32ce80e] {
+.main-tabs .el-tab-pane {
     height: 100%;
     overflow: auto;
     display: flex;
     flex-direction: column;
 }
 .layer-tree {
-.tree-node-content {
-&[data-v-f32ce80e] {
+.tree-node-content {
       width: 100%;
-}
-.group-node[data-v-f32ce80e] {
+.group-node {
         display: flex;
         align-items: center;
         padding: 8px 0;
 }
-.layer-item {
-&[data-v-f32ce80e] {
+.layer-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         padding: 6px 0;
-}
-.layer-info {
-&[data-v-f32ce80e] {
+.layer-info {
           display: flex;
           align-items: center;
           flex: 1;
           min-width: 0;
-}
-.layer-icon[data-v-f32ce80e] {
+.layer-icon {
             margin-right: 8px;
             flex-shrink: 0;
 }
-.layer-name[data-v-f32ce80e] {
+.layer-name {
             font-size: 14px;
             color: #333;
             white-space: nowrap;
@@ -2342,24 +2294,20 @@ h6[data-v-f32ce80e] {
             text-overflow: ellipsis;
 }
 }
-.layer-controls {
-&[data-v-f32ce80e] {
+.layer-controls {
           display: flex;
           align-items: center;
           gap: 8px;
-}
-.opacity-control {
-&[data-v-f32ce80e] {
+.opacity-control {
             display: flex;
             align-items: center;
             gap: 8px;
             min-width: 120px;
-}
-.opacity-slider[data-v-f32ce80e] {
+.opacity-slider {
               flex: 1;
               min-width: 80px;
 }
-.opacity-value[data-v-f32ce80e] {
+.opacity-value {
               font-size: 12px;
               color: #666;
               min-width: 35px;
@@ -2367,7 +2315,7 @@ h6[data-v-f32ce80e] {
               white-space: nowrap;
 }
 }
-.style-config-btn[data-v-f32ce80e] {
+.style-config-btn {
             width: 24px;
             height: 24px;
             padding: 0;
@@ -2380,11 +2328,9 @@ h6[data-v-f32ce80e] {
 }
 
 /* 样式配置面板样式 */
-[data-v-f32ce80e] .layer-style-popover {
-.style-config-panel {
-& {
+:deep(.layer-style-popover) {
+.style-config-panel {
     padding: 0;
-}
 .panel-title {
       margin: 0 0 16px 0;
       font-size: 14px;
@@ -2393,23 +2339,19 @@ h6[data-v-f32ce80e] {
       border-bottom: 1px solid #eee;
       padding-bottom: 8px;
 }
-.config-section {
-& {
+.config-section {
       margin-bottom: 16px;
-}
 h5 {
         margin: 0 0 12px 0;
         font-size: 13px;
         font-weight: 500;
         color: #666;
 }
-.config-item {
-& {
+.config-item {
         display: flex;
         align-items: center;
         margin-bottom: 12px;
         gap: 8px;
-}
 label {
           flex: 0 0 60px;
           font-size: 12px;
@@ -2426,12 +2368,10 @@ label {
           text-align: right;
 }
 }
-.preset-buttons {
-& {
+.preset-buttons {
         display: flex;
         gap: 6px;
         flex-wrap: wrap;
-}
 .el-button {
           flex: 1;
           min-width: 60px;
@@ -2449,7 +2389,7 @@ label {
       font-size: 12px;
       line-height: 1.4;
 }
-.custom-css-input .el-textarea__inner {
+.custom-css-input :deep(.el-textarea__inner) {
       font-family: "Courier New", monospace;
       font-size: 12px;
       line-height: 1.4;
@@ -2459,7 +2399,7 @@ label {
 }
 }
 
-.context-menu[data-v-e0b9ba6a] {
+.context-menu {
   background: white;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
@@ -2467,7 +2407,7 @@ label {
   padding: 4px 0;
   min-width: 120px;
 }
-.context-menu-item[data-v-e0b9ba6a] {
+.context-menu-item {
   display: flex;
   align-items: center;
   padding: 8px 12px;
@@ -2476,10 +2416,10 @@ label {
   color: #606266;
   transition: background-color 0.3s;
 }
-.context-menu-item[data-v-e0b9ba6a]:hover {
+.context-menu-item:hover {
   background-color: #f5f7fa;
 }
-.context-menu-item .el-icon[data-v-e0b9ba6a] {
+.context-menu-item .el-icon {
   margin-right: 8px;
   font-size: 16px;
 }