世界地图

src/views/Home/index3.vue

@@ -914,7 +914,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-:root {
+.home-map-page {
   --cy: #38e1ff;
   --cy2: #2f9fd8;
   --gold: #ffcc66;
@@ -1105,7 +1105,7 @@ canvas#map.drag {
   border-radius: 3px;
 }
 
-.item {
+#items :deep(.item) {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1119,17 +1119,17 @@ canvas#map.drag {
     color 0.16s;
 }
 
-.item:hover {
+#items :deep(.item:hover) {
   background: rgba(56, 225, 255, 0.12);
   color: #fff;
 }
 
-.item.on {
+#items :deep(.item.on) {
   background: rgba(255, 204, 102, 0.16);
   color: var(--gold);
 }
 
-.item i {
+#items :deep(.item i) {
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -1138,19 +1138,19 @@ canvas#map.drag {
   flex: 0 0 auto;
 }
 
-.item.on i {
+#items :deep(.item.on i) {
   background: var(--gold);
   box-shadow: 0 0 8px var(--gold);
 }
 
-.item span {
+#items :deep(.item span) {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.item em {
+#items :deep(.item em) {
   font-style: normal;
   font-size: 10px;
   color: var(--dim);
@@ -1338,18 +1338,18 @@ canvas#map.drag {
   transition: opacity 0.14s;
 }
 
-#tip .t {
+#tip :deep(.t) {
   font-weight: 700;
   color: #fff;
   font-size: 12.5px;
   margin-bottom: 2px;
 }
 
-#tip .k {
+#tip :deep(.k) {
   color: var(--dim);
 }
 
-#tip .v {
+#tip :deep(.v) {
   color: var(--cy);
   font-variant-numeric: tabular-nums;
 }