1480 lines
34 KiB
Vue
1480 lines
34 KiB
Vue
<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>
|