<template>
  <div id="HomePage">
    <!-- 轮播图 -->
    <div>
      <img class="homeimg" src="@/assets/img/carousel.png" alt="" />
    </div>
    <!-- 头部title -->
    <div class="log-title">
      <div class="item">
        <div><span class="s">12</span> <span class="w">万</span></div>
        <div style="margin-top: 1px">
          <span class="f">服务宠物数量</span>
        </div>
      </div>

      <div class="item">
        <div><span class="s">11</span> <span class="w">万</span></div>
        <div style="margin-top: 1px">
          <span class="f">会员人数</span>
        </div>
      </div>

      <div class="item">
        <div>
          <span class="s">89%</span>
        </div>
        <div style="margin-top: 1px">
          <span class="f">会员满意度</span>
        </div>
      </div>

      <div class="item">
        <div>
          <span class="s">99%</span>
        </div>
        <div style="margin-top: 1px">
          <span class="f">持续使用率</span>
        </div>
      </div>
    </div>
    <!-- 宠物服务 -->
    <div class="cw-service">
      <div class="top">
        <span class="c1">宠物服务</span>
        <span class="c2">Pet services</span>
      </div>
      <div class="outer-layer">
        <div class="service-t">
          <div class="service-item">
            <img class="y1" src="@/assets/img/y2.png" alt="" />
            <p class="yd1">SPA级护理</p>
            <p class="yd2">
             深层清洁护皮肤，细节打理焕神采，特色项目助放松，宠爱从 “头” 到 “脚”
            </p>
          </div>
          <div class="service-item">
            <img class="y1" src="@/assets/img/y3.png" alt="" />
            <p class="yd1">上门美容</p>
            <p class="yd2">
             由专业美容师提供个性化造型设计，让宠物更加时尚可爱
            </p>
          </div>
          <div class="service-item">
            <img class="y1" src="@/assets/img/y4.png" alt="" />
            <p class="yd1">上门训犬</p>
            <p class="yd2">
              专业训犬，纠正爱犬不良习惯，让养宠变得简单
            </p>
          </div>
          <div class="service-item">
            <img class="y1" src="@/assets/img/y5.png" alt="" />
            <p class="yd1">公益助力</p>
            <p class="yd2">
              积分有光，善行无界 帮助每个毛孩子找到一个温暖的家
            </p>
          </div>
        </div>
      </div>
      <div class="underline">
        <div class="h1"></div>
        <div class="h2"></div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div id="bigData" class="container-fuild" >
      <div class="top">
        <span class="c1">关于我们</span>
        <span class="c2">About Us</span>
      </div>
      <div class="bigData-container row" style="margin-top: 20px">
        <div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">
            <video src="@/assets/img/sp.mp4" controls   class="img-responsive" @play="onPlay" @pause="onPause">
    </video>
          <!-- <img
            class="img-responsive"
            src="@/assets/img/sp.png"
            alt="散热半导体芯片"
          /> -->
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
          <h4 class="bigData-title">
            Wagoo是谁？
            <!-- <small>/ Heat Dissipation Semiconductor Chip</small> -->
          </h4>
          <p class="b">
            帮宠到家”旗下品牌--Wagoo致力于打造【一站式移动宠物服务平台】，以“移动宠爱，悦享生活”为起点，聚焦宠物与主人的全方位需求，打破传统宠物店“三公里”限制，为爱宠提供便捷，舒适的上门洗护体验，力求让每一次体验都成为宠物与主人之间的美好回忆。
          </p>
          <h4 class="bigData-title">
            品牌理念
            <!-- <small>/ Heat Dissipation Semiconductor Chip</small> -->
          </h4>
          <p class="b">
            Wagoo，将便捷、专业与深情关爱巧妙融合，打造每一次无与伦比的宠物护理体验。
            秉承“移动宠爱，悦享生活”的核心理念，我们凭借创新的服务模式与全方位的宠物护理解决方案，为宠物与宠物主人开启一段前所未有的愉悦与便捷之旅。
          </p>
          <p class="b">
            移动空间，宠爱无界：Wagoo
            移动宠物洗护车，颠覆传统，打破时空束缚。无需再受限于宠物店的位置与时间，只需轻触小程序，轻松预约，我们的洗护车便如约而至，上门服务。这份随时随地的便捷，让宠物主人在繁忙生活中也能随时给予爱宠最贴心的关怀与呵护。
          </p>
          <div class="details" @click="viewDetails">
            <!-- <span class="view">查看详情</span> -->
              <router-link class="view" :to=" '/WagooCat' ">
                             关于我们
                            <i class="underline"></i>
              </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务案例 -->
    <div class="customer-f">
      <div class="top">
        <span class="c1">服务案例</span>
        <span class="c2">Service Case</span>
      </div>
      <div class="comments-y">
        <div class="case-item">
          <div class="case-top">
            <img class="avatar1" src="@/assets/img/avatar1.png" alt="" />
            <div class="case-t">
              <div class="case-r">
                <span class="case-y">用户_30788</span>
                <div class="case-x">
                  <span class="xk">新客</span>
                </div>
              </div>
              <p class="sj">2025-06-05</p>
            </div>
          </div>
          <div class="review">
            <div class="case-x2">
              <span class="xk2">超赞</span>
            </div>
            <div class="star" v-for="item in 5" :key="item">
              <img class="xx" src="@/assets/img/xx.png" alt="" />
            </div>
          </div>
          <div class="comment">
            <p class="ct">
              第一次叫上门给宠物洗澡服务，宠物美容师技术很好，服务很到位，宠物也感觉适应一点也不反抗，下次还找这家......
            </p>
          </div>
          <div class="display-cw">
            <img class="cw" src="@/assets/img/cw1.png" alt="" />
            <img class="cw" src="@/assets/img/cw2.png" alt="" />
            <img class="cw" src="@/assets/img/cw3.png" alt="" />
          </div>
        </div>

        <div class="case-item">
          <div class="case-top">
            <img class="avatar1" src="@/assets/img/avatar2.png" alt="" />
            <div class="case-t">
              <div class="case-r">
                <span class="case-y">用户_30788</span>
                <div class="case-x3">
                  <span class="xk">回头客</span>
                </div>
              </div>
              <p class="sj">2025-06-05</p>
            </div>
          </div>
          <div class="review">
            <div class="case-x2">
              <span class="xk2">超赞</span>
            </div>
            <div class="star" v-for="item in 5" :key="item">
              <img class="xx" src="@/assets/img/xx.png" alt="" />
            </div>
          </div>
          <div class="comment">
            <p class="ct">
              真的好方便，基本做到足不出户。我家的吹风会害怕，吹的时候挣脱绳子差点逃走。没想到车子还有烘干箱，虽然时间长，但是猫咪没有那么害怕了，很......
            </p>
          </div>
          <div class="display-cw">
            <img class="cw" src="@/assets/img/cw4.png" alt="" />
            <img class="cw" src="@/assets/img/cw5.png" alt="" />
            <img class="cw" src="@/assets/img/cw6.png" alt="" />
          </div>
        </div>

        <div class="case-item">
          <div class="case-top">
            <img class="avatar1" src="@/assets/img/avatar3.png" alt="" />
            <div class="case-t">
              <div class="case-r">
                <span class="case-y">用户_30788</span>
                <div class="case-x3">
                  <span class="xk">回头客</span>
                </div>
              </div>
              <p class="sj">2025-06-05</p>
            </div>
          </div>
          <div class="review">
            <div class="case-x2">
              <span class="xk2">超赞</span>
            </div>
            <div class="star" v-for="item in 5" :key="item">
              <img class="xx" src="@/assets/img/xx.png" alt="" />
            </div>
          </div>
          <div class="comment">
            <p class="ct">
              预约到家门口洗澡，超级方便啊！车子好漂亮，里面也很干净，小哥哥超nice的，耐心巨好，洗得很仔细！耳朵都掏了两遍～天很热，但是里面有空调，......
            </p>
          </div>
          <div class="display-cw">
            <img class="cw" src="@/assets/img/cw7.png" alt="" />
            <img class="cw" src="@/assets/img/cw8.png" alt="" />
            <img class="cw" src="@/assets/img/cw9.png" alt="" />
          </div>
        </div>

        <div class="case-item">
          <div class="case-top">
            <img class="avatar1" src="@/assets/img/avatar4.png" alt="" />
            <div class="case-t">
              <div class="case-r">
                <span class="case-y">用户_30788</span>
                <div class="case-x">
                  <span class="xk">新客</span>
                </div>
              </div>
              <p class="sj">2025-06-05</p>
            </div>
          </div>
          <div class="review">
            <div class="case-x2">
              <span class="xk2">超赞</span>
            </div>
            <div class="star" v-for="item in 5" :key="item">
              <img class="xx" src="@/assets/img/xx.png" alt="" />
            </div>
          </div>
          <div class="comment">
            <p class="ct">
             第一次下单上门洗狗完美解决场地和出门去宠物店的麻烦，而且还是洗着洗着下大暴雨了，美容师还很尽职尽责完成了，狗狗剪的非常漂亮审美也很好。
            </p>
          </div>
          <div class="display-cw">
            <img class="cw" src="@/assets/img/cw10.png" alt="" />
            <img class="cw" src="@/assets/img/cw11.png" alt="" />
            <img class="cw" src="@/assets/img/cw12.png" alt="" />
          </div>
        </div>
      </div>
      <div class="details2">
         <router-link class="view" :to=" '/newsinformation' ">
                             服务案例
                            <i class="underline"></i>
              </router-link>
        <!-- <span class="view2">查看更多</span> -->
      </div>
    </div>
    <!-- 我们的优势 -->
    <div class="whyChooseUs2">
      <div class="container5" >
         <div class="top">
        <span class="c1">我们的优势</span>
        <span class="c2">Our advantages</span>
      </div>
      <div class="ys">
           <img class="ys1"  src="@/assets/img/ys1.png" alt="" />
      </div>
      </div>
    </div>
    <!-- 服务项目 -->
    <div class="whyChooseUs">
      <div class="container4" >
         <div class="top">
        <span class="c1">服务项目</span>
        <span class="c2" style="margin-bottom:8px;">Service items</span>
      </div>
      <div class="project">
         <img class="r1" src="@/assets/img/r1.png" alt="" />
         <img class="r1" src="@/assets/img/r2.png" alt="" />
         <img class="r1" src="@/assets/img/r3.png" alt="" />
      </div>
 <div class="project2">
       <img class="r1" src="@/assets/img/r4.png" alt="" />
         <img class="r1" src="@/assets/img/r5.png" alt="" />
         <img class="r1" src="@/assets/img/r6.png" alt="" />
      </div>
      </div>
    </div>
    <!-- 活动风采 -->
    <div class="customer-f3">
      <div class="top">
        <span class="c1">活动风采</span>
        <span class="c2">Activity Highlights</span>
      </div>
      <div class="exhibition">
         <div class="case-item2">
           <img class="act1" src="@/assets/img/act1.png" alt="" />
          <p class="zh">展会-亚宠展</p>
          <span class="zh1">亚宠展：全球宠物行业旗舰展，覆盖全产业链的B2B贸易与综合消费展。</span>
          <div class="time-act">
            <span class="time">2025年06月20日</span> <span class="time">展会活动</span>
          </div>
        </div>
         <div class="case-item2">
           <img class="act1" src="@/assets/img/act2.png" alt="" />
          <p class="zh">展会-上海宠物时装周</p>
          <span class="zh1">上海宠物时装周：专注于宠物时尚、生活方式的品牌发布与文化盛宴。</span>
          <div class="time-act">
            <span class="time">2025年06月20日</span> <span class="time">展会活动</span>
          </div>
        </div>
         <div class="case-item2">
           <img class="act1" src="@/assets/img/act3.png" alt="" />
          <p class="zh">宠物友好银行-浦发银行</p>
          <span class="zh1">在这里可以直接携宠进入银行办理业务 等待的时间毛孩子还能享受洗香香服务 养宠人瞬间化身真正的时间管理大师</span>
          <div class="time-act">
            <span class="time">2025年06月20日</span> <span class="time">宠物友好银行</span>
          </div>
        </div>
         <div class="case-item2">
           <img class="act1" src="@/assets/img/act4.png" alt="" />
          <p class="zh">阿纳迪酒店</p>
          <span class="zh1">展会-上海宠物时装周展会-上海宠物时装周展会-上海宠物时装周展会-上海宠物时装周装周周装周</span>
          <div class="time-act">
            <span class="time">2025年06月20日</span> <span class="time">酒店活动</span>
          </div>
        </div>
      </div>
      <div class="details2">
        <router-link class="view2" :to=" '/jobchance' ">
                             活动风采
                            <i class="underline"></i>
              </router-link>
      </div>
    </div>

    <!-- 合作伙伴 -->
       <div class="whyChooseUs">
      <div class="container4" >
         <div class="top1">
        <span class="c1">合作伙伴</span>
        <span class="c2" style="margin-bottom:8px;">Partner</span>
      </div>
      <div class="project3">
         <img class="zr1" src="@/assets/img/hz1.png" alt="" />
         <img class="zr1" src="@/assets/img/hz2.png" alt="" />
         <img class="zr1" src="@/assets/img/hz3.png" alt="" />
          <img class="zr1" src="@/assets/img/hz4.png" alt="" />
         <img class="zr1" src="@/assets/img/hz5.png" alt="" />
         <img class="zr1" src="@/assets/img/hz6.png" alt="" />
          <img class="zr1" src="@/assets/img/hz7.png" alt="" />
         <img class="zr1" src="@/assets/img/hz8.png" alt="" />
         <img class="zr1" src="@/assets/img/hz9.png" alt="" />
          <img class="zr1" src="@/assets/img/hz10.png" alt="" />
         <img class="zr1" src="@/assets/img/hz11.png" alt="" />
         <img class="zr1" src="@/assets/img/hz12.png" alt="" />
           <img class="zr1" src="@/assets/img/hz13.png" alt="" />
         <img class="zr1" src="@/assets/img/hz14.png" alt="" />
         <img class="zr1" src="@/assets/img/hz15.png" alt="" />
          <img class="zr1" src="@/assets/img/hz16.png" alt="" />
         <img class="zr1" src="@/assets/img/hz17.png" alt="" />
         <img class="zr1" src="@/assets/img/hz18.png" alt="" />
      </div>
   
      </div>
    </div>
  </div>
