<template>
  <div class="bgf7f7f7">
    <div style="min-height: 100vh;">
      <div class="banner-wrap">
        <div v-if="!isLoad && isClient" class="banner-img" style="background: #fff">
          <NuxtImg class="banner-img" src="/img/loading.png" :loading="isClient ? 'lazy' : 'eager'" :placeholder="isClient ? '/img/loading.png' : undefined" width="100%" height="100%" alt="banner"></NuxtImg>
        </div>
        <div v-else @mouseenter="pauseAutoplay" @mouseleave="resumeAutoplay">
          <Swiper @swiper="onSwiperInit" :autoplay="{ delay: 3500, disableOnInteraction: false, pauseOnMouseEnter: false }" :loop="true" :modules="[SwiperAutoplay, SwiperEffectCreative,SwiperNavigation,SwiperPagination,SwiperController]" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true}" navigation>
            <SwiperSlide v-for="(item,index) in comments" :key="item" :virtualIndex="index">
              <div class="banner-img" :style="'background-image:url('+item.img+')'"></div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
      <div class="bgfff" style="min-height: calc(100vh - 122px);padding-bottom: 60px;">
        <div class="product-wrap home-block">
          <h3 class="home-title">Products</h3>
          <div class="search-box">
            <el-input class="search-wrap" ref="searchInputRef" v-model="searchVal" size="large" placeholder="Please enter product model" :prefix-icon="Search" @keyup.enter.native="SearchFun">
              <template #append>
                <el-button class="btn_main search_btn" @click="SearchFun">
                  Search
                </el-button>
              </template>
            </el-input>
          </div>
          <div class="product-info" v-if="GoodsgoryListData.length">
            <div class="ul">
              <div class="li" v-for="(item,idx) in GoodsgoryListData" :key="item.id" v-show="idx<7">
                <NuxtLink :to="{ path: '/newProduct/'+item.id+'/'+item.subCatgory[0].id, query: { page: 1, name: item?.subCatgory[0]?.nameEn } }" v-if="item.sort==2">
                  <div class="img">
                    <NuxtImg :src="item.img" loading="lazy" alt="" class="goods-img" placeholder="/img/loading.png" />
                  </div>
                  <h3>{{ item.nameEn }}</h3>
                </NuxtLink>
                <NuxtLink :to="{ path: '/cproduct/'+item.id+'/'+item.subCatgory[0].id, query: { page: 1, seekType: 1, sort: 1 } }" v-if="item.sort==1">
                  <div class="img">
                    <NuxtImg :src="item.img" loading="lazy" alt="" class="goods-img" placeholder="/img/loading.png" />
                  </div>
                  <h3>{{ item.nameEn }}</h3>
                </NuxtLink>
              </div>
              <div class="li">
                <NuxtLink to="/newProduct/flq?sort=2">
                  <div class="img img1">
                    <img src="@/assets/img/icon/more.svg" class="goods-img">
                  </div>
                  <h3>View More</h3>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bgf7f7f7" style="min-height:calc(100vh - 122px);padding-top: 180px;padding-bottom: 60px;">
        <div class="company-wrap home-block">
          <h3 class="home-title">Company Profile</h3>
          <p class="company-info">
            As the headquarters of the Hotking Group, Shenzhen Hotking Electronics Co., Ltd. was founded in 1992 in Shenzhen and specializes in the R&D, design, and sales of semiconductor analog chips, integrated circuits, discrete devices, and passive components. It is a Shenzhen specialized and innovative enterprise as well as a national high-tech enterprise.
          </p>
          <ul>
            <li>
              <h3>30<span>+</span></h3>
              <p>Years of Industry Experience</p>
            </li>
            <li>
              <h3>50<span>K+</span></h3>
              <p>Customers Served</p>
            </li>
            <li>
              <h3>60<span>+</span></h3>
              <p>Countries & Regions Served</p>
            </li>
          </ul>
          <a href="javascript:;" class="btn">View Details</a>
          <img class="company-bg" src="@/assets/img/home/home_2.png" alt="" srcset="">
        </div>
      </div>
      <div class="bgfff" style="min-height:calc(100vh - 122px);padding-bottom: 60px;">
        <div class="zn-wrap home-block">
          <h3 class="home-title">Two Smart Manufacturing Centers</h3>
          <div class="tip">
            The group operates two manufacturing bases in South China and Southwest China.<br>The South China base is located in Boluo County, Huizhou, with a plant area of 80,000 square meters. The Southwest base is located in Shunqing District, Nanchong, with a plant area of 40,000 square meters.
          </div>
          <div @mouseenter="pauseAutoplay2" @mouseleave="resumeAutoplay2">
            <Swiper @swiper="onSwiperInit2" :autoplay="{ delay: 3500, disableOnInteraction: false, pauseOnMouseEnter: false }" :loop="true" :modules="[SwiperAutoplay, SwiperEffectCreative,SwiperNavigation,SwiperPagination,SwiperController]" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true}" navigation>
              <SwiperSlide v-for="(item,index) in dataZn" :key="item" :virtualIndex="index">
                <div class="zn-list" v-for="(i,idx) in item.arr" :key="idx">
                  <div class="img">
                    <img :src="i.img" alt="">
                    <h3>{{ i.name }}</h3>
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </div>
      <div class="bgf7f7f7" style="min-height:calc(100vh - 122px);padding-top: 30px;padding-bottom: 60px;">
        <div class="sb-wrap zn-wrap home-block">
          <h3 class="home-title">{{datas[3][0].title}}</h3>
          <div class="tip" v-html="datas[3][0].content"></div>
          <ul class="ul">
            <li v-for="(item,index) in datas[3][0].list" :key="index">
              <nuxt-link class="img" :to="{ name: 'pdtion-finfo' }">
                <img :src="item.image">
              </nuxt-link>
              <h4>{{item.title}}</h4>
            </li>
          </ul>
        </div>
      </div>
      <div class="bgfff" style="min-height:calc(100vh - 122px);padding-top: 30px;padding-bottom: 60px;">
        <div class="zzzl-wrap zn-wrap home-block">
          <h3 class="home-title">Certificates</h3>
          <div class="tip">As a national high-tech enterprise deeply engaged in discrete semiconductors and integrated circuits,<br>Hotking Group maintains a comprehensive certification system.</div>
          <ul class="ul" v-if="sections.length>0">
            <li v-for="(item,index) in sections[0].list" :key="index" @click="linkTozz" v-show="index<=4">
              <a class="img" href="javascript:;">
                <img :src="item.image">
              </a>
              <h4>{{item.title}}</h4>
            </li>
          </ul>
        </div>
      </div>
      <div class="bgf7f7f7" style="min-height:calc(100vh - 122px);padding-bottom: 60px;">
        <div class="fa-wrap home-block">
          <h3 class="home-title">Industry Solutions</h3>
        </div>
        <div class="fa-con">
          <div @mouseenter="pauseAutoplay3" @mouseleave="resumeAutoplay3">
            <Swiper @swiper="onSwiperInit3" :autoplay="{ delay: 113500, disableOnInteraction: false, pauseOnMouseEnter: false }" :loop="true" :modules="[SwiperAutoplay, SwiperEffectCreative,SwiperNavigation,SwiperPagination,SwiperController]" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true}" navigation>
              <SwiperSlide v-for="(item,index) in appList" :key="item" :virtualIndex="index">
                <!-- <img :src="item.img || item.image || item.imageUrl || ''" :alt="item.title"> -->
                <!-- <div class="img"></div> -->
                <div class="solution-info">
                  <h4>{{ `${Number(index) + 1}` }}</h4>
                  <h3>{{ item.title }}</h3>
                  <p :title="item.description">{{ item.description }}</p>
                  <NuxtLink to="javascript:;">View More <img src="@/assets/img/home/jt.png"></NuxtLink>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </div>

      <div class="bgfff" style="min-height:calc(100vh - 122px);padding-top: 30px;padding-bottom: 60px;">
        <div class="homoN-wrap home-block">
          <h3 class="home-title">News & Events</h3>
          <div class="ul">
            <NuxtLink v-for="(item,index) in hyNList" :key="index" :to="{path:'/news/detail',query:{id:item.id,type:40}}">
              <h3>Company News</h3>
              <h2>{{ item.title }}</h2> 
              <p :title="item.description">{{ item.description }}</p>
              <p>{{ item.updateTime }}</p>
            </NuxtLink>
          </div>
          <NuxtLink class="news-more-btn" :to="{ path: '/news', query: { type: 40 } }">View More</NuxtLink>
        </div>
      </div>

      <div class="bgf7f7f7 pb60" style="min-height:calc(100vh - 122px);">
        <div class="zbk-wrap home-block">
          <h3 class="home-title">Corporate Video</h3>
          <div class="sp-con">
            <div class="sp_open" @click="videoFalg=!videoFalg"></div>
          </div>
        </div>
      </div>

      <div class="message-card" style="min-height:calc(100vh - 122px);">
        <h3>Online Message</h3>
        <form class="message-form">
          <div class="two">
            <div class="form-group">
              <label for="name">Company Name:</label>
              <el-input class="bt" v-model.trim="params.companyName" placeholder="Please enter company name"></el-input>
            </div>
            <div class="form-group">
              <label for="name">Your Name:</label>
              <el-input class="bt" v-model.trim="params.username" placeholder="Please enter your name"></el-input>
            </div>
          </div>
          <div class="form-group">
            <label for="contact">Contact Number:</label>
            <el-input class="bt" v-model.trim="params.phone" placeholder="Please enter your contact number"></el-input>
          </div>
          <div class="form-group">
            <label for="content">Message:</label>
            <el-input class="bt" type="textarea" :rows="3" v-model.trim="params.messageContents" placeholder="Please enter your message"></el-input>
          </div>
          <button type="button" class="submit-btn" @click="addGuestbookFun">Submit Now</button>
        </form>
      </div>
    </div>
    <div class="video-wrap" v-if="videoFalg" @click.stop="videoFalg=!videoFalg">
      <!-- <iframe class="video" frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=j3349zq1xcg" allowFullScreen="true"></iframe> -->
      <iframe class="video" src="https://player.bilibili.com/player.html?bvid=BV1af4JzZEWh" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Search, ArrowRight, Close } from "@element-plus/icons-vue";
