fanruan-edu-cas/src/components/banner.vue

<template>
  <div class="mbg idBanner">
    <div class="nav">
      <div class="left-nav">
        <ul class="left-wrapper">
          <li v-for="(item, i) in menuList.slice(0, 6)" :key="i">
            <router-link @mouseenter="gethot(item.id)" class="c1a flex-3 flex-1" :to="'/video?class1=' + item.id" target="_blank">
              <span>{{ item.it618_classname }}</span>
              <i class="arrow el-icon-arrow-right"></i>
            </router-link>
            <div class="child-nav">
              <div class="child-wrapper">
                <ul>
                  <li class="child-item" v-for="(child, j) in item.class2" :key="j">
                    <router-link class="c2a" :to="'/video?class1=' + item.id + '&class2=' + child.id" target="_blank">
                      {{ child.it618_classname }}
                    </router-link>
                  </li>
                  <div class="amore">
                    <router-link class="mra flex-1" :to="'/video?class1=' + item.id" target="_blank">
                      <span>查看{{ item.it618_classname }}全部课程</span>
                      <i class="arrow el-icon-arrow-right"></i>
                    </router-link>
                  </div>
                </ul>

                <div class="hot">
                  <h2 class="col617">热门推荐</h2>
                  <ul>
                    <li v-for="(item, i) in item.hotdata" :key="i">
                      <router-link class="lk hide-txt" :to="'/video/' + item.id" target="_blank">
                        {{ item.title }}
                      </router-link>
                      <p>
                        <span>{{ item.class_hour }}</span>
                        <em>{{ item.number_people }}</em>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>

          <li>
            <!-- <a href="/video?class1=37&class2=0" class="c1a flex-3 flex-1">
              <span>FineDataLink</span>
              <i class="arrow el-icon-arrow-right"></i>
            </a> -->

            <router-link class="c1a flex-3 flex-1" to="/video?class1=37&class2=0" target="_blank">
              <span>FineDataLink</span>
              <i class="arrow el-icon-arrow-right"></i>
            </router-link>

            <div class="child-nav">
              <div class="child-wrapper">
                <ul>
                  <li class="child-item"><router-link to="/video?class1=37&class2=9" class="c2a">基础操作</router-link></li>
                  <li class="child-item"><router-link to="/video?class1=37&class2=16" class="c2a">ETL</router-link></li>
                  <li class="child-item"><router-link to="/video?class1=37&class2=27" class="c2a">直播分享</router-link></li>
                  <div class="amore">
                    <router-link class="mra flex-1" to="/video?class1=37&class2=0" target="_blank">
                      <span>查看FineDataLink全部课程</span>
                      <i class="arrow el-icon-arrow-right"></i>
                    </router-link>
                  </div>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="right-box flex-3">
        <div class="ad">
          <div id="AD-1d4b2f969fcd43a99205e88c53b05d8d"></div>
        </div>
        <div class="menu">
          <ul>
            <a href="https://bbs.fanruan.com/course/report/standard?sqtjBI" target="_blank">
              <li>
                <h5>报表工程师</h5>
                <span>从入门到精通实战班</span>
              </li>
              <i class="arrow el-icon-arrow-right"></i>
            </a>
            <a href="https://bbs.fanruan.com/course/BI/standard/?sqtj" target="_blank">
              <li>
                <h5>BI工程师</h5>
                <span>从入门到精通实战班</span>
              </li>
              <i class="arrow el-icon-arrow-right"></i>
            </a>
            <a href="https://bbs.fanruan.com/course/jiandaoyun/standard/?sqtj" target="_blank">
              <li>
                <h5>简道云工程师</h5>
                <span>从入门到精通实战班</span>
              </li>
              <i class="arrow el-icon-arrow-right"></i>
            </a>
            <a href="https://bbs.fanruan.com/course/DOO/enterprise" target="_blank">
              <li>
                <h5>数据运营官</h5>
                <span>线上学习班</span>
              </li>
              <i class="arrow el-icon-arrow-right"></i>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="mbg ad-m dn">
    <a :href="cover.click_url" target="_blank">
      <el-image :src="cover.img_url" style=" width: 100%; position: static">
        <template #error>
          <div style="width: 100%; height: 200px;" class="flex-5">
            <i class="el-icon-loading f24 colb3c"></i>
          </div>
        </template>
      </el-image>
    </a>
  </div>
</template>