</template>

<script setup name="HomePage">
import WOW from 'wow.js'
import { getCurrentInstance, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
//导入能返回路由器和路由对象的方法！
const route = useRoute();
const router = useRouter();
// import Swiper from 'swiper'
import { A11y, Autoplay, Lazy, Navigation, Pagination, Scrollbar } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'

import banner1 from '@/assets/img/carousel.png'
import banner2 from '@/assets/img/banner2.png'
import banner3 from '@/assets/img/banner3.png'
import banner4 from '@/assets/img/banner4.png'

import logo_hp from '@/assets/img/logo_hp.png'
import logo_kk from '@/assets/img/logo_kk.png'
import logo_toyota from '@/assets/img/logo_toyota.png'

import img_tel from '@/assets/img/carousel.png'
import img_computer from '@/assets/img/computer.png'
// import img_qq from '/images/service1-50.png';
import img_skill from '@/assets/img/skill.png'

const swiperList = [
  {
    img: banner1
  }

]

const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]

// const { proxy } = getCurrentInstance() //获取上下文实例，ctx=vue2的this
onMounted(() => {
  // console.log('mounted', proxy)
  // console.log(proxy.$wow, '------')
  /* wowjs动画 */
  new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
  }).init()
})
// function viewDetails() {
//   try {
//      router.push({ name: '/WagooCat' });
// } catch (error) {
//      console.log(error,'--?');
// }
 

