|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 182 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -1,56 +1,199 @@ |
||||
<template> |
||||
<div class="footer"> |
||||
<div class="info" v-if="isIndex"> |
||||
<span class="m-r-20">客服邮箱：service@huorantech.cn</span> |
||||
<div> |
||||
<template v-if="!isPro"> |
||||
<div class="use"> |
||||
<h6>现在就使用智信云平台，开始实践教学</h6> |
||||
<div class="btns"> |
||||
<span class="btn1" @click="toTrial">预约演示</span> |
||||
<span class="btn2" @click="toTrial">免费试用</span> |
||||
</div> |
||||
<div class="copyright"> |
||||
<span v-if="isIndex">© Copyright 2021 Occupation Lab 职站</span> |
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a> |
||||
</div> |
||||
<div class="company"> |
||||
<div class="left"> |
||||
<div class="logo"> |
||||
<img src="@/assets/img/zxy/logo-gray.png" alt=""> |
||||
<span>联系我们，为您提供最新产品咨询与客服答疑</span> |
||||
</div> |
||||
<div class="texts"> |
||||
<p class="line" style="margin-bottom: 10px"> |
||||
<span class="label">联系我们</span> |
||||
<span class="val">客服电话：0551-68112926  合作咨询：18019930142 刘经理</span> |
||||
</p> |
||||
<p class="line" style="margin: 0 0 20px 72px;"> |
||||
<span class="val">客服邮箱：ahzxy@zhixinyunedu.com</span> |
||||
</p> |
||||
<p class="line"> |
||||
<span class="label">友情链接</span> |
||||
<span class="val"> |
||||
<a href="http://www.zxyicloud.com/#/ChuanDa/66/leftmenu/0" target="_blank">智信云官网</a> |
||||
 <em style="font-style: normal;color: #636F7C;">|</em>  |
