40 changed files with 3310 additions and 2799 deletions
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 419 KiB |
|
After Width: | Height: | Size: 465 KiB |
|
After Width: | Height: | Size: 478 KiB |
|
After Width: | Height: | Size: 437 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 273 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
@ -0,0 +1,726 @@
|
||||
<template> |
||||
<downMenu /> |
||||
|
||||
<div class="banner"> |
||||
<div class="w1200 flex-3"> |
||||
<div class="flex-1"> |
||||
<div class="slogan flex-2"> |
||||
<h2>阶梯式系统学习 快准稳掌握所需知识</h2> |
||||
<h5>结合数十年人才培养经验及应用观察，根据职业发展方向为您提供<br />科学高效的学习路径</h5> |
||||
</div> |
||||
</div> |
||||
<img class="bimg" src="@/assets/studypath/finedatalink/cahhua.png" alt="banner" /> |
||||
</div> |
||||
</div> |
||||
|
||||
<pathMenu /> |
||||
|
||||
<div class="w1200 pdb50"> |
||||
<div class="boxtil flex-1"> |
||||
<div class="yinhao"></div> |
||||
<div class="txt">学习路线图</div> |
||||
</div> |
||||
|
||||
<div class="subbox1" style="display: flex;" id="knowledgeStructure"> |
||||
<div class="bg m_bg_finedatalink"> |
||||
<div class="pulse"></div> |
||||
<div class="pulse1"></div> |
||||
</div> |
||||
<div class="info"> |
||||
<div class="txtbox1"> |
||||
<div class="til f18"> |
||||
<div>核心应用知识</div> |
||||
<div style="font-size: 14px;color: #617288; margin: 6px 0 16px;" class="m_til2">FineDataLink产品主要功能的使用技巧和操作方式。</div> |
||||
</div> |
||||
<ul class="tagbox"> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-7.html?source=0&from=studypath" target="_blank">数据同步</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-10.html?source=0&from=studypath" target="_blank">数据转换</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-117.html?source=0&from=studypath" target="_blank">Shell 脚本</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-15.html?source=0&from=studypath" target="_blank">SQL脚本</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-75.html?source=0&from=studypath" target="_blank">参数功能</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-19.html?source=0&from=studypath" target="_blank">条件分支</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-67.html?source=0&from=studypath" target="_blank">循环容器</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-32.html?source=0&from=studypath" target="_blank">消息通知</a> |
||||
<a class="itemlk" href="hhttps://help.fanruan.com/finedatalink/doc-view-121.html?source=0&from=studypath" target="_blank">数据更新</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-249.html?source=0&from=studypath" target="_blank">配置管道任务</a> |
||||
</ul> |
||||
</div> |
||||
<div class="txtbox1"> |
||||
<div class="til f18" style="margin-top: 32px;"> |
||||
<div>其他必备知识</div> |
||||
<div style="font-size: 14px;color: #617288; margin: 6px 0 6px;" class="m_til2">FineDataLink其他必备知识，推荐运维人员了解掌握。</div> |
||||
</div> |
||||
<ul class="tagbox" style="margin-top: 1px"> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-43.html?source=0&from=studypath" target="_blank">工程部署</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-97.html#6c4a0227fd8f9882?source=0&from=studypath" target="_blank" style="width: 130px;">实时管道环境准备</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-22.html?source=0&from=studypath" target="_blank">定时调度配置</a> |
||||
<a class="itemlk" href="https://help.fanruan.com/finedatalink/doc-view-23.html?source=0&from=studypath" target="_blank">任务运维</a> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 学习路径一 --> |
||||
<div class="area-bg pdb50 m_not_pdb"> |
||||
<div class="w1200"> |
||||
<div class="boxtil flex-1"> |
||||
<div class="yinhao"></div> |
||||
<div class="txt">FineDatalLink学习路径</div> |
||||
</div> |
||||
<div class="f24 col849 pt10">系统性自学 少走弯路</div> |
||||
|
||||
<el-scrollbar always> |
||||
<div class="subbox2"> |
||||
<!-- box1 --> |
||||
<div class="itembox"> |
||||
<img class="stimg" src="@/assets/studypath/finedatalink/st1.png" /> |
||||
<i class="icojt"><img class="ijtimg" src="@/assets/studypath/finedatalink/jt.png"/></i> |
||||
<div class="infobox"> |
||||
<div class="til">初识FineDataLink</div> |
||||
<a class="bginfo flex-3" href="https://edu.fanruan.com/video/play/3253" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">开始学习</div> |
||||
<div class="f12 col617">预计时长 3 分钟</div> |
||||
</div> |
||||
<i class="iconfont icon-bofang2 f20 colb3c myicon"></i> |
||||
</a> |
||||
<div class="til" style="margin-top:24px"> |
||||
进入快速入门学习 |
||||
</div> |
||||
<a class="bginfo flex-3" href="https://edu.fanruan.com/video/play/3271" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">第一个定时任务开发</div> |
||||
<div class="f12 col617">预计时长 8 分钟</div> |
||||
</div> |
||||
<i class="iconfont icon-bofang2 f20 colb3c myicon"></i> |
||||
</a> |
||||
<a class="bginfo flex-3" href="https://edu.fanruan.com/video/play/4645" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">第一个管道任务开发</div> |
||||
<div class="f12 col617">预计时长 8 分钟</div> |
||||
</div> |
||||
<i class="iconfont icon-bofang2 f20 colb3c myicon"></i> |
||||
</a> |
||||
|
||||
<div class="til" style="margin-top:24px"> |
||||
完成入门能力测试 |
||||
</div> |
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://t6ixa9nyl6.jiandaoyun.com/f/640e969ecc02880008720afd" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">开始测试</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<div class="f14" style="padding: 20px 0 10px; line-height: 22px;"> |
||||
完成快速入门学习即可抽取 |
||||
</div> |
||||
<div class="flex-6" style="line-height: 24px;"> |
||||
<div class="flex-1"> |
||||
<span class="f14 flex-1"> |
||||
<i class="iconfont icon-book colb3c f20"></i> |
||||
<span class="col333" style="margin-left: 10px;">全套学习资料</span> |
||||
</span> |
||||
<span class="f12 col7e8" style="padding-left: 10px">价值200元</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- box2--> |
||||
<div class="itembox"> |
||||
<img class="stimg" src="@/assets/studypath/finedatalink/st2.png" /> |
||||
<i class="icojt"><img class="ijtimg" src="@/assets/studypath/finedatalink/jt.png"/></i> |
||||
<div class="infobox"> |
||||
<div class="til">观看基础学习视频</div> |
||||
|
||||
<a class="bginfo flex-3" href="https://edu.fanruan.com/video/308" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">高效数据开发</div> |
||||
<div class="f12 col617">预计时长 85 分钟</div> |
||||
</div> |
||||
<i class="iconfont icon-bofang2 f20 colb3c myicon"></i> |
||||
</a> |
||||
<a class="bginfo flex-3" href="https://edu.fanruan.com/video/385" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">实时数据管道</div> |
||||
<div class="f12 col617">预计时长 17 分钟</div> |
||||
</div> |
||||
<i class="iconfont icon-bofang2 f20 colb3c myicon"></i> |
||||
</a> |
||||
<a class="bginfo flex-3" href="https://edu.fanruan.com/video/477" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">敏捷任务运维</div> |
||||
<div class="f12 col617">预计时长 8 分钟</div> |
||||
</div> |
||||
<i class="iconfont icon-bofang2 f20 colb3c myicon"></i> |
||||
</a> |
||||
|
||||
<div class="til" style="marginTop:28px"> |
||||
完成基础能力测试 |
||||
</div> |
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://t6ixa9nyl6.jiandaoyun.com/f/640e96d50a337600095bfc0f" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">开始测试</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<div class="f14 col333" style="margin-top:30px"> |
||||
如果遇到问题可通过以下方式解决： |
||||
</div> |
||||
<div class="jiejue flex-6"> |
||||
<a class="flex-5 col617" href="https://help.fanruan.com/finedatalink/" target="_blank"> |
||||
<i class="iconfont icon-icon_icon-35 f20"></i> |
||||
<span class="f12">查阅文档</span> |
||||
</a> |
||||
<a class="flex-5 col617" href="https://edu.fanruan.com/video?class1=37&class2=0" target="_blank"> |
||||
<i class="iconfont icon-icon_icon-60 f20"></i> |
||||
<span class="f12">观看教程</span> |
||||
</a> |
||||
<a class="flex-5 col617" href="https://bbs.fanruan.com/wenda/37" target="_blank"> |
||||
<i class="iconfont icon-icon_icon-51 f20"></i> |
||||
<span class="f12">社区提问</span> |
||||
</a> |
||||
<a class="flex-5 col617" href="https://service.fanruan.com/" target="_blank"> |
||||
<i class="iconfont icon-huihua f20"></i> |
||||
<span class="f12">技术咨询</span> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- box3 --> |
||||
<div class="itembox"> |
||||
<img class="stimg" src="@/assets/studypath/finedatalink/st3.png" /> |
||||
<div class="infobox"> |
||||
<div class="til"> |
||||
进入最佳实践文档学习 |
||||
</div> |
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://help.fanruan.com/finedatalink/doc-view-127.html?source=0&from=studypath" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">API专题</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://help.fanruan.com/finedatalink/doc-view-121.html?source=0&from=studypath" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">数据更新专题</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://help.fanruan.com/finedatalink/doc-view-96.html?source=0&from=studypath" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">数据仓库场景</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://help.fanruan.com/finedatalink/doc-view-77.html?source=0&from=studypath" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">帆软产品组合应用</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://help.fanruan.com/finedatalink/doc-view-136.html?source=0&from=studypath" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">查看更多最佳实践</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
|
||||
<div class="til" style="margin-top:24px"> |
||||
加入FDL社区生态共创 |
||||
</div> |
||||
<div class="col617 f14" style="margin-top: 18px;">提升个人综合能力，嬴取丰厚共创奖励</div> |
||||
<a class="bginfo new_bginfo flex-3 base_arrow_right_hover" href="https://bbs.fanruan.com/topic/226-1.html" target="_blank"> |
||||
<div style="line-height: 25px"> |
||||
<div class="f14 col008">进入FineDataLink社区</div> |
||||
</div> |
||||
<i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
|
||||
<!-- <div style="display:float;width: 100%;height:80px;overflow: hidden;margin:20px 0;" class="m-dn" v-if="is_ad"> |
||||
<a :href="ad_clickurl" target="_blank"> |
||||
<img :src="ad_imgurl" alt="FR学习路径banner" /> |
||||
</a> |
||||
</div> --> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="area-bg" style="height: 50px; margin-bottom: -40px;"></div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.subbox4 { |
||||
width: 590px; |
||||
} |
||||
|
||||
.subbox3 { |
||||
height: 260px; |
||||
margin-top: 40px; |
||||
border: 1px solid #ceddf2; |
||||
border-radius: 4px; |
||||
|
||||
.infobox { |
||||
margin: 34px 34px 0 50px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.icoxbox { |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.txt { |
||||
width: 164px; |
||||
font-size: 14px; |
||||
margin-left: 12px; |
||||
color: #617288; |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.icobg { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
width: 32px; |
||||
height: 32px; |
||||
border-radius: 100px; |
||||
background-color: #f2f6fe; |
||||
|
||||
i { |
||||
color: #0082fc; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.carbox { |
||||
width: 440px; |
||||
height: 280px; |
||||
margin-top: -16px; |
||||
margin-left: -1px; |
||||
|
||||
.imgbox { |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.bef { |
||||
width: 100%; |
||||
position: relative; |
||||
|
||||
&::before { |
||||
content: ""; |
||||
position: absolute; |
||||
width: 420px; |
||||
height: 10px; |
||||
bottom: -10px; |
||||
margin-left: 10px; |
||||
background-color: #d9f1ff; |
||||
border-radius: 0 0 8px 8px; |
||||
} |
||||
} |
||||
|
||||
.carimg { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.newbtn3 { |
||||
width: 47%; |
||||
padding: 6px 0; |
||||
} |
||||
|
||||
.wayask:hover { |
||||
i, |
||||
span { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.jiejue { |
||||
height: 80px; |
||||
line-height: 24px; |
||||
|
||||
i { |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
a:hover { |
||||
i { |
||||
font-size: 26px; |
||||
margin-bottom: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.subbox2 { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: row; |
||||
margin-top: 30px; |
||||
|
||||
.itembox { |
||||
width: 356px; |
||||
height: 725px; |
||||
position: relative; |
||||
background-color: #fff; |
||||
border-radius: 6px; |
||||
transition: all 0.3s; |
||||
|
||||
.stimg { |
||||
width: 100%; |
||||
border-radius: 6px; |
||||
overflow: hidden; |
||||
transition: all 0.3s; |
||||
} |
||||
|
||||
&:hover { |
||||
box-shadow: 0px 1px 18px 0px #ced7f1; |
||||
|
||||
.stimg { |
||||
margin-top: -10px; |
||||
} |
||||
} |
||||
|
||||
.icojt { |
||||
position: absolute; |
||||
width: 50px; |
||||
height: 36px; |
||||
top: 40px; |
||||
right: -44px; |
||||
|
||||
.ijtimg { |
||||
height: 36px; |
||||
} |
||||
} |
||||
|
||||
.infobox { |
||||
width: 100%; |
||||
padding: 30px; |
||||
|
||||
.til { |
||||
font-size: 16px; |
||||
position: relative; |
||||
|
||||
&::before { |
||||
content: ""; |
||||
position: absolute; |
||||
margin-left: -12px; |
||||
width: 3px; |
||||
height: 16px; |
||||
top: 4px; |
||||
background-color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.bginfo { |
||||
align-items: center; |
||||
background-color: #f2f6fe; |
||||
width: 300px; |
||||
height: 66px; |
||||
padding: 16px; |
||||
border-radius: 5px; |
||||
margin-top: 16px; |
||||
|
||||
&.new_bginfo { |
||||
height: 50px; |
||||
} |
||||
|
||||
.myicon { |
||||
transition: all 0.3s; |
||||
} |
||||
|
||||
&:hover { |
||||
.myicon { |
||||
font-size: 24px; |
||||
color: #0082fc; |
||||
margin-right: -3px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bginfo1 { |
||||
align-items: center; |
||||
background-color: #f2f6fe; |
||||
width: 296px; |
||||
height: 44px; |
||||
padding: 16px; |
||||
border-radius: 5px; |
||||
margin-top: 16px; |
||||
|
||||
.myicon { |
||||
transition: all 0.3s; |
||||
} |
||||
|
||||
&:hover { |
||||
.myicon { |
||||
font-size: 24px; |
||||
color: #0082fc; |
||||
margin-right: -3px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.area-bg { |
||||
background-color: #f3f8ff; |
||||
} |
||||
|
||||
.subbox1 { |
||||
border: 1px solid #ceddf2; |
||||
border-radius: 4px; |
||||
padding: 40px 80px; |
||||
margin-top: 24px; |
||||
|
||||
.bg { |
||||
width: 340px; |
||||
height: 230px; |
||||
margin-top: 8px; |
||||
margin-right: 20px; |
||||
background: url("~@/assets/studypath/finedatalink/hexin.png") no-repeat; |
||||
background-size: auto 230px; |
||||
image-rendering: -webkit-optimize-contrast; |
||||
position: relative; |
||||
} |
||||
|
||||
/* 动画向外扩散变大的圆圈 */ |
||||
.pulse { |
||||
position: absolute; |
||||
width: 380px; |
||||
height: 380px; |
||||
left: -74px; |
||||
top: -74px; |
||||
border: 1px solid #0082fc; |
||||
-webkit-border-radius: 50%; |
||||
-moz-border-radius: 50%; |
||||
border-radius: 50%; |
||||
z-index: 1; |
||||
opacity: 0; |
||||
-webkit-animation: warn 5s ease-out; |
||||
-moz-animation: warn 5s ease-out; |
||||
animation: warn 5s ease-out; |
||||
-webkit-animation-iteration-count: infinite; |
||||
-moz-animation-iteration-count: infinite; |
||||
animation-iteration-count: infinite; |
||||
box-shadow: 1px 1px 80px #0082fc; |
||||
} |
||||
|
||||
.pulse1 { |
||||
position: absolute; |
||||
width: 380px; |
||||
height: 380px; |
||||
left: -74px; |
||||
top: -74px; |
||||
border: 1px solid #0082fc; |
||||
-webkit-border-radius: 50%; |
||||
-moz-border-radius: 50%; |
||||
border-radius: 50%; |
||||
z-index: 1; |
||||
opacity: 0; |
||||
-webkit-animation: warn1 5s ease-out; |
||||
-moz-animation: warn1 5s ease-out; |
||||
animation: warn1 5s ease-out; |
||||
-webkit-animation-iteration-count: infinite; |
||||
-moz-animation-iteration-count: infinite; |
||||
animation-iteration-count: infinite; |
||||
box-shadow: 1px 1px 80px #0082fc; |
||||
} |
||||
|
||||
@keyframes warn { |
||||
0% { |
||||
transform: scale(0.3); |
||||
-webkit-transform: scale(0.3); |
||||
opacity: 0; |
||||
} |
||||
|
||||
55% { |
||||
transform: scale(0.3); |
||||
-webkit-transform: scale(0.3); |
||||
opacity: 0.2; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
-webkit-transform: scale(0.8); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes warn1 { |
||||
0% { |
||||
transform: scale(0.3); |
||||
-webkit-transform: scale(0.3); |
||||
opacity: 0; |
||||
} |
||||
|
||||
70% { |
||||
transform: scale(0.3); |
||||
-webkit-transform: scale(0.3); |
||||
opacity: 0.2; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
-webkit-transform: scale(0.8); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
.info { |
||||
.info { |
||||
padding: 10px 0 10px; |
||||
} |
||||
|
||||
.tagbox { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 650px; |
||||
margin-top: -10px; |
||||
|
||||
.itemlk { |
||||
width: 100px; |
||||
height: 24px; |
||||
background-color: #eef3fa; |
||||
border-radius: 50px; |
||||
text-align: center; |
||||
padding: 4px 0; |
||||
font-size: 12px; |
||||
color: #617288; |
||||
margin: 12px 14px 0 0; |
||||
|
||||
&:hover { |
||||
background-color: #0082fc; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pdb50 { |
||||
padding: 50px 0 60px; |
||||
} |
||||
|
||||
.boxtil { |
||||
.yinhao { |
||||
width: 36px; |
||||
height: 26px; |
||||
background: url("~@/assets/studypath/finedatalink/yinhao.png") no-repeat; |
||||
background-size: auto 26px; |
||||
margin-top: 4px; |
||||
margin-right: 18px; |
||||
margin-left: -50px; |
||||
} |
||||
|
||||
.txt { |
||||
font-size: 32px; |
||||
color: #333; |
||||
} |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 210px; |
||||
background-color: #2d85ff; |
||||
|
||||
.bimg { |
||||
height: 210px; |
||||
} |
||||
|
||||
.slogan { |
||||
width: 580px; |
||||
color: #fff; |
||||
|
||||
h2 { |
||||
font-size: 32px; |
||||
padding-bottom: 14px; |
||||
} |
||||
|
||||
h5 { |
||||
line-height: 28px; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
<script> |
||||
import { reactive, toRefs } from "vue"; |
||||
// import { studentCount } from "@/api/guide"; |
||||
// import { getCourseNum } from "@/api/study"; |
||||
// import { adurl } from "@/api/ad"; |
||||
import downMenu from "@/views/studypath/downMenu"; |
||||
import pathMenu from "@/views/studypath/pathMenu"; |
||||
export default { |
||||
name: "finedatalink", |
||||
components: { |
||||
downMenu, |
||||
pathMenu, |
||||
}, |
||||
setup() { |
||||
const state = reactive({ |
||||
carData: [ |
||||
{ |
||||
img: require("@/assets/studypath/finedatalink/img1.png"), |
||||
}, |
||||
{ |
||||
img: require("@/assets/studypath/finedatalink/img2.png"), |
||||
}, |
||||
{ |
||||
img: require("@/assets/studypath/finedatalink/img3.png"), |
||||
}, |
||||
{ |
||||
img: require("@/assets/studypath/finedatalink/img4.png"), |
||||
}, |
||||
], |
||||
student_count: 0, |
||||
people_count: 0, |
||||
start_day: "", |
||||
is_showclass: true, |
||||
is_ad: false, |
||||
ad_imgurl: "", |
||||
ad_clickurl: "", |
||||
cate_default: 0, |
||||
cate_list: [], |
||||
}); |
||||
|
||||
// 获取广告链接 |
||||
// const adgetNode = async () => { |
||||
// const res = await adurl(30); |
||||
// if (res.code === 200) { |
||||
// if (res.data.img_url != null) { |
||||
// state.ad_imgurl = res.data.img_url; |
||||
// state.ad_clickurl = res.data.click_url; |
||||
// state.is_ad = true; |
||||
// } |
||||
// } |
||||
// }; |
||||
// adgetNode(); |
||||
|
||||
const scopeTo = () => { |
||||
document.getElementById("knowledgeStructure").scrollIntoView(); |
||||
}; |
||||
|
||||
return { |
||||
...toRefs(state), |
||||
scopeTo, |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,151 @@
|
||||
<template> |
||||
<div class="navbox"> |
||||
<div class="w1200"> |
||||
<ul class="flex-6"> |
||||
<router-link class="item" to="/studypath/finereport"> |
||||
<span class="nav-1">报表开发工程师</span> |
||||
</router-link> |
||||
<router-link class="item" to="/studypath/finebi"> |
||||
<span class="nav-2">BI分析师</span> |
||||
</router-link> |
||||
<router-link class="item" to="/studypath/finebiAdmin"> |
||||
<span class="nav-2">FineBI管理员</span> |
||||
</router-link> |
||||
<router-link class="item-jdy" to="/studypath/jiandaoyun"> |
||||
<span class="nav-3">零代码开发工程师</span> |
||||
</router-link> |
||||
<router-link class="item" to="/studypath/finedatalink"> |
||||
<span class="nav-4">数据开发工程师</span> |
||||
</router-link> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
/* .right_hover { |
||||
color: #b3c1d3; |
||||
} |
||||
.base_arrow_right_hover:hover .right_hover { |
||||
color: #0082fc !important; |
||||
} */ |
||||
.navbox { |
||||
height: 110px; |
||||
border-bottom: 1px solid #ceddf2; |
||||
|
||||
ul { |
||||
width: 860px; |
||||
margin: 0 auto; |
||||
|
||||
.item { |
||||
width: 280px; |
||||
height: 110px; |
||||
position: relative; |
||||
cursor: pointer; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
&.active, |
||||
&:hover { |
||||
::before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0px; |
||||
margin-left: -36px; |
||||
width: 72px; |
||||
height: 3px; |
||||
background-color: #0082fc; |
||||
} |
||||
|
||||
span { |
||||
color: #0082fc; |
||||
} |
||||
|
||||
.nav-1 { |
||||
background: url("~@/assets/studypath/public/logo1.png") center 6px no-repeat; |
||||
background-size: 36px auto; |
||||
} |
||||
|
||||
.nav-2 { |
||||
background: url("~@/assets/studypath/public/logo2.png") center 3px no-repeat; |
||||
background-size: 40px auto; |
||||
} |
||||
.nav-4 { |
||||
background: url("~@/assets/studypath/public/logo4.png") center 6px no-repeat; |
||||
background-size: 42px auto; |
||||
} |
||||
} |
||||
|
||||
span { |
||||
font-size: 18px; |
||||
display: inline-block; |
||||
padding-top: 52px; |
||||
color: #8496ab; |
||||
} |
||||
|
||||
.nav-1 { |
||||
background: url("~@/assets/studypath/public/logo1-1.png") center 6px no-repeat; |
||||
background-size: 36px auto; |
||||
} |
||||
|
||||
.nav-2 { |
||||
background: url("~@/assets/studypath/public/logo2-1.png") center 3px no-repeat; |
||||
background-size: 40px auto; |
||||
} |
||||
.nav-4 { |
||||
background: url("~@/assets/studypath/public/logo4-1.png") center 6px no-repeat; |
||||
background-size: 42px auto; |
||||
} |
||||
} |
||||
|
||||
.item-jdy { |
||||
width: 280px; |
||||
height: 110px; |
||||
position: relative; |
||||
cursor: pointer; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
&.active, |
||||
&:hover { |
||||
::before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0px; |
||||
margin-left: -36px; |
||||
width: 72px; |
||||
height: 3px; |
||||
background-color: #0db3a6; |
||||
} |
||||
|
||||
span { |
||||
color: #0db3a6; |
||||
} |
||||
|
||||
.nav-3 { |
||||
background: url("~@/assets/studypath/jiandaoyun/logo3.png") center 10px no-repeat; |
||||
background-size: 42px auto; |
||||
} |
||||
} |
||||
|
||||
span { |
||||
font-size: 18px; |
||||
display: inline-block; |
||||
padding-top: 52px; |
||||
color: #8496ab; |
||||
} |
||||
|
||||
.nav-3 { |
||||
background: url("~@/assets/studypath/jiandaoyun/logo3-1.png") center 10px no-repeat; |
||||
background-size: 42px auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue