MARKET-4965,add:fr学习路径改版

src/api/video.js

@@ -181,6 +181,15 @@ export function updateNode(params) {
   })
 }
 
+// 添加finereport路径学习状态 2023版
+export function updateNodes(params) {
+  return request({
+    url: '/v1/edu/guide/finereport/nodes/update/',
+    method: "post",
+    params
+  })
+}
+
 // 添加finereport路径学习状态
 export function luckDraw() {
   return request({

src/assets/css/base.css

@@ -4,8 +4,7 @@ html,
 input,
 select,
 textarea {
-  font-family: 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
 
 body {
@@ -170,6 +169,9 @@ a:hover {
   text-align: center;
   cursor: pointer;
 }
+.btn-008.border {
+  border:1px solid #0082fc;
+}
 
 .btn-008-big {
   padding: 15px 46px;
@@ -253,6 +255,7 @@ a:hover {
   border-radius: 4px;
 }
 
+
 .fr-btn-jdy {
   background: #0db3a6;
   border-color: #0db3a6;
@@ -539,14 +542,7 @@ a:hover {
 }
 
 .btn-ff7-ff4:hover {
-  background: linear-gradient(
-    -45deg,
-    #eb443e,
-    #f12f59,
-    #fc9550,
-    #ff4b72,
-    #eb443e
-  );
+  background: linear-gradient(-45deg, #eb443e, #f12f59, #fc9550, #ff4b72, #eb443e);
   background-size: 400% 400%;
   animation: cpgradientBG 4s ease infinite;
 }
@@ -567,3 +563,13 @@ a:hover {
     background-position: 0% 50%;
   }
 }
+
+
+.right_hover {
+  transition: all 0.3s;
+  margin-right: 0px;
+}
+.base_arrow_right_hover:hover .right_hover{
+  margin-right: -6px;
+}
+

src/assets/css/m.css

@@ -30,7 +30,27 @@
     }
 }
 
-@media screen and (max-width: 800px) {}
+@media screen and (max-width: 800px) {
+    .m-dn-800 {
+        display: none !important;
+    }
+
+    .m-db-800 {
+        display: block !important;
+    }
+}
 :root {
     --van-red: #0082fc;
-}
+}
+
+
+// 移动端
+@media screen and (max-width: 500px) {
+    .m-dn-500 {
+        display: none !important;
+    }
+
+    .m-db-500 {
+        display: block !important;
+    }
+}

src/router.js

@@ -221,7 +221,7 @@ const routes = [
       {
         path: '/guide/finereport',
         name: 'guide_finereport',
-        component: () => import('@/views/video/guide/finereport.vue'),
+        component: () => import('@/views/video/guide/finereportGuide2023.vue'),
         meta: {
           title: 'FineReport入门学习路径 - 帆软学院',
           active: 'studypath',
@@ -254,7 +254,7 @@ const routes = [
       {
         path: '/studypath/finereport',
         name: 'studypathfr',
-        component: () => import('@/views/studypath/finereport.vue'),
+        component: () => import('@/views/studypath/finereportStudyPath2023.vue'),
         meta: {
           title: '报表开发工程师 - 学习路径 - 帆软学院',
           active: 'studypath',

src/views/studypath/finereportStudyPath2023.vue

@@ -0,0 +1,898 @@
+<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/finereport/cahhua.png" alt="banner" />
+    </div>
+  </div>
+
+  <div class="navbox">
+    <div class="w1200">
+      <ul class="flex-6">
+        <router-link class="item active" 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="item3" to="/studypath/jiandaoyun">
+          <span class="nav-3">零代码开发工程师</span>
+        </router-link>
+      </ul>
+    </div>
+  </div>
+
+  <div class="w1200 pdb50">
+
+    <!-- <div class="back_fr m-dn">
+      <a href="https://www.finereport.com/guide" class="flex-1 back_fr_a">
+        <i class="arrow el-icon-arrow-left back_icon"></i>
+        <span>返回入门中心</span>
+      </a>
+    </div> -->
+
+    <div class="boxtil flex-1">
+      <div class="yinhao"></div>
+      <div class="txt">学习路线图</div>
+    </div>
+
+    <div class="subbox1" style="display: flex;" id="knowledgeStructure">
+      <img src="@/assets/studypath/finereport_2023/line_map.png" style="width: 100%; height:auto;" class="m-dn-800" />
+      
+      <div class="dn m-db-800 goto_p_box">
+        <p class="goto_p goto_p_1" @click="handleClick(1)" ></p>
+        <p class="goto_p goto_p_2" @click="handleClick(2)" ></p>
+        <p class="goto_p goto_p_3" @click="handleClick(3)" ></p>
+        <img src="@/assets/studypath/finereport_2023/line_map_m.png" style="width: 100%; height:auto;" />
+      </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">学习路径一</div>
+      </div>
+      <div class="f24 col849 pt10">系统性自学 少走弯路</div>
+
+      <el-scrollbar always>
+        <div class="subbox2">
+          <!-- box1 -->
+          <div class="itembox" id="nav_1">
+            <img class="stimg" src="@/assets/studypath/finereport_2023/st1.png" />
+            <i class="icojt"><img class="ijtimg" src="@/assets/studypath/finereport/jt.png" /></i>
+            <div class="infobox">
+
+              <div class="til">进入快速入门学习</div>
+              <a class="bginfo flex-3" href="/guide/finereport" target="_blank">
+                <div style="line-height: 25px">
+                  <div class="f14 col008">开始学习</div>
+                  <div class="f12 col617">预计时长90分钟</div>
+                </div>
+                <i class="iconfont icon-bofang2 f20 colb3c myicon"></i>
+              </a>
+              <p class="f14 col617 mt12">
+                完成快速入门学习即可抽取：
+              </p>
+              <div class="coupon_bg flex-1">
+                <i class="iconfont icon-youhuiquan colb3c f20 lf_c"></i>
+                <div class="lineBox">
+                  <i class="arrow el-icon-caret-bottom line_bottom"></i>
+                  <div class="line_l"></div>
+                  <i class="arrow el-icon-caret-top line_top"></i>
+                </div>
+                <div>
+                  <span class="col333" style="margin:0 10px;">学习班优惠券</span>
+                  <span class="f12 col7e8">最高999元</span>
+                </div>
+              </div>
+
+
+              <div class="til" style="margin-top:24px">
+                完成入门能力自测
+              </div>
+              <a class="bginfo flex-3 base_arrow_right_hover"
+                href="https://t6ixa9nyl6.jiandaoyun.com/f/63b3d37b9c8c9200080dcf9a" target="_blank">
+                <div style="line-height: 25px">
+                  <div class="f14 col008">开始测试</div>
+                  <div class="f12 col617">预计时长10分钟</div>
+                </div>
+                <i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i>
+              </a>
+              <p class="f14 col617 mt12">
+                完成快速入门学习即可抽取：
+              </p>
+              <div class="coupon_bg flex-1">
+                <i class="iconfont icon-book colb3c f20 lf_c"></i>
+                <div class="lineBox">
+                  <i class="arrow el-icon-caret-bottom line_bottom"></i>
+                  <div class="line_l"></div>
+                  <i class="arrow el-icon-caret-top line_top"></i>
+                </div>
+                <div>
+                  <span class="col333" style="margin:0 10px;">全套学习资料</span>
+                  <span class="f12 col7e8">价值200元</span>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- box2-->
+          <div class="itembox" id="nav_2">
+            <img class="stimg" src="@/assets/studypath/finereport_2023/st2.png" />
+            <i class="icojt"><img class="ijtimg" src="@/assets/studypath/finereport/jt.png" /></i>
+            <div class="infobox">
+
+              <div class="til">
+                观看报表制作基础学习视频
+              </div>
+              <a class="bginfo flex-3" href="/video/399" target="_blank">
+                <div style="line-height: 25px">
+                  <div class="f14 col008">开始学习</div>
+                  <div class="f12 col617">预计时长90分钟</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 base_arrow_right_hover"
+                href="https://help.fanruan.com/finereport/doc-view-4594.html?source=0&from=WY" target="_blank">
+                <div style="line-height: 25px">
+                  <div class="f14 col008">开始学习</div>
+                  <div class="f12 col617">预计时长3天</div>
+                </div>
+                <i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i>
+              </a>
+
+              <div class="til" style="margin-top: 24px;">
+                通过入门认证（FCA-FineReport）
+              </div>
+              <div class="f14 col617 lht22" style="margin: 10px 0;">
+                通过认证说明已初步掌握FineReport的基础操作，可以处理常见报表问题。
+              </div>
+              <div class="flex-6">
+                <a class="btn-008 f14 newbtn3 border"
+                  href="https://cert.fanruan.com/detail/b5fbf8a8b61211ec91ab00163e0210ff" target="_blank">立即报名认证</a>
+                <a class="btn-fff f14 newbtn3" href="https://cert.fanruan.com/verify" target="_blank">证书&成绩查询</a>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- box3 -->
+          <div class="itembox" id="nav_3">
+            <img class="stimg" src="@/assets/studypath/finereport_2023/st3.png" />
+
+            <div class="infobox">
+
+              <div class="til">
+                进入进阶实践文档学习
+              </div>
+              <a class="bginfo flex-3 base_arrow_right_hover"
+                href="https://help.fanruan.com/finereport/doc-view-5083.html?source=0&from=WY" target="_blank">
+                <div style="line-height: 25px">
+                  <div class="f14 col008">开始学习</div>
+                  <div class="f12 col617">预计时长1~2个月</div>
+                </div>
+                <i class="arrow el-icon-arrow-right f20 fw600 right_hover"></i>
+              </a>
+
+              <div class="til" style="margin-top: 24px;">
+                通过资深认证（FCP-报表开发工程师）
+              </div>
+              <div class="f14 col617 lht22" style="margin: 10px 0;">
+                通过认证说明已熟练掌握报表开发操作，可以轻松完成报表开发。
+              </div>
+              <div class="flex-6">
+                <a class="btn-008 f14 newbtn3 border"
+                  href="https://cert.fanruan.com/detail/d9c08fe2b61211ec8dbf00163e0210ff" target="_blank">立即报名认证</a>
+                <a class="btn-fff f14 newbtn3" href="https://fanruanbbs.obs.cn-east-2.myhuaweicloud.com/%E5%B8%86%E8%BD%AF%E8%AE%A4%E8%AF%81/FCP-%E6%8A%A5%E8%A1%A8%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88%E6%A8%A1%E6%8B%9F%E8%AF%95%E5%8D%B7.zip"
+                  target="_blank">获取模拟试卷</a>
+              </div>
+
+              <div class="til" style="margin-top: 24px;">
+
+                <div class="flex-1">
+                  <div>业务场景示例（模板可下载）</div>
+                  <el-popover placement="top-end" :width="230" trigger="hover">
+                    <div class="col617 f13" style="line-height: 24px;">
+                      不同业务场景的最佳实践示例，从方案设计-demo体验-模板复用三个关键节点启发思路
+                    </div>
+                    <template #reference>
+                      <div class="wayask" style="margin-top: 3px;">
+                        <i class="iconfont icon-icon_icon-51 col7e8"></i>
+                      </div>
+                    </template>
+                  </el-popover>
+                </div>
+              </div>
+              <div class="flex-6" style="margin-top: 24px;">
+                <a class="btn-008 f14 newbtn3 border" href="https://demo.finereport.com/" target="_blank">进入Demo体验</a>
+                <a class="btn-fff f14 newbtn3"
+                  href="https://market.fanruan.com/template?utm_source=markrt&utm_medium=wy" target="_blank">点击下载模板</a>
+              </div>
+            </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="w1200 pdb50" style="padding-bottom: 80px;">
+    <div class="boxtil flex-1">
+      <div class="yinhao"></div>
+      <div class="txt">学习路径二</div>
+    </div>
+    <div class="f24 col849 pt10">报名实战班 快速精通</div>
+
+    <div class="subbox3" style="display: flex;">
+      <div class="carbox">
+        <div class="imgbox">
+          <el-carousel :interval="3000" height="280px">
+            <el-carousel-item v-for="item in carData" :key="item">
+              <img class="carimg" :src="item.img" />
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="bef"></div>
+      </div>
+
+      <div class="infobox">
+        <div class="f24 col333">报表工程师从入门到精通·实战班</div>
+        <div class="f16 col617" style="margin: 10px 0 20px;">
+          科学深度打磨的体系化课程 8周时间让你变成靠谱的报表工程师 轻松拿下FCP-报表开发工程师
+        </div>
+        <div class="icoxbox flex-6">
+          <li>
+            <div class="icobg"><i class="iconfont icon-fangan1"></i></div>
+            <span class="txt">全方位掌握FineReport<br />掌握专业报表开发能力</span>
+          </li>
+          <li>
+            <div class="icobg"><i class="iconfont icon-zujian"></i></div>
+            <span class="txt">从零学起完善思维<br />快速低成本搭建报表中心</span>
+          </li>
+          <li>
+            <div class="icobg">
+              <i class="iconfont icon-sharpicons_ribbon-"></i>
+            </div>
+            <span class="txt">进入帆软报表人才库<br />实现职业转型或晋升</span>
+          </li>
+        </div>
+
+        <div class="flex-1 m_kaike" style="margin-top: 30px;" v-if="is_showclass === true">
+          <a href="https://bbs.fanruan.com/course/report/standard?sqtj" target="_blank"
+            class="m_kaike_btnfff btn-fff f14" style=" width: 278px; padding: 10px 0; margin-right: 20px;">
+            了解详情（{{ start_day }}开课）
+          </a>
+          <div class="f14 col617 flex-1 m_kaike_txt">
+            <span>课时8周</span>
+            <span style="margin: -2px 4px 0 4px;">｜</span>
+            <span>{{ people_count }}人已完成学习</span>
+          </div>
+        </div>
+
+        <div class="flex-1" style="margin-top: 30px;" v-if="is_showclass === false">
+          <span class="btn-ddd f14" style=" width: 278px; padding: 10px 0; margin-right: 20px;">暂无开课计划</span>
+          <div class="f14 col617 flex-1">
+            <span>课时8周</span>
+            <span style="margin: -2px 4px 0 4px;">｜</span>
+            <span>{{ people_count }}人已完成学习</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 学习路径3 -->
+  <div class="area-bg pdb50" style="margin-bottom: -40px;">
+    <div class="w1200" style="position: relative;">
+      <div class="boxtil flex-1">
+        <div class="yinhao"></div>
+        <div class="txt">进入“数据人才库”&nbsp;&nbsp;职业发展胜人一筹</div>
+      </div>
+
+      <div class="subbox4">
+        <div class="f16 col333" style="margin: 30px 0; line-height: 26px;">
+          通过FCP-报表开发工程师认证后，上传简历即可进入帆软数据人才库，享受诸多数据人才服务权益，助你实现职业晋升
+        </div>
+        <a href="https://bbs.fanruan.com/thread-135004-1-1.html" target="_blank" class="fr-btn f18 txt-c"
+          style=" width: 278px; padding: 10px 0; margin-right: 20px; display: inline-block;">
+          了解更多
+        </a>
+      </div>
+
+      <div class="m_huojian" style="position: absolute; right: 50px; top:-16px;">
+        <img width="360" src="@/assets/studypath/finereport/ch2.png" />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+  .goto_p_box{
+    position: relative;
+    .goto_p{
+      position: absolute;
+      width: 22%;
+      height: 25%;
+      cursor: pointer;
+    }
+    .goto_p_1{
+      right: 13%;
+    }
+    .goto_p_2{
+      left: 14%;
+      top: 20%;
+    }
+    .goto_p_3{
+      right: 22%;
+      top: 40%;
+    }
+  }
+  .coupon_bg {
+    background-color: #FEF7F2;
+    border-radius: 6px;
+    height: 42px;
+    margin-top: 12px;
+
+    .lf_c {
+      margin: 0 14px;
+    }
+
+    .lineBox {
+      position: relative;
+      width: 15px;
+      height: 100%;
+
+      .line_bottom,
+      .line_top {
+        left: 0;
+        position: absolute;
+        font-size: 18px;
+        color: #fff;
+      }
+
+      .line_bottom {
+        top: -7px;
+      }
+
+      .line_top {
+        bottom: -7px;
+      }
+
+      .line_l {
+        position: absolute;
+        width: 1px;
+        height: 100%;
+        border: 1px #fff dashed;
+        left: 50%;
+      }
+    }
+  }
+
+  .back_fr {
+    margin-bottom: 30px;
+
+    .back_icon {
+      color: #0082fc;
+      font-size: 25px;
+      font-weight: 600;
+    }
+
+    .back_fr_a:hover {
+      span {
+        margin: -2px 0 0 4px;
+      }
+    }
+
+    span {
+      color: #0082fc;
+      margin: -2px 0 0 10px;
+      transition: all .3s;
+    }
+  }
+
+  .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: 620px;
+      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;
+
+          .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 {
+    margin-top: 24px;
+  }
+
+  .pdb50 {
+    padding: 50px 0 60px;
+  }
+
+  .boxtil {
+    .yinhao {
+      width: 36px;
+      height: 26px;
+      background: url('~@/assets/studypath/finereport/yinhao.png') no-repeat;
+      background-size: auto 26px;
+      margin-top: 4px;
+      margin-right: 18px;
+      margin-left: -50px;
+    }
+
+    .txt {
+      font-size: 32px;
+      color: #333;
+    }
+  }
+
+  .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/finereport/logo1.png') center 6px no-repeat;
+            background-size: 36px auto;
+          }
+
+          .nav-2 {
+            background: url('~@/assets/studypath/finereport/logo2.png') center 2px no-repeat;
+            background-size: 40px auto;
+          }
+        }
+
+        span {
+          font-size: 18px;
+          display: inline-block;
+          padding-top: 52px;
+          color: #8496ab;
+        }
+
+        .nav-1 {
+          background: url('~@/assets/studypath/finereport/logo1-1.png') center 6px no-repeat;
+          background-size: 36px auto;
+        }
+
+        .nav-2 {
+          background: url('~@/assets/studypath/finereport/logo2-1.png') center 2px no-repeat;
+          background-size: 40px auto;
+        }
+
+        .nav-3 {
+          background: url('~@/assets/studypath/finereport/logo3-1.png') center 10px no-repeat;
+          background-size: 42px auto;
+        }
+      }
+
+      .item3 {
+        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;
+        }
+      }
+    }
+  }
+
+  .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>
+
+<style lang="scss">
+    @import '~@/assets/css/m.css';
+ </style>
+
+
+<script>
+  import { reactive, toRefs } from 'vue';
+  import { getCourseNum } from '@/api/study';
+  import { adurl } from '@/api/ad';
+  import downMenu from "@/views/studypath/downMenu";
+  import { scrollToElementAnchor } from '@/utils/scrollTo';
+  export default {
+    name: 'studypathfr',
+    components: {
+      downMenu,
+    },
+    setup() {
+      const state = reactive({
+        carData: [
+          {
+            img: require('@/assets/studypath/finereport/img1.png'),
+          },
+          {
+            img: require('@/assets/studypath/finereport/img2.png'),
+          },
+          {
+            img: require('@/assets/studypath/finereport/img3.png'),
+          },
+          {
+            img: require('@/assets/studypath/finereport/img4.png'),
+          },
+        ],
+        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 resCourseNum = async () => {
+        const res = await getCourseNum(34, 5);
+        if (res.status === -1) {
+          state.is_showclass = false;
+          state.people_count = res.data.people_count;
+          state.start_day = res.data.start_day;
+        } else if (res.code === 200) {
+          state.is_showclass = true;
+          state.people_count = res.data.people_count;
+          state.start_day = res.data.start_day;
+        }
+      };
+      resCourseNum();
+
+      const scopeTo = () => {
+        document.getElementById('knowledgeStructure').scrollIntoView();
+      };
+
+      const handleClick = (tab) => {
+        state.curindex = tab;
+        scrollToElementAnchor('nav_' + tab, 20);
+      }
+
+
+      return {
+        ...toRefs(state),
+        scopeTo,
+        handleClick,
+      };
+    },
+  };
+</script>