parent
62e8750550
commit
e8909aa0fa
8 changed files with 857 additions and 156 deletions
@ -0,0 +1,818 @@ |
||||
<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> |
||||
@ -0,0 +1,14 @@ |
||||
import BasicLayout from '@/layouts/home'; |
||||
|
||||
export default { |
||||
path: '/occupationlab', |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `occupationlab`, |
||||
path: `/occupationlab`, |
||||
component: () => import('@/pages/occupationlab/list'), |
||||
meta: { title: '职站' } |
||||
}, |
||||
] |
||||
}; |
||||
@ -1,16 +1,7 @@ |
||||
import router from "./index"; |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
|
||||
const whiteList = Setting.whiteList // 白名单
|
||||
router.beforeEach((to, from, next) => { |
||||
document.title = Setting.titleSuffix; |
||||
const role = util.local.get(Setting.tokenKey); |
||||
if (!role && !whiteList.includes(to.path)) { |
||||
next('/login') |
||||
} else if(role && to.path === '/login') { |
||||
next('/station') |
||||
} else { |
||||
next() |
||||
} |
||||
}); |
||||
document.title = Setting.titleSuffix |
||||
next() |
||||
}) |
||||
Loading…
Reference in new issue