|
|
|
@ -1,14 +1,28 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap index"> |
|
|
|
|
<div class="banner"> |
|
|
|
|
<img class="text" src="@/assets/img/index/banner-text.png" alt=""> |
|
|
|
|
<el-carousel height="688px" autoplay :interval="5000"> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<div class="bg banner-bg1"></div> |
|
|
|
|
<img class="text wow fadeInLeft" src="@/assets/img/index/banner1-text.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<div class="bg banner-bg2"></div> |
|
|
|
|
<img class="text wow fadeInLeft" src="@/assets/img/index/banner2-text.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<div class="bg banner-bg3"></div> |
|
|
|
|
<img class="text wow fadeInLeft" src="@/assets/img/index/banner3-text.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</el-carousel> |
|
|
|
|
</div> |
|
|
|
|
<!-- 为什么加入我们 --> |
|
|
|
|
<div class="adv" id="part2"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="i-title">为什么加入我们</h6> |
|
|
|
|
<h6 class="i-title wow fadeInDown">为什么加入我们</h6> |
|
|
|
|
<p class="en">WHY JOIN US</p> |
|
|
|
|
<p class="brief">专业、全面、高效</p> |
|
|
|
|
<p class="brief wow fadeInDown">专业、全面、高效</p> |
|
|
|
|
|
|
|
|
|
<ul class="list"> |
|
|
|
|
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
|
|
|
|
<img src="@/assets/img/index/index3.png" alt=""> |
|
|
|
@ -31,7 +45,7 @@ |
|
|
|
|
<!-- 关于我们 --> |
|
|
|
|
<div class="about" id="part1"> |
|
|
|
|
<div class="desc wow fadeInDown"> |
|
|
|
|
<h6 class="i-title">关于我们</h6> |
|
|
|
|
<h6 class="i-title wow fadeInDown">关于我们</h6> |
|
|
|
|
<p class="en">ABOUT US</p> |
|
|
|
|
<div class="text">深圳或然科技有限公司核心团队组建于2019年。公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业,利用我司技术优势将区块链、云计算、大数据、人工智能等行业前沿技术与教育产业进行深度融合,为客户提供功能先进、运行高效且便于使用的产业数字化综合解决方案。</div> |
|
|
|
|
</div> |
|
|
|
@ -39,7 +53,7 @@ |
|
|
|
|
<!-- 我们的服务 --> |
|
|
|
|
<div class="service" id="part3"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="i-title">我们的服务</h6> |
|
|
|
|
<h6 class="i-title wow fadeInDown">我们的服务</h6> |
|
|
|
|
<p class="en">OUR SERVICES</p> |
|
|
|
|
|
|
|
|
|
<div class="service-pic"> |
|
|
|
@ -76,7 +90,7 @@ |
|
|
|
|
<!-- 我们的产品 --> |
|
|
|
|
<div class="product"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="i-title">我们的产品</h6> |
|
|
|
|
<h6 class="i-title wow fadeInDown">我们的产品</h6> |
|
|
|
|
<p class="en">OUR PRODUCTS</p> |
|
|
|
|
<div class="pics"> |
|
|
|
|
<div class="pro-bg1"> |
|
|
|
@ -85,13 +99,13 @@ |
|
|
|
|
<img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> |
|
|
|
|
<el-carousel class="carousel" ref="carousel" height="338px" autoplay :interval="5000" arrow="never"> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<img src="@/assets/img/index/slide1.png" alt=""> |
|
|
|
|
<img class="car-img" src="@/assets/img/index/slide1.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<img src="@/assets/img/index/slide2.png" alt=""> |
|
|
|
|
<img class="car-img" src="@/assets/img/index/slide2.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<img src="@/assets/img/index/slide3.png" alt=""> |
|
|
|
|
<img class="car-img" src="@/assets/img/index/slide3.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</el-carousel> |
|
|
|
|
<div class="arrow a-left" @click="carouselSwitch('carousel', 0)"></div> |
|
|
|
@ -99,8 +113,8 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="text"> |
|
|
|
|
<div class="title-wrap"> |
|
|
|
|
<p class="text-title">职站平台</p> |
|
|
|
|
<p class="en">Occupation lab</p> |
|
|
|
|
<img class="t-logo" src="@/assets/img/index/occupationlab.png" alt=""> |
|
|
|
|
<p class="text-title">Occupation Lab</p> |
|
|
|
|
</div> |
|
|
|
|
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。平台采用了大数据,云计算等技术,为学校搭建信息化平台提供了基础,可助力院校实现教学智能化升级。职站平台设计遵循着极简、高效的理念,可帮助老师轻松开展实验教学,并支持自定义发布考核和练习,智能统计和检验学生的日常实训练习效果;老师还可以通过可视化图表报告直观查看学生实训成绩,评估教学成果。</p> |
|
|
|
|
</div> |
|
|
|
@ -127,8 +141,8 @@ |
|
|
|
|
<div class="pics"> |
|
|
|
|
<div class="text"> |
|
|
|
|
<div class="title-wrap"> |
|
|
|
|
<p class="text-title">数据前瞻平台</p> |
|
|
|
|
<p class="en">Dataforward</p> |
|
|
|
|
<img class="t-logo" src="@/assets/img/index/dataforward.png" alt=""> |
|
|
|
|
<p class="text-title">数据前瞻</p> |
|
|
|
|
</div> |
|
|
|
|
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">数据前瞻——财经数据库,涵盖股票数据,期货数据,债券数据,期权数据,利率数据,公募数据和宏观数据,拥有超40年的历史数据,可为用户解读、预测、分析,模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。平台的数据均来源于各大专业财经权威网站和数据官方发布平台,并经过专业的数据分类和整理,可让用户轻松便捷地搜索并批量下载到自己研究所需的数据,极大地减轻自己搜索整理数据的时间,提高研究效率, 从而高效的输出研究成果。</p> |
|
|
|
|
</div> |
|
|
|
@ -138,13 +152,13 @@ |
|
|
|
|
<img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> |
|
|
|
|
<el-carousel class="carousel" ref="carousel1" height="338px" autoplay :interval="5000" arrow="never"> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<img src="@/assets/img/index/slide4.png" alt=""> |
|
|
|
|
<img class="car-img" src="@/assets/img/index/slide4.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<img src="@/assets/img/index/slide5.png" alt=""> |
|
|
|
|
<img class="car-img" src="@/assets/img/index/slide5.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
<el-carousel-item> |
|
|
|
|
<img src="@/assets/img/index/slide6.png" alt=""> |
|
|
|
|
<img class="car-img" src="@/assets/img/index/slide6.png" alt=""> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</el-carousel> |
|
|
|
|
<div class="arrow a-left" @click="carouselSwitch('carousel1', 0)"></div> |
|
|
|
@ -174,18 +188,18 @@ |
|
|
|
|
<!-- 城市合伙人联盟 --> |
|
|
|
|
<div class="parner"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="i-title">城市合伙人联盟</h6> |
|
|
|
|
<h6 class="i-title wow fadeInDown">城市合伙人联盟</h6> |
|
|
|
|
<p class="en">ALLIANCE MAP</p> |
|
|
|
|
<p class="brief">共创、共享、共赢</p> |
|
|
|
|
<p class="brief wow fadeInDown">共创、共享、共赢</p> |
|
|
|
|
<div class="chart" id="map"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 合作客户 --> |
|
|
|
|
<div class="client"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6 class="i-title">合作客户</h6> |
|
|
|
|
<h6 class="i-title wow fadeInDown">合作客户</h6> |
|
|
|
|
<p class="en">PARTNERSHIP</p> |
|
|
|
|
<p class="brief">助力100+所院校客户实现数字化升级</p> |
|
|
|
|
<p class="brief wow fadeInDown">助力100+所院校客户实现数字化升级</p> |
|
|
|
|
<div class="client-pic"> |
|
|
|
|
<img class="bg" src="@/assets/img/index/index0.png" alt=""> |
|
|
|
|
<div class="text"> |
|
|
|
@ -193,7 +207,7 @@ |
|
|
|
|
<img src="@/assets/img/index/comma1.png" alt=""> |
|
|
|
|
他们说 |
|
|
|
|
</div> |
|
|
|
|
<div class="text">这里是一段评价描述,或然科技帮助我们完成了平台化的战略转型,产值也在5年间翻了超十倍。在各行业都</div> |
|
|
|
|
<div class="text">平台功能丰富,操作简单,自动判分功能,能更高效的批改作业给学生更好的指导。</div> |
|
|
|
|
<div class="c-title2"> |
|
|
|
|
—— 河海大学老师 |
|
|
|
|
<img src="@/assets/img/index/comma2.png" alt=""> |
|
|
|
@ -202,22 +216,19 @@ |
|
|
|
|
</div> |
|
|
|
|
<ul class="client-list"> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/logo.png" alt=""> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/logo.png" alt=""> |
|
|
|
|
<img src="@/assets/img/index/school1.png" alt=""> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/logo.png" alt=""> |
|
|
|
|
<img src="@/assets/img/index/school2.png" alt=""> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/logo.png" alt=""> |
|
|
|
|
<img src="@/assets/img/index/school3.png" alt=""> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/logo.png" alt=""> |
|
|
|
|
<img src="@/assets/img/index/school4.png" alt=""> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="@/assets/img/logo.png" alt=""> |
|
|
|
|
<img src="@/assets/img/index/school5.png" alt=""> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
@ -239,7 +250,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="text"> |
|
|
|
|
<p class="title">售前咨询</p> |
|
|
|
|
<p class="tel-num" style="margin-bottom: 5px">刘兰</p> |
|
|
|
|
<p class="tel-num" style="margin-bottom: 5px">刘老师</p> |
|
|
|
|
<p class="tel-num">18019930142</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -311,10 +322,10 @@ export default { |
|
|
|
|
visualMap: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
// defaultCenter: [ 117.283042, 31.86119 ], |
|
|
|
|
geo: { |
|
|
|
|
map: 'china', |
|
|
|
|
silent: false, |
|
|
|
|
silent: false, |
|
|
|
|
center: [110, 36], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#0D336F', //地图颜色 |
|
|
|
|
borderColor: '#5D7AA5',// 边框颜色 |
|
|
|
@ -322,14 +333,23 @@ export default { |
|
|
|
|
}, |
|
|
|
|
label:{ |
|
|
|
|
color: '#fff', //文字颜色 |
|
|
|
|
show: false, |
|
|
|
|
// backgroundColor: '#f00', |
|
|
|
|
formatter: function(params) { |
|
|
|
|
return params.name |
|
|
|
|
}, |
|
|
|
|
rich: { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
zoom : 1.1, //缩放 |
|
|
|
|
emphasis:{ |
|
|
|
|
label: { |
|
|
|
|
color: '#fff', //文字颜色 |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#1C76FD', //文字颜色 |
|
|
|
|
backgroundColor: '#1C76FD' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
zoom : 1.7, //缩放 |
|
|
|
|
roam: true, //鼠标可拖动、缩放 |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
@ -347,6 +367,7 @@ export default { |
|
|
|
|
return params.name + " " + params.data.quantity |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
top: '30%', |
|
|
|
|
type: 'scatter', |
|
|
|
|
coordinateSystem: 'geo', |
|
|
|
|
symbolSize: 15, |
|
|
|
@ -363,15 +384,57 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data:[ |
|
|
|
|
{name:"武汉", value: [114.311582,30.598467], quantity: 55.5, unit: '吨'}, |
|
|
|
|
{name:"广州", value: [113.23333, 23.16667], quantity: 12.5, unit: '吨'}, |
|
|
|
|
{name:"深圳", value: [114.064552,22.548457], quantity: 13.4, unit: '吨'}, |
|
|
|
|
{name:"成都", value: [104.06667, 30.66667], quantity: 568.2, unit: '吨'}, |
|
|
|
|
{name:"合肥", value: [117.17,31.52], quantity: 876.2, unit: '吨'}, |
|
|
|
|
{name:"武汉", value: [114.311582,30.598467], quantity: 55.5}, |
|
|
|
|
{name:"广州", value: [113.23333, 23.16667], quantity: 12.5}, |
|
|
|
|
{name:"深圳", value: [114.064552,22.548457], quantity: 13.4}, |
|
|
|
|
{name:"成都", value: [104.06667, 30.66667], quantity: 568.2}, |
|
|
|
|
{name:"合肥", value: [117.17,31.52], quantity: 876.2}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
let index = -1 |
|
|
|
|
setInterval(function () { |
|
|
|
|
// 隐藏提示框 |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
type: 'hideTip', |
|
|
|
|
seriesIndex: 0, |
|
|
|
|
dataIndex: index |
|
|
|
|
}) |
|
|
|
|
// 显示提示框 |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
type: 'showTip', |
|
|
|
|
seriesIndex: 0, |
|
|
|
|
dataIndex: index + 1 |
|
|
|
|
}) |
|
|
|
|
// 取消高亮指定的数据图形 |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
type: 'downplay', |
|
|
|
|
seriesIndex: 0, |
|
|
|
|
dataIndex: index |
|
|
|
|
}) |
|
|
|
|
// 高亮指定的数据图形 |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
type: 'highlight', |
|
|
|
|
seriesIndex: 0, |
|
|
|
|
dataIndex: index + 1 |
|
|
|
|
}) |
|
|
|
|
index++ |
|
|
|
|
if (index > 4) { |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
type: 'hideTip', |
|
|
|
|
seriesIndex: 0, |
|
|
|
|
dataIndex: 5 |
|
|
|
|
}) |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
type: 'downplay', |
|
|
|
|
seriesIndex: 0, |
|
|
|
|
dataIndex: 5 |
|
|
|
|
}) |
|
|
|
|
index = -1 |
|
|
|
|
} |
|
|
|
|
}, 2000) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
@ -385,14 +448,29 @@ export default { |
|
|
|
|
.banner { |
|
|
|
|
position: relative; |
|
|
|
|
height: 688px; |
|
|
|
|
background: url(../../../assets/img/index/banner-1.png) 0 0/cover no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner-3.png) 0 0/auto no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner-2.png) top right/auto no-repeat; |
|
|
|
|
background-color: #0F5BED; |
|
|
|
|
.bg { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.banner-bg1 { |
|
|
|
|
background: url(../../../assets/img/index/banner1-1.png) 0 0/cover no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner1-3.png) 0 0/auto no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner1-2.png) top right/auto no-repeat; |
|
|
|
|
} |
|
|
|
|
.banner-bg2 { |
|
|
|
|
background: url(../../../assets/img/index/banner2-1.png) (56px bottom)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner2-2.png) (95% 174px)/auto no-repeat; |
|
|
|
|
} |
|
|
|
|
.banner-bg3 { |
|
|
|
|
background: url(../../../assets/img/index/banner3-2.png) (right 176px)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner3-1.png) (left 92px)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/index/banner3-3.png) (top right)/auto no-repeat; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 255px; |
|
|
|
|
left: 203px; |
|
|
|
|
left: 350px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.i-title{ |
|
|
|
@ -416,12 +494,12 @@ export default { |
|
|
|
|
.inner{ |
|
|
|
|
position: relative; |
|
|
|
|
width: 1200px; |
|
|
|
|
padding: 67px 0; |
|
|
|
|
padding: 87px 0 67px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.en { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 40px; |
|
|
|
|
top: 60px; |
|
|
|
|
left: 50%; |
|
|
|
|
width: 100%; |
|
|
|
|
text-align: center; |
|
|
|
@ -437,7 +515,7 @@ export default { |
|
|
|
|
color: #5A6B7E; |
|
|
|
|
} |
|
|
|
|
.about { |
|
|
|
|
padding: 100px 0 120px; |
|
|
|
|
padding: 130px 0 150px; |
|
|
|
|
background: url(../../../assets/img/index/about1.png) 0 0/100% 100% no-repeat; |
|
|
|
|
.en { |
|
|
|
|
top: 27px; |
|
|
|
@ -485,7 +563,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
img{ |
|
|
|
|
width: 64px; |
|
|
|
|
width: 70px; |
|
|
|
|
transition: .6s; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
@ -581,18 +659,16 @@ export default { |
|
|
|
|
} |
|
|
|
|
.title-wrap { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: flex-end; |
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
.text-title { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: relative; |
|
|
|
|
margin-bottom: 36px; |
|
|
|
|
padding-left: 12px; |
|
|
|
|
margin-left: 12px; |
|
|
|
|
font-size: 26px; |
|
|
|
|
line-height: 1; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
} |
|
|
|
|
.en { |
|
|
|
|
top: 14px; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 30px; |
|
|
|
|
color: #C6D5E1; |
|
|
|
|
border-left: 1px solid #DEE4F1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.product { |
|
|
|
@ -623,7 +699,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
img{ |
|
|
|
|
width: 90px; |
|
|
|
|
width: 70px; |
|
|
|
|
transition: .6s; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
@ -642,6 +718,10 @@ export default { |
|
|
|
|
.carousel { |
|
|
|
|
width: 500px; |
|
|
|
|
margin-left: 50px; |
|
|
|
|
.car-img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.arrow { |
|
|
|
|
position: absolute; |
|
|
|
@ -736,7 +816,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.chart { |
|
|
|
|
height: 500px; |
|
|
|
|
height: 600px; |
|
|
|
|
} |
|
|
|
|
.client { |
|
|
|
|
background: url(../../../assets/img/index/client.png) 0 0/cover no-repeat; |
|
|
|
|
} |
|
|
|
|
.client-pic { |
|
|
|
|
display: flex; |
|
|
|
@ -761,8 +844,8 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #535C6E; |
|
|
|
|
img { |
|
|
|
|
margin-left: 19px; |
|
|
|
|
} |
|
|
|
@ -800,7 +883,7 @@ export default { |
|
|
|
|
width: 60px; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
width: 340px; |
|
|
|
|
width: 450px; |
|
|
|
|
} |
|
|
|
|
h6{ |
|
|
|
|
margin: 30px 0 10px; |
|
|
|
|