<script>
import { getCategories } from "@/api/video";
import { getcateHot } from "@/api/index";
import { toRefs, reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      menuList: [],
      listhot: [],
      cover: {},
      isloadHot: [],
    });

    const fetchMenuList = async () => {
      const res = await getCategories();
      if (res.code === 200) {
        state.menuList = res.data;
      }
    };
    fetchMenuList();

    // 旧版banner cid广告位
    // const fetchgetCover = async () => {
    //   const res = await getCover();
    //   if (res.code === 200) {
    //     state.cover = res.data[0];
    //   }
    // };
    // fetchgetCover();

    // 新版版banner 我的帆软广告位
    window.fineAd.getAdvertisement({ adId: "1d4b2f969fcd43a99205e88c53b05d8d" });

    const fetchgetcateHot = async (class1) => {
      const res = await getcateHot(class1);
      if (res.code === 200) {
        state.listhot = res.data;
        state.isloadHot.push(class1);

        state.menuList.forEach((item, index) => {
          if (item.id === class1) {
            state.menuList[index]["hotdata"] = res.data;
          }
        });
      }
    };

    const gethot = (class1) => {
      // 节流
      state.menuList.forEach((item, index) => {
        if (item.id === class1) {
          if (!state.menuList[index]["hotdata"]) {
            fetchgetcateHot(class1);
          }
        }
      });
    };

    return {
      ...toRefs(state),
      gethot,
    };
  },
};
</script>

<style lang="scss" scoped>
.mbg {
  background: #f3f8ff;
  padding: 34px 0 0;
}

.nav {
  position: relative;
  width: 1200px;
  height: 375px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 16px 0px rgba(12, 40, 131, 0.1);
}

.left-nav {
  display: flex;
  width: 200px;
  background-color: #fff;
}

.left-nav .left-wrapper {
  width: 100%;
}

.left-nav .left-wrapper > li {
  display: block;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;

  .c1a {
    font-size: 16px;
    padding: 16px 24px;
  }
}

.left-nav .left-wrapper > li:hover {
  color: #0082fc;
  background: #eef3fa;
}

.left-nav .left-wrapper li:hover .child-nav {
  display: block;
}

.nav .right-box {
  background-color: #eef3fa;
  border: none;
  width: 1000px;

  .ad {
    width: 800px;
  }

  .menu {
    width: 200px;
    position: relative;

    ul {
      width: 216px;
      height: 100%;
      position: absolute;
      right: -16px;
    }

    a {
      display: flex;
      align-items: center;
      color: #fff;
      height: 25%;
      padding: 0 16px;
      background-color: rgb(0, 0, 0, 0.19);
      transition: all 0.3s;
      position: relative;

      h5 {
        font-size: 16px;
        padding-bottom: 2px;
      }

      span {
        font-size: 14px;
      }

      i {
        transition: all 0.3s;
        opacity: 0;
        margin-left: 0;
      }

      &:hover {
        margin-left: -16px;

        i {
          opacity: 1;
          margin-left: 26px;
        }
      }

      &::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 34px;
        bottom: 0;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

.child-nav {
  display: none;
  position: absolute;
  top: 0;
  left: 200px;
  height: 100%;
}

.child-nav .child-wrapper {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.child-wrapper > ul {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 320px;
  height: 100%;
  padding-top: 20px;
  background-color: #eef3fa;
  padding: 20px 10px 0 10px;

  .amore {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    .mra {
      padding: 20px 0 20px 32px;
      border-top: 1px solid #ceddf2;
      color: #0082fc;
      font-size: 14px;

      span {
        padding-right: 12px;
      }
    }
  }

  &:after {
    content: " ";
    width: 42%;
  }
}

.child-wrapper .child-item {
  width: 42%;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 16px;

  .c2a {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    border-radius: 24px;
    text-align: center;
    padding: 4px 0;
    font-size: 14px;
  }
}

.child-wrapper .child-item:hover {
  color: rgb(61, 185, 255);
}

.child-wrapper .child-item:last-child:nth-child(2n - 1) {
  margin-right: calc(40% + 9%);
}

.left-wrapper .hot {
  border-left: 1px solid #ceddf2;
  width: 240px;
  background-color: #eef3fa;
  padding: 24px;

  h2 {
    font-size: 14px;
    padding-bottom: 18px;
  }

  li {
    padding-bottom: 24px;

    .lk {
      font-size: 14px;
    }

    p {
      font-size: 12px;
      color: #617288;

      span {
        padding-right: 16px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.ad-m {
  width: 100%;
  min-height: 100px;
  padding: 18px 20px 0 20px;
  overflow: hidden;

  ::v-deep .el-image__inner {
    border-radius: 8px;
    max-width: 1000px;
    margin: 0 auto;
    display: block;
  }
}
</style>