//   //  router.push({ name: 'Service' })
//         // menuName.value = name;
//     }

 
</script>

<style scoped >
.log-title {
  display: flex;
  flex-wrap: wrap;
  width:67%;
  margin: 0 auto;
  /* justify-content: space-around; */
}
.container5{
  width:67%;
  margin: 0 auto;
}
.container4{
  width:67%;
  margin: 0 auto;
}
.container{
  width: 68%;
}

.item {
  text-align: center;
  flex: 1 1 20%; /* 或者其他百分比，确保在大屏时每个项占用25%的宽度 */
  box-sizing: border-box;
  margin-top: 10px;
}
.details {
  width: 73px;
  height: 26px;
  margin-top: 20px;
  border-radius: 4px;
  border: 0.5px solid #ff19a0;
  text-align: center;
  line-height: 24px;
}
.view {
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: normal;
  color: #ff19a0;
}
.details2 {
  width: 73px;
  height: 26px;
  margin: 20px auto;
  border-radius: 4px;
  border: 0.5px solid #ff19a0;
  text-align: center;
  line-height: 24px;
}
.view2 {
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: normal;
  color: #ff19a0;
}
.s {
  color: #ff19a0;
  font-family: PingFangSC;
  font-size: 50px;
  font-weight: 500;
}
.w {
  font-family: PingFangSC;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.b {
  font-size: 14px;
  font-family: PingFangSC;
  color: #666666;
}
.f {
  font-family: PingFangSC;
  font-size: 18px;
  font-weight: normal;
  color: #333333;
}
.homeimg {
  width: 100%;
}
.underline {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  margin-top: 10px;
}
.h1 {
  width: 78px;
  height: 4px;
  border-radius: 155px;
  background: #ff19a0;
  margin-right: 10px;
}
.h2 {
  margin-left: 10px;
  width: 78px;
  height: 4px;
  border-radius: 159px;
  background: #ededed;
}
.service-t {
  width:67%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.exhibition{
  display: flex;
  width:67%;
  justify-content: space-around;
  margin: 5px auto;
  /* padding-left: 56px; */
}

.case-item {
  width: 282px;
  /* height: 257px; */
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}
.case-item2 {
  width: 282px;
  /* height: 257px; */
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}
.zh{
  font-family: PingFangSC;
font-size: 16px;
font-weight: normal;
color: #333333;
margin-top: 10px;
}
.zh1{
  font-family: PingFangSC;
font-size: 13px;
font-weight: normal;
color: #999999;
display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.time-act{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

}
.time{
  font-family: PingFangSC;
font-size: 12px;
color: #333333;
}
.case-top {
  display: flex;
  align-items: center;
}
.avatar1 {
  width: 60px;
  height: 60px;
}
.case-t {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0 15px;
  gap: 10px;
}
.case-r {
  display: flex;
  align-items: center;
}
.case-y {
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  color: #272427;
}
.case-x {
  width: 24px;
  height: 14px;
  margin-left: 5px;
  border-radius: 2px;
  background: #ffecf3;
  text-align: center;
  line-height: 12px;
}
.xk {
  font-family: PingFangSC;
  font-size: 10px;
  font-weight: normal;
  color: #ff19a0;
}
.sj {
  font-family: PingFangSC;
  font-size: 10px;
  font-weight: normal;
  color: #9b939a;
}
.review {
  display: flex;
  margin-top: 10px;
}
.case-x2 {
  width: 24px;
  height: 14px;
  /* margin-left:5px; */
  border-radius: 2px;
  background: #ffecf3;
  text-align: center;
  line-height: 12px;
}
.case-x3 {
  width: 40px;
  height: 14px;
  margin-left:5px;
  border-radius: 2px;
  background: #ffecf3;
  text-align: center;
  line-height: 12px;
}
.xk2 {
  font-family: PingFangSC;
  font-size: 10px;
  font-weight: normal;
  color: #ff19a0;
}
.star {
  display: flex;
  align-items: center;
}
.xx {
  width: 10px;
  height: 9.26px;
  margin: 0 0 2px 6px;
}
.comment {
  margin-top: 5px;
}
.ct {
  font-family: PingFangSC;
  font-size: 12px;
  font-weight: normal;
  color: #726e71;
}
.display-cw {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comments-y {
  width: 67%;
  display: flex;
  margin: 20px auto;
  /* justify-content: center; */
  justify-content: space-around;
}
.cw {
  width: 85px;
  height: 85px;
  border-radius: 10px;
}
.customer-f3 {
  padding: 20px 0;
  box-sizing: border-box;
  transition: all ease 0.6s;
}

.customer-f {
  padding: 20px 0 10px 0;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}
.ys{
  margin-top: 15px;
}
.zr1{
  width: 180px;
height: 180px;
margin-top: 20px;
}

/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 顶部轮播图 */
#swiper {
  width: 100%;
  height: 600px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
  line-height: 80px;
}

#swiper .banner-swiper .swiper-slide-title > h1 {
  font-size: 50px;
  margin-top: 12%;
}

#swiper .banner-swiper .swiper-slide-title > p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}

.cw-service {
  width: 100%;
  height: 400px;
  background: #f9f9f9;
  margin-top: 5px;
  padding: 20px 10px;
}
.service-item {
  width: 282px;
  height: 188px;
  border-radius: 8px;
  padding: 20px 16px;
  background: #ffffff;
  text-align: center;
}
.y1 {
  margin: 0 auto;
  width: 60px;
  height: 60px;
}
.yd1 {
  font-family: PingFangSC;
  font-size: 18px;
  font-weight: normal;
  color: #333333;
  margin-top: 10px;
}
.ys1{
    width: 101%;
  }
.yd2 {
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: normal;
  color: #333333;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;

}
.top1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.c1 {
  color: #333333;
  font-family: PingFangSC;
  font-size: 32px;
  font-weight: 500;
}
.c2 {
  font-family: PingFangSC;
  font-size: 20px;
  font-weight: normal;
  color: #999999;
}
.act1{
  width: 282px;
height: 282px;
}

/* 大数据管理系统 */
#bigData {
  padding: 20px 0px 40px 10px;
  transition: all ease 0.6s;
  box-sizing: border-box;
  width: 67%;
  margin: 0 auto;
}

#bigData .bigData-title {
  padding-bottom: 10px;
  /* border-bottom: 1px solid #ccc; */
}