import { DefaultQuery, pageSizes } from "~/domain/query";
import type spuQuery from "~/api/spu/spuQuery";
import { useAll } from "~/api/pubAll/service";
const {
  getGoodsgoryList,
  getContent,
  menuContent,
  getApplicationList,
  getNewsList,
  addGuestbook,
} = useAll();
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
let videoFalg = ref(false);
let searchVal = ref("");
let GoodsgoryListData: any = ref([]);
function SearchFun() {}

const user = useUserStore();
const isLoad = ref(false);
let params: any = ref({
  phone: "",
  username: "",
  messageContents: "",
  companyName: "",
  companyType: "",
  country: "",
  jobTitle: "",
  languageType: 0,
  mailbox: "",
  queryType: "",
  state: 0,
  trade: "",
});
let dataZn: Ref<any> = ref([
  {
    id: 1,
    arr: [
      {
        name: "Huizhou Hotking Technology Park (South China Smart Manufacturing Center)",
        img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/%E6%83%A0%E5%B7%9E.png",
      },
      {
        name: "Marketing Center (Group Headquarters)",
        img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/kanglichen2026-03-18.png",
      },
    ],
  },
  {
    id: 2,
    arr: [
      {
        name: "Nanchong Base (Southwest Smart Manufacturing Center)",
        img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/%E5%9B%9B%E5%B7%9D.png",
      },
      {
        name: "Nanchong Base (Southwest Smart Manufacturing Center)",
        img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/anhao2026-03-18.png",
      },
    ],
  },
]);
async function addGuestbookFun() {
  if (!params.value.username) {
    return ElMessage.error("Please enter your name");
  } else if (!params.value.phone) {
    return ElMessage.error("Please enter your contact number");
  } else if (!params.value.messageContents) {
    return ElMessage.error("Please enter your message");
  }
  let res: any = await addGuestbook(params.value);
  if (res.httpCode == 200) {
    ElMessage.success("Submitted successfully");
    params.value = {
      phone: "",
      username: "",
      messageContents: "",
      companyName: "",
      companyType: "",
      country: "",
      jobTitle: "",
      languageType: 0,
      mailbox: "",
      queryType: "",
      state: 0,
      trade: "",
    };
  } else {
    ElMessage.error("Submission failed");
  }
}
const { data: ssrGoodsgoryList } = await useAsyncData<any>(
  "hotSpuList-341",
  () => getGoodsgoryList()
);
setData(ssrGoodsgoryList.value);

