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.
406 lines
11 KiB
406 lines
11 KiB
<template> |
|
<div class="wrap index"> |
|
<div class="banner"> |
|
<img class="text" src="@/assets/img/about/banner-text.png" alt=""> |
|
</div> |
|
<div class="intro"> |
|
<div class="inner"> |
|
<div class="pics"> |
|
<div class="text"> |
|
<div class="title-wrap"> |
|
<p class="title">或然科技有限公司</p> |
|
<p class="brief">始于2019年</p> |
|
<p class="en">HUORAN TECH</p> |
|
</div> |
|
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于各大高校、金融机构等行业，利用我司技术优势将区块链、云计算、大数据、人工智能等行业前沿技术与金融、教育等行业进行深度融合，为客户提供功能先进、运行高效且便于使用的产业信息化综合解决方案。</p> |
|
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">公司自组建以来已成功研发并交付多款信息化产品的定制项目。截至目前，或然累计服务包括河海大学、电科科技大学、四川大学、闽江学院、巢湖学院、山东财经大学等高校。</p> |
|
</div> |
|
<img class="bg" src="@/assets/img/about/about1.png" alt=""> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="service"> |
|
<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">企业文化</h6> |
|
<p class="en">CORPORATE CULTURE</p> |
|
<ul class="list"> |
|
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
|
<img src="@/assets/img/about/about4.png" alt=""> |
|
<h6>使命</h6> |
|
<p class="text">成为教育产业数字化的推动者</p> |
|
</li> |
|
<li class="wow fadeInRight" data-wow-delay="0.8s"> |
|
<img src="@/assets/img/about/about5.png" alt=""> |
|
<h6>愿景</h6> |
|
<p class="text">成就百万教育产业数字化的创业者</p> |
|
</li> |
|
<li class="wow fadeInUp" data-wow-delay="1.1s"> |
|
<img src="@/assets/img/about/about6.png" alt=""> |
|
<h6>核心价值观</h6> |
|
<p class="text">公正、诚信、创新、实干</p> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="progress"> |
|
<div class="inner"> |
|
<h6 class="i-title">发展历程</h6> |
|
<p class="en">MILESTONE</p> |
|
<ul class="list"> |
|
<li> |
|
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> |
|
<h6>2018.12</h6> |
|
<p class="text">或然科技筹备成立</p> |
|
</li> |
|
<li> |
|
<h6>2019.12</h6> |
|
<p class="text">核心团队组建完成</p> |
|
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> |
|
</li> |
|
<li> |
|
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> |
|
<h6>2020.10</h6> |
|
<p class="text">或然技术中台V1.0发布</p> |
|
</li> |
|
<li> |
|
<h6>2021.03</h6> |
|
<p class="text">职站平台V1.0发布</p> |
|
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> |
|
</li> |
|
<li> |
|
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> |
|
<h6>2021.07</h6> |
|
<p class="text">助力第一个城市合伙人完成了第一个项目落地</p> |
|
</li> |
|
<li> |
|
<h6>2022.05</h6> |
|
<p class="text">Dataforward平台V1.0发布</p> |
|
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> |
|
</li> |
|
</ul> |
|
</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="@/assets/img/about/dot.png" alt=""> |
|
<p class="name">深圳</p> |
|
</div> |
|
<div class="info"> |
|
<img class="logo" src="@/assets/img/about/logo.png" alt=""> |
|
<div class="texts"> |
|
<div class="item"> |
|
<div class="line"> |
|
<img class="icon" src="@/assets/img/about/address.png" alt=""> |
|
公司电话：0755-28109829 |
|
</div> |
|
<div class="line"> |
|
<img class="icon" src="@/assets/img/about/tel.png" alt=""> |
|
地址：深圳市宝安区创业二路华联城市全景1栋G座403室 |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<div class="line"> |
|
<img class="icon" src="@/assets/img/about/phone.png" alt=""> |
|
合作咨询：林经理 18818574533 |
|
</div> |
|
<div class="line"> |
|
<img class="icon" src="@/assets/img/about/mail.png" alt=""> |
|
客户建议：service@huorantech.cn |
|
</div> |
|
</div> |
|
<div class="qrcode"> |
|
<img src="@/assets/img/about/qrcode.png" alt=""> |
|
<p class="text">扫一扫，关注公众号</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import util from '@/libs/util' |
|
export default { |
|
name: 'about', |
|
data() { |
|
return { |
|
|
|
} |
|
}, |
|
mounted() {}, |
|
methods: {} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.wrap { |
|
position: relative; |
|
background-color: #F9F9F9; |
|
.banner { |
|
position: relative; |
|
height: 480px; |
|
background: url(../../../assets/img/about/banner1.png) 0 0/auto no-repeat, |
|
url(../../../assets/img/about/banner2.png) (90% 37px)/auto no-repeat; |
|
background-color: #0F5BED; |
|
.text { |
|
position: absolute; |
|
top: 167px; |
|
left: 165px; |
|
} |
|
} |
|
.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: 67px 0; |
|
margin: 0 auto; |
|
} |
|
.en { |
|
position: absolute; |
|
top: 40px; |
|
left: 50%; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 46px; |
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
color: #D4DAEA; |
|
transform: translate(-50%); |
|
} |
|
.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; |
|
} |
|
.brief { |
|
margin: 20px 0 30px; |
|
font-size: 24px; |
|
color: #0B1D30; |
|
} |
|
.en { |
|
top: -30px; |
|
text-align: left; |
|
color: #E5E5E5; |
|
} |
|
.desc{ |
|
margin-bottom: 20px; |
|
font-size: 14px; |
|
color: #535C6E; |
|
line-height: 25px; |
|
} |
|
} |
|
.service { |
|
display: flex; |
|
justify-content: center; |
|
flex-direction: column; |
|
height: 153px; |
|
color: #fff; |
|
background: url(../../../assets/img/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(../../../assets/img/about/about3.png) 0 0/100% 100% no-repeat; |
|
.inner { |
|
padding-bottom: 112px; |
|
} |
|
.list{ |
|
display: flex; |
|
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.3800); |
|
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: 64px; |
|
transition: .6s; |
|
} |
|
h6{ |
|
margin: 10px 0 16px; |
|
font-size: 26px; |
|
line-height: 28px; |
|
color: #0B1D30; |
|
transition: .3s; |
|
} |
|
.text{ |
|
font-size: 14px; |
|
color: #637493; |
|
transition: .3s; |
|
} |
|
} |
|
} |
|
.progress { |
|
.list { |
|
display: flex; |
|
margin-top: 200px; |
|
} |
|
li { |
|
position: relative; |
|
margin-right: 80px; |
|
text-align: center; |
|
h6 { |
|
margin: 20px 0 10px; |
|
font-size: 40px; |
|
color: #2D67F6; |
|
} |
|
.text { |
|
font-size: 15px; |
|
color: #565656; |
|
} |
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
top: 15px; |
|
left: 98px; |
|
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(even) { |
|
margin-top: -117px; |
|
.arrow { |
|
transform: rotateX(180deg); |
|
} |
|
.text { |
|
margin: 10px 0 20px; |
|
} |
|
&:after { |
|
top: 133px; |
|
} |
|
} |
|
&:last-child:after { |
|
display: none; |
|
} |
|
} |
|
} |
|
.contact { |
|
position: relative; |
|
padding: 0 0 106px 0; |
|
background: url(../../../assets/img/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; |
|
} |
|
} |
|
} |
|
.qrcode { |
|
text-align: center; |
|
.text { |
|
margin-top: 10px; |
|
font-size: 12px; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
</style> |