#bigData p {
  font-size: 14px;
  color: #666666;
  line-height: 2rem;
}

#bigData .bigData-device {
  margin: 50px 0 20px;
}

/* 您身边的IT专家 */
#contactUs {
  color: #fff;
  height: 400px;
  background: url('/images/service1-46.png') 0 0 no-repeat;
  background-size: 100% 100%;
  transition: all ease 0.6s;
}

#contactUs .contactUs-container {
  padding-top: 50px;
}

#contactUs .contactUs-container button {
  width: 300px;
  height: 50px;
  margin-top: 40px;
}

#contactUs .contactUs-container .contactUs-contactWay span {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 30px;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(1) {
  background: url('../assets/img/weixin.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(2) {
  background: url('../assets/img/weibo.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(3) {
  background: url('../assets/img/twitter.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

/* 客户评价 */
#customer {
  padding: 20px 0;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}

#customer .customer-title {
  font-size: 30px;
  color: rgb(102, 102, 102);
  margin: 0 0 30px;
}

#customer .customer-block {
  background: #fff;
  padding: 30px 80px;
}

#customer .customer-logo img {
  width: 94px;
  height: 94px;
  border: 1px solid #ccc;
}

#customer .customer-yh img {
  width: 34px;
  height: 34px;
}

#customer .customer-content1 {
  padding-bottom: 20px;
  border-bottom: 1px solid #0ce9f1;
}

