初版提交
This commit is contained in:
700
src/view/HomePage.vue
Normal file
700
src/view/HomePage.vue
Normal file
@ -0,0 +1,700 @@
|
||||
<template>
|
||||
<div id="HomePage">
|
||||
<!-- 轮播图 -->
|
||||
<swiper
|
||||
id="swiper"
|
||||
:modules="modules"
|
||||
:slidesPerView="1"
|
||||
:spaceBetween="0"
|
||||
navigation
|
||||
lazy
|
||||
loop
|
||||
autoplay
|
||||
:pagination="{
|
||||
clickable: true,
|
||||
}"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(item, index) in swiperList"
|
||||
:key="index"
|
||||
class="banner-swiper"
|
||||
>
|
||||
<img class="swiper-lazy" :data-src="item.img" alt="轮播图" />
|
||||
<div class="swiper-lazy-preloader"></div>
|
||||
<div class="swiper-slide-title">
|
||||
<h1>{{ item.title }}</h1>
|
||||
<p>{{ item.content }}</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- 大数据管理系统 -->
|
||||
<div id="bigData" class="container-fuild">
|
||||
<div class="bigData-container row">
|
||||
<div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">
|
||||
<img
|
||||
class="img-responsive"
|
||||
src="@/assets/img/service1.png"
|
||||
alt="散热半导体芯片"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12">
|
||||
<h2 class="bigData-title">
|
||||
散热半导体芯片
|
||||
<small>/ Heat Dissipation Semiconductor Chip</small>
|
||||
</h2>
|
||||
<p>
|
||||
热电材料可以直接将热能转化为电能或直接将电能转换热能，能量转换是通过内部载流子运动
|
||||
实现的，因而其组成的热电器件无噪音和污染物产生，还具有体积小易于集成，无移动部件，可
|
||||
靠性高等优点。这些特性使热电技术在废热回收和热电制冷等应用中具有独特的优势。
|
||||
</p>
|
||||
<p>
|
||||
半导体制冷芯片是由许多微小而有效的热泵组成的半导体器件。通过施加一个低压直流电源，
|
||||
热量将从半导体制冷芯片的一面转移到另一面，从而产生一面变热另一面变冷的现象。超微半
|
||||
导体制冷芯片使用高性能碲化铋材料与先进封装技术，尺寸可小于2mm*2mm*1mm，温度精
|
||||
准度可控制在±0.01℃，制冷功率密度达35W/cm²，满足航空航天领域的性能和可靠性要求。
|
||||
</p>
|
||||
<!-- <h2 class="bigData-device">PC/PAD/Phone 全设备支持</h2> -->
|
||||
<!-- <a href="javascript:;" class="btn btn-block btn-info btn-lg">联系我们</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 您身边的IT专家 -->
|
||||
<div id="contactUs" class="container-fuild text-center">
|
||||
<div class="contactUs-container container slideInUp wow">
|
||||
<!-- <h1>您身边的温控专家</h1>
|
||||
<h3>7x24小时提供出色的温控服务</h3>
|
||||
<button
|
||||
class="btn btn-default btn-sm"
|
||||
onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';"
|
||||
onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';"
|
||||
>
|
||||
联系我们
|
||||
</button> -->
|
||||
<!-- <div class="contactUs-contactWay">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 客户评价 -->
|
||||
<!--
|
||||
<div id="customer" class="container-fuild">
|
||||
<div class="container customer-container">
|
||||
<p class="customer-title text-center">客户评价</p>
|
||||
<swiper
|
||||
class="customer-swiper hidden-xs swiper-container"
|
||||
:modules="modules"
|
||||
:slidesPerView="1"
|
||||
:spaceBetween="0"
|
||||
navigation
|
||||
loop
|
||||
autoplay
|
||||
:pagination="{
|
||||
clickable: true,
|
||||
}"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(item, index) in customerList"
|
||||
:key="index"
|
||||
class="customer-block swiper-slide"
|
||||
>
|
||||
<div class="customer-logo">
|
||||
<img class="center-block" :src="item.logo" alt="logo" />
|
||||
</div>
|
||||
<div class="customer-yh">
|
||||
<img src="@/assets/img/yinhao.png" alt="引号" />
|
||||
</div>
|
||||
<div class="customer-content1">
|
||||
<small>{{ item.content }}</small>
|
||||
</div>
|
||||
<div class="customer-content2">{{ item.title }}</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="customer-block row visible-xs">
|
||||
<div
|
||||
v-for="(item, index) in customerList"
|
||||
:key="index"
|
||||
class="col-xs-12"
|
||||
>
|
||||
<div class="customer-logo">
|
||||
<img class="center-block" :src="item.logo" alt="logo" />
|
||||
</div>
|
||||
<div class="customer-yh">
|
||||
<img src="@/assets/img/yinhao.png" alt="引号" />
|
||||
</div>
|
||||
<div class="customer-content1">
|
||||
<small>{{ item.content }}</small>
|
||||
</div>
|
||||
<div class="customer-content2">
|
||||
<small>{{ item.title }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- 为什么选择我们 -->
|
||||
<div id="whyChooseUs" class="conatiner-fuild">
|
||||
<div class="container">
|
||||
<div class="text-center whyChooseUs-title">
|
||||
<p>为什么选择我们的服务</p>
|
||||
<p>THE REASON TO CHOOSING US</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="(item, index) in serverList"
|
||||
:key="index"
|
||||
class="col-md-3 col-sm-6 col-xs-12 server-wrapper"
|
||||
>
|
||||
<div
|
||||
class="server-block slideInUp wow"
|
||||
onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
|
||||
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"
|
||||
>
|
||||
<img class="center-block" :src="item.logo" alt="logo" />
|
||||
<p class="text-center">{{ item.title }}</p>
|
||||
<div
|
||||
class="text-center"
|
||||
onmouseenter="this.style.color='#28f'"
|
||||
onmouseleave="this.style.color='#ccc'"
|
||||
v-html="item.content"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="HomePage">
|
||||
import WOW from 'wow.js';
|
||||
import { getCurrentInstance, onMounted } from 'vue';
|
||||
// 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/banner1.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 '/images/service1-49.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,
|
||||
title: '泰阿',
|
||||
content: '智慧工厂，保证高质量生产工艺',
|
||||
},
|
||||
{
|
||||
img: banner2,
|
||||
title: '碳中和，温控方案',
|
||||
content: '致力于双碳方案，成为专业的温控解决方案平台',
|
||||
},
|
||||
{
|
||||
img: banner3,
|
||||
title: '研发实力强',
|
||||
content: '全程自助研发，研产销一体，提供完整的节能温控解决方案',
|
||||
},
|
||||
{
|
||||
img: banner4,
|
||||
title: '企业使命',
|
||||
content: '为互联网数据中心、5G通讯基站、超算中心、科研机构、金融数据中心、游戏渲染、医疗行业、电力行业等众多领域节能提供高效的温控服务',
|
||||
},
|
||||
];
|
||||
|
||||
const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay];
|
||||
|
||||
const customerList = [
|
||||
{
|
||||
logo: logo_hp,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_kk,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_toyota,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_kk,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_hp,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_toyota,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_kk,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_hp,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_toyota,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_hp,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_kk,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
{
|
||||
logo: logo_hp,
|
||||
title:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
content:
|
||||
'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
|
||||
},
|
||||
];
|
||||
|
||||
const serverList = [
|
||||
{
|
||||
logo: img_tel,
|
||||
title: '精准控温',
|
||||
content: '<p>利用半导体热电材料的Peltier效应实现热能转移',
|
||||
},
|
||||
{
|
||||
logo: img_computer,
|
||||
title: '微型化热管理',
|
||||
content: '<p>利用帕尔贴原理，实现主动控温，适用于小空间精确',
|
||||
},
|
||||
{
|
||||
logo: img_qq,
|
||||
title: '超微尺寸',
|
||||
content: '<p>半导体制冷芯片尺寸可小于2mm*2mm*1mm。</p>',
|
||||
},
|
||||
{
|
||||
logo: img_skill,
|
||||
title: '应用领域广泛',
|
||||
content: '<p>在工业与高端制造方面，已经投入到多领域使用。</p>',
|
||||
},
|
||||
];
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体盒子 */
|
||||
#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;
|
||||
}
|
||||
|
||||
/* 大数据管理系统 */
|
||||
#bigData {
|
||||
padding: 100px;
|
||||
transition: all ease 0.6s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#bigData .bigData-title {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#bigData p {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
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: 50px 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;
|
||||
}
|
||||
|
||||
/* 为什么选择我们 */
|
||||
#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;
|
||||
}
|
||||
|
||||
#bigData {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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>
|
||||
Reference in New Issue
Block a user