Browse Source

修改页面样式

BAI 1 tuần trước cách đây
mục cha
commit
56e7928e6b

+ 30 - 8
src/views/history/index.vue

@@ -142,7 +142,7 @@ function selectEvent(index) {
   top: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 20, 40, 0.85);
+  background: rgba(0, 20, 40, 0.8);
   border: 1px solid rgba(48, 220, 255, 0.3);
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
@@ -153,6 +153,21 @@ function selectEvent(index) {
   gap: 15px;
   transform: translateX(150%);
   opacity: 0;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: rgba(48, 220, 255, 0.1);
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(48, 220, 255, 0.5);
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(48, 220, 255, 0.8);
+  }
 }
 
 .card-header {
@@ -211,26 +226,32 @@ function selectEvent(index) {
   border-radius: 8px;
   padding: 15px;
   border: 1px solid rgba(48, 220, 255, 0.1);
+  overflow-y: auto;
   .detail-header {
     display: flex;
     align-items: baseline;
     gap: 10px;
     margin-bottom: 10px;
+    flex-wrap: wrap;
     .detail-year {
-      font-size: 28px;
+      font-size: 24px;
       font-weight: bold;
       color: #30dcff;
     }
     .detail-title {
-      font-size: 16px;
+      font-size: 14px;
       color: #fff;
+      flex: 1;
+      min-width: 0;
+      word-wrap: break-word;
     }
   }
   .detail-content {
-    font-size: 14px;
+    font-size: 13px;
     color: #a3dcde;
-    line-height: 1.6;
-    margin-bottom: 15px;
+    line-height: 1.5;
+    margin-bottom: 12px;
+    word-wrap: break-word;
   }
   .detail-impact {
     padding-top: 10px;
@@ -241,9 +262,10 @@ function selectEvent(index) {
       margin-bottom: 5px;
     }
     .impact-text {
-      font-size: 13px;
+      font-size: 12px;
       color: #c4f3fe;
-      line-height: 1.5;
+      line-height: 1.4;
+      word-wrap: break-word;
     }
   }
 }

+ 14 - 7
src/views/map/index.vue

@@ -75,9 +75,9 @@
       <!-- 顶部菜单 - 仅在昆山地图模式下显示 -->
       <div class="top-menu" v-show="state.currentMapMode === 'kunshan'">
         <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
-          <mMenuItem index="1">区域总览</mMenuItem>
+          <mMenuItem index="1">首页</mMenuItem>
+          <mMenuItem index="3">区域总览</mMenuItem>
           <mMenuItem index="2">融合体系</mMenuItem>
-          <mMenuItem index="3">综合业务</mMenuItem>
           <div class="top-menu-mid-space"></div>
           <mMenuItem index="4">历史沿革</mMenuItem>
           <mMenuItem index="5">水文科普</mMenuItem>
@@ -358,15 +358,15 @@ function handleMapModeChanged(mode) {
   state.currentMapMode = mode
 }
 
-// 处理切换到融合体系页面
+// 处理切换到区域总览页面
 function handleSwitchToRegionOverview() {
-  // 切换到融合体系页面(activeIndex 为 2
-  state.activeIndex = '2'
+  // 切换到区域总览页面(activeIndex 为 3
+  state.activeIndex = '3'
   
   // 触发动画
   nextTick(() => {
-    gsap.to(".water-resource-content .left-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
-    gsap.to(".water-resource-content .right-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+    gsap.to(".water-station-content .left-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+    gsap.to(".water-station-content .right-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
   })
 }
 
@@ -488,6 +488,13 @@ function handleMenuSelect(index) {
     emitter.$emit("toggleWaterStations", false)
   }
   
+  // 点击首页时切换到苏州地图
+  if (index === "1") {
+    if (mapSceneRef.value) {
+      mapSceneRef.value.switchToSuzhou()
+    }
+  }
+  
   nextTick(() => {
     if (index === "1") {
       gsap.to(".left-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })

+ 1 - 1
src/views/waterResource/components/CenterIntroduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-card title="中心简介" :width="398" :height="550">
+  <m-card title="中心简介" :width="398" :height="450">
     <div class="carousel-container">
       <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
         <div class="carousel-item" v-for="(item, index) in carouselItems" :key="index">

+ 1 - 1
src/views/waterResource/components/SystemIntegration.vue

@@ -6,7 +6,7 @@
           <span class="main-value">92</span>
           <span class="main-unit">%</span>
         </div>
-        <div class="indicator-label">协同工作考核优秀率</div>
+        <div class="indicator-label">协同工作考核达标率</div>
       </div>
       <div class="stats-grid">
         <div class="stat-item" v-for="(item, index) in statsData" :key="index">

+ 4 - 4
src/views/waterResource/index.vue

@@ -46,8 +46,8 @@ import CenterIntroduction from "./components/CenterIntroduction.vue"
   z-index: 4;
   width: 398px;
   left: 32px;
-  top: 150px;
-  bottom: 50px;
+  top: 130px;
+  bottom: 70px;
   perspective: 500px;
   perspective-origin: 50% 50%;
   .left-column-3d {
@@ -59,7 +59,7 @@ import CenterIntroduction from "./components/CenterIntroduction.vue"
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    gap: 20px;
+    gap: 10px;
     transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
     z-index: 4;
   }
@@ -72,7 +72,7 @@ import CenterIntroduction from "./components/CenterIntroduction.vue"
     transform: translateX(-150%);
     opacity: 0;
     &:first-child {
-      height: 550px;
+      height: 450px;
       margin-top: -50px;
     }
   }

+ 7 - 0
src/views/waterStation/HydrologyDetail.vue

@@ -452,6 +452,7 @@ const rainfallChartOption = ref({
   align-items: center;
   justify-content: center;
   z-index: 10000;
+  pointer-events: auto;
   
   &:hover {
     background: rgba(48, 220, 255, 1);
@@ -459,5 +460,11 @@ const rainfallChartOption = ref({
   }
 }
 
+.video-modal-content video {
+  position: relative;
+  z-index: 9999;
+  pointer-events: auto;
+}
+
 
 </style>