Before Width: | Height: | Size: 129 KiB |
Before Width: | Height: | Size: 120 KiB |
Before Width: | Height: | Size: 460 B |
Before Width: | Height: | Size: 691 B |
Before Width: | Height: | Size: 757 B |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 363 B |
Before Width: | Height: | Size: 696 B |
Before Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 989 B |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 896 B |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 430 B |
Before Width: | Height: | Size: 602 B |
Before Width: | Height: | Size: 919 B |
Before Width: | Height: | Size: 861 B |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 543 B |
Before Width: | Height: | Size: 587 B |
Before Width: | Height: | Size: 884 B |
Before Width: | Height: | Size: 977 B |
@ -1,818 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="wrap index"> |
|
||||||
<img class="screen" src="@/assets/img/index/index0.png" alt="首页"> |
|
||||||
<div class="banner"> |
|
||||||
<el-carousel height="350px" :autoplay="false"> |
|
||||||
<el-carousel-item> |
|
||||||
<div class="bg banner-bg1"></div> |
|
||||||
<img class="text" src="@/assets/img/index/banner1-text.png" alt=""> |
|
||||||
</el-carousel-item> |
|
||||||
<el-carousel-item> |
|
||||||
<div class="bg banner-bg2"></div> |
|
||||||
<div class="text"> |
|
||||||
<h6>金融科技与大数据</h6> |
|
||||||
<p class="des">围绕金融+科技+大数据,为院校培养复合型专业人才提供一“站”式服务</p> |
|
||||||
</div> |
|
||||||
</el-carousel-item> |
|
||||||
<el-carousel-item> |
|
||||||
<div class="bg banner-bg3"></div> |
|
||||||
<div class="text text3"> |
|
||||||
<h6>智慧教育智能未来</h6> |
|
||||||
<p class="des">大数据、人工智能、云计算等技术应用,助力院校实现教学智能化升级</p> |
|
||||||
</div> |
|
||||||
</el-carousel-item> |
|
||||||
</el-carousel> |
|
||||||
</div> |
|
||||||
<!-- 简介 --> |
|
||||||
<ul class="intro"> |
|
||||||
<li class="wow fadeInLeft" :class="{active: active === 1}" data-wow-delay="0.6s" @click="toPart(1)"> |
|
||||||
<img src="@/assets/img/index/index1.png" alt=""> |
|
||||||
<div class="text"> |
|
||||||
<h6>平台概览</h6> |
|
||||||
<p class="desc">专业打造,满足开展虚拟实验教学的多样性需求</p> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInUp" :class="{active: active === 2}" data-wow-delay="0.2s" @click="toPart(2)"> |
|
||||||
<img src="@/assets/img/index/index2.png" alt=""> |
|
||||||
<div class="text"> |
|
||||||
<h6>平台特色与优势</h6> |
|
||||||
<p class="desc">助力院校实现教学智能化升级</p> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInRight" :class="{active: active === 3}" data-wow-delay="0.8s" @click="toPart(3)"> |
|
||||||
<img src="@/assets/img/index/index20.png" alt=""> |
|
||||||
<div class="text"> |
|
||||||
<h6>平台产品介绍</h6> |
|
||||||
<p class="desc">为院校培养复合型人才提供一“站”式服务</p> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<!-- 关于 --> |
|
||||||
<div class="about" id="part1"> |
|
||||||
<div class="inner wow fadeInDown" style="padding-bottom: 0"> |
|
||||||
<h6 class="i-title">关于职站</h6> |
|
||||||
<p class="en">ABOUT OCCUPATION LAB</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="about bg-white"> |
|
||||||
<div class="inner"> |
|
||||||
<div class="desc">职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。极简的平台操作,可帮助老师轻松开展实验教学,并支持自定义发布考核和练习,检验学生的日常实训练习效果;老师还可以通过可视化图表报告直观查看学生实训成绩,评估教学效果。</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 特色与优势 --> |
|
||||||
<div class="adv" id="part2"> |
|
||||||
<img src="@/assets/img/index/index8.png" alt="" class="shape shape1"> |
|
||||||
<img src="@/assets/img/index/index9.png" alt="" class="shape shape2"> |
|
||||||
<img src="@/assets/img/index/index10.png" alt="" class="shape shape3"> |
|
||||||
<div class="inner"> |
|
||||||
<h6 class="i-title wow fadeInDown">特色与优势</h6> |
|
||||||
<p class="en">FEATURES AND ADVANTAGES</p> |
|
||||||
<ul class="list"> |
|
||||||
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
<img src="@/assets/img/index/index3.png" alt=""> |
|
||||||
<h6>大数据分析统计<br>教学效果有“据”可依</h6> |
|
||||||
<p class="text">大数据追踪每个老师,学生教学和学习情况,统计分析并通过可视化图表展示,教学效果一目了然。</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInRight" data-wow-delay="0.8s"> |
|
||||||
<img src="@/assets/img/index/index4.png" alt=""> |
|
||||||
<h6>云端部署<br>实验教学资源“云”共享</h6> |
|
||||||
<p class="text">随时随地,只需登录网站,无需安装部署,即可轻松享受云上“实验室”,可满足不同学科,不同场景下的教学需求。</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInUp" data-wow-delay="1.1s"> |
|
||||||
<img src="@/assets/img/index/index5.png" alt=""> |
|
||||||
<h6>功能全面<br>打造“智”能化教学全场景</h6> |
|
||||||
<p class="text">教、学、练、考以及大赛、资讯等功能模块,操作方便、智能快捷,将教学活动从课上拓展到课堂外,为院校师生打造智能化、多样化、个性化的“教”“学”全场景。</p> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 产品展示 --> |
|
||||||
<div class="product" id="part3"> |
|
||||||
<div class="inner"> |
|
||||||
<h6 class="i-title wow fadeInUp">平台产品介绍</h6> |
|
||||||
<p class="en">PRODUCT DISPLAY</p> |
|
||||||
<div class="pics"> |
|
||||||
<div class="text"> |
|
||||||
<img src="@/assets/img/index/index11.png" alt="" class="icon wow flipInX" data-wow-delay="0.2s"> |
|
||||||
<h6 class="wow fadeInDown" data-wow-delay="0.3s">金融+科技+大数据</h6> |
|
||||||
<p class="desc wow fadeInDown" data-wow-delay="0.7s">平台集成有银行综合、担保,Python程序设计、经济金融建模、数据采集、数据清洗、大数据分析、数据可视化、量化投资策略建模、金融随机过程、区块链交易所等十几款产品;可满足金融、金融科技、金融工程、大数据应用与管理等相关专业开设实验课程。</p> |
|
||||||
</div> |
|
||||||
<div class="pro-bg1"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-5.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="0.9s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-6.png" alt="" class="bg6 wow fadeInDown" data-wow-delay="1.1s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-7.png" alt="" class="bg7 wow fadeInDown" data-wow-delay="1.3s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-8.png" alt="" class="bg8 wow fadeInDown" data-wow-delay="1.5s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-9.png" alt="" class="bg9 wow fadeInDown" data-wow-delay="1.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-10.png" alt="" class="bg10 wow fadeInDown" data-wow-delay="2s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-11.png" alt="" class="bg11 wow fadeInDown" data-wow-delay="2.3s"> |
|
||||||
<img src="@/assets/img/index/pro-bg1-12.png" alt="" class="bg12 wow fadeInDown" data-wow-delay="2.6s"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="product bg-white"> |
|
||||||
<div class="inner"> |
|
||||||
<div class="pics"> |
|
||||||
<div class="pro-bg2"> |
|
||||||
<img src="@/assets/img/index/pro-bg2-5.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s"> |
|
||||||
<img src="@/assets/img/index/pro-bg2-1.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg2-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> |
|
||||||
<img src="@/assets/img/index/pro-bg2-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
<img src="@/assets/img/index/pro-bg2-3.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
</div> |
|
||||||
<div class="text"> |
|
||||||
<img src="@/assets/img/index/index13.png" alt="" class="icon wow fadeInRight" data-wow-delay="0.2s"> |
|
||||||
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">沉浸式岗位模拟与实操</h6> |
|
||||||
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">项目化教学,通过经典案例让学生亲身体验理论在实践中的应用,学会灵活运用所学知识解决实际问题,提升自身的职业实操能力。</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="product"> |
|
||||||
<div class="inner"> |
|
||||||
<div class="pics"> |
|
||||||
<div class="text"> |
|
||||||
<img src="@/assets/img/index/index15.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s"> |
|
||||||
<h6 class="wow fadeInUp" data-wow-delay="0.5s">数据追踪与统计</h6> |
|
||||||
<p class="desc wow fadeInUp" data-wow-delay="0.5s">老师和学生可查看每一次的练习、考试的相关情况,随时了解自己的教学和学习的进展和效果,动态调整自己的教学和学习计划。</p> |
|
||||||
</div> |
|
||||||
<div class="pro-bg3"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-3.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="product bg-white"> |
|
||||||
<div class="inner"> |
|
||||||
<div class="pics"> |
|
||||||
<div class="pro-bg4"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg4-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> |
|
||||||
<img src="@/assets/img/index/pro-bg4-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.2s"> |
|
||||||
</div> |
|
||||||
<div class="text"> |
|
||||||
<img src="@/assets/img/index/index21.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s"> |
|
||||||
<h6 class="wow fadeInUp" data-wow-delay="0.5s">共享精品课程资源</h6> |
|
||||||
<p class="desc wow fadeInUp" data-wow-delay="0.5s">学校可自主打造自己的精品课程中心,老师可以在这里创建优质的课程,支持视频,课件,教案等不同格式的教学资源上传,让全校师生共同学习一起分享。</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="product"> |
|
||||||
<div class="inner"> |
|
||||||
<div class="pics"> |
|
||||||
<div class="text"> |
|
||||||
<img src="@/assets/img/index/index22.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s"> |
|
||||||
<h6 class="wow fadeInUp" data-wow-delay="0.5s">自定义赛事活动</h6> |
|
||||||
<p class="desc wow fadeInUp" data-wow-delay="0.5s">学校可自行发布各种比赛活动的信息和活动进展,供全校学生参加报名,给学生提供一个展示自我,挑战自我的舞台,丰富学生的校园生活。</p> |
|
||||||
</div> |
|
||||||
<div class="pro-bg5"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s"> |
|
||||||
<img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s"> |
|
||||||
<img src="@/assets/img/index/pro-bg5-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> |
|
||||||
<img src="@/assets/img/index/pro-bg5-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.2s"> |
|
||||||
</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="@/assets/img/index/customer.jpg" alt=""> |
|
||||||
</div> |
|
||||||
<div class="item tel"></div> |
|
||||||
<div class="popup tel-popup"> |
|
||||||
<div class="tel-inner"> |
|
||||||
<div class="line"> |
|
||||||
<div> |
|
||||||
<img class="icon" src="@/assets/img/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">18019930142</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="line"> |
|
||||||
<div> |
|
||||||
<img class="icon" src="@/assets/img/index/sug.png" alt=""> |
|
||||||
</div> |
|
||||||
<div class="text"> |
|
||||||
<p class="title" @click="toQues">咨询,建议与反馈</p> |
|
||||||
<p class="des">您的每一条建议声音,我们都认真对待</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="item topping" @click="topping"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Setting from '@/setting' |
|
||||||
import util from '@/libs/util' |
|
||||||
import WOW from 'wow.js' |
|
||||||
export default { |
|
||||||
name: 'index', |
|
||||||
data() { |
|
||||||
return { |
|
||||||
token: util.local.get(Setting.tokenKey), |
|
||||||
active: '' |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
new WOW().init() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
toPart(i){ |
|
||||||
this.active = i |
|
||||||
document.querySelector(`#part${i}`).scrollIntoView() |
|
||||||
}, |
|
||||||
// 置顶 |
|
||||||
topping() { |
|
||||||
document.documentElement.scrollTop = 0 |
|
||||||
document.body.scrollTop = 0 |
|
||||||
}, |
|
||||||
// 问卷调查 |
|
||||||
toQues() { |
|
||||||
window.open('https://www.wjx.cn/vm/wB0RcMm.aspx') |
|
||||||
}, |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
@import url(../../../plugins/wow/animate.css); |
|
||||||
.wrap{ |
|
||||||
position: relative; |
|
||||||
background-color: #F3F6FA; |
|
||||||
.screen { |
|
||||||
position: absolute; |
|
||||||
top: -1000px; |
|
||||||
} |
|
||||||
.banner { |
|
||||||
.text { |
|
||||||
position: absolute; |
|
||||||
top: 130px; |
|
||||||
left: 400px; |
|
||||||
} |
|
||||||
h6 { |
|
||||||
margin-bottom: 30px; |
|
||||||
font-size: 42px; |
|
||||||
} |
|
||||||
.des { |
|
||||||
font-size: 16px; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
.text3 { |
|
||||||
h6, .des { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.bg { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.banner-bg1 { |
|
||||||
background: url(../../../assets/img/index/banner1-1.png) (bottom left)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner1-2.png) top left/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner1-3.png) (90% 9px)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner1.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
.banner-bg2 { |
|
||||||
background: url(../../../assets/img/index/banner2-1.png) (34px 46px)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner2-2.png) (0 0)/auto no-repeat, |
|
||||||
#f9faff url(../../../assets/img/index/banner2.png) top right/auto no-repeat; |
|
||||||
} |
|
||||||
.banner-bg3 { |
|
||||||
background: url(../../../assets/img/index/banner3-2.png) (30% 0)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner3-3.png) (28px 12px)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner3-4.png) (90% 10px)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner3-5.png) (top right)/auto no-repeat, |
|
||||||
url(../../../assets/img/index/banner3.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
.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; |
|
||||||
} |
|
||||||
} |
|
||||||
.intro{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
align-items: center; |
|
||||||
padding: 43px 0; |
|
||||||
background-color: #fff; |
|
||||||
li{ |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
cursor: pointer; |
|
||||||
transition: .3s; |
|
||||||
&.active{ |
|
||||||
h6, .desc{ |
|
||||||
color: #006EFF; |
|
||||||
} |
|
||||||
} |
|
||||||
&:hover{ |
|
||||||
margin-top: -15px; |
|
||||||
h6, .desc{ |
|
||||||
color: #006EFF; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
img{ |
|
||||||
width: 50px; |
|
||||||
margin-right: 15px; |
|
||||||
} |
|
||||||
h6{ |
|
||||||
margin-bottom: 5px; |
|
||||||
font-size: 16px; |
|
||||||
color: #0B1D30; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
.desc{ |
|
||||||
font-size: 13px; |
|
||||||
color: #757F92; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
} |
|
||||||
.inner{ |
|
||||||
position: relative; |
|
||||||
width: 1200px; |
|
||||||
padding: 67px 0; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
.en { |
|
||||||
position: absolute; |
|
||||||
top: 77px; |
|
||||||
left: 50%; |
|
||||||
width: 100%; |
|
||||||
text-align: center; |
|
||||||
font-size: 28px; |
|
||||||
font-family: PingFangSC-Semibold, PingFang SC; |
|
||||||
color: #E5EBF1; |
|
||||||
transform: translate(-50%); |
|
||||||
} |
|
||||||
.about{ |
|
||||||
.inner{ |
|
||||||
padding: 67px; |
|
||||||
} |
|
||||||
.desc{ |
|
||||||
min-height: 200px; |
|
||||||
padding: 35px 280px 35px 55px; |
|
||||||
font-size: 14px; |
|
||||||
color: #0B1D30; |
|
||||||
line-height: 30px; |
|
||||||
background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
} |
|
||||||
.adv{ |
|
||||||
position: relative; |
|
||||||
background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat; |
|
||||||
.shape{ |
|
||||||
position: absolute; |
|
||||||
} |
|
||||||
.shape1{ |
|
||||||
top: 25px; |
|
||||||
right: 10px; |
|
||||||
} |
|
||||||
.shape2{ |
|
||||||
bottom: 30px; |
|
||||||
left: 50px; |
|
||||||
} |
|
||||||
.shape3{ |
|
||||||
bottom: 25px; |
|
||||||
right: 50px; |
|
||||||
} |
|
||||||
.list{ |
|
||||||
display: flex; |
|
||||||
li{ |
|
||||||
width: 33.33%; |
|
||||||
padding: 107px 35px 30px; |
|
||||||
margin-right: 20px; |
|
||||||
text-align: center; |
|
||||||
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08); |
|
||||||
border-radius: 10px; |
|
||||||
&:last-child{ |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
&:hover { |
|
||||||
img { |
|
||||||
transform: rotateY(180deg) |
|
||||||
} |
|
||||||
h6 { |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
img{ |
|
||||||
width: 64px; |
|
||||||
transition: .6s; |
|
||||||
} |
|
||||||
h6{ |
|
||||||
margin: 45px 0 16px; |
|
||||||
font-size: 18px; |
|
||||||
line-height: 28px; |
|
||||||
color: #0B1D30; |
|
||||||
transition: .3s; |
|
||||||
} |
|
||||||
.text{ |
|
||||||
font-size: 14px; |
|
||||||
color: #757F92; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pics{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
.icon{ |
|
||||||
width: 60px; |
|
||||||
} |
|
||||||
.text{ |
|
||||||
width: 340px; |
|
||||||
} |
|
||||||
h6{ |
|
||||||
margin: 30px 0 10px; |
|
||||||
font-size: 28px; |
|
||||||
color: #0B1D30; |
|
||||||
} |
|
||||||
.desc{ |
|
||||||
font-size: 15px; |
|
||||||
color: #757F92; |
|
||||||
} |
|
||||||
.pro-bg1 { |
|
||||||
position: relative; |
|
||||||
width: 578px; |
|
||||||
height: 410px; |
|
||||||
img { |
|
||||||
position: absolute; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
.bg1 { |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.bg2 { |
|
||||||
top: 24px; |
|
||||||
right: 0; |
|
||||||
animation: rotate 15s linear infinite; |
|
||||||
} |
|
||||||
.bg3 { |
|
||||||
top: 15px; |
|
||||||
left: 27px; |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
top: 102px; |
|
||||||
left: 72px; |
|
||||||
} |
|
||||||
.bg5 { |
|
||||||
top: 102px; |
|
||||||
left: 180px; |
|
||||||
} |
|
||||||
.bg6 { |
|
||||||
top: 102px; |
|
||||||
left: 288px; |
|
||||||
} |
|
||||||
.bg7 { |
|
||||||
top: 55px; |
|
||||||
right: 9px; |
|
||||||
} |
|
||||||
.bg8 { |
|
||||||
top: 181px; |
|
||||||
left: 14px; |
|
||||||
} |
|
||||||
.bg9 { |
|
||||||
top: 195px; |
|
||||||
left: 180px; |
|
||||||
} |
|
||||||
.bg10 { |
|
||||||
top: 181px; |
|
||||||
right: 142px; |
|
||||||
} |
|
||||||
.bg11 { |
|
||||||
top: 189px; |
|
||||||
right: 34px; |
|
||||||
} |
|
||||||
.bg12 { |
|
||||||
bottom: 45px; |
|
||||||
left: 180px; |
|
||||||
} |
|
||||||
&:hover { |
|
||||||
.bg3 { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
.bg4, .bg5, .bg6, .bg7, .bg8, .bg9, .bg10, .bg11, .bg12 { |
|
||||||
transform: translateY(-10px); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pro-bg2 { |
|
||||||
position: relative; |
|
||||||
width: 674px; |
|
||||||
height: 360px; |
|
||||||
img { |
|
||||||
position: absolute; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
.bg1 { |
|
||||||
top: 0; |
|
||||||
left: 68px; |
|
||||||
} |
|
||||||
.bg2 { |
|
||||||
top: 24px; |
|
||||||
left: 97px; |
|
||||||
} |
|
||||||
.bg3 { |
|
||||||
top: 94px; |
|
||||||
left: 139px; |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
top: 58px; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.bg5 { |
|
||||||
top: 64px; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
&:hover { |
|
||||||
.bg2 { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
.bg3 { |
|
||||||
transform: scale(1.3); |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
transform: translate(-135px, -10px); |
|
||||||
} |
|
||||||
.bg5 { |
|
||||||
transform: translate(50px, -20px); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pro-bg3 { |
|
||||||
position: relative; |
|
||||||
width: 584px; |
|
||||||
height: 360px; |
|
||||||
img { |
|
||||||
position: absolute; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
.bg1 { |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.bg2 { |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
animation: rotate 10s linear infinite; |
|
||||||
} |
|
||||||
.bg3 { |
|
||||||
top: 15px; |
|
||||||
left: 13px; |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.bg5 { |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
&:hover { |
|
||||||
.bg3 { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
transform: translate(-20px, 20px); |
|
||||||
} |
|
||||||
.bg5 { |
|
||||||
transform: translateY(-20px); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pro-bg4 { |
|
||||||
position: relative; |
|
||||||
width: 580px; |
|
||||||
height: 360px; |
|
||||||
img { |
|
||||||
position: absolute; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
.bg1 { |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.bg2 { |
|
||||||
bottom: -40px; |
|
||||||
right: -20px; |
|
||||||
animation: rotate 10s linear infinite; |
|
||||||
} |
|
||||||
.bg3 { |
|
||||||
top: 40px; |
|
||||||
left: 30px; |
|
||||||
width: 530px; |
|
||||||
box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1; |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
top: 140px; |
|
||||||
left: -20px; |
|
||||||
width: 120px; |
|
||||||
height: 100px; |
|
||||||
} |
|
||||||
&:hover { |
|
||||||
.bg3 { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
transform: translate(135px, 70px); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pro-bg5 { |
|
||||||
position: relative; |
|
||||||
width: 580px; |
|
||||||
height: 360px; |
|
||||||
img { |
|
||||||
position: absolute; |
|
||||||
transition: .5s; |
|
||||||
} |
|
||||||
.bg1 { |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.bg2 { |
|
||||||
bottom: -40px; |
|
||||||
right: -20px; |
|
||||||
animation: rotate 10s linear infinite; |
|
||||||
} |
|
||||||
.bg3 { |
|
||||||
top: 40px; |
|
||||||
left: 30px; |
|
||||||
width: 530px; |
|
||||||
box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1; |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
top: 150px; |
|
||||||
right: 40px; |
|
||||||
width: 295px; |
|
||||||
} |
|
||||||
&:hover { |
|
||||||
.bg3 { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
.bg4 { |
|
||||||
transform: translate(-80px, 25px) scale(1.1); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.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(../../../assets/img/index/wechat.png) center center/auto no-repeat; |
|
||||||
&:hover { |
|
||||||
background-image: url(../../../assets/img/index/wechat-1.png); |
|
||||||
background-color: #006EFF; |
|
||||||
& + .popup { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.tel { |
|
||||||
background: #fff url(../../../assets/img/index/tel.png) center center/auto no-repeat; |
|
||||||
&:hover { |
|
||||||
background-image: url(../../../assets/img/index/tel-1.png); |
|
||||||
background-color: #006EFF; |
|
||||||
& + .popup { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.topping { |
|
||||||
background: #fff url(../../../assets/img/index/top.png) center center/auto no-repeat; |
|
||||||
&:hover { |
|
||||||
background-image: url(../../../assets/img/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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
@ -1,14 +0,0 @@ |
|||||||
import BasicLayout from '@/layouts/home'; |
|
||||||
|
|
||||||
export default { |
|
||||||
path: '/data', |
|
||||||
component: BasicLayout, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
name: `data`, |
|
||||||
path: `/data`, |
|
||||||
component: () => import('@/pages/data/list'), |
|
||||||
meta: { title: 'Dataforward' } |
|
||||||
}, |
|
||||||
] |
|
||||||
}; |
|
@ -1,14 +0,0 @@ |
|||||||
import BasicLayout from '@/layouts/home'; |
|
||||||
|
|
||||||
export default { |
|
||||||
path: '/occupationlab', |
|
||||||
component: BasicLayout, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
name: `occupationlab`, |
|
||||||
path: `/occupationlab`, |
|
||||||
component: () => import('@/pages/occupationlab/list'), |
|
||||||
meta: { title: '职站' } |
|
||||||
}, |
|
||||||
] |
|
||||||
}; |
|