第二版

src/components/layout/AppHeader.vue

@@ -21,7 +21,7 @@ const navItems = [
   { label: "解决方案", to: "/solutions" },
   {
     label: "客户案例",
-    to: "/cases",
+    to: "/cases/1",
     dropdown: dropdowns.cases,
   },
   { label: "新闻动态", to: "/news" },

src/views/HomeView.vue

@@ -133,10 +133,6 @@ function next() {
   activeIndex.value = (activeIndex.value + 1) % slides.length;
 }
 
-function prev() {
-  activeIndex.value = (activeIndex.value - 1 + slides.length) % slides.length;
-}
-
 function goTo(index) {
   activeIndex.value = index;
 }
@@ -298,6 +294,11 @@ const cases = [
     bg: value1,
     detail:
       "以井站数据为底座，构建日/周/月报、重点井监控与异常处置闭环，支撑提质增效。",
+    metrics: [
+      { label: "接入井站", end: 200, suffix: "+" },
+
+      { label: "处置效率提升", end: 35, suffix: "%" },
+    ],
   },
   {
     title: "集输站",
@@ -307,6 +308,11 @@ const cases = [
     bg: jishu,
     detail:
       "打通站库管网关键指标，实现压降/泄漏异常识别与能耗核算，持续优化运行策略。",
+    metrics: [
+      { label: "监测站点", end: 150, suffix: "+" },
+
+      { label: "能耗降低", end: 18, suffix: "%" },
+    ],
   },
   {
     title: "注水注气",
@@ -316,6 +322,11 @@ const cases = [
     bg: value3,
     detail:
       "构建注采指标体系与可视化分析，形成配注优化建议与效果评估闭环，支撑精细开发。",
+    metrics: [
+      { label: "注水井数", end: 320, suffix: "+" },
+
+      { label: "采收率提升", end: 12, suffix: "%" },
+    ],
   },
   {
     title: "设备运维",
@@ -325,6 +336,11 @@ const cases = [
     bg: value4,
     detail:
       "告警联动工单与知识库沉淀，结合预测维护模型，降低非计划停机与运维成本。",
+    metrics: [
+      { label: "接入设备", end: 1200, suffix: "+" },
+
+      { label: "运维成本降低", end: 30, suffix: "%" },
+    ],
   },
   {
     title: "QHSE",
@@ -334,6 +350,11 @@ const cases = [
     bg: value5,
     detail:
       "全面的 QHSE 管理体系，确保产品质量、职业健康、生产安全与环境保护的协调发展。",
+    metrics: [
+      { label: "接入劳动者", end: 8000, suffix: "+" },
+
+      { label: "安全风险降低", end: 35, suffix: "%" },
+    ],
   },
 ];
 
@@ -414,7 +435,7 @@ const partnerSources = [
   // h11,
   // h12,
 ];
-const partners = Array.from({ length: 12 }).map((_, idx) => ({
+const partners = Array.from({ length: 10 }).map((_, idx) => ({
   id: idx + 1,
   src: partnerSources[idx % partnerSources.length],
   alt: `伙伴标识 ${idx + 1}`,
@@ -455,9 +476,9 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
                 <RouterLink class="btn btn-primary" to="/contact"
                   >申请演示</RouterLink
                 >
-                <RouterLink class="btn btn-ghost" to="/solutions"
+                <!-- <RouterLink class="btn btn-ghost" to="/solutions"
                   >查看解决方案</RouterLink
-                >
+                > -->
               </div>
             </div>
           </Transition>
@@ -488,10 +509,15 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
             v-for="tile in heroBottomTiles"
             :key="tile.title"
             class="heroStripCard"
+            style="align-items: center"
             role="listitem"
             :data-tone="tile.tone || 'default'"
           >
-            <div class="heroStripIcon" aria-hidden="true">
+            <div
+              class="heroStripIcon"
+              aria-hidden="true"
+              style="padding-top: 20px"
+            >
               <img :src="tile.url" alt="" style="width: 50px; height: 50px" />
             </div>
             <div style="display: flex; flex-direction: column">
@@ -760,8 +786,26 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
                   class="valueAccBottom"
                   :style="{ '--value-bottom-bg': `url(${indexImg4BacksUrl})` }"
                 >
-                  <div class="valueAccBottomTitle">{{ c.title }}</div>
+                  <!-- <div class="valueAccBottomTitle">{{ c.title }}</div> -->
                   <div class="valueAccBottomText">{{ c.detail }}</div>
+                  <div class="valueAccMetricsExpanded">
+                    <div
+                      v-for="(m, midx) in c.metrics"
+                      :key="m.label + '-' + valueCaseActiveIndex"
+                      class="valueAccMetricExpanded"
+                    >
+                      <div class="valueAccMetricValueExpanded">
+                        <CountUp
+                          :end="m.end"
+                          :suffix="m.suffix"
+                          v-if="valueCaseActiveIndex === idx"
+                        />
+                      </div>
+                      <div class="valueAccMetricLabelExpanded">
+                        {{ m.label }}
+                      </div>
+                    </div>
+                  </div>
                   <RouterLink class="valueAccBtn" to="/cases"
                     >了解更多</RouterLink
                   >
@@ -960,6 +1004,70 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 </template>
 
 <style scoped>
+.valueAccMetrics {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(8px);
+}
+
+.valueAccMetric {
+  text-align: center;
+}
+
+.valueAccMetricValue {
+  /* font-weight: 850; */
+  font-size: 18px;
+  color: #1f45b7;
+  letter-spacing: -0.02em;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1;
+}
+
+.valueAccMetricLabel {
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.valueAccMetricsExpanded {
+  /* margin-top: 10px; */
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  padding: 18px;
+
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0)
+  );
+  backdrop-filter: blur(8px);
+}
+
+.valueAccMetricExpanded {
+  text-align: center;
+}
+
+.valueAccMetricValueExpanded {
+  font-size: 20px;
+  /* color: #ffffff; */
+  letter-spacing: -0.02em;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.valueAccMetricLabelExpanded {
+  margin-top: 8px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.95);
+  line-height: 1.3;
+}
+
 .valueAcc {
   margin-top: 8px;
   display: flex;
@@ -1142,10 +1250,11 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 }
 
 .hero__controls {
-  margin-top: 14px;
+  /* margin-top: 50px; */
   display: flex;
   position: relative;
-  left: 40%;
+  left: 35%;
+  top: 30px;
   align-items: center;
   justify-content: center;
   gap: 10px;
@@ -1249,7 +1358,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 
 .heroStripCard {
   position: relative;
-  padding: 18px 16px 16px;
+  /* padding: 18px 16px 16px; */
   min-height: 128px;
   display: flex;
   align-items: center;
@@ -1648,6 +1757,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 .productTitle {
   /* font-weight: 850; */
   letter-spacing: -0.02em;
+  /* color: #04439a; */
 }
 
 .productDesc {
@@ -2005,10 +2115,10 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 }
 
 .partner {
-  /* border: 1px solid var(--border); */
-  /* border-radius: 18px; */
-  background: transparent;
-  padding: 10px;
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  background: #fff;
+  padding: 30px 50px;
   cursor: pointer;
 }
 
@@ -2733,12 +2843,6 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
   gap: 14px;
 }
 
-.partner {
-  background: transparent;
-  padding: 10px;
-  cursor: pointer;
-}
-
 .partner img {
   width: 100%;
   display: block;