||||
<a href="http://cxhz.hep.com.cn/" target="_blank">协同育人</a> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="qrcodes"> |
||||
<div class="qrcode" style="margin-right: 16px"> |
||||
<img src="@/assets/img/zxy/qrcode1.png" alt=""> |
||||
<p class="text">高校交流群</p> |
||||
</div> |
||||
<div class="qrcode"> |
||||
<img src="@/assets/img/zxy/qrcode2.png" alt=""> |
||||
<p class="text">扫一扫 关注我们</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="zxy-footer"> |
||||
© Copyright 2022 智信云 皖ICP备2021016749号 |
||||
</div> |
||||
</template> |
||||
<div v-else class="footer"> |
||||
<div class="info" v-if="isIndex"> |
||||
<span class="m-r-20">客服邮箱：service@huorantech.cn</span> |
||||
</div> |
||||
<div class="copyright"> |
||||
<span v-if="isIndex">© Copyright 2021 Occupation Lab 职站</span> |
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号 |
||||
isPro: Setting.isPro, |
||||
isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号 |
||||
}; |
||||
}, |
||||
mounted(){ |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
// 免费试用 |
||||
toTrial() { |
||||
window.open('https://www.wjx.top/vm/wFCPCFp.aspx') |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.footer{ |
||||
padding: 17px 0 9px; |
||||
.footer{ |
||||
padding: 17px 0 9px; |
||||
text-align: center; |
||||
background-color: #0F1D2E; |
||||
.info{ |
||||
margin-bottom: 7px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
color: #D7DFE7; |
||||
} |
||||
.copyright{ |
||||
font-size: 12px; |
||||
text-align: center; |
||||
background-color: #0F1D2E; |
||||
.info{ |
||||
margin-bottom: 7px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
color: #D7DFE7; |
||||
line-height: 17px; |
||||
span{ |
||||
margin-right: 20px; |
||||
color: #757F8A; |
||||
} |
||||
.copyright{ |
||||
a{ |
||||
color:#757F8A; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
line-height: 17px; |
||||
span{ |
||||
margin-right: 20px; |
||||
color: #757F8A; |
||||
} |
||||
a{ |
||||
color:#757F8A; |
||||
font-size: 12px; |
||||
&:hover{ |
||||
color: #c7c7c7; |
||||
} |
||||
&:hover{ |
||||
color: #c7c7c7; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.use { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 242px; |
||||
background: url(../../assets/img/zxy/begin-bg.png) 0 0/100% 100% no-repeat; |
||||
h6 { |
||||
margin-bottom: 25px; |
||||
font-size: 40px; |
||||
color: #fff; |
||||
} |
||||
.btns { |
||||
display: flex; |
||||
span { |
||||
width: 96px; |
||||
font-size: 14px; |
||||
line-height: 36px; |
||||
text-align: center; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
} |
||||
.btn1 { |
||||
margin-right: 16px; |
||||
color: #fff; |
||||
background: rgba(255,255,255,0.14); |
||||
border: 1px solid #fff; |
||||
} |
||||
.btn2 { |
||||
color: #007EFF; |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
.company { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 36px 0 14px; |
||||
background-color: #0F1D2E; |
||||
.logo { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 18px; |
||||
span { |
||||
padding-left: 14px; |
||||
margin-left: 18px; |
||||
font-size: 16px; |
||||
color: #9AACBE; |
||||
border-left: 1px solid #283545; |
||||
} |
||||
} |
||||
.left { |
||||
margin-right: 160px; |
||||
} |
||||
.texts { |
||||
.line { |
||||
display: flex; |
||||
font-size: 13px; |
||||
} |
||||
.label { |
||||
margin-right: 20px; |
||||
color: #636F7C; |
||||
} |
||||
.val { |
||||
color: #D6DEE8; |
||||
} |
||||
} |
||||
.qrcodes { |
||||
display: inline-flex; |
||||
margin-top: 20px; |
||||
} |
||||
.qrcode { |
||||
text-align: center; |
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 12px; |
||||
color: #757F8A; |
||||
} |
||||
} |
||||
} |
||||
.zxy-footer { |
||||
line-height: 34px; |
||||
text-align: center; |
||||
font-size: 12px; |
||||
color: #757F8A; |
||||
border-top: 1px solid rgba(255, 255, 255, 0.05); |
||||
background-color: #0F1D2E; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,842 @@ |
||||
<template> |
||||
<div class="wrap index"> |
||||
<img class="screen" src="@/assets/img/index/index0.png" alt="首页"> |
||||
<div class="banner"> |
||||
<el-carousel height="600px" :autoplay="false"> |
||||
<el-carousel-item> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<img class="name" src="@/assets/img/zxy/name.png" alt=""> |
||||
<p class="des">致力于帮助高校大商科类专业实现课程信息化、数字化和共建共享</p> |
||||
<div class="btns"> |
||||
<el-button size="small" @click="toTrial">预约演示</el-button> |
||||
<el-button type="primary" size="small" @click="toTrial">免费试用</el-button> |
||||
</div> |
||||
</div> |
||||
<img class="bg" src="@/assets/img/zxy/banner1.png" alt=""> |
||||
</div> |
||||
</el-carousel-item> |
||||
<el-carousel-item> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<img class="name" src="@/assets/img/zxy/name.png" alt=""> |
||||
<p class="des">集实践教学、课程学习、项目练习、考核管理、线上赛事为一体的教学辅助云平台 </p> |
||||
<div class="btns"> |
||||
<el-button size="small" @click="toTrial">预约演示</el-button> |
||||
<el-button type="primary" size="small" @click="toTrial">免费试用</el-button> |
||||
</div> |
||||
</div> |
||||
<img class="bg" src="@/assets/img/zxy/banner2.png" alt=""> |
||||
</div> |
||||
</el-carousel-item> |
||||
<el-carousel-item> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<img class="name" src="@/assets/img/zxy/name.png" alt=""> |
||||
<p class="des">覆盖金融科技、大数据管理与应用、数字经济、金融工程、电子商务、财务管理等大商科相关专业，助力高校复合型人才培养 </p> |
||||
<div class="btns"> |
||||
<el-button size="small" @click="toTrial">预约演示</el-button> |
||||
<el-button type="primary" size="small" @click="toTrial">免费试用</el-button> |
||||
</div> |
||||
</div> |
||||
<img class="bg" src="@/assets/img/zxy/banner3.png" alt=""> |
||||
</div> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</div> |
||||
<!-- 关于智信云 --> |
||||
<div class="about bg-white"> |
||||
<div class="inner"> |
||||
<h6 class="i-title wow fadeInUp" data-wow-delay="0.5s">关于智信云</h6> |
||||
<div class="des wow fadeInUp" data-wow-delay="0.7s">为院校客户提供真正有价值的产品与服务</div> |
||||
<img class="bg wow fadeInUp" data-wow-delay="1s" src="@/assets/img/zxy/about1.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<!-- 关于智信云平台 --> |
||||
<div class="intro"> |
||||
<img class="bg" src="@/assets/img/zxy/about4.png" alt=""> |
||||
<div class="inner"> |
||||
<div class="intro-pic"> |
||||
<div class="text"> |
||||
<h6 class="wow fadeInUp" data-wow-delay="0.5s">关于智信云平台</h6> |
||||
<p class="des wow fadeInUp" data-wow-delay="0.5s">依托智信云平台，推出“1+X+N”综合解决方案，即“一平台・跨专业・多学科”新商科综合解决方案，协同创新，助力卓越商科人才培养。</p> |
||||
<ul class="des-list wow fadeInUp" data-wow-delay="1s"> |
||||
<li>一平台：集教学练考赛于一体的辅助教学云平台</li> |
||||
<li>跨专业：金融学专业、金融工程专业、大数据管理与应用、统计学等专业</li> |
||||
<li>多学科：数学、计算机科学、管理学、经济学等多学科融合</li> |
||||
</ul> |
||||
</div> |
||||
<img src="@/assets/img/zxy/about2.png" alt="" class="wow fadeInDown" data-wow-delay="0.6s"> |
||||
</div> |
||||
<div class="text-center"> |
||||
<img src="@/assets/img/zxy/about3.png" alt="" class="wow fadeInDown" data-wow-delay="0.9s"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 产品展示 --> |
||||
<div class="product bg-white" 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"> |
||||
<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 bg-white"> |
||||
<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"> |
||||
<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 bg-white"> |
||||
<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="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/zxy/adv1.png" alt=""> |
||||
<h6>教学创新<br>引用各类案例采用项目化教学</h6> |
||||
<p class="text">大数据追踪每位老师的教学和每位学生的学习情况，进行统计分析并通过可视化图表展示，教学效果一目了然。</p> |
||||
</li> |
||||
<li class="wow fadeInRight" data-wow-delay="0.8s"> |
||||
<img src="@/assets/img/zxy/adv2.png" alt=""> |
||||
<h6>云端部署<br>实验教学资源“云”共享</h6> |
||||
<p class="text">随时随地，智信云平台无需安装部署，即可享受云上“实验室”和云上“课堂”，可满足不同学科，不同场景下的教学需求。</p> |
||||
</li> |
||||
<li class="wow fadeInUp" data-wow-delay="1.1s"> |
||||
<img src="@/assets/img/zxy/adv3.png" alt=""> |
||||
<h6>大数据分析统计<br>教学效果有“据”可依</h6> |
||||
<p class="text">大数据追踪每位老师的教学和每位学生的学习情况，进行统计分析并通过可视化图表展示，教学效果一目了然。</p> |
||||
</li> |
||||
<li class="wow fadeInUp" data-wow-delay="1.4s"> |
||||
<img src="@/assets/img/zxy/adv4.png" alt=""> |
||||
<h6>功能全面<br>打造“智”能化教学全场景</h6> |
||||
<p class="text">教、学、练、考以及大赛、资讯等功能模块，操作方便、智能快捷，将教学活动从课堂内拓展到课堂外，为师生打造智能化、多样化、个性化的“教”“学”全场景。</p> |
||||
</li> |
||||
</ul> |
||||
</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.png" 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 |
||||
}, |
||||
// 免费试用 |
||||
toTrial() { |
||||
window.open('https://www.wjx.top/vm/wFCPCFp.aspx') |
||||
}, |
||||
// 问卷调查 |
||||
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; |
||||
} |
||||
/deep/.el-carousel__container { |
||||
background: url(../../../assets/img/zxy/banner-bg.png) bottom left/auto no-repeat; |
||||
} |
||||
.banner { |
||||
background: linear-gradient(156deg, #D0E1FE 0%, #FFFFFF 100%); |
||||
.slide { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
max-width: 540px; |
||||
margin-right: 40px; |
||||
} |
||||
.name { |
||||
margin-bottom: 30px; |
||||
} |
||||
.des { |
||||
margin-bottom: 35px; |
||||
font-size: 18px; |
||||
line-height: 25px; |
||||
color: #1C3355; |
||||
} |
||||
.el-button { |
||||
border: 0; |
||||
border-radius: 6px; |
||||
} |
||||
.el-button + .el-button { |
||||
margin-left: 16px; |
||||
} |
||||
} |
||||
.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 { |
||||
position: relative; |
||||
background: linear-gradient(179deg, rgba(255,255,255,0) 0%, #FFFFFF 36%, rgba(255,255,255,0) 100%); |
||||
.bg { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
.inner { |
||||
padding-bottom: 146px; |
||||
} |
||||
.intro-pic { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 36px; |
||||
} |
||||
h6 { |
||||
font-size: 40px; |
||||
color: #0B1D30; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 16px; |
||||
color: #666; |
||||
line-height: 27px; |
||||
} |
||||
.text { |
||||
width: 518px; |
||||
} |
||||
.des-list { |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 5px 0; |
||||
font-size: 14px; |
||||
color: #031D32; |
||||
&:before { |
||||
content: ''; |
||||
width: 8px; |
||||
height: 8px; |
||||
margin-right: 7px; |
||||
background-color: #007EFF; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.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 { |
||||
text-align: center; |
||||
.des { |
||||
margin-bottom: 40px; |
||||
font-size: 22px; |
||||
color: #666; |
||||
} |
||||
} |
||||
.adv{ |
||||
position: relative; |
||||
background: #F3F6FA; |
||||
.inner { |
||||
padding: 108px 0 130px; |
||||
} |
||||
.en { |
||||
top: 120px; |
||||
} |
||||
.shape{ |
||||
position: absolute; |
||||
} |
||||
.shape1{ |
||||
top: 25px; |
||||
right: 10px; |
||||
} |
||||
.shape2{ |
||||
bottom: 30px; |
||||
left: 50px; |
||||
} |
||||
.shape3{ |
||||
bottom: 25px; |
||||
right: 50px; |
||||
} |
||||
.list{ |
||||
display: flex; |
||||
li{ |
||||
width: 25%; |
||||
padding: 38px 20px 62px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
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,784 @@ |
||||
<template> |
||||
<div class="wrap index"> |
||||
<img class="screen" src="@/assets/img/index/index0.png" alt="首页"> |
||||
<div class="banner"> |
||||
<el-carousel height="600px" :autoplay="false"> |
||||
<el-carousel-item> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<img class="name" src="@/assets/img/zxy/name.png" alt=""> |
||||
<p class="des">致力于帮助高校大商科类专业实现课程信息化、数字化和共建共享</p> |
||||
<div class="btns"> |
||||
<el-button size="small" @click="toTrial">预约演示</el-button> |
||||
<el-button type="primary" size="small" @click="toTrial">免费试用</el-button> |
||||
</div> |
||||
</div> |
||||
<img class="bg" src="@/assets/img/zxy/banner1.png" alt=""> |
||||
</div> |
||||
</el-carousel-item> |
||||
<el-carousel-item> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<img class="name" src="@/assets/img/zxy/name.png" alt=""> |
||||
<p class="des">集实践教学、课程学习、项目练习、考核管理、线上赛事为一体的教学辅助云平台 </p> |
||||
<div class="btns"> |
||||
<el-button size="small" @click="toTrial">预约演示</el-button> |
||||
<el-button type="primary" size="small" @click="toTrial">免费试用</el-button> |
||||
</div> |
||||
</div> |
||||
<img class="bg" src="@/assets/img/zxy/banner2.png" alt=""> |
||||
</div> |
||||
</el-carousel-item> |
||||
<el-carousel-item> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<img class="name" src="@/assets/img/zxy/name.png" alt=""> |
||||
<p class="des">覆盖金融科技、大数据管理与应用、数字经济、金融工程、电子商务、财务管理等大商科相关专业，助力高校复合型人才培养 </p> |
||||
<div class="btns"> |
||||
<el-button size="small" @click="toTrial">预约演示</el-button> |
||||
<el-button type="primary" size="small" @click="toTrial">免费试用</el-button> |
||||
</div> |
||||
</div> |
||||
<img class="bg" src="@/assets/img/zxy/banner3.png" alt=""> |
||||
</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/zxy/intro1.png" alt=""> |
||||
<p class="text">金融科技专业方向</p> |
||||
</li> |
||||
<li class="wow fadeInUp" :class="{active: active === 2}" data-wow-delay="0.2s" @click="toPart(2)"> |
||||
<img src="@/assets/img/zxy/intro2.png" alt=""> |
||||
<p class="text">大数据管理与应用专业方向</p> |
||||
</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=""> |
||||
<p class="text">数字经济专业方向</p> |
||||
</li> |
||||
</ul> |
||||
<div class="pic"> |
||||
<h6>金融科技专业方向</h6> |
||||
<p class="des">培养目标：金融科技专业旨在培养具有国际视野，具备互联网思维、用户思维、平台思维、创新思维等复合型思维和风险管理意识，掌握现代信息科技、数据技术、算法和智能技术等前沿技术，熟悉金融产品设计、金融产品定价、金融风险管理、金融监管知识等金融业务知识并能够应用的复合型、应用型、创新型、国际化金融人才。</p> |
||||
<img class="bg" src="@/assets/img/zxy/intro-bg1.png" alt=""> |
||||
<h6>实验课程体系</h6> |
||||
<ul class="des-list"> |
||||
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon1.png" alt=""> |
||||
金融 |
||||
</div> |
||||
<div class="flex"> |
||||
<ul class="detail"> |
||||
<li>商业银行经营与管理</li> |
||||
<li>保险业务模拟实验</li> |
||||
<li>经济金融建模实验</li> |
||||
<li>金融风险管理实验</li> |
||||
</ul> |
||||
<ul class="detail"> |
||||
<li>证券模拟交易</li> |
||||
<li>互联网金融业务实验</li> |
||||
<li>金融随机实验</li> |
||||
<li>供应链金融仿真实验</li> |
||||
</ul> |
||||
</div> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.8s"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon1.png" alt=""> |
||||
大数据 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>经济金融数据库</li> |
||||
<li>大数据采集实验</li> |
||||
<li>大数据分析教学</li> |
||||
<li>大数据可视化教学</li> |
||||
<li>金融大数据综合实验</li> |
||||
</ul> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="1.1s"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon2.png" alt=""> |
||||
区块链 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>区块链数字货币实验</li> |
||||
<li>区块链金融应用</li> |
||||
<li>区块链基础与应用课程开发</li> |
||||
</ul> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="1.5s" style="width: 250px;"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon3.png" alt=""> |
||||
人工智能 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>Python程序设计实验</li> |
||||
<li>智能投顾</li> |
||||
<li>量化投资实验</li> |
||||
<li>智能客服机器人</li> |
||||
<li>机器学习在金融中的应用课程</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="scroll scroll-bg"> |
||||
<h6 class="i-title">实验系统</h6> |
||||
<scroll class="scroll-wrap" :data="szjj" :class-option="{limitMoveNum: 2, direction: 2}"> |
||||
<ul class="scroll-list" ref="client"> |
||||
<li v-for="(item, i) in szjj" :key="i"> |
||||
<img :src="require('@/assets/img/zxy/szjj/icon' + (i + 1) +'.png')" alt=""> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="des">{{ item.des }}</p> |
||||
</li> |
||||
</ul> |
||||
</scroll> |
||||
</div> |
||||
<div class="card card-bg"> |
||||
<h6 class="i-title">实验环境</h6> |
||||
<ul class="card-list"> |
||||
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
||||
<img src="@/assets/img/zxy/card1.png" alt=""> |
||||
<h6>金融科技教学功能区</h6> |
||||
<p class="des">根据专业发展的方向可建设金融科技创新综合实验室、银行科技实验室、金融大数据实验室、智慧金融实验室、大数据风控实验室等。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.7s"> |
||||
<img src="@/assets/img/zxy/card2.png" alt=""> |
||||
<h6>金融科技体验区</h6> |
||||
<p class="des">配置人工智能+金融体验模块、大数据+金融体验模块、区块链金融应用体验模块。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.9s"> |
||||
<img src="@/assets/img/zxy/card3.png" alt=""> |
||||
<h6>模拟对抗实战功能区</h6> |
||||
<p class="des">可举办商业银行经营管理模拟对抗、数学建模、统计建模</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="1.1s"> |
||||
<img src="@/assets/img/zxy/card4.png" alt=""> |
||||
<h6>金融科技文化展区</h6> |
||||
<p class="des">根据专业发展的方向可建设金融科技创新综合实验室、银行科技实验室、金融大数据实验室、智慧金融实验室、大数据风控实验室等。</p> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="pic"> |
||||
<h6>大数据管理与应用专业方向</h6> |
||||
<p class="des">大数据管理与应用专业旨在培养具有管理学背景和良好的数据思维能力，具有扎实的经济学知识、系统的管理学基础，熟练运用现代信息技术，掌握面向互联网大数据环境的数据处理和分析方法、面向数据管理方向的管理科学专业知识，具有较强的大数据管理能力和技术应用能力，能够利用商务数据去定量化分析，并能进行智能化商业决策的“懂数据、懂技术、懂业务、懂管理”（DMTB）复合型、应用型高级专门人才。</p> |
||||
<img class="bg" src="@/assets/img/zxy/intro-bg2.png" alt=""> |
||||
<h6>实验课程体系</h6> |
||||
<ul class="des-list"> |
||||
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon4.png" alt=""> |
||||
懂数据 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>市场调研与分析实验</li> |
||||
<li>大数据采集实验</li> |
||||
<li>财经数据库</li> |
||||
<li>大数据导论</li> |
||||
<li>……</li> |
||||
</ul> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.7s"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon5.png" alt=""> |
||||
懂技术 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>Python程序设计</li> |
||||
<li>大数据采集实验</li> |
||||
<li>大数据分析教学</li> |
||||
<li>大数据可视化教学</li> |
||||
<li>金融大数据综合实验</li> |
||||
</ul> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.9s"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon6.png" alt=""> |
||||
懂业务 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>经济金融建模与算法</li> |
||||
<li>商科大数据综合实验</li> |
||||
<li>电子商务实务</li> |
||||
<li>……</li> |
||||
</ul> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="1.1s" style="width: 250px;"> |
||||
<div class="des-title"> |
||||
<img src="@/assets/img/zxy/icon7.png" alt=""> |
||||
懂管理 |
||||
</div> |
||||
<ul class="detail"> |
||||
<li>企业管理综合实验项目</li> |
||||
<li>管理预测与决策实验</li> |
||||
<li>采购管理实验</li> |
||||
<li>供应链管理实验</li> |
||||
<li>……</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="scroll scroll-bg"> |
||||
<h6 class="i-title">实验系统</h6> |
||||
<scroll class="scroll-wrap" :data="jrkj" :class-option="{limitMoveNum: 2, direction: 2}"> |
||||
<ul class="scroll-list" ref="client"> |
||||
<li v-for="(item, i) in jrkj" :key="i"> |
||||
<img :src="require('@/assets/img/zxy/jrkj/icon' + (i + 1) +'.png')" alt=""> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="des">{{ item.des }}</p> |
||||
</li> |
||||
</ul> |
||||
</scroll> |
||||
</div> |
||||
<div class="card card-bg"> |
||||
<h6 class="i-title">实验环境</h6> |
||||
<ul class="card-list"> |
||||
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
||||
<img src="@/assets/img/zxy/card5.png" alt=""> |
||||
<h6>大数据管理与应用实验教学功能区</h6> |
||||
<p class="des">根据专业发展的方向可建设大数据挖掘与分析实验室、金融大数据实验室、商科大数据实验室等。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.7s"> |
||||
<img src="@/assets/img/zxy/card6.png" alt=""> |
||||
<h6>大数据产业发展文化展示区</h6> |
||||
<p class="des">围绕大数据+行业为主题，采用数字化手段，以参与、体验、互动性的展品等进行文化展示。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.9s"> |
||||
<img src="@/assets/img/zxy/card7.png" alt=""> |
||||
<h6>大数据可视化大屏</h6> |
||||
<p class="des">配置大数据可视化大屏，大屏内容可设置为专业学生课程成果。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="1.1s"> |
||||
<img src="@/assets/img/zxy/card8.png" alt=""> |
||||
<h6>大数据校外实践实习基地</h6> |
||||
<p class="des">校企合作，共建大数据管理与应用校外实践实习基地和校内实践基地。</p> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="pic"> |
||||
<h6>数字经济专业方向</h6> |
||||
<p class="des">数字经济专业旨在培养具有良好的政治素养与道德修养，熟悉中国数字经济运行规律与改革实践，系统掌握经济学、统计学及计算机科学的基础理论与技术，掌握现代经济学的基本方法及数字技能，具备经济学思维方式和向数据科学、工学相关领域扩展渗透的能力，具备数字经济背景下管理运营数据分析与决策能力，以及产业数字化规划与建设能力的高素质复合型创新型应用人才。</p> |
||||
<img class="bg" src="@/assets/img/zxy/intro-bg3.png" alt=""> |
||||
<h6 style="margin-bottom: 0">实验课程体系</h6> |
||||
<div class="text-center"> |
||||
<img width="100%" src="@/assets/img/zxy/intro-bg4.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="scroll scroll-bg"> |
||||
<h6 class="i-title">实验系统</h6> |
||||
<scroll class="scroll-wrap" :data="dsj" :class-option="{limitMoveNum: 2, direction: 2}"> |
||||
<ul class="scroll-list" ref="client"> |
||||
<li v-for="(item, i) in dsj" :key="i"> |
||||
<img :src="require('@/assets/img/zxy/dsj/icon' + (i + 1) +'.png')" alt=""> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="des">{{ item.des }}</p> |
||||
</li> |
||||
</ul> |
||||
</scroll> |
||||
</div> |
||||
<div class="card card-bg"> |
||||
<h6 class="i-title">实验环境</h6> |
||||
<ul class="card-list"> |
||||
<li class="wow fadeInDown" data-wow-delay="0.5s"> |
||||
<img src="@/assets/img/zxy/card9.png" alt=""> |
||||
<h6>数字经济实验教学功能区</h6> |
||||
<p class="des">根据专业发展的方向可建设数字经济实验室、数字金融实验室、智慧农业经济实验室、数据挖掘与分析实验室等。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.6s"> |
||||
<img src="@/assets/img/zxy/card10.png" alt=""> |
||||
<h6>数字经济发展文化展示区</h6> |
||||
<p class="des">根据地方数字经济发展现状，采用数字化手段，以参与、体验、互动性的展品等进行文化展示。</p> |
||||
</li> |
||||
<li class="wow fadeInDown" data-wow-delay="0.7s"> |
||||
<img src="@/assets/img/zxy/card11.png" alt=""> |
||||
<h6>数字经济校外实践实习基地</h6> |
||||
<p class="des">校企合作，共建数字经济专业校外实践实习基地和校内实践基地。</p> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import WOW from 'wow.js' |
||||
import scroll from 'vue-seamless-scroll' |
||||
export default { |
||||
data() { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
active: '', |
||||
// 数字经济 |
||||
szjj: [ |
||||
{ |
||||
title: '商业银行经营与管理', |
||||
des: '虚拟银行机构，模拟行长、传统业务总监、金融市场总监、风险管理总监、财务部总监等，完成战略管理、资本管理、资产负债管理、风险管理、经济资本管理、财务报表、外部监管等经营任务。' |
||||
}, |
||||
{ |
||||
title: '商业银行综合柜面业务', |
||||
des: '模拟业务中的综合柜员、大堂经理，以及信贷经理等多个角色可以系统性地实操银行业务中的个人及公司的现金、非现金业务，结算业务、信贷业务等。' |
||||
}, |
||||
{ |
||||
title: '证券模拟交易', |
||||
des: '模拟交易行情为实时行情，与真实行情同步，模拟交易遵循真实交易规则；交易品种齐全，支持沪深A股、股指期货、商品期货、外汇。' |
||||
}, |
||||
{ |
||||
title: '保险综合业务', |
||||
des: '以保险产品、保险营销、保险承保、保险理赔各部分为基础，提供一个学生掌握保险业务相关技能的学习平台以及教师依据行业最新动态教学的教学平台' |
||||
}, |
||||
{ |
||||
title: '经济金融建模', |
||||
des: '本系统基于Python语言用于金融计算及股票、债券以及金融衍生工具的定价模型设计。' |
||||
}, |
||||
{ |
||||
title: '金融随机', |
||||
des: '本系统基于Python语言实践随机过程的基本概念、Poisson过程、更新过程、Markov链、Brown运动、鞅、数学模型、期权定价理论、随机过程等随机分析在金融领域中的应用项目' |
||||
}, |
||||
{ |
||||
title: '供应链金融', |
||||
des: '该系通为核心企业提供一站式互联网供应链金融综合服务解决方案，运用互联网技术将底层资产数据打通呈现给金融机构，实现产业链上下游资金融通，构建数字化产业链，实现金融产业数字化。' |
||||
}, |
||||
{ |
||||
title: '经济金融数据库', |
||||
des: '数据涵盖股票数据，期货数据，债券数据，期权数据，利率数据，公募数据和宏观数据，拥有超40年的历史数据，可为用户解读、预测、分析，模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。' |
||||
} |
||||
], |
||||
// 金融科技 |
||||
jrkj: [ |
||||
{ |
||||
title: 'Python程序设计', |
||||
des: '该系统可帮助学生掌握 Python基础语法，编程技巧和实战应用。采用项目式教学法，主要实验项目包含内置对象、运算符、表达式、关键字、Python序列结构、选择结构与循环结构、函数、面向对象程序设计、字符串、正则表达式、异常处理结构等。' |
||||
}, |
||||
{ |
||||
title: '大数据采集', |
||||
des: '该系统是一款帮助用户掌握运用Python进行网络爬虫开发的实验教学系统。系统涵盖了网络爬虫常见技能（request，Beautiful，Selenium，分布式爬虫，抓包的使用与分析，多线程与多进程等）的学习与应用' |
||||
}, |
||||
{ |
||||
title: '大数据清洗', |
||||
des: '数据清洗教学系统是一款帮助学生掌握运用python进行数据清洗的实验教学系统。实验项目包括：导入数据，处理缺失值，添加默认值，删除行列、创建哑变量、噪声值处理、替换、标准处理，线性颜色矩等20+个实验项目。' |
||||
}, |
||||
{ |
||||
title: '大数据分析', |
||||
des: '该系统帮助用户掌握如何运用python实现数据分析，实验项目包括：决策树算法、随机森林模型、特征工程、数据降维、逻辑回归、K-means 聚类、SVM模型、SVC预测、Boosting算法、XGBoost模型、朴素贝叶斯、TF-IDF算法、NLP文本分类算法等26+实验项目' |
||||
}, |
||||
{ |
||||
title: '大数据可视化', |
||||
des: '大数据可视化实验教学系统是一款帮助学生掌握通过python编程将数据进行可视化操作，从而更好地进行数据分析的实验教学系统。包括各类图形的绘制、三维图像等20+个实验项目' |
||||
}, |
||||
{ |
||||
title: '金融大数据综合', |
||||
des: '金融大数据综合实验教学系统是一款帮助学生掌握运用python实现金融大数据分析的实验教学系统。系统涵盖了从金融数据数据、清洗、挖掘、到可视化等全过程的操作实战' |
||||
}, |
||||
{ |
||||
title: '经济金融建模', |
||||
des: '本系统基于Python语言用于金融计算及股票、债券以及金融衍生工具的定价模型设计。' |
||||
}, |
||||
{ |
||||
title: '商科大数据综合', |
||||
des: '商科大数据综合实验教学系统是一款帮助学生掌握运用python实现电商行业、物流行业、旅游行业等商业大数据分析的实验教学系统。系统涵盖了从数据数据、清洗、挖掘、到可视化等全过程的操作实战' |
||||
}, |
||||
{ |
||||
title: '大数据采集', |
||||
des: '该系统是一款帮助用户掌握运用Python进行网络爬虫…' |
||||
}, |
||||
{ |
||||
title: '大数据分析', |
||||
des: '该系统帮助用户掌握如何运用python实现数据分析…' |
||||
}, |
||||
{ |
||||
title: '大数据可视化', |
||||
des: '大数据可视化实验教学系统是一款帮助学生掌握通过…' |
||||
}, |
||||
{ |
||||
title: '金融大数据综合', |
||||
des: '金融大数据综合实验教学系统是一款帮助学生掌握运…' |
||||
}, |
||||
{ |
||||
title: '区块链金融应用', |
||||
des: '以区块链在金融产业的真实解决方案为核心的创新实…' |
||||
}, |
||||
{ |
||||
title: 'Python程序设计', |
||||
des: '该系统可帮助学生掌握 Python基础语法，编程技…' |
||||
}, |
||||
{ |
||||
title: '量化投资策略', |
||||
des: '该系统可帮助学生掌握量化投资的思想和策略，并借…' |
||||
}, |
||||
{ |
||||
title: '金融风险管理', |
||||
des: '基于Python语言的金融大数据风控建模实验系统，结…' |
||||
} |
||||
], |
||||
// 大数据 |
||||
dsj: [ |
||||
{ |
||||
title: '数字经济仿真实验', |
||||
des: '通过筹码推演和角色扮演模拟宏观和微观经济经营过程，营造真实经济环境，让学员体会现实生活中的厂商、政府、消费者之间经济行为，集实战性、操作性、体验式于一体，能够体现出市场结构、宏观调控、厂商行为、经济周期与经济增长过程。' |
||||
}, |
||||
{ |
||||
title: 'Python程序设计', |
||||
des: '该系统可帮助学生掌握 Python基础语法，编程技巧和实战应用。采用项目式教学法，主要实验项目包含内置对象、运算符、表达式、关键字、Python序列结构、选择结构与循环结构、函数、面向对象程序设计、字符串、正则表达式、异常处理结构等。' |
||||
}, |
||||
{ |
||||
title: '经济金融建模', |
||||
des: '本系统基于Python语言用于金融计算及股票、债券以及金融衍生工具的定价模型设计。' |
||||
}, |
||||
{ |
||||
title: '大数据采集', |
||||
des: 'Python数据采集实验教学系统是一款帮助用户掌握运用Python进行网络爬虫开发的实验教学系统。系统涵盖了网络爬虫常见技能（request，Beautiful，Selenium，分布式爬虫，抓包的使用与分析，多线程与多进程等）的学习与应用' |
||||
}, |
||||
{ |
||||
title: '商科大数据', |
||||
des: '商科大数据综合实验教学系统是一款帮助学生掌握运用python实现电商行业、物流行业、旅游行业等商业大数据分析的实验教学系统。系统涵盖了从数据数据、清洗、挖掘、到可视化等全过程的操作实战' |
||||
}, |
||||
{ |
||||
title: '金融大数据', |
||||
des: '金融大数据综合实验教学系统是一款帮助学生掌握运用python实现金融大数据分析的实验教学系统。系统涵盖了从金融数据数据、清洗、挖掘、到可视化等全过程的操作实战' |
||||
}, |
||||
{ |
||||
title: '企业数字化运营仿真实验', |
||||
des: '以“情景学习理论”为基础，以数字经济时代的“智能生产制造企业”为模拟对象，应用企业ERP管理思维与数字化思维，通过应用多点触控技术、虚拟仿真技术、大数据可视化技术等多种技术实现对企业涵盖决策层、管理层、业务层三个层次以及战略管理、财务管理、生产管理、采购管理、研发管理、营销管理、团队建设等多个活动主题进行仿真模拟。' |
||||
}, |
||||
{ |
||||
title: '区块链应用仿真', |
||||
des: '该系统以区块链在金融产业的真实解决方案为核心的创新实验教学综合系统，实训涵盖了区块链基础、智能合约基础、区块链电子发票、区块链供应链金融、区块链跨境支付、区块链贸易融资、区块链保险、数字货币、区块链金融项目设计等实训' |
||||
} |
||||
], |
||||
} |
||||
}, |
||||
components: { |
||||
scroll |
||||
}, |
||||
mounted() { |
||||
new WOW().init() |
||||
}, |
||||
methods: { |
||||
toPart(i){ |
||||
this.active = i |
||||
document.querySelector(`#part${i}`).scrollIntoView() |
||||
}, |
||||
// 置顶 |
||||
topping() { |
||||
document.documentElement.scrollTop = 0 |
||||
document.body.scrollTop = 0 |
||||
}, |
||||
// 免费试用 |
||||
toTrial() { |
||||
window.open('https://www.wjx.top/vm/wFCPCFp.aspx') |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../../plugins/wow/animate.css); |
||||
.wrap{ |
||||
position: relative; |
||||
background-color: #F3F6FA; |
||||
.screen { |
||||
position: absolute; |
||||
top: -1000px; |
||||
} |
||||
/deep/.el-carousel__container { |
||||
background: url(../../../assets/img/zxy/banner-bg.png) bottom left/auto no-repeat; |
||||
} |
||||
.banner { |
||||
background: linear-gradient(156deg, #D0E1FE 0%, #FFFFFF 100%); |
||||
.slide { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
max-width: 540px; |
||||
margin-right: 40px; |
||||
} |
||||
.name { |
||||
margin-bottom: 30px; |
||||
} |
||||
.des { |
||||
margin-bottom: 35px; |
||||
font-size: 18px; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
line-height: 25px; |
||||
color: #1C3355; |
||||
} |
||||
.el-button { |
||||
border: 0; |
||||
border-radius: 6px; |
||||
} |
||||
.el-button + .el-button { |
||||
margin-left: 16px; |
||||
} |
||||
} |
||||
.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: 77px; |
||||
left: 50%; |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 28px; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
color: #E5EBF1; |
||||
transform: translate(-50%); |
||||
} |
||||
.intro{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
padding: 45px 0 32px; |
||||
background-color: #fff; |
||||
li{ |
||||
display: inline-flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
transition: .3s; |
||||
&.active{ |
||||
.text { |
||||
color: #007EFF; |
||||
} |
||||
} |
||||
&:hover{ |
||||
margin-top: -15px; |
||||
.text { |
||||
color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
img{ |
||||
width: 50px; |
||||
margin-right: 15px; |
||||
} |
||||
.text { |
||||
font-size: 18px; |
||||
color: #0B1D30; |
||||
transition: .5s; |
||||
} |
||||
} |
||||
.none{ |
||||
padding: 50px 0; |
||||
text-align: center; |
||||
img{ |
||||
width: 324px; |
||||
margin-bottom: 42px; |
||||
} |
||||
.text{ |
||||
font-size: 12px; |
||||
color: #333; |
||||
} |
||||
} |
||||
.pic { |
||||
position: relative; |
||||
width: 1200px; |
||||
padding: 64px 48px; |
||||
margin: 60px auto; |
||||
background: url(../../../assets/img/zxy/intro-bg.png) no-repeat; |
||||
& > h6 { |
||||
margin-bottom: 30px; |
||||
font-size: 36px; |
||||
color: #fff; |
||||
line-height: 50px; |
||||
} |
||||
.des { |
||||
width: 658px; |
||||
margin-bottom: 30px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
line-height: 30px; |
||||
} |
||||
.bg { |
||||
position: absolute; |
||||
top: -20px; |
||||
right: 23px; |
||||
} |
||||
.des-list { |
||||
display: flex; |
||||
justify-content: center; |
||||
& > li { |
||||
min-width: 225px; |
||||
padding: 7px 25px 26px 7px; |
||||
margin-right: 16px; |
||||
border-radius: 16px; |
||||
background-color: #fff; |
||||
box-shadow: 0px 2px 19px 0px rgba(49,106,209,0.16); |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.des-title { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 20px; |
||||
color: #007EFF; |
||||
img { |
||||
margin-right: 3px; |
||||
} |
||||
} |
||||
.detail { |
||||
margin: 10px 0 0 24px; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 14px; |
||||
color: #0B1D30; |
||||
line-height: 25px; |
||||
white-space: nowrap; |
||||
&::before { |
||||
content: ''; |
||||
width: 2px; |
||||
height: 2px; |
||||
margin-right: 5px; |
||||
background-color: #333; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.scroll { |
||||
padding-bottom: 80px; |
||||
} |
||||
.scroll-bg { |
||||
background: url(../../../assets/img/zxy/scroll-bg.png) (0 40px)/100% 100% no-repeat; |
||||
} |
||||
.scroll-wrap { |
||||
width: 100%; |
||||
margin: 70px 0 30px; |
||||
overflow: hidden; |
||||
} |
||||
.scroll-list { |
||||
display: flex; |
||||
&::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
li { |
||||
width: 276px; |
||||
height: 346px; |
||||
text-align: center; |
||||
&:hover { |
||||
padding: 10px 40px; |
||||
text-align: left; |
||||
border-radius: 10px; |
||||
background: url(../../../assets/img/zxy/scroll-hover.png) 0 0/100% 100% no-repeat; |
||||
img { |
||||
display: none; |
||||
} |
||||
h6 { |
||||
font-size: 18px; |
||||
color: #fff; |
||||
&:after { |
||||
content: ''; |
||||
display: block; |
||||
width: 120px; |
||||
height: 2px; |
||||
margin-top: 18px; |
||||
background-color: rgba(255, 255, 255, 0.19); |
||||
} |
||||
} |
||||
.des { |
||||
width: auto; |
||||
color: #fff; |
||||
line-height: 28px; |
||||
} |
||||
} |
||||
} |
||||
h6 { |
||||
margin: 30px 0 15px; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
.des { |
||||
width: 180px; |
||||
text-align: left; |
||||
margin: 0 auto; |
||||
font-size: 14px; |
||||
color: #666; |
||||
} |
||||
} |
||||
.card { |
||||
margin-bottom: 100px; |
||||
.card-list { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin-top: 70px; |
||||
} |
||||
li { |
||||
width: 320px; |
||||
height: 356px; |
||||
padding: 7px; |
||||
margin-right: 14px; |
||||
background-color: #fff; |
||||
box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08); |
||||
border-radius: 10px; |
||||
h6 { |
||||
margin: 24px 0 16px; |
||||
font-size: 18px; |
||||
text-align: center; |
||||
color: #0B1D30; |
||||
transition: .5s; |
||||
} |
||||
&:hover { |
||||
img { |
||||
transform: scale(1.05); |
||||
} |
||||
h6 { |
||||
margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
img { |
||||
transition: .5s; |
||||
} |
||||
.des { |
||||
width: 254px; |
||||
margin: 0 auto; |
||||
font-size: 14px; |
||||
color: #757F92; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
.card-bg { |
||||
background: #fff url(../../../assets/img/zxy/card-bg.png) (0 40px)/100% 100% no-repeat; |
||||
} |
||||
@keyframes rotate { |
||||
0% { |
||||
transform: rotate(0); |
||||
} |
||||
50% { |
||||
transform: rotate(180deg); |
||||
} |
||||
100% { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
import BasicLayout from '@/layouts/home'; |
||||
|
||||
export default { |
||||
path: '/product', |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
path: `/product`, |
||||
component: () => import('@/pages/product/list'), |
||||
meta: { title: '产品服务' } |
||||
}, |
||||
] |
||||
}; |
||||