You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1193 lines
33 KiB
1193 lines
33 KiB
1 year ago
|
<template>
|
||
|
|
<div class="wrap index">
|
||
|
|
<div class="actions">
|
||
|
|
<p class="page-name">页面设置/关于IASF-发展历程</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">
|
||
|
|
<div class="banner">
|
||
|
|
<img class="texts"
|
||
|
|
src="http://139.159.254.212/images/about/banner-text.png"
|
||
|
|
alt="">
|
||
|
|
<div v-if="!GTA"
|
||
|
|
class="qrcodes">
|
||
|
|
<div class="qrcode">
|
||
|
|
<img width="103"
|
||
|
|
src="http://139.159.254.212/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>
|
||
|
|
<div class="intro">
|
||
|
|
<div class="inner">
|
||
|
|
<div class="pics">
|
||
|
|
<div class="text">
|
||
|
|
<div class="title-wrap">
|
||
|
|
<p class="title">或然科技有限公司</p>
|
||
|
|
<p class="brief">职站商城，让您一站式采购无忧</p>
|
||
|
|
<p class="en">HUORAN TECH</p>
|
||
|
|
</div>
|
||
|
|
<p class="desc wow fadeInLeft"
|
||
|
|
data-wow-delay="0.7s">深圳或然科技，教育数字化产业的推动者，为教育IT创业者赋能的首选合作伙伴。我们是一家拥有丰富IT互联网背景的科技企业，致力于为教育软件销售代理人提供专业而全面的产品供应链服务。</p>
|
||
|
|
</div>
|
||
|
|
<img class="bg"
|
||
|
|
src="http://139.159.254.212/images/about/about1.png"
|
||
|
|
alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="service-intro">
|
||
|
|
<div class="inner">
|
||
|
|
<h6>随时、随地、贴心为您提供全方位服务</h6>
|
||
|
|
<p class="text">At anytime,anywhere,intimate to provide you with a full range of services</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="culture">
|
||
|
|
<div class="inner">
|
||
|
|
<h6 class="i-title wow fadeInDown">企业文化</h6>
|
||
|
|
<p class="en">CORPORATE CULTURE</p>
|
||
|
|
<ul class="list">
|
||
|
|
<li class="wow fadeInDown"
|
||
|
|
data-wow-delay="0.5s">
|
||
|
|
<img src="http://139.159.254.212/images/about/about4.png"
|
||
|
|
alt="">
|
||
|
|
<h6>使命</h6>
|
||
|
|
<p class="text">成就百万教育产业数字化的创业者</p>
|
||
|
|
</li>
|
||
|
|
<li class="wow fadeInRight"
|
||
|
|
data-wow-delay="0.8s">
|
||
|
|
<img src="http://139.159.254.212/images/about/about5.png"
|
||
|
|
alt="">
|
||
|
|
<h6>愿景</h6>
|
||
|
|
<p class="text">成为教育产业数字化的共创平台</p>
|
||
|
|
</li>
|
||
|
|
<li class="wow fadeInUp"
|
||
|
|
data-wow-delay="1.1s">
|
||
|
|
<img src="http://139.159.254.212/images/about/about6.png"
|
||
|
|
alt="">
|
||
|
|
<h6>核心价值观</h6>
|
||
|
|
<p class="text">公正、诚信、创新、实干</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 为什么加入我们 -->
|
||
|
|
<div class="adv"
|
||
|
|
id="part2">
|
||
|
|
<div class="inner">
|
||
|
|
<h6 class="i-title wow fadeInDown">为什么选择我们</h6>
|
||
|
|
<p class="en">WHY CHOOSE US</p>
|
||
|
|
<p class="title-des wow fadeInDown">专业、全面、高效</p>
|
||
|
|
|
||
|
|
<ul class="list">
|
||
|
|
<li class="wow fadeInDown"
|
||
|
|
data-wow-delay="0.5s">
|
||
|
|
<img src="http://139.159.254.212/images/index/index3.png"
|
||
|
|
alt="">
|
||
|
|
<h6>产品优势</h6>
|
||
|
|
<p class="text">整合好不同的教育信息化解决方案所需的软件和硬件产品，通过教育产业互联网平台和反向供应链，提供利润合适，交付便捷，质量有保障的体系化产品。</p>
|
||
|
|
</li>
|
||
|
|
<li class="wow fadeInRight"
|
||
|
|
data-wow-delay="0.8s">
|
||
|
|
<img src="http://139.159.254.212/images/index/index4.png"
|
||
|
|
alt="">
|
||
|
|
<h6>服务优势</h6>
|
||
|
|
<p class="text">专业的培训和服务团队，提供教育信息化产业的创业辅导和专业培训。帮助打造一支专业化的商务支持、客户成功和售后运营服务的支撑型团队。</p>
|
||
|
|
</li>
|
||
|
|
<li class="wow fadeInUp"
|
||
|
|
data-wow-delay="1.1s">
|
||
|
|
<img src="http://139.159.254.212/images/index/index5.png"
|
||
|
|
alt="">
|
||
|
|
<h6>生态优势</h6>
|
||
|
|
<p class="text">我们拥有强大可靠的渠道、产品的生态联盟，可共享、调用生态内的多方资源，背靠联盟携手共创新奇迹。</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 合作客户 -->
|
||
|
|
<div class="client">
|
||
|
|
<div class="inner">
|
||
|
|
<h6 class="i-title wow fadeInDown">合作院校</h6>
|
||
|
|
<p class="en">PARTNERSHIP</p>
|
||
|
|
<p class="title-des wow fadeInDown">助力100+所院校客户实现数字化升级</p>
|
||
|
|
<div class="client-pic">
|
||
|
|
<img class="bg"
|
||
|
|
src="http://139.159.254.212/images/index/index0.png"
|
||
|
|
alt="">
|
||
|
|
<div class="text">
|
||
|
|
<div class="c-title1">
|
||
|
|
<img src="http://139.159.254.212/images/index/comma1.png"
|
||
|
|
alt="">
|
||
|
|
他们说
|
||
|
|
</div>
|
||
|
|
<div class="text">平台功能丰富，操作简单，自动判分功能，能更高效的批改作业给学生更好的指导。</div>
|
||
|
|
<div class="c-title2">
|
||
|
|
—— 河海大学老师
|
||
|
|
<img src="http://139.159.254.212/images/index/comma2.png"
|
||
|
|
alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <scroll class="clients"
|
||
|
|
:data="clients"
|
||
|
|
:class-option="{limitMoveNum: 2, direction: 2}">
|
||
|
|
<ul class="client-list"
|
||
|
|
ref="client">
|
||
|
|
<li v-for="i in clients"
|
||
|
|
:key="i">
|
||
|
|
<img :src="require('http://139.159.254.212/images/index/school' + i + '.png')"
|
||
|
|
alt="">
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</scroll> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact">
|
||
|
|
<div class="inner">
|
||
|
|
<div class="title">
|
||
|
|
<h6>联系我们</h6>
|
||
|
|
<p class="text">CONTACT US</p>
|
||
|
|
</div>
|
||
|
|
<div class="region">
|
||
|
|
<img class="dot"
|
||
|
|
src="http://139.159.254.212/images/about/dot.png"
|
||
|
|
alt="">
|
||
|
|
<p class="name">深圳</p>
|
||
|
|
</div>
|
||
|
|
<div class="info">
|
||
|
|
<img class="logo"
|
||
|
|
src="http://139.159.254.212/images/about/logo.png"
|
||
|
|
alt="">
|
||
|
|
<div class="texts">
|
||
|
|
<div class="item">
|
||
|
|
<div class="line">
|
||
|
|
<img class="icon"
|
||
|
|
src="http://139.159.254.212/images/about/site.png"
|
||
|
|
alt="">
|
||
|
|
公司官网：www.huorantech.com
|
||
|
|
</div>
|
||
|
|
<div class="line">
|
||
|
|
<img class="icon"
|
||
|
|
src="http://139.159.254.212/images/about/address.png"
|
||
|
|
alt="">
|
||
|
|
地址：广东省深圳市南山区粤海街道海天二路盈峰中心2101
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="line">
|
||
|
|
<img class="icon"
|
||
|
|
src="http://139.159.254.212/images/about/phone.png"
|
||
|
|
alt="">
|
||
|
|
合作咨询：郭经理 17671782660
|
||
|
|
</div>
|
||
|
|
<div class="line">
|
||
|
|
<img class="icon"
|
||
|
|
src="http://139.159.254.212/images/about/mail.png"
|
||
|
|
alt="">
|
||
|
|
客户建议：service@huorantech.cn
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="qrcode">
|
||
|
|
<img width="103"
|
||
|
|
src="http://139.159.254.212/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>
|
||
|
|
</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'
|
||
|
|
export default {
|
||
|
|
mixins: [mixins],
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
modules: Modules.application
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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(http://139.159.254.212/images/about/banner1.png) 0 0 / auto no-repeat,
|
||
|
|
url(http://139.159.254.212/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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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(http://139.159.254.212/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(http://139.159.254.212/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(http://139.159.254.212/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(http://139.159.254.212/images/index/about2.png) (bottom right) / auto no-repeat,
|
||
|
|
url(http://139.159.254.212/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(http://139.159.254.212/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(http://139.159.254.212/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(http://139.159.254.212/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
|
||
|
|
url(http://139.159.254.212/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(http://139.159.254.212/images/index/arrow.png) no-repeat;
|
||
|
|
cursor: pointer;
|
||
|
|
&:hover {
|
||
|
|
background-image: url(http://139.159.254.212/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(http://139.159.254.212/images/index/parner.png) 0 0 / cover no-repeat;
|
||
|
|
.i-title,
|
||
|
|
.brief {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.en {
|
||
|
|
color: #465779;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.chart {
|
||
|
|
height: 600px;
|
||
|
|
}
|
||
|
|
.client {
|
||
|
|
background: url(http://139.159.254.212/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(http://139.159.254.212/images/index/wechat.png) center center/auto no-repeat;
|
||
|
|
&:hover {
|
||
|
|
background-image: url(http://139.159.254.212/images/index/wechat-1.png);
|
||
|
|
background-color: #006eff;
|
||
|
|
& + .popup {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tel {
|
||
|
|
background: #fff url(http://139.159.254.212/images/index/tel.png) center center/auto no-repeat;
|
||
|
|
&:hover {
|
||
|
|
background-image: url(http://139.159.254.212/images/index/tel-1.png);
|
||
|
|
background-color: #006eff;
|
||
|
|
& + .popup {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.topping {
|
||
|
|
background: #fff url(http://139.159.254.212/images/index/top.png) center center/auto no-repeat;
|
||
|
|
&:hover {
|
||
|
|
background-image: url(http://139.159.254.212/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>
|