#customer .customer-content2 {
  padding-top: 20px;
}
.project{
  display: flex;
  margin: 8px auto;
  justify-content: space-between;
}
.project3{
  display: flex;
  margin:0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
.project2{
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.r1{
  width:403px;
height: 240px;
border-radius: 8px;
margin-left:8px;
}

.whyChooseUs{
  padding:10px 20px 20px 20px;
  background: #F9F9F9;
}
.whyChooseUs2{
  padding:20px 20px 20px 20px;
}

/* 为什么选择我们 */
#whyChooseUs {
  padding: 100px;
}

#whyChooseUs .whyChooseUs-title {
  margin-bottom: 50px;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
  font-size: 25px;
  font-weight: 500;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
  font-size: 14px;
}

#whyChooseUs .server-block {
  padding: 50px 20px;
  border: 1px solid #ccc;
  border-bottom: 5px solid #ccc;
}

#whyChooseUs .server-block img {
  width: 48px;
  height: 48px;
}

#whyChooseUs .server-block > p {
  font-size: 20px;
  margin: 30px 0;
}

#whyChooseUs .server-block > div {
  color: #ccc;
}

/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  #swiper {
    height: 200px;
  }
  .item {
    flex: 1 1 50%; /* 小屏时每个项占用50%的宽度 */
  }
  .ys1{
    width: 100%;
     content: url('@/assets/img/ys.png');
  }
  
   .homeimg{
     width: 100%;
     /* height: 500px; */
     content: url('@/assets/img/rqq.png');
  }
  .top1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
  .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;

}
 .homeimg {
  width: 100%;
  margin-top: 50px;
}
  .zr1{
  width: 60px;
height: 60px;
margin-top: 0px;
}
.project3{
  display: flex;
  margin:0 auto;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: space-between;
}
.container4{
  width:100%;
  margin: 0 auto;
}
  .container{
  width: 100%;
}
.container5{
  width:100%;
}
.case-item2 {
  width: 81%;
  margin: 0 auto;
  height:403px;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}
