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