const { data: ssrGetContent } = await useAsyncData<any>("getContent5553s", () =>
  getContent({
    language: 2,
    code: 1,
  })
);
let datas = ref(ssrGetContent.value.data || []);

const { data: zzzlData } = await useAsyncData("patentPage334hhs", () =>
  menuContent()
);
const rawData = computed<any[][]>(() =>
  Array.isArray(zzzlData.value?.data) ? zzzlData.value?.data : []
);
const sections = computed<any[]>(() => rawData.value);

const { data: ssrGetApplicationList, refresh } = await useAsyncData<any>(
  "getApplicationList",
  () =>
    getApplicationList({
      current: 1,
      records: [{ cid: 205, language: 2 }],
      size: 5,
    })
);
let appList = ref(ssrGetApplicationList.value?.data?.records ?? []);

const { data: ssrGetNewsList } = await useAsyncData<any>("ssrGetNewsList", () =>
  getApplicationList({
    current: 1,
    records: [{ cid: 40, language: 2 }],
    size: 5,
  })
);
let hyNList = ref(ssrGetNewsList.value?.data?.records ?? []);

function setData(res: any) {
  if (res.httpCode == 200) {
    GoodsgoryListData.value = res?.data;
  }
}

// Use multiple languages ​​in ts
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance()!;
const comments = ref([
  {
    img: "https://doc.hotking.com/hkt/adpos/pic/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230420131304%281%29.jpg",
    code: "javascript:;",
    name: "1",
  },
  {
    img: "https://doc.hotking.com/hkt/adpos/pic/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230420131304%281%29.jpg",
    code: "javascript:;",
    name: "1",
  },
  {
    img: "https://doc.hotking.com/hkt/adpos/pic/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230420131304%281%29.jpg",
    code: "javascript:;",
    name: "1",
  },
]);
let presaleFalg = ref(true);
function done(e: any) {
  if (e.length == 0) {
    presaleFalg.value = false;
  }
}

