|
@@ -13,23 +13,29 @@ import afterSalesUrl from "../assets/images/h8.png?url";
|
|
|
import indexImg4BacksUrl from "../assets/images/index_img4_backs.png?url";
|
|
import indexImg4BacksUrl from "../assets/images/index_img4_backs.png?url";
|
|
|
import indexBack2Url from "../assets/images/index_back2.png?url";
|
|
import indexBack2Url from "../assets/images/index_back2.png?url";
|
|
|
import jiaohuIconUrl from "../assets/images/h1.png?url";
|
|
import jiaohuIconUrl from "../assets/images/h1.png?url";
|
|
|
-import h3 from "../assets/images/h3.png?url";
|
|
|
|
|
|
|
+import h3 from "../assets/images/h3.jpg?url";
|
|
|
import h4 from "../assets/images/h4.png?url";
|
|
import h4 from "../assets/images/h4.png?url";
|
|
|
import h5 from "../assets/images/h5.png?url";
|
|
import h5 from "../assets/images/h5.png?url";
|
|
|
import h6 from "../assets/images/h6.png?url";
|
|
import h6 from "../assets/images/h6.png?url";
|
|
|
import h7 from "../assets/images/h7.png?url";
|
|
import h7 from "../assets/images/h7.png?url";
|
|
|
import h8 from "../assets/images/h8.png?url";
|
|
import h8 from "../assets/images/h8.png?url";
|
|
|
import h9 from "../assets/images/h9.png?url";
|
|
import h9 from "../assets/images/h9.png?url";
|
|
|
|
|
+import h10 from "../assets/images/h10.png?url";
|
|
|
|
|
+import h11 from "../assets/images/h11.png?url";
|
|
|
|
|
+import h12 from "../assets/images/h12.png?url";
|
|
|
import value1 from "../assets/images/value1.png?url";
|
|
import value1 from "../assets/images/value1.png?url";
|
|
|
import value2 from "../assets/images/value2.png?url";
|
|
import value2 from "../assets/images/value2.png?url";
|
|
|
import value3 from "../assets/images/value3.jpg?url";
|
|
import value3 from "../assets/images/value3.jpg?url";
|
|
|
import value4 from "../assets/images/value4.png?url";
|
|
import value4 from "../assets/images/value4.png?url";
|
|
|
import value5 from "../assets/images/value5.jpg?url";
|
|
import value5 from "../assets/images/value5.jpg?url";
|
|
|
import jishu from "../assets/images/jishu.jpg?url";
|
|
import jishu from "../assets/images/jishu.jpg?url";
|
|
|
-import planIconUrl from "../assets/images/h2.png?url";
|
|
|
|
|
|
|
+import planIconUrl from "../assets/images/h2.jpg?url";
|
|
|
import p1 from "../assets/images/p1.png?url";
|
|
import p1 from "../assets/images/p1.png?url";
|
|
|
import p2 from "../assets/images/p2.png?url";
|
|
import p2 from "../assets/images/p2.png?url";
|
|
|
-// import p4 from "../assets/images/p4.png?url";
|
|
|
|
|
|
|
+import bigbgUrl from "../assets/images/bigbg.jpg?url";
|
|
|
|
|
+import bg4Url from "../assets/images/bg4.png?url";
|
|
|
|
|
+import prbg from "../assets/images/prbg.jpg?url";
|
|
|
|
|
+import datah from "../assets/images/datah.jpg?url";
|
|
|
import p3 from "../assets/images/p3.png?url";
|
|
import p3 from "../assets/images/p3.png?url";
|
|
|
import sence2 from "../assets/images/sence2.jpg?url";
|
|
import sence2 from "../assets/images/sence2.jpg?url";
|
|
|
import sence3 from "../assets/images/sence3.png?url";
|
|
import sence3 from "../assets/images/sence3.png?url";
|
|
@@ -46,6 +52,7 @@ import Reveal from "../components/motion/Reveal.vue";
|
|
|
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
|
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
import { Icon } from "@iconify/vue";
|
|
import { Icon } from "@iconify/vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
|
|
+import hbg from "../assets/images/hbg.jpg";
|
|
|
|
|
|
|
|
import xin1 from "../assets/images/xin1.png";
|
|
import xin1 from "../assets/images/xin1.png";
|
|
|
import xin2 from "../assets/images/xin2.png";
|
|
import xin2 from "../assets/images/xin2.png";
|
|
@@ -438,11 +445,11 @@ const partnerSources = [
|
|
|
h7,
|
|
h7,
|
|
|
h8,
|
|
h8,
|
|
|
h9,
|
|
h9,
|
|
|
- // h10,
|
|
|
|
|
- // h11,
|
|
|
|
|
- // h12,
|
|
|
|
|
|
|
+ h10,
|
|
|
|
|
+ h11,
|
|
|
|
|
+ h12,
|
|
|
];
|
|
];
|
|
|
-const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
|
|
|
|
+const partners = Array.from({ length: 12 }).map((_, idx) => ({
|
|
|
id: idx + 1,
|
|
id: idx + 1,
|
|
|
src: partnerSources[idx % partnerSources.length],
|
|
src: partnerSources[idx % partnerSources.length],
|
|
|
alt: `伙伴标识 ${idx + 1}`,
|
|
alt: `伙伴标识 ${idx + 1}`,
|
|
@@ -538,7 +545,10 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
</div>
|
|
</div>
|
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
|
- <section class="section capabilitiesBg">
|
|
|
|
|
|
|
+ <section
|
|
|
|
|
+ class="section capabilitiesBg"
|
|
|
|
|
+ :style="{ backgroundImage: `url(${bigbgUrl})` }"
|
|
|
|
|
+ >
|
|
|
<div class="container">
|
|
<div class="container">
|
|
|
<Reveal as="div" class="sectionHead" :delay="0">
|
|
<Reveal as="div" class="sectionHead" :delay="0">
|
|
|
<div style="display: flex; align-items: center">
|
|
<div style="display: flex; align-items: center">
|
|
@@ -558,7 +568,19 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
:delay="80 + idx * 80"
|
|
:delay="80 + idx * 80"
|
|
|
style="border: none"
|
|
style="border: none"
|
|
|
>
|
|
>
|
|
|
- <div class="capPlatformHead">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="capPlatformHead"
|
|
|
|
|
+ :style="{
|
|
|
|
|
+ backgroundImage:
|
|
|
|
|
+ p.title === '生产运营决策'
|
|
|
|
|
+ ? `url(${prbg})`
|
|
|
|
|
+ : p.title === '数据资产治理'
|
|
|
|
|
+ ? `url(${datah})`
|
|
|
|
|
+ : p.title === '连接现场设备'
|
|
|
|
|
+ ? `url(${bg4Url})`
|
|
|
|
|
+ : '',
|
|
|
|
|
+ }"
|
|
|
|
|
+ >
|
|
|
<div class="capPlatformCopy">
|
|
<div class="capPlatformCopy">
|
|
|
<div class="capPlatformTitle">{{ p.title }}</div>
|
|
<div class="capPlatformTitle">{{ p.title }}</div>
|
|
|
<div class="capPlatformDesc">{{ p.desc }}</div>
|
|
<div class="capPlatformDesc">{{ p.desc }}</div>
|
|
@@ -1449,6 +1471,7 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
z-index: 3;
|
|
z-index: 3;
|
|
|
border: none;
|
|
border: none;
|
|
|
padding: 0 0 26px;
|
|
padding: 0 0 26px;
|
|
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.heroStrip__inner {
|
|
.heroStrip__inner {
|
|
@@ -1546,7 +1569,7 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
@media (max-width: 960px) {
|
|
@media (max-width: 960px) {
|
|
|
.heroStrip {
|
|
.heroStrip {
|
|
|
margin-top: -18px;
|
|
margin-top: -18px;
|
|
|
- padding-bottom: 20px;
|
|
|
|
|
|
|
+ /* padding-bottom: 20px; */
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.heroStripGrid {
|
|
.heroStripGrid {
|
|
@@ -1637,7 +1660,7 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
.capPlatformCard {
|
|
.capPlatformCard {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- padding: 18px;
|
|
|
|
|
|
|
+ /* padding: 18px; */
|
|
|
|
|
|
|
|
background:
|
|
background:
|
|
|
linear-gradient(
|
|
linear-gradient(
|
|
@@ -1689,7 +1712,23 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
padding-bottom: 14px;
|
|
padding-bottom: 14px;
|
|
|
- border-bottom: 1px dashed rgba(15, 23, 42, 0.14);
|
|
|
|
|
|
|
+ /* border-bottom: 1px dashed rgba(15, 23, 42, 0.14); */
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ background-position: center;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ padding: 18px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.capPlatformHead::before {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ to bottom,
|
|
|
|
|
+ rgba(248, 250, 252, 0) 0%,
|
|
|
|
|
+ rgba(248, 250, 252, 0) 90%,
|
|
|
|
|
+ /* rgba(226, 235, 251, 0.8) 95%, */ rgba(226, 235, 251, 1) 100%
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.capPlatformCopy {
|
|
.capPlatformCopy {
|
|
@@ -1726,6 +1765,7 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
|
|
+ padding: 18px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.capModuleTile {
|
|
.capModuleTile {
|
|
@@ -1945,42 +1985,11 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
filter: saturate(0.95);
|
|
filter: saturate(0.95);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* “连接井站 + 治理 + 应用”模块背景图 */
|
|
|
|
|
-.capabilitiesBg {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- background-size: cover;
|
|
|
|
|
- background-position: center;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.capabilitiesBg::before {
|
|
|
|
|
- content: "";
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- inset: 0;
|
|
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 180deg,
|
|
|
|
|
- rgba(248, 250, 252, 0.5),
|
|
|
|
|
- rgba(248, 250, 252, 0.7)
|
|
|
|
|
- );
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.capabilitiesBg > .container {
|
|
.capabilitiesBg > .container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* .solutionsBg::after {
|
|
|
|
|
- content: "";
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- inset: 0;
|
|
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 180deg,
|
|
|
|
|
- rgba(248, 250, 252, 0.4),
|
|
|
|
|
- rgba(248, 250, 252, 0.6)
|
|
|
|
|
- );
|
|
|
|
|
-} */
|
|
|
|
|
-
|
|
|
|
|
.solutionsBg > .container {
|
|
.solutionsBg > .container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
@@ -2240,28 +2249,24 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
color: var(--slate-500);
|
|
color: var(--slate-500);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.partnerGrid {
|
|
|
|
|
- margin-top: 16px;
|
|
|
|
|
- display: grid;
|
|
|
|
|
- grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
|
|
- gap: 14px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.partner {
|
|
.partner {
|
|
|
box-shadow: var(--shadow);
|
|
box-shadow: var(--shadow);
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
- padding: 30px 50px;
|
|
|
|
|
|
|
+ padding: 30px 10px;
|
|
|
|
|
+
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.partner img {
|
|
.partner img {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
display: block;
|
|
display: block;
|
|
|
- height: 56px;
|
|
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ width: 100%;
|
|
|
object-fit: contain;
|
|
object-fit: contain;
|
|
|
filter: saturate(0.96);
|
|
filter: saturate(0.96);
|
|
|
opacity: 0.94;
|
|
opacity: 0.94;
|
|
|
|
|
+ transform: scale(1.5);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.partner:hover img {
|
|
.partner:hover img {
|
|
@@ -2966,14 +2971,6 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.partnerGrid {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- z-index: 1;
|
|
|
|
|
- display: grid;
|
|
|
|
|
- grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
|
|
- gap: 14px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.partner img {
|
|
.partner img {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
display: block;
|
|
display: block;
|
|
@@ -3042,4 +3039,30 @@ const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
0 8px 16px rgba(2, 6, 23, 0.12),
|
|
0 8px 16px rgba(2, 6, 23, 0.12),
|
|
|
0 12px 24px rgba(2, 6, 23, 0.08);
|
|
0 12px 24px rgba(2, 6, 23, 0.08);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.capabilitiesBg {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ background-position: center;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.capabilitiesBg::before {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 180deg,
|
|
|
|
|
+ rgba(248, 250, 252, 1),
|
|
|
|
|
+ rgba(248, 250, 252, 0.6)
|
|
|
|
|
+ );
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.partnerGrid {
|
|
|
|
|
+ margin-top: 16px;
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
|
|
|
+ gap: 14px;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|