|
|
|
|
<template>
|
|
|
|
|
<div class="wrap index">
|
|
|
|
|
<div class="actions">
|
|
|
|
|
<p class="page-name">页面设置/关于我们</p>
|
|
|
|
|
<div>
|
|
|
|
|
<el-button type="primary"
|
|
|
|
|
@click="preview">预览</el-button>
|
|
|
|
|
<el-button @click="save(0)">保存为草稿</el-button>
|
|
|
|
|
<el-button type="primary"
|
|
|
|
|
@click="save(1)">发布</el-button>
|
|
|
|
|
<el-button @click="back">放弃编辑</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="modules">
|
|
|
|
|
<div class="relative">
|
|
|
|
|
<el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length"
|
|
|
|
|
class="carousel"
|
|
|
|
|
:interval="6000"
|
|
|
|
|
height="480px"
|
|
|
|
|
:arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
|
|
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
|
|
|
|
|
<template v-for="(item, i) in modules[0].list">
|
|
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable"
|
|
|
|
|
:key="i">
|
|
|
|
|
<div v-if="isImg(item.mediaType)"
|
|
|
|
|
class="pic"
|
|
|
|
|
:style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
|
|
|
|
|
<video v-else
|
|
|
|
|
class="pic"
|
|
|
|
|
width="100%"
|
|
|
|
|
height="100%"
|
|
|
|
|
autoplay
|
|
|
|
|
muted
|
|
|
|
|
loop>
|
|
|
|
|
<source :src="item.pic"
|
|
|
|
|
type="video/mp4">
|
|
|
|
|
您的浏览器不支持 video 标签。
|
|
|
|
|
</video>
|
|
|
|
|
<div class="text-wrap">
|
|
|
|
|
<div class="text"
|
|
|
|
|
v-html="item.des"></div>
|
|
|
|
|
<div v-if="!GTA"
|
|
|
|
|
class="qrcodes">
|
|
|
|
|
<div class="qrcode">
|
|
|
|
|
<img width="103"
|
|
|
|
|
:src="item.weixinPic1"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">{{ item.weixinText1 }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="qrcode m-l-30">
|
|
|
|
|
<img width="103"
|
|
|
|
|
:src="item.weixinPic2"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">{{ item.weixinText2 }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-carousel-item>
|
|
|
|
|
</template>
|
|
|
|
|
</el-carousel>
|
|
|
|
|
|
|
|
|
|
<div v-else
|
|
|
|
|
class="banner">
|
|
|
|
|
<img class="texts"
|
|
|
|
|
src="https://huorantech.com/images/about/banner-text.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<div class="qrcodes">
|
|
|
|
|
<div class="qrcode">
|
|
|
|
|
<img width="103"
|
|
|
|
|
src="https://huorantech.com/images/about/qrcode.jpg"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">扫一扫，关注公众号</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="qrcode m-l-30">
|
|
|
|
|
<img width="103"
|
|
|
|
|
src="@/assets/images/mini-program-sm.jpg"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">扫一扫，登录职站商城</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(0)">点击更换banner与链接</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="intro">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="pics c-wrap">
|
|
|
|
|
<div class="text">
|
|
|
|
|
<div class="title-wrap">
|
|
|
|
|
<p class="title">{{ modules[1].form.title }}</p>
|
|
|
|
|
<p class="brief">{{ modules[1].form.subTitle1 }}</p>
|
|
|
|
|
<p class="en">{{ modules[1].form.subTitle2 }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="desc wow fadeInLeft"
|
|
|
|
|
v-html="modules[1].form.des"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<img class="bg"
|
|
|
|
|
:src="modules[1].form.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<div class="cover"
|
|
|
|
|
style="height: 360px;"
|
|
|
|
|
@click="toSet(1)">点击更改图片、标题概述与链接</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-intro">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<h6>{{ modules[2].form.title }}</h6>
|
|
|
|
|
<p class="text">{{ modules[2].form.des }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(2)">点击更换标题与描述</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="culture">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="c-wrap"
|
|
|
|
|
style="height: 150px">
|
|
|
|
|
<h6 class="i-title wow fadeInDown">{{ modules[3].form.title }}</h6>
|
|
|
|
|
<p class="en">{{ modules[3].form.des }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(3)">点击更换标题与描述</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="list c-wrap">
|
|
|
|
|
<template v-for="(item, i) in modules[4].list">
|
|
|
|
|
<li v-if="item.isEnable"
|
|
|
|
|
:key="i">
|
|
|
|
|
<img :src="item.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<h6>{{ item.title }}</h6>
|
|
|
|
|
<div class="text"
|
|
|
|
|
v-html="item.des"></div>
|
|
|
|
|
</li>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(4)">点击更改图片、标题、概述与链接</div>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 为什么加入我们 -->
|
|
|
|
|
<div class="adv"
|
|
|
|
|
id="part2">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="c-wrap"
|
|
|
|
|
style="height: 150px">
|
|
|
|
|
<h6 class="i-title wow fadeInDown">{{ modules[5].form.title }}</h6>
|
|
|
|
|
<p class="en">{{ modules[5].form.subTitle }}</p>
|
|
|
|
|
<p class="title-des wow fadeInDown">{{ modules[5].form.des }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(5)">点击更换标题与描述</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ul class="list c-wrap">
|
|
|
|
|
<template v-for="(item, i) in modules[6].list">
|
|
|
|
|
<li v-if="item.isEnable"
|
|
|
|
|
:key="i">
|
|
|
|
|
<img :src="item.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<h6>{{ item.title }}</h6>
|
|
|
|
|
<div class="text"
|
|
|
|
|
v-html="item.des"></div>
|
|
|
|
|
</li>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(6)">点击更改图片、标题、概述与链接</div>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 合作客户 -->
|
|
|
|
|
<div class="client">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="c-wrap"
|
|
|
|
|
style="height: 150px">
|
|
|
|
|
<h6 class="i-title wow fadeInDown">{{ modules[7].form.title }}</h6>
|
|
|
|
|
<p class="en">{{ modules[7].form.subTitle }}</p>
|
|
|
|
|
<p class="title-des wow fadeInDown">{{ modules[7].form.des }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(7)">点击更换标题与描述</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="client-pic c-wrap">
|
|
|
|
|
<img class="bg"
|
|
|
|
|
:src="modules[8].form.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<div class="text">
|
|
|
|
|
<div class="c-title1">
|
|
|
|
|
<img src="https://huorantech.com/images/index/comma1.png"
|
|
|
|
|
alt="">
|
|
|
|
|
{{ modules[8].form.title }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text"
|
|
|
|
|
v-html="modules[8].form.des"></div>
|
|
|
|
|
<div class="c-title2">
|
|
|
|
|
{{ modules[8].form.subTitle }}
|
|
|
|
|
<img src="https://huorantech.com/images/index/comma2.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(8)">点击更改图片、标题、概述与链接</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="c-wrap">
|
|
|
|
|
<scroll class="clients"
|
|
|
|
|
:data="modules[9].list"
|
|
|
|
|
:class-option="{limitMoveNum: 2, direction: 2}">
|
|
|
|
|
<ul class="client-list"
|
|
|
|
|
ref="client">
|
|
|
|
|
<li v-for="item in modules[9].list"
|
|
|
|
|
:key="item">
|
|
|
|
|
<img :src="item.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</scroll>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(9)">点击更改图片</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="contact">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="title c-wrap">
|
|
|
|
|
<h6>{{ modules[10].form.title }}</h6>
|
|
|
|
|
<p class="text">{{ modules[10].form.des }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(10)">点击更改标题与描述</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="region">
|
|
|
|
|
<img class="dot"
|
|
|
|
|
src="https://huorantech.com/images/about/dot.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="name">深圳</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<img class="logo"
|
|
|
|
|
:src="modules[11].form.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<div class="texts c-wrap">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="line">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
src="https://huorantech.com/images/about/site.png"
|
|
|
|
|
alt="">
|
|
|
|
|
{{ modules[11].form.site }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
src="https://huorantech.com/images/about/address.png"
|
|
|
|
|
alt="">
|
|
|
|
|
{{ modules[11].form.address }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="line">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
src="https://huorantech.com/images/about/phone.png"
|
|
|
|
|
alt="">
|
|
|
|
|
{{ modules[11].form.phone }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
src="https://huorantech.com/images/about/mail.png"
|
|
|
|
|
alt="">
|
|
|
|
|
{{ modules[11].form.mail }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
style="width: 800px"
|
|
|
|
|
@click="toSet(11)">点击更改信息</div>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
style="width: 800px"
|
|
|
|
|
@click="toSet(11)">点击更改信息</div>
|
|
|
|
|
<div class="qrcode c-wrap">
|
|
|
|
|
<img width="103"
|
|
|
|
|
:src=" modules[12].form.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">{{ modules[12].form.title }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(12)">点击更改信息</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="qrcode c-wrap m-l-30">
|
|
|
|
|
<img width="103"
|
|
|
|
|
:src=" modules[13].form.pic"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">{{ modules[13].form.title }}</p>
|
|
|
|
|
<div class="cover"
|
|
|
|
|
@click="toSet(13)">点击更改信息</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tool">
|
|
|
|
|
<div class="item wechat"></div>
|
|
|
|
|
<div class="popup wechat-popup">
|
|
|
|
|
<p class="tips">微信扫码添加职站售前咨询</p>
|
|
|
|
|
<p class="des">提供付费咨询及解决方案</p>
|
|
|
|
|
<img width="150"
|
|
|
|
|
src="https://huorantech.com/images/index/customer.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item tel"></div>
|
|
|
|
|
<div class="popup tel-popup">
|
|
|
|
|
<div class="tel-inner">
|
|
|
|
|
<div class="line">
|
|
|
|
|
<div>
|
|
|
|
|
<img class="icon"
|
|
|
|
|
src="https://huorantech.com/images/index/tel-2.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<p class="title">售前咨询</p>
|
|
|
|
|
<p class="tel-num"
|
|
|
|
|
style="margin-bottom: 5px">郭老师</p>
|
|
|
|
|
<p class="tel-num">17671782660</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line">
|
|
|
|
|
<div>
|
|
|
|
|
<img class="icon"
|
|
|
|
|
src="https://huorantech.com/images/index/sug.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<p class="title">咨询，建议与反馈</p>
|
|
|
|
|
<p class="des">您的每一条建议声音，我们都认真对待</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Module ref="module"
|
|
|
|
|
:data.sync="curData"
|
|
|
|
|
:visible.sync="diaVisible"
|
|
|
|
|
@moduleSubmit="moduleSubmit" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import mixins from '@/mixins/page'
|
|
|
|
|
import Modules from '@/const/modules'
|
|
|
|
|
import scroll from 'vue-seamless-scroll'
|
|
|
|
|
import Util from '@/libs/util'
|
|
|
|
|
export default {
|
|
|
|
|
mixins: [mixins],
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
isImg: Util.isImg,
|
|
|
|
|
modules: Modules.aboutUs
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
scroll
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.$store.commit('user/setCrumbs', [
|
|
|
|
|
{
|
|
|
|
|
name: '站点管理',
|
|
|
|
|
route: '/site'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '内容管理',
|
|
|
|
|
route: '/column'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '栏目管理',
|
|
|
|
|
route: '/column'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '关于我们'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import '../../../styles/page/page.scss';
|
|
|
|
|
.wrap {
|
|
|
|
|
position: relative;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
.banner {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 480px;
|
|
|
|
|
background: url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat,
|
|
|
|
|
url(https://huorantech.com/images/about/banner2.png) (90% 37px) / auto no-repeat;
|
|
|
|
|
background-color: #0f5bed;
|
|
|
|
|
.texts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 130px;
|
|
|
|
|
left: 165px;
|
|
|
|
|
}
|
|
|
|
|
.qrcodes {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 80px;
|
|
|
|
|
left: 165px;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.carousel {
|
|
|
|
|
.pic {
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-position: center center;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-carousel__container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.text-wrap {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 165px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
.qrcodes {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qrcode {
|
|
|
|
|
text-align: center;
|
|
|
|
|
.text {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.i-title {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 37px;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: -10px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
transform: translate(-50%);
|
|
|
|
|
background-color: #006eff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.inner {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 1200px;
|
|
|
|
|
padding: 107px 0 87px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.en {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 80px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
|
|
color: #d4daea;
|
|
|
|
|
transform: translate(-50%);
|
|
|
|
|
}
|
|
|
|
|
.title-des {
|
|
|
|
|
margin: -10px 0 40px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #5a6b7e;
|
|
|
|
|
}
|
|
|
|
|
.pics {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.text {
|
|
|
|
|
width: 470px;
|
|
|
|
|
}
|
|
|
|
|
.title-wrap {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.brief {
|
|
|
|
|
margin: 20px 0 30px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
.en {
|
|
|
|
|
top: -30px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
color: #e5e5e5;
|
|
|
|
|
}
|
|
|
|
|
.desc {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #535c6e;
|
|
|
|
|
line-height: 25px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.service-intro {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 153px;
|
|
|
|
|
margin-top: -240px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: url(https://huorantech.com/images/about/about2.png) 0 0 / cover no-repeat;
|
|
|
|
|
.inner {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.culture {
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #fff url(https://huorantech.com/images/about/about3.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
.inner {
|
|
|
|
|
padding-bottom: 112px;
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 80px 0 20px;
|
|
|
|
|
li {
|
|
|
|
|
width: 33.33%;
|
|
|
|
|
padding: 50px 35px 74px;
|
|
|
|
|
margin-right: 57px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #f9faff;
|
|
|
|
|
border: 2px solid #ffffff;
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
img {
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 70px;
|
|
|
|
|
transition: 0.6s;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 10px 0 16px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #637493;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.progress {
|
|
|
|
|
.inner {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 200px;
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
position: relative;
|
|
|
|
|
max-width: 180px;
|
|
|
|
|
margin-right: 80px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 20px 0 10px;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
font-family: dinBold;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #2d67f6;
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #565656;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 9px;
|
|
|
|
|
left: 76px;
|
|
|
|
|
width: 168px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
border: 3px solid;
|
|
|
|
|
border-image: linear-gradient(209deg, rgba(32, 101, 255, 0.01), rgba(32, 101, 255, 1), rgba(32, 101, 255, 0)) 3 3;
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(2) {
|
|
|
|
|
margin-right: 75px;
|
|
|
|
|
&:after {
|
|
|
|
|
left: 82px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(3) {
|
|
|
|
|
margin-right: 67px;
|
|
|
|
|
&:after {
|
|
|
|
|
left: 93px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(4) {
|
|
|
|
|
margin-right: 51px;
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(5) {
|
|
|
|
|
margin-right: 27px;
|
|
|
|
|
&:after {
|
|
|
|
|
left: 108px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(even) {
|
|
|
|
|
margin-top: -130px;
|
|
|
|
|
.arrow {
|
|
|
|
|
transform: rotateX(180deg);
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
margin: 10px 0 20px;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
top: 139px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:last-child:after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contact {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0 0 106px 0;
|
|
|
|
|
background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
|
|
|
|
|
.inner {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
width: 419px;
|
|
|
|
|
height: 258px;
|
|
|
|
|
padding: 113px 0 0 43px;
|
|
|
|
|
background-color: #0854fe;
|
|
|
|
|
h6 {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.region {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 152px;
|
|
|
|
|
left: 70%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.info {
|
|
|
|
|
margin: 86px 0 0 44px;
|
|
|
|
|
.texts {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
}
|
|
|
|
|
.item {
|
|
|
|
|
margin-right: 75px;
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.about {
|
|
|
|
|
padding: 130px 0 200px;
|
|
|
|
|
background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
|
|
|
|
|
url(https://huorantech.com/images/index/about1.png) 0 0 / cover no-repeat;
|
|
|
|
|
.inner {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.a-title {
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: -10px;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.a-en {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -28px;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
color: #b6c4d9;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
.a-gene {
|
|
|
|
|
margin: 50px 0 30px;
|
|
|
|
|
font-size: 34px;
|
|
|
|
|
line-height: 58px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
width: 800px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.adv {
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #fff url(https://huorantech.com/images/index/index7.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
li {
|
|
|
|
|
width: 33.33%;
|
|
|
|
|
padding: 107px 35px 30px;
|
|
|
|
|
margin-right: 57px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #f9faff;
|
|
|
|
|
border: 2px solid #ffffff;
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
img {
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 70px;
|
|
|
|
|
transition: 0.6s;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 10px 0 16px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #637493;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.service {
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #0653ff url(https://huorantech.com/images/index/service4.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
.i-title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.en {
|
|
|
|
|
color: #467df9;
|
|
|
|
|
}
|
|
|
|
|
.service-pic {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.text {
|
|
|
|
|
margin-left: 78px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.s-title {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.service-list {
|
|
|
|
|
li {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
&:before {
|
|
|
|
|
content: '';
|
|
|
|
|
width: 12px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
margin-right: 26px;
|
|
|
|
|
border: 2px solid #fff;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
li {
|
|
|
|
|
width: 33.33%;
|
|
|
|
|
padding: 50px 35px;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
background-color: #f9faff;
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
img {
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 64px;
|
|
|
|
|
transition: 0.6s;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 10px 0 16px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #757f92;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title-intro {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
.text-title {
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
border-left: 1px solid #dee4f1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.product {
|
|
|
|
|
background: url(https://huorantech.com/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
|
|
|
|
|
url(https://huorantech.com/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 40px 0 110px;
|
|
|
|
|
li {
|
|
|
|
|
width: 33.33%;
|
|
|
|
|
padding: 50px 35px;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
img {
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 70px;
|
|
|
|
|
transition: 0.6s;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 10px 0 16px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #757f92;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.carousel {
|
|
|
|
|
width: 500px;
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
.car-img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 157px;
|
|
|
|
|
width: 21px;
|
|
|
|
|
height: 21px;
|
|
|
|
|
background: url(https://huorantech.com/images/index/arrow.png) no-repeat;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-image: url(https://huorantech.com/images/index/arrow-active.png);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.a-left {
|
|
|
|
|
left: 32px;
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
.a-right {
|
|
|
|
|
right: 6px;
|
|
|
|
|
}
|
|
|
|
|
.pro-bg1 {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 594px;
|
|
|
|
|
height: 365px;
|
|
|
|
|
img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transition: 0.5s;
|
|
|
|
|
}
|
|
|
|
|
.bg1 {
|
|
|
|
|
top: 23px;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
.bg2 {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 8px;
|
|
|
|
|
}
|
|
|
|
|
.bg3 {
|
|
|
|
|
top: 256px;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
.bg1 {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
.bg2 {
|
|
|
|
|
transform: scale(1.3);
|
|
|
|
|
}
|
|
|
|
|
.bg3 {
|
|
|
|
|
transform: scale(1.3);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pro-bg2 {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 594px;
|
|
|
|
|
height: 365px;
|
|
|
|
|
img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transition: 0.5s;
|
|
|
|
|
}
|
|
|
|
|
.bg1 {
|
|
|
|
|
top: 23px;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
.bg2 {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 8px;
|
|
|
|
|
}
|
|
|
|
|
.bg3 {
|
|
|
|
|
top: 256px;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
.bg1 {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
.bg2 {
|
|
|
|
|
transform: scale(1.3);
|
|
|
|
|
}
|
|
|
|
|
.bg3 {
|
|
|
|
|
transform: scale(1.3);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.parner {
|
|
|
|
|
background: #fff url(https://huorantech.com/images/index/parner.png) 0 0 / cover no-repeat;
|
|
|
|
|
.i-title,
|
|
|
|
|
.brief {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.en {
|
|
|
|
|
color: #465779;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chart {
|
|
|
|
|
height: 600px;
|
|
|
|
|
}
|
|
|
|
|
.client {
|
|
|
|
|
background: url(https://huorantech.com/images/index/client.png) 0 0 / cover no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.client-pic {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 32px 55px 32px 32px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0px 0px 20px 0px rgba(226, 226, 226, 0.25);
|
|
|
|
|
.bg {
|
|
|
|
|
width: 453px;
|
|
|
|
|
height: 308px;
|
|
|
|
|
margin-right: 47px;
|
|
|
|
|
}
|
|
|
|
|
.c-title1 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #efefef;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 19px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.c-title2 {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #535c6e;
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 19px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
margin: 22px 0;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #535c6e;
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.clients {
|
|
|
|
|
width: 1200px;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.client-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 231px;
|
|
|
|
|
height: 102px;
|
|
|
|
|
margin: 0 11px 11px 0;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
|
|
|
|
|
border: 1px solid #ececec;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pics {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.icon {
|
|
|
|
|
width: 60px;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
width: 450px;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 30px 0 10px;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
.desc {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.none {
|
|
|
|
|
padding: 50px 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
img {
|
|
|
|
|
width: 324px;
|
|
|
|
|
margin-bottom: 42px;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes rotate {
|
|
|
|
|
0% {
|
|
|
|
|
transform: rotate(0);
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tool {
|
|
|
|
|
z-index: 10;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 100px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
.item {
|
|
|
|
|
width: 45px;
|
|
|
|
|
height: 45px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
border: 1px solid #e5e5e5;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.wechat {
|
|
|
|
|
background: #fff url(https://huorantech.com/images/index/wechat.png) center center/auto no-repeat;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-image: url(https://huorantech.com/images/index/wechat-1.png);
|
|
|
|
|
background-color: #006eff;
|
|
|
|
|
& + .popup {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tel {
|
|
|
|
|
background: #fff url(https://huorantech.com/images/index/tel.png) center center/auto no-repeat;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-image: url(https://huorantech.com/images/index/tel-1.png);
|
|
|
|
|
background-color: #006eff;
|
|
|
|
|
& + .popup {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.topping {
|
|
|
|
|
background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-image: url(https://huorantech.com/images/index/top-1.png);
|
|
|
|
|
background-color: #006eff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.popup {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.wechat-popup {
|
|
|
|
|
top: -100px;
|
|
|
|
|
left: -230px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
|
|
|
|
|
.tips {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
.des {
|
|
|
|
|
margin: 5px 0 15px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tel-popup {
|
|
|
|
|
top: -10px;
|
|
|
|
|
left: -250px;
|
|
|
|
|
width: 250px;
|
|
|
|
|
border-right: 20px solid transparent;
|
|
|
|
|
&:hover {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.tel-inner {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
display: flex;
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #006eff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tel-num {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #006eff;
|
|
|
|
|
}
|
|
|
|
|
.des {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #686868;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1730px) {
|
|
|
|
|
.wrap .banner .text {
|
|
|
|
|
left: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
.wrap {
|
|
|
|
|
.banner {
|
|
|
|
|
.text {
|
|
|
|
|
left: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.inner {
|
|
|
|
|
width: 90%;
|
|
|
|
|
}
|
|
|
|
|
.pics {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.text {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.service-intro {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.service {
|
|
|
|
|
.service-pic {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.text {
|
|
|
|
|
margin: 0 0 30px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.culture,
|
|
|
|
|
.adv,
|
|
|
|
|
.service,
|
|
|
|
|
.product {
|
|
|
|
|
.list {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 0 0 20px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.adv {
|
|
|
|
|
.list {
|
|
|
|
|
li {
|
|
|
|
|
padding-top: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.client-pic {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.bg {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contact {
|
|
|
|
|
.info {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
.texts {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
.item {
|
|
|
|
|
margin: 0 0 30px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
|
.wrap {
|
|
|
|
|
.banner {
|
|
|
|
|
.text {
|
|
|
|
|
max-width: 80%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