.customer-f3 {
  padding:0;
  box-sizing: border-box;
  transition: all ease 0.6s;
}
.exhibition{
  display: flex;
  flex-direction: column;
  width:95%;
  /* justify-content: space-around; */
  margin: 5px auto;
  /* padding-left: 56px; */
}
.act1{
  width: 100%;
  height: 288px;
}

  .details {
    width: 73px;
    height: 26px;
    margin: 20px auto;
    border-radius: 4px;
    border: 0.5px solid #ff19a0;
    text-align: center;
    line-height: 24px;
  }
  .underline{
        display: flex;
    /* align-items: center; */
    justify-content: center;
    margin-top: 10px;
  }
  .s {
    color: #ff19a0;
    font-family: PingFangSC;
    font-size: 20px;
    font-weight: 500;
  }
  .f {
    font-family: PingFangSC;
    font-size: 15px;
    font-weight: normal;
    color: #333333;
  }
  .c1 {
    color: #333333;
    font-family: PingFangSC;
    font-size: 16px;
    font-weight: 500;
  }
  .c2 {
    font-family: PingFangSC;
    font-size: 10px;
    font-weight: normal;
    color: #999999;
  }
  .b {
    font-size: 14px;
    font-family: PingFangSC;
    color: #666666;
  }
  .outer-layer {
    width:100%;
    overflow: auto;
  }

  .service-t {
    display: flex;
    width: 825px;
    justify-content: space-around;
    margin-top: 15px;
  }
  .service-item {
    width: 180px;
    height: 168px;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    text-align: center;
  }
  .cw-service {
    width: 100%;
    height: 300px;
    background: #f9f9f9;
    margin-top: 5px;
    padding: 10px 10px;
  }
  .y1 {
    margin: 0 auto;
    width: 40px;
    height: 40px;
  }
  .yd1 {
    font-family: PingFangSC;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    margin-top: 10px;
  }
  .yd2 {
    font-family: PingFangSC;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
  }
  .comments-y {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    /* margin: 20px auto; */
    /* justify-content: center; */
    flex-direction: column;
  }
  .case-item {
    width: 100%;
    height: 280px;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
    margin-top: 10px;
  }
  .cw {
    width: 32%;
    height: 120px;
    border-radius: 10px;
  }
  .avatar1 {
    width: 40px;
    height: 40px;
  }
  .customer-f {
  padding: 1px 16px 2px 16px;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}