function linkTo() {
  navigateTo({
    path: "/admin/product/want/create",
  });
}
function linkTozz() {
  navigateTo({
    path: "/about/zzzl",
  });
}
// // 获取指纹
// const { $FingerprintJS }: any = useNuxtApp();
// 初始化定时器
let timer: any = null;
onMounted(async () => {
  isLoad.value = true;
});

const swiperInstance: any = ref(null);
// Swiper 初始化时触发
const onSwiperInit = (swiper: any) => {
  swiperInstance.value = swiper;
};
const pauseAutoplay = () => {
  if (swiperInstance.value) {
    swiperInstance.value.autoplay.stop();
  }
};

// 鼠标离开时恢复轮播
const resumeAutoplay = () => {
  if (swiperInstance.value) {
    swiperInstance.value.autoplay.start();
  }
};

const swiperInstance2: any = ref(null);
// Swiper 初始化时触发
const onSwiperInit2 = (swiper: any) => {
  swiperInstance2.value = swiper;
};
const pauseAutoplay2 = () => {
  if (swiperInstance2.value) {
    swiperInstance2.value.autoplay.stop();
  }
};

// 鼠标离开时恢复轮播
const resumeAutoplay2 = () => {
  if (swiperInstance2.value) {
    swiperInstance2.value.autoplay.start();
  }
};

const swiperInstance3: any = ref(null);
// Swiper 初始化时触发
const onSwiperInit3 = (swiper: any) => {
  swiperInstance3.value = swiper;
};
const pauseAutoplay3 = () => {
  if (swiperInstance3.value) {
    swiperInstance3.value.autoplay.stop();
  }
};

// 鼠标离开时恢复轮播
const resumeAutoplay3 = () => {
  if (swiperInstance3.value) {
    swiperInstance3.value.autoplay.start();
  }
};
</script>
<style scoped lang="scss">
.home-block {
  padding: 1px 20px;
  width: min(100%, 90%);
  max-width: 1600px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  .home-title {
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: #333333;
    line-height: 80px;
    margin-top: 70px;
    margin-bottom: 35px;
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 40px;
      height: 3px;
      background: $mainColor;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
}
.banner-wrap {
  width: 100%;
  background: #fff;
  height: 760px;
  border-radius: 4px;
  overflow: hidden;
  .banner-img {
    width: 100%;
    height: 760px;
    background: url(@/assets/img/index_1.png) no-repeat top center;
    background-size: auto 760px;
    position: relative;
    margin-bottom: 0px;
  }
  :deep(.swiper-button-next),
  :deep(.swiper-button-prev) {
    background: rgba(0, 0, 0, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: 20px;
    &::after {
      font-size: 18px;
      color: #fff;
    }
  }
  :deep(.swiper-button-prev) {
    left: 20px;
  }
}
.search-box {
  position: relative;
  width: 610px;
  margin: 0px auto 10px;
}
.search-wrap {
  display: flex;
  :deep(.el-input-group__append) {
    padding: 0;
    box-shadow: unset;
    border-radius: 35px;
    background: #f1f2f7;
    margin-left: -122px;
    width: 122px;
    .search_btn {
      width: 122px;
      margin-left: 0;
      border-radius: 35px !important;
      border: none !important;
      height: 52px !important;
      margin: 0;
    }
  }
  :deep(.el-input__wrapper) {
    background: #fafafa;
    border-radius: 35px;
    box-shadow: inset 0 0 0 1px #eff1f2;
    font-size: 16px;
    height: 52px;
    line-height: 52px;
    padding: 1px 20px;
    max-width: 680px;
    .el-input__prefix {
      font-size: 20px;
      color: #888;
    }
    .el-input__inner {
      height: 52px;
      padding-right: 122px;
    }
    &.is-focus {
      box-shadow: 0 0 0px 1px #ff004f inset !important;
      background: #fff;
    }
  }
}
.product-wrap {
  .product-info {
    .ul {
      display: flex;
      flex-wrap: wrap;
      max-width: 1400px;
      margin: 0 auto;
      .li {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 35px;
        margin-bottom: 35px;
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        h3 {
          font-size: 18px;
          color: #333333;
          font-weight: bold;
          line-height: 30px;
          margin-bottom: 5px;
        }
        p {
          font-size: 14px;
          color: #888;
          text-transform: uppercase;
        }
        .img {
          width: 140px;
          height: 140px;
          padding: 10px;
          img {
            width: 120px;
            height: 120px;
          }
          &.img1 {
            padding: 50px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

.company-wrap {
  background: #fff;
  padding: 1px 70px 70px;
  margin-bottom: 0px;
  position: relative;
  .home-title {
    text-align: left;
    width: max-content;
    margin-top: 56px;
    &::before {
      width: 100%;
    }
  }
  .company-info {
    margin-top: 40px;
    line-height: 26px;
    margin-bottom: 30px;
    font-size: 16px;
    color: #555;
    max-width: 600px;
  }
  ul {
    display: flex;
    margin-bottom: 40px;
    li {
      width: 135px;
      text-align: left;
      h3 {
        font-size: 48px;
        font-weight: bold;
        color: $mainColor;
        letter-spacing: 1.5px;
        line-height: 64px;
        height: 64px;
        span {
          font-size: 24px;
        }
      }
      p {
        font-size: 16px;
        color: #555;
        margin-top: 0px;
      }
    }
  }
  .btn {
    width: 140px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid $mainColor;
    color: $mainColor;
    border-radius: 100px;
    font-size: 16px;
  }
  .company-bg {
    position: absolute;
    right: 0;
    top: -74px;
    border-radius: 5px;
  }
}
.zn-wrap {
  width: min(100%, 90%);
  max-width: 1600px;
  box-sizing: border-box;
  margin: 0 auto;
  .tip {
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    margin-bottom: 40px;
  }
  .swiper-slide {
    display: flex;
    justify-content: space-between;
    .zn-list {
      width: calc(50% - 10px);
      position: relative;
      margin-bottom: 30px;
      img {
        width: 100%;
      }
      h3 {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 40px;
        background: #e8e8e8;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &:hover {
        h3 {
          background: #e5484c;
          color: #fff;
        }
      }
    }
  }
}
.sb-wrap,
.zzzl-wrap {
  ul {
    display: grid;
    gap: 20px;
    grid-auto-flow: column;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    li {
      width: 100%;
      background: #fff;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 320px;
        object-fit: cover;
      }
      h4 {
        background-color: rgba(230, 60, 60, 0.7);
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0px;
        color: #fff;
        font-size: 18px;
        width: 100%;
      }
    }
  }
}
.zzzl-wrap {
  ul {
    justify-content: start;
    display: flex;
    background: #f7f7f7;
    li {
      width: calc((100% - 30px) / 5);
      padding-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      a {
        display: block;
        padding: 12px 0;
      }
      h4 {
        background: #e6252c;
        bottom: 0px;
        font-size: 14px;
      }
      @media (max-width: 1400px) {
        h4 {
          font-size: 14px;
        }
      }
      @media (max-width: 1200px) {
        h4 {
          font-size: 13px;
        }
      }
      img {
        height: unset;
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
.fa-wrap {
  .home-title {
    text-align: left;
    width: max-content;
    margin-bottom: 10px;
    &::before {
      display: none;
    }
  }
}
.fa-con {
  width: min(calc(100% - 20px), 90%);
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
  & > div {
    height: 550px;
    border-radius: 5px;
    width: 100%;
  }
  .swiper {
    height: 550px;
    .swiper-slide {
      /* 根据视口收缩左右留白，避免 1200px 屏幕出现横向滚动。 */
      padding: 50px clamp(72px, 8vw, 190px);
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      gap: clamp(24px, 3vw, 50px);
      align-items: center;
      &[data-swiper-slide-index="0"] {
        background: url(@/assets/img/home/061.png) no-repeat center center;
        background-size: 100%;
      }
      &[data-swiper-slide-index="1"] {
        background: url(@/assets/img/home/062.png) no-repeat center center;
        background-size: 100%;
      }
      &[data-swiper-slide-index="2"] {
        background: url(@/assets/img/home/063.png) no-repeat center center;
        background-size: 100%;
      }
      &[data-swiper-slide-index="3"] {
        background: url(@/assets/img/home/064.png) no-repeat center center;
        background-size: 100%;
      }
      &[data-swiper-slide-index="4"] {
        background: url(@/assets/img/home/065.png) no-repeat center center;
        background-size: 100%;
      }
      & > .img {
        width: min(58%, 800px);
        height: 450px;
        object-fit: cover;
      }
      .solution-info {
        margin-right: 100px;
        flex: 0 0 min(36%, 400px);
        height: 450px;
        background: #ff0000;
        position: relative;
        margin-left: 0;
        padding: 0px clamp(24px, 3vw, 50px);
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        h4 {
          font-size: 24px;
          font-weight: bold;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: #fff;
          color: #333;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 30px;
        }
        h3,
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          word-break: break-all;
          margin-bottom: 20px;
        }
        h3 {
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 20px;
        }
        p {
          -webkit-line-clamp: 4;
          font-size: 16px;
        }
        a {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    :deep(.swiper-button-prev) {
      width: 82px;
      height: 42px;
      background: #ff0000 url(@/assets/img/home/jt.png) no-repeat center center;
      transform: scaleX(-1);
      left: 48px;
      &::after {
        display: none;
      }
    }
    :deep(.swiper-button-next) {
      width: 82px;
      height: 42px;
      background: #ff0000 url(@/assets/img/home/jt.png) no-repeat center center;
      right: 48px;
      &::after {
        display: none;
      }
    }
  }
}
.homoN-wrap {
  .home-title {
    text-align: left;
    margin-bottom: 10px;
    &::before {
      display: none;
    }
  }
  .ul {
    display: flex;
    justify-content: space-between;
    a {
      width: calc((100% - 120px) / 5);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 40px 20px;
      border-radius: 3px;
      cursor: pointer;
      h3 {
        font-size: 14px;
        color: #e5484c;
        font-weight: bold;
        margin-bottom: 20px;
      }
      h2,
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-wrap: break-word;
        word-break: break-all;
        margin-bottom: 30px;
      }
      h2 {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .news-more-btn {
    width: 140px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 52px auto 0;
    border: 1px solid $mainColor;
    border-radius: 100px;
    color: $mainColor;
    font-size: 16px;
  }
}

.message-card {
  background: url(@/assets/img/home/bg-2.png) no-repeat center center;
  background-size: 100% 100%;
  padding-top: 120px;
  padding-bottom: 70px;
  h3 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
    color: #fff;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #fff;
    width: max-content;
    margin: 0 auto 40px;
    font-weight: bold;
  }
  .message-form {
    width: 90%;
    max-width: 1600px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto;
    .two {
      display: flex;
      justify-content: space-between;
      .form-group {
        width: 48%;
      }
    }
    .form-group {
      margin-bottom: 30px;
    }
  }
  .message-form label {
    display: block;
    margin-bottom: 12px;
    color: #fff;
    font-size: 16px;
  }
  .message-form input,
  .message-form textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
  }
  :deep(.el-input__wrapper) {
    background: #ff6262;
    box-shadow: none !important;
    input {
      color: #fff !important;
      &::placeholder {
        color: #f4f4f4 !important;
      }
    }
  }
  :deep(.el-textarea__inner) {
    background: #ff6262;
    box-shadow: none !important;
    color: #fff !important;
    &::placeholder {
      color: #f4f4f4;
    }
  }
  .message-form textarea {
    height: 100px;
    resize: none;
  }
  .submit-btn {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #e53935;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 auto;
  }
  .submit-btn:hover {
    background-color: #c62828;
  }
}
.zbk-wrap {
  .home-title {
    text-align: left;
    margin-bottom: 10px;
    &::before {
      display: none;
    }
  }
  .sp-con {
    width: min(100%, 100%);
    margin: 0 auto;
    aspect-ratio: 1600 / 694;
    height: auto;
    background: url(@/assets/img/home/index_spbg.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    &::before{
      content: '';
      height: 44px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: -20px;
      background: url(@/assets/img/home/index_spOpen3.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .sp_open {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 0;
      left: 0;
      right: -45px;
      bottom: 0;
      margin: auto;
      background: url(@/assets/img/home/index_spOpen2.png) no-repeat center center;
    background-size: 100% 100%;
    }
  }
}
@media (max-width: 1650px) {
  .company-wrap {
    padding: 1px 50px 50px;
    .company-bg {
      /* 背景图按容器收缩，保留原有叠放关系同时避免撑宽页面。 */
      max-width: 50%;
      height: auto;
    }
    .company-info {
      line-height: 24px;
      font-size: 16px;
      margin-top: 30px;
      margin-bottom: 25px;
      max-width: 500px;
    }
    ul {
      margin-bottom: 30px;
      li h3 {
        font-size: 42px;
        line-height: 60px;
        height: 60px;
        span {
          font-size: 22px;
        }
      }
    }
    .home-title {
      margin-top: 45px;
      margin-bottom: 30px;
      line-height: 74px;
    }
  }
}
@media (max-width: 1500px) {
  .company-wrap {
    padding: 1px 40px 40px;
    .company-bg {
      /* 背景图按容器收缩，保留原有叠放关系同时避免撑宽页面。 */
      max-width: 50%;
      height: auto;
    }
    .company-info {
      line-height: 24px;
      font-size: 15px;
      margin-top: 30px;
      margin-bottom: 25px;
      max-width: 500px;
    }
    ul {
      margin-bottom: 30px;
      li h3 {
        font-size: 38px;
        line-height: 56px;
        height: 56px;
        span {
          font-size: 20px;
        }
      }
    }
    .home-title {
      margin-top: 35px;
      margin-bottom: 25px;
      line-height: 70px;
    }
  }
  .solution-info {
    height: 400px !important;
  }
}
@media (max-width: 1400px) {
.solution-info {
    height: 350px !important;
  }
}
@media (max-width: 1200px) {
  .home-block,
  .zn-wrap {
  }

  .company-wrap {
    padding: 1px 30px 30px;
    .home-title {
      margin-top: 25px;
      margin-bottom: 15px;
      line-height: 60px;
    }
    .company-info {
      line-height: 22px;
      font-size: 14px;
      margin-top: 20px;
      margin-bottom: 15px;
    }
    ul {
      margin-bottom: 25px;
      li h3 {
        font-size: 34px;
        line-height: 48px;
        height: 48px;
        span {
          font-size: 18px;
        }
      }
    }
    .company-info {
      max-width: 520px;
    }
    .company-bg {
      /* 背景图按容器收缩，保留原有叠放关系同时避免撑宽页面。 */
      max-width: 50%;
      height: auto;
    }
    .company-info {
      max-width: 400px;
    }
  }

  .fa-con {
    width: calc(100% - 32px);
    .swiper {
      .swiper-slide {
        padding-right: 72px;
        padding-left: 72px;
        & > .img {
          flex: 1 1 auto;
          min-width: 0;
        }
        .solution-info {
          flex-basis: 340px;
        }
      }
      :deep(.swiper-button-prev) {
        left: 24px;
      }
      :deep(.swiper-button-next) {
        right: 24px;
      }
    }
  }

  .message-card {
    .message-form {
      width: calc(100% - 32px);
    }
  }

  .zbk-wrap {
    .sp-con {
      width: 100%;
    }
  }
}
.video-wrap {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  z-index: 9999;
  height: 100vh;
  top: 0;
  left: 0;

  .video {
    width: 815px;
    height: 515px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>
