https://www.byd.com/component/byd-overseas/new-aboutbyd/card-switch/aboutBYD-cardSwitch_1bc93acf86421000.js

1var index = "";
2Vue.createApp({
3  setup() {
4    const cardData = [
5      {
6        cardTxtTitle: "e\u2074 platform",
7        cardTxtDesc: [
8          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
9          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
10          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy."
11        ]
12      },
13      {
14        cardTxtTitle: "The Dual Mode Off-road (DMO) Super Hybrid Platform",
15        cardTxtDesc: [
16          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
17          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy."
18        ]
19      },
20      {
21        cardTxtTitle: "DiSus - Intelligent Body Control System",
22        cardTxtDesc: [
23          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
24          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
25          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy."
26        ]
27      },
28      {
29        cardTxtTitle: "CTB (Cell to Body) Battery Body Integration Technology",
30        cardTxtDesc: [
31          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
32          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
33          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy.",
34          "BYD, the first automaker in the world to focus on integrating green energy technologies in a well-rounded sphere that encompasses IT, automotive, and new energy."
35        ]
36      }
37    ];
38    const isPc = window.innerWidth > 1279;
39    const isPad = window.innerWidth <= 1279 && window.innerWidth > 991;
40    const isMob = window.innerWidth <= 991;
41    const switchCard = (index2) => {
42      var cardSwitchCards = document.querySelectorAll(".cardSwitch-card");
43      cardSwitchCards.forEach((item, Index) => {
44        if (Index != index2) {
45          item.style.display = "none";
46        } else {
47          item.style.display = "flex";
48        }
49      });
50      var switchButtons = document.querySelectorAll(".switchButton");
51      switchButtons.forEach((item, Index) => {
52        if (Index != index2) {
53          item.style.borderTop = "2px #dddddd solid";
54          item.style.color = "#cccccc";
55          item.style.fontWeight = "400";
56        } else {
57          item.style.borderTop = "2px #252728 solid";
58          item.style.color = "#252728";
59          item.style.fontWeight = "700";
60        }
61      });
62    };
63    const initSwiper = () => {
64      new Swiper(".aboutBYD-cardSwitch .cardSwitch-swiper", {
65        modules: [Pagination],
66        autoHeight: true,
67        slidesPerView: 1,
68        slidesPerGroup: 1,
69        spaceBetween: 40,
70        loop: true,
71        pagination: {
72          el: ".cardSwitch-swiper-pagination",
73          clickable: true
74        }
75      });
76    };
77    const setFixedHeight = () => {
78      var cardContainers = document.querySelectorAll(".card-container");
79      var cardContainersHeight = [];

80      cardContainers.forEach((item) => {
81        cardContainersHeight.push(item.clientHeight);
82      });
83      var maxContainerHeight = Math.max(...cardContainersHeight);
84      document.documentElement.style.setProperty("--maxContainerHeight", maxContainerHeight + "px");
85    };
86    Vue.onMounted(() => {
87      if (!isMob) {
88        switchCard(0);
89      } else {
90        initSwiper();
91        const intervalId = setInterval(setFixedHeight, 200);
92        setTimeout(() => {
93          clearInterval(intervalId);
94        }, 8e3);
95      }
96    });
97    return {
98      cardData,
99      isPc,
100      isPad,
101      isMob,
102      switchCard
103    };
104  }
105}).mount(".aboutBYD-cardSwitch");