.whyChooseUs{
  padding: 1px 16px 2px 16px;
}

.container{
  padding: 0;
}
.project{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  margin: 10px auto;
}
.project2{
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  /* margin: 10px auto; */
}

.r1{
 top: 187.14px;
width:80%;
border-radius: 8px;
margin: 8px auto;
}

.whyChooseUs2{
  padding:10px 20px 20px 20px;
}

  #bigData {
    padding: 10px 30px 0 30px;
    width: 100%;
  }

  #bigData .bigData-title {
    font-size: 20px;
  }

  #bigData .bigData-device {
    font-size: 20px;
    margin: 10px 0 10px;
  }

  #contactUs {
    height: 200px;
    transition: all ease 0.6s;
  }

  #contactUs .contactUs-container {
    padding-top: 0;
  }

  #contactUs .contactUs-container h1 {
    font-size: 25px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 18px;
  }

  #contactUs .contactUs-container button {
    width: 200px;
    height: 30px;
    margin-top: 20px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 10px;
  }

  #customer {
    padding: 30px 0;
    box-sizing: border-box;
    background: #fff;
  }

  #customer .customer-title {
    font-size: 16px;
    font-weight: bold;
  }

  #customer .customer-logo img {
    width: 48px;
    height: 48px;
  }

  #customer .customer-block {
    padding: 30px;
  }

  #customer .customer-block > div {
    padding: 30px 0;
  }

  #whyChooseUs {
    padding: 20px 0;
    transition: all ease 0.6s;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
    font-size: 20px;
    font-weight: 700;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
    font-size: 12px;
  }

  #whyChooseUs .server-block {
    padding: 50px 0;
    border: 1px solid #ccc;
    border-bottom: 5px solid #ccc;
  }

  #whyChooseUs .server-block img {
    width: 48px;
    height: 48px;
  }

  #whyChooseUs .server-block > p {
    font-size: 20px;
    margin: 30px 0;
  }

  #whyChooseUs .server-block > div {
    color: #ccc;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }
 
  .s {
    color: #ff19a0;
    font-family: PingFangSC;
    font-size: 30px;
    font-weight: 500;
  }
  .b {
    font-size: 14px;
    font-family: PingFangSC;
    color: #666666;
  }
  .outer-layer {
    width: 400px;
    /* overflow: auto; */
  }
  .service-t {
    display: flex;
    width: 825px;
    justify-content: space-around;
    margin-top: 15px;
  }
  .service-item {
    width: 180px;
    height: 168px;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    text-align: center;
  }
  .cw-service {
    width: 100%;
    height: 400px;
    background: #f9f9f9;
    margin-top: 5px;
    padding: 20px 10px;
  }
 
  .y1 {
    margin: 0 auto;
    width: 40px;
    height: 40px;
  }
  .yd1 {
    font-family: PingFangSC;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    margin-top: 10px;
  }
  .yd2 {
    font-family: PingFangSC;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
  }

  #bigData {
    padding: 60px;
  }

  #bigData .bigData-title {
    font-size: 30px;
  }

  #bigData .bigData-device {
    font-size: 30px;
    margin: 30px 0 15px;
  }

  #contactUs {
    height: 300px;
  }

  #contactUs .contactUs-container {
    padding-top: 50px;
  }

  #contactUs .contactUs-container h1 {
    font-size: 30px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 20px;
  }

  #contactUs .contactUs-container button {
    width: 300px;
    height: 50px;
    margin-top: 30px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 15px;
  }

  #customer .customer-title {
    font-size: 24px;
  }

  #whyChooseUs {
    padding: 20px 0;
  }
}
</style>
