ww

src/views/HomeView.vue

@@ -19,6 +19,11 @@ import p1 from "../assets/images/p1.png?url";
 import p2 from "../assets/images/p2.png?url";
 // import p4 from "../assets/images/p4.png?url";
 import p3 from "../assets/images/p3.png?url";
+import sence2 from "../assets/images/sence2.jpg?url";
+import sence3 from "../assets/images/sence3.png?url";
+import sence from "../assets/images/sence.png?url";
+import sence4 from "../assets/images/sence4.png?url";
+import sence6 from "../assets/images/sence6.jpeg?url";
 import CountUp from "../components/motion/CountUp.vue";
 import Reveal from "../components/motion/Reveal.vue";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
@@ -204,22 +209,22 @@ const solutions = [
   {
     title: "设备管理",
     desc: "井场数据汇聚、施工过程可视化与风险预警。",
-    cover: banner1Url,
+    cover: sence,
   },
   {
     title: "智能钻修井",
     desc: "生产运行监控、工况分析与产量波动诊断。",
-    cover: banner2Url,
+    cover: sence2,
   },
   {
     title: "智慧注气",
     desc: "站库管网联动监测、泄漏/压降异常识别。",
-    cover: banner3Url,
+    cover: sence3,
   },
   {
     title: "智慧压裂",
     desc: "注采平衡分析、配注优化与效益评估。",
-    cover: afterSalesUrl,
+    cover: sence4,
   },
   {
     title: "停办管网",
@@ -229,7 +234,7 @@ const solutions = [
   {
     title: "场站管理",
     desc: "告警闭环、工单联动与知识沉淀，提升设备可靠性。",
-    cover: news3,
+    cover: sence6,
   },
 ];
 
@@ -560,9 +565,9 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
           </div>
 
           <div class="solutionsTabContent">
-            <Transition name="slide-up" mode="out-in">
-              <div :key="solutionsTabIndex" class="solutionsTabInner">
-                <div class="solutionsTabText">
+            <div class="solutionsTabInner">
+              <Transition name="slide-up" mode="out-in">
+                <div :key="solutionsTabIndex" class="solutionsTabText">
                   <div class="solutionsTabTitle">
                     {{ solutions[solutionsTabIndex].title }}
                   </div>
@@ -573,14 +578,16 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
                     了解更多 →
                   </RouterLink>
                 </div>
-                <div class="solutionsTabImage">
+              </Transition>
+              <Transition name="slide-up" mode="out-in">
+                <div :key="solutionsTabIndex" class="solutionsTabImage">
                   <img
                     :src="solutions[solutionsTabIndex].cover"
                     :alt="solutions[solutionsTabIndex].title"
                   />
                 </div>
-              </div>
-            </Transition>
+              </Transition>
+            </div>
           </div>
         </div>
       </div>
@@ -606,6 +613,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
             v-for="(c, idx) in cases"
             :key="c.title"
             as="div"
+            style="border: none"
             class="valueAccItem hover-lift"
             role="listitem"
             tabindex="0"
@@ -792,27 +800,64 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
       </div>
     </section>
 
-    <section class="section section--soft partnersBg">
+    <section
+      class="section section--soft partners-section"
+      style="overflow: hidden"
+    >
       <div class="container">
         <Reveal as="div" class="sectionHead" :delay="0">
           <div>
-            <h2 class="h2" style="color: aliceblue">合作共建开放生态</h2>
-            <!-- <div class="muted">
-              示例占位图，可替换为你的真实客户/伙伴 Logo。
-            </div> -->
+            <h2 class="h2">合作共建开放生态</h2>
           </div>
         </Reveal>
 
-        <div class="partnerGrid">
-          <Reveal
-            v-for="(p, idx) in partners"
-            :key="p.id"
-            as="div"
-            class="partner"
-            :delay="80 + idx * 40"
-          >
-            <img :src="p.src" :alt="p.alt" loading="lazy" />
-          </Reveal>
+        <div class="partnerGridWrapper">
+          <svg class="partners-bg-svg" xmlns="http://www.w3.org/2000/svg">
+            <g class="circle-group circle-group-1">
+              <circle
+                class="dashed-circle"
+                cx="50%"
+                cy="50%"
+                r="250"
+                fill="none"
+                stroke="#abc3f5"
+              />
+            </g>
+
+            <g class="circle-group circle-group-2">
+              <circle
+                class="dashed-circle"
+                cx="50%"
+                cy="50%"
+                r="380"
+                fill="none"
+                stroke="#abc3f5"
+              />
+            </g>
+
+            <g class="circle-group circle-group-3">
+              <circle
+                class="dashed-circle"
+                cx="50%"
+                cy="50%"
+                r="580"
+                fill="none"
+                stroke="#abc3f5"
+              />
+            </g>
+          </svg>
+
+          <div class="partnerGrid">
+            <Reveal
+              v-for="(p, idx) in partners"
+              :key="p.id"
+              as="div"
+              class="partner"
+              :delay="80 + idx * 40"
+            >
+              <img :src="p.src" :alt="p.alt" loading="lazy" />
+            </Reveal>
+          </div>
         </div>
       </div>
     </section>
@@ -2186,7 +2231,12 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 .solutionsTabBtn.active {
   color: var(--brand-700);
   /* border-bottom-color: var(--brand-700); */
-  background: rgba(37, 99, 235, 0.06);
+  background-image: linear-gradient(
+    to bottom,
+    rgba(37, 99, 235, 0.8),
+    rgba(37, 99, 235, 0.2)
+  );
+  /* background: rgba(37, 99, 235, 0.06); */
 }
 
 .solutionsTabContent {
@@ -2314,4 +2364,124 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
     height: 200px;
   }
 }
+
+.partners-section {
+  position: relative;
+  height: 500px;
+}
+
+.partnerGridWrapper {
+  position: relative;
+  margin-top: 40px;
+}
+
+.partners-bg-svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  pointer-events: none;
+  z-index: 0;
+  overflow: visible;
+}
+
+.dashed-circle {
+  fill-opacity: 0.5;
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  stroke-linecap: round;
+  /* animation: dashRotate 60s linear infinite; */
+}
+
+.circle-group {
+  transform-origin: center;
+  animation: rotateCircle 120s linear infinite;
+}
+
+.circle-group-1 {
+  animation-duration: 120s;
+}
+
+.circle-group-2 {
+  animation: rotateCircleReverse 180s linear infinite;
+}
+
+.circle-group-3 {
+  animation-duration: 240s;
+}
+
+@keyframes dashRotate {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -1130;
+  }
+}
+
+@keyframes rotateCircle {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotateCircleReverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.partnerGrid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.partner {
+  background: transparent;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.partner img {
+  width: 100%;
+  display: block;
+  height: 56px;
+  object-fit: contain;
+  filter: saturate(0.96);
+  opacity: 0.94;
+}
+
+.partner:hover img {
+  opacity: 1;
+  transform: scale(1.5);
+  transition: all 0.2s ease;
+}
+
+@media (max-width: 960px) {
+  .partners-bg-svg {
+    min-height: 400px;
+  }
+
+  .dashed-circle {
+    stroke-dasharray: 10 10;
+  }
+}
+
+@media (max-width: 520px) {
+  .partnerGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 </style>