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 |
@ -1,303 +1,317 @@
|
||||
@media screen and (min-width: 1200px) { |
||||
.el-scrollbar, |
||||
.el-scrollbar__wrap { |
||||
overflow: visible !important; |
||||
} |
||||
.el-scrollbar__thumb { |
||||
display: none !important; |
||||
} |
||||
.el-scrollbar, |
||||
.el-scrollbar__wrap { |
||||
overflow: visible !important; |
||||
} |
||||
.el-scrollbar__thumb { |
||||
display: none !important; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 1200px) { |
||||
/* 下拉菜单 */ |
||||
.van-dropdown-menu__bar { |
||||
box-shadow: none !important; |
||||
border-bottom: 1px solid #eaeef3; |
||||
} |
||||
.newvan_cate_com { |
||||
font-size: 16px; |
||||
} |
||||
.van-dropdown-item__option .van-icon { |
||||
margin: 4px 6px 0 0; |
||||
} |
||||
.van-dropdown-menu__title:after { |
||||
position: absolute; |
||||
top: 50%; |
||||
right: -9px; |
||||
margin-top: -7px; |
||||
border: 4px solid; |
||||
border-color: transparent transparent #b3c1d3 #b3c1d3; |
||||
} |
||||
.van-dropdown-menu__title--down:after { |
||||
margin-top: -1px; |
||||
transform: rotate(135deg); |
||||
border-color: transparent transparent #0082fc #0082fc; |
||||
} |
||||
.cate_def_0.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -22px; |
||||
margin-top: -12px; |
||||
height: 22px; |
||||
width: 22px; |
||||
background: url("~@/assets/studypath/public/logo1.png") no-repeat; |
||||
background-size: 22px auto; |
||||
content: ""; |
||||
/* 下拉菜单 */ |
||||
.van-dropdown-menu__bar { |
||||
box-shadow: none !important; |
||||
border-bottom: 1px solid #eaeef3; |
||||
} |
||||
.newvan_cate_com { |
||||
font-size: 16px; |
||||
} |
||||
.van-dropdown-item__option .van-icon { |
||||
margin: 4px 6px 0 0; |
||||
} |
||||
.van-dropdown-menu__title:after { |
||||
position: absolute; |
||||
top: 50%; |
||||
right: -9px; |
||||
margin-top: -7px; |
||||
border: 4px solid; |
||||
border-color: transparent transparent #b3c1d3 #b3c1d3; |
||||
} |
||||
.van-dropdown-menu__title--down:after { |
||||
margin-top: -1px; |
||||
transform: rotate(135deg); |
||||
border-color: transparent transparent #0082fc #0082fc; |
||||
} |
||||
.cate_def_0.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -22px; |
||||
margin-top: -12px; |
||||
height: 22px; |
||||
width: 22px; |
||||
background: url("~@/assets/studypath/public/logo1.png") no-repeat; |
||||
background-size: 22px auto; |
||||
content: ""; |
||||
} |
||||
.cate_def_1.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -22px; |
||||
margin-top: -12px; |
||||
height: 22px; |
||||
width: 22px; |
||||
background: url("~@/assets/studypath/public/logo2.png") no-repeat; |
||||
background-size: 22px auto; |
||||
content: ""; |
||||
} |
||||
.cate_def_2.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -22px; |
||||
margin-top: -12px; |
||||
height: 22px; |
||||
width: 22px; |
||||
background: url("~@/assets/studypath/public/logo2.png") no-repeat; |
||||
background-size: 22px auto; |
||||
content: ""; |
||||
} |
||||
.cate_def_3.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -26px; |
||||
margin-top: -10px; |
||||
height: 26px; |
||||
width: 26px; |
||||
background: url("~@/assets/studypath/public/logo3.png") no-repeat; |
||||
background-size: 26px auto; |
||||
content: ""; |
||||
} |
||||
.cate_def_4.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -26px; |
||||
margin-top: -15px; |
||||
height: 26px; |
||||
width: 26px; |
||||
background: url("~@/assets/studypath/public/logo4.png") no-repeat; |
||||
background-size: 26px auto; |
||||
content: ""; |
||||
} |
||||
|
||||
/* 内容 */ |
||||
.w1200 { |
||||
padding: 0 16px !important; |
||||
overflow: hidden; |
||||
} |
||||
.area-bg { |
||||
&.pdb50 { |
||||
padding: 10px 0 40px !important; |
||||
} |
||||
.cate_def_1.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -22px; |
||||
margin-top: -12px; |
||||
height: 22px; |
||||
width: 22px; |
||||
background: url("~@/assets/studypath/public/logo2.png") no-repeat; |
||||
background-size: 22px auto; |
||||
content: ""; |
||||
} |
||||
.banner, |
||||
.navbox { |
||||
display: none; |
||||
} |
||||
|
||||
.boxtil { |
||||
margin-top: 24px; |
||||
&.flex-1 { |
||||
display: block !important; |
||||
} |
||||
.cate_def_2.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -22px; |
||||
margin-top: -12px; |
||||
height: 22px; |
||||
width: 22px; |
||||
background: url("~@/assets/studypath/public/logo2.png") no-repeat; |
||||
background-size: 22px auto; |
||||
content: ""; |
||||
.yinhao { |
||||
margin-left: 0 !important; |
||||
background-size: auto 24px !important; |
||||
} |
||||
.cate_def_3.van-dropdown-menu__title:before { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -26px; |
||||
margin-top: -10px; |
||||
height: 26px; |
||||
width: 26px; |
||||
background: url("~@/assets/studypath/public/logo3.png") no-repeat; |
||||
background-size: 26px auto; |
||||
content: ""; |
||||
.txt { |
||||
font-size: 24px !important; |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
|
||||
/* 内容 */ |
||||
.w1200 { |
||||
padding: 0 16px !important; |
||||
overflow: hidden; |
||||
.subbox1 { |
||||
display: block !important; |
||||
border: none !important; |
||||
padding: 0 0 40px 0 !important; |
||||
.m_bg_fr { |
||||
background: url("~@/assets/studypath/finereport/hexin_m.png") no-repeat !important; |
||||
} |
||||
.area-bg { |
||||
&.pdb50 { |
||||
padding: 10px 0 40px !important; |
||||
} |
||||
.m_bg_bi { |
||||
background: url("~@/assets/studypath/finebi/hexin_m.png") no-repeat !important; |
||||
} |
||||
.banner, |
||||
.navbox { |
||||
display: none; |
||||
.m_bg_jiandaoyun { |
||||
background: url("~@/assets/studypath/jiandaoyun/hexin_m.png") no-repeat !important; |
||||
} |
||||
|
||||
.boxtil { |
||||
margin-top: 24px; |
||||
&.flex-1 { |
||||
display: block !important; |
||||
} |
||||
.yinhao { |
||||
margin-left: 0 !important; |
||||
background-size: auto 24px !important; |
||||
} |
||||
.txt { |
||||
font-size: 24px !important; |
||||
margin-top: 10px; |
||||
} |
||||
.m_bg_finedatalink { |
||||
background: url("~@/assets/studypath/finedatalink/hexin_m.png") no-repeat !important; |
||||
} |
||||
|
||||
.subbox1 { |
||||
display: block !important; |
||||
border: none !important; |
||||
padding: 0 0 40px 0 !important; |
||||
.m_bg_fr { |
||||
background: url("~@/assets/studypath/finereport/hexin_m.png") no-repeat !important; |
||||
} |
||||
.m_bg_bi { |
||||
background: url("~@/assets/studypath/finebi/hexin_m.png") no-repeat !important; |
||||
} |
||||
.m_bg_jiandaoyun { |
||||
background: url("~@/assets/studypath/jiandaoyun/hexin_m.png") no-repeat !important; |
||||
} |
||||
.bg { |
||||
width: 230px !important; |
||||
margin: 0 auto 30px auto !important; |
||||
background-size: auto 230px !important; |
||||
} |
||||
.txtbox1 { |
||||
.info { |
||||
color: #333; |
||||
margin-top: 10px; |
||||
} |
||||
.m_til2 { |
||||
display: block; |
||||
margin-left: 0 !important; |
||||
margin-top: 8px; |
||||
color: #7e8fa3; |
||||
} |
||||
} |
||||
.tagbox { |
||||
width: 100% !important; |
||||
.itemlk { |
||||
width: auto !important; |
||||
min-width: 100px !important; |
||||
height: 30px !important; |
||||
padding: 6px 16px !important; |
||||
margin: 12px 4px 0 4px !important; |
||||
} |
||||
} |
||||
.bg { |
||||
width: 230px !important; |
||||
margin: 0 auto 30px auto !important; |
||||
background-size: auto 230px !important; |
||||
} |
||||
|
||||
.pad_ovhd { |
||||
overflow: hidden; |
||||
.txtbox1 { |
||||
.info { |
||||
color: #333; |
||||
margin-top: 10px; |
||||
} |
||||
.m_til2 { |
||||
display: block; |
||||
margin-left: 0 !important; |
||||
margin-top: 8px; |
||||
color: #7e8fa3; |
||||
} |
||||
} |
||||
.subbox2 { |
||||
width: 1200px; |
||||
padding-bottom: 24px; |
||||
.itembox { |
||||
.bginfo, |
||||
.bginfo1 { |
||||
width: 100% !important; |
||||
} |
||||
} |
||||
.tagbox { |
||||
width: 100% !important; |
||||
.itemlk { |
||||
width: auto !important; |
||||
min-width: 100px !important; |
||||
height: 30px !important; |
||||
padding: 6px 16px !important; |
||||
margin: 12px 4px 0 4px !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.subbox3 { |
||||
margin-bottom: 30px; |
||||
.carbox { |
||||
display: none; |
||||
} |
||||
.pad_ovhd { |
||||
overflow: hidden; |
||||
} |
||||
.subbox2 { |
||||
width: 1200px; |
||||
padding-bottom: 24px; |
||||
.itembox { |
||||
.bginfo, |
||||
.bginfo1 { |
||||
width: 100% !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.subbox4 { |
||||
width: 50% !important; |
||||
.subbox3 { |
||||
margin-bottom: 30px; |
||||
.carbox { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.m_huojian { |
||||
img { |
||||
width: 300px !important; |
||||
display: block; |
||||
margin-top: 60px !important; |
||||
} |
||||
} |
||||
.subbox4 { |
||||
width: 50% !important; |
||||
} |
||||
|
||||
.el-scrollbar__thumb { |
||||
background-color: #7e8fa3; |
||||
.m_huojian { |
||||
img { |
||||
width: 300px !important; |
||||
display: block; |
||||
margin-top: 60px !important; |
||||
} |
||||
} |
||||
|
||||
.el-scrollbar__thumb:hover { |
||||
background-color: #617288; |
||||
} |
||||
.el-scrollbar__thumb { |
||||
background-color: #7e8fa3; |
||||
} |
||||
|
||||
.el-scrollbar__thumb:hover { |
||||
background-color: #617288; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 800px) { |
||||
.pdb50 { |
||||
padding-top: 10px !important; |
||||
padding-bottom: 10px !important; |
||||
.pdb50 { |
||||
padding-top: 10px !important; |
||||
padding-bottom: 10px !important; |
||||
} |
||||
.subbox2 { |
||||
width: 100% !important; |
||||
display: block !important; |
||||
.itembox { |
||||
width: 80% !important; |
||||
height: auto !important; |
||||
margin: 0 auto 24px auto; |
||||
} |
||||
.subbox2 { |
||||
width: 100% !important; |
||||
display: block !important; |
||||
.itembox { |
||||
width: 80% !important; |
||||
height: auto !important; |
||||
margin: 0 auto 24px auto; |
||||
} |
||||
.icojt { |
||||
display: none !important; |
||||
} |
||||
.icojt { |
||||
display: none !important; |
||||
} |
||||
} |
||||
|
||||
.subbox3 { |
||||
height: auto !important; |
||||
padding-bottom: 24px; |
||||
margin-bottom: 30px; |
||||
.subbox3 { |
||||
height: auto !important; |
||||
padding-bottom: 24px; |
||||
margin-bottom: 30px; |
||||
display: block !important; |
||||
.carbox { |
||||
display: block; |
||||
width: 100% !important; |
||||
height: 240px !important; |
||||
margin-left: 0 !important; |
||||
img { |
||||
height: 240px !important; |
||||
} |
||||
.bef { |
||||
display: none !important; |
||||
} |
||||
.el-carousel__container { |
||||
height: 240px !important; |
||||
} |
||||
} |
||||
.infobox { |
||||
margin: 24px 24px 0 24px !important; |
||||
.f24 { |
||||
font-size: 22px !important; |
||||
} |
||||
} |
||||
.icoxbox { |
||||
&.flex-6 { |
||||
display: block !important; |
||||
.carbox { |
||||
display: block; |
||||
width: 100% !important; |
||||
height: 240px !important; |
||||
margin-left: 0 !important; |
||||
img { |
||||
height: 240px !important; |
||||
} |
||||
.bef { |
||||
display: none !important; |
||||
} |
||||
.el-carousel__container { |
||||
height: 240px !important; |
||||
} |
||||
} |
||||
.infobox { |
||||
margin: 24px 24px 0 24px !important; |
||||
.f24 { |
||||
font-size: 22px !important; |
||||
} |
||||
} |
||||
.icoxbox { |
||||
&.flex-6 { |
||||
display: block !important; |
||||
} |
||||
li { |
||||
margin: 24px 0; |
||||
} |
||||
} |
||||
} |
||||
li { |
||||
margin: 24px 0; |
||||
} |
||||
} |
||||
} |
||||
.m_kaike { |
||||
display: block !important; |
||||
.flex-1 { |
||||
display: block !important; |
||||
text-align: center; |
||||
margin-top: 14px; |
||||
} |
||||
.m_kaike { |
||||
.btn-ddd, |
||||
.btn-fff, |
||||
.btn-jdy { |
||||
display: block; |
||||
width: 100% !important; |
||||
} |
||||
.m_kaike_btnfff { |
||||
display: block !important; |
||||
width: 100% !important; |
||||
} |
||||
.m_kaike_txt { |
||||
&.flex-1 { |
||||
display: block !important; |
||||
.flex-1 { |
||||
display: block !important; |
||||
text-align: center; |
||||
margin-top: 14px; |
||||
} |
||||
.btn-ddd, |
||||
.btn-fff, |
||||
.btn-jdy { |
||||
display: block; |
||||
width: 100% !important; |
||||
} |
||||
.m_kaike_btnfff { |
||||
display: block !important; |
||||
width: 100% !important; |
||||
} |
||||
.m_kaike_txt { |
||||
&.flex-1 { |
||||
display: block !important; |
||||
} |
||||
text-align: center; |
||||
} |
||||
} |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.subbox4 { |
||||
width: 100% !important; |
||||
.fr-btn, |
||||
.fr-btn-jdy { |
||||
display: block; |
||||
width: 99% !important; |
||||
} |
||||
.subbox4 { |
||||
width: 100% !important; |
||||
.fr-btn, |
||||
.fr-btn-jdy { |
||||
display: block; |
||||
width: 99% !important; |
||||
} |
||||
.m_huojian { |
||||
position: initial !important; |
||||
margin: 0 auto; |
||||
img { |
||||
display: block; |
||||
margin: 34px auto 0 auto; |
||||
} |
||||
} |
||||
.m_huojian { |
||||
position: initial !important; |
||||
margin: 0 auto; |
||||
img { |
||||
display: block; |
||||
margin: 34px auto 0 auto; |
||||
} |
||||
.area-bg { |
||||
&.m_not_pdb { |
||||
padding-bottom: 0 !important; |
||||
} |
||||
} |
||||
.area-bg { |
||||
&.m_not_pdb { |
||||
padding-bottom: 0 !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 500px) { |
||||
.subbox2 { |
||||
.itembox { |
||||
width: 100% !important; |
||||
height: auto !important; |
||||
} |
||||
.subbox2 { |
||||
.itembox { |
||||
width: 100% !important; |
||||
height: auto !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,142 +1,145 @@
|
||||
<template> |
||||
<van-dropdown-menu style="display: none;" class="m-db"> |
||||
<van-dropdown-item v-model="cate_default" :options="cate_list" |
||||
:title-class="'newvan_cate_com cate_def_'+cate_default" @change="gotoLink(cate_default)" /> |
||||
<van-dropdown-item v-model="cate_default" :options="cate_list" :title-class="'newvan_cate_com cate_def_' + cate_default" @change="gotoLink(cate_default)" /> |
||||
</van-dropdown-menu> |
||||
</template> |
||||
|
||||
|
||||
<script> |
||||
import { reactive, toRefs } from 'vue'; |
||||
import { useRoute } from 'vue-router'; |
||||
import { useRouter } from 'vue-router' |
||||
import { DropdownMenu, DropdownItem } from 'vant'; |
||||
export default { |
||||
components: { |
||||
[DropdownMenu.name]: DropdownMenu, |
||||
[DropdownItem.name]: DropdownItem, |
||||
}, |
||||
setup() { |
||||
const route = useRoute() |
||||
const pathName = route.name; |
||||
const router = useRouter(); |
||||
|
||||
const state = reactive({ |
||||
cate_default: 0, |
||||
cate_list: [ |
||||
{ text: '报表开发工程师', value: 0, icon: require('@/assets/studypath/public/logo1.png') }, |
||||
{ text: 'BI分析师', value: 1, icon: require('@/assets/studypath/public/logo2.png') }, |
||||
{ text: 'FineBI管理员', value: 2, icon: require('@/assets/studypath/public/logo2.png') }, |
||||
{ text: '零代码开发工程师', value: 3, icon: require('@/assets/studypath/public/logo3.png') }, |
||||
] |
||||
}); |
||||
import { reactive, toRefs } from "vue"; |
||||
import { useRoute } from "vue-router"; |
||||
import { useRouter } from "vue-router"; |
||||
import { DropdownMenu, DropdownItem } from "vant"; |
||||
export default { |
||||
components: { |
||||
[DropdownMenu.name]: DropdownMenu, |
||||
[DropdownItem.name]: DropdownItem, |
||||
}, |
||||
setup() { |
||||
const route = useRoute(); |
||||
const pathName = route.name; |
||||
const router = useRouter(); |
||||
|
||||
const state = reactive({ |
||||
cate_default: 0, |
||||
cate_list: [ |
||||
{ text: "报表开发工程师", value: 0, icon: require("@/assets/studypath/public/logo1.png") }, |
||||
{ text: "BI分析师", value: 1, icon: require("@/assets/studypath/public/logo2.png") }, |
||||
{ text: "FineBI管理员", value: 2, icon: require("@/assets/studypath/public/logo2.png") }, |
||||
{ text: "零代码开发工程师", value: 3, icon: require("@/assets/studypath/public/logo3.png") }, |
||||
{ text: "FDL工程师", value: 4, icon: require("@/assets/studypath/public/logo4.png") }, |
||||
], |
||||
}); |
||||
|
||||
switch (pathName) { |
||||
case "studypathfr": |
||||
state.cate_default = 0; |
||||
break; |
||||
case "studypathbi": |
||||
state.cate_default = 1; |
||||
break; |
||||
case "studypathbiAdmin": |
||||
state.cate_default = 2; |
||||
break; |
||||
case "studypath_page_jdy": |
||||
state.cate_default = 3; |
||||
break; |
||||
case "finedatalink": |
||||
state.cate_default = 4; |
||||
break; |
||||
|
||||
default: |
||||
break; |
||||
} |
||||
|
||||
switch (pathName) { |
||||
case "studypathfr": |
||||
state.cate_default = 0; |
||||
const gotoLink = (id) => { |
||||
switch (id) { |
||||
case 0: |
||||
router.push("/studypath/finereport"); |
||||
break; |
||||
case "studypathbi": |
||||
state.cate_default = 1; |
||||
case 1: |
||||
router.push("/studypath/finebi"); |
||||
break; |
||||
case "studypathbiAdmin": |
||||
state.cate_default = 2; |
||||
case 2: |
||||
router.push("/studypath/finebiAdmin"); |
||||
break; |
||||
case "studypath_page_jdy": |
||||
state.cate_default = 3; |
||||
case 3: |
||||
router.push("/studypath/jiandaoyun"); |
||||
break; |
||||
case 4: |
||||
router.push("/studypath/finedatalink"); |
||||
break; |
||||
|
||||
default: |
||||
router.push("/studypath/finereport"); |
||||
break; |
||||
} |
||||
|
||||
const gotoLink = (id) => { |
||||
switch (id) { |
||||
case 0: |
||||
router.push('/studypath/finereport'); |
||||
break; |
||||
case 1: |
||||
router.push('/studypath/finebi'); |
||||
break; |
||||
case 2: |
||||
router.push('/studypath/finebiAdmin'); |
||||
break; |
||||
case 3: |
||||
router.push('/studypath/jiandaoyun'); |
||||
break; |
||||
default: |
||||
router.push('/studypath/finereport'); |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
|
||||
return { |
||||
...toRefs(state), |
||||
gotoLink |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return { |
||||
...toRefs(state), |
||||
gotoLink, |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss"> |
||||
/*响应式-移动端*/ |
||||
@import '~@/assets/css/m.css'; |
||||
@import '~@/assets/studypath/public/m.scss'; |
||||
|
||||
@media screen and (max-width: 1200px) { |
||||
/*响应式-移动端*/ |
||||
@import "~@/assets/css/m.css"; |
||||
@import "~@/assets/studypath/public/m.scss"; |
||||
|
||||
html, |
||||
body { |
||||
background-color: #fff; |
||||
} |
||||
@media screen and (max-width: 1200px) { |
||||
html, |
||||
body { |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 800px) {} |
||||
@media screen and (max-width: 800px) { |
||||
} |
||||
|
||||
/* end screen */ |
||||
/* end screen */ |
||||
|
||||
.tool-box-m { |
||||
margin: 0 20px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 8px; |
||||
padding: 0 20px; |
||||
} |
||||
.tool-box-m { |
||||
margin: 0 20px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 8px; |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
.vtool-foot-box { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 10%; |
||||
bottom: 0; |
||||
|
||||
.vtool-foot-box { |
||||
.vtool-foot-m { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 10%; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 48px; |
||||
line-height: 48px; |
||||
cursor: pointer; |
||||
|
||||
.vtool-foot-m { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 48px; |
||||
line-height: 48px; |
||||
cursor: pointer; |
||||
|
||||
.chongzhi { |
||||
width: 35%; |
||||
background-color: #fff; |
||||
border-top: 1px solid #ddd; |
||||
} |
||||
|
||||
.queding { |
||||
background-color: #0082fc; |
||||
color: #fff; |
||||
width: 65%; |
||||
border-top: 1px solid #0082fc; |
||||
} |
||||
.chongzhi { |
||||
width: 35%; |
||||
background-color: #fff; |
||||
border-top: 1px solid #ddd; |
||||
} |
||||
} |
||||
|
||||
.v_lod_txt { |
||||
text-align: center; |
||||
color: #7E8FA3; |
||||
margin-top: 14px; |
||||
font-size: 14px; |
||||
letter-spacing: 2px; |
||||
.queding { |
||||
background-color: #0082fc; |
||||
color: #fff; |
||||
width: 65%; |
||||
border-top: 1px solid #0082fc; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.v_lod_txt { |
||||
text-align: center; |
||||
color: #7e8fa3; |
||||
margin-top: 14px; |
||||
font-size: 14px; |
||||
letter-spacing: 2px; |
||||
} |
||||
</style> |
||||
@ -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> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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