dbsd_kczx/src/views/site/common/header.vue

<template>
  <a-layout-header>
    <!-- <BackTop/> -->
    <div id="topDiv" v-show="props.showRightButton">
      <a-row >
        <a-col :xs="{ span: 0 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
          <div class="topButton" @click="toTop">
            <ArrowUpOutlined/>
          </div>
        </a-col>
        <a-col :xs="{ span: 0 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
          <div class="topYiJianFanKui" @click="funYjfk">
            意见反馈
          </div>
        </a-col>
        <div style="line-height: 1rem;width: 100%;">&nbsp;</div>
        <div style="line-height: 1rem;padding-top: 0.5rem;font-size: .7rem;" class="topLinkTextEllipsis"><a @click="toDom('tkzjDom')">听课足迹</a></div>
        <div style="line-height: 1rem;padding-top: 0.5rem;font-size: .7rem;" class="topLinkTextEllipsis"><a @click="toDom('rkjcDom')">任课教程</a></div>
        <div style="line-height: 1rem;padding-top: 0.5rem;font-size: .7rem;" class="topLinkTextEllipsis"><a @click="toDom('yykcDom')">预约课程</a></div>
        <div style="line-height: 1rem;padding-top: 0.5rem;font-size: .7rem;" class="topLinkTextEllipsis"><a @click="toDom('jcgkkDom')">精彩公开课</a></div>
        <div style="line-height: 1rem;padding-top: 0.5rem;font-size: .7rem;" class="topLinkTextEllipsis"><a @click="toDom('kxstkktDom')">可线上听课课堂</a></div>
        <div style="line-height: 1rem;padding-top: 0.5rem;font-size: .7rem;" class="topLinkTextEllipsis"><a @click="toDom('jrkclbDom')">今日课程列表</a></div>
      </a-row>
    </div>
    <span class="topTitle" >
      <RouterLink :to="{path:'/site/index'}" style="color:white;">{{ projectName }}</RouterLink>
      <RouterLink hidden target='_blank' :to="{path:'/site/liveView',query:{ url: 'rtsp://176.139.87.16/axis-media/media.amp' }}">直播测试页rtsp</RouterLink>
      <RouterLink hidden target='_blank' :to="{path:'/site/liveFlvView',query:{ url: 'rtsp://176.139.87.16/axis-media/media.amp' }}">直播测试页flv</RouterLink>
      <RouterLink hidden target='_blank' :to="{path:'/site/livem3u8View',query:{ url: 'https://bylwcs.nenu.edu.cn:9553/live_hls/yfjxl101s_lbzj.m3u8' }}">直播测试页m3u8</RouterLink>
      <RouterLink hidden target='_blank' :to="{path:'/site/liveRoom',query:{ id: '1139010101' }}">直播测试页（正式课堂）m3u8</RouterLink>
    </span>
    <span class="topRight">
      <a-dropdown>
        <span class="ant-dropdown-link topRightMenu" @click.prevent>
          {{ userStore?.getUserInfo?.realname }}
          <DownOutlined/>
        </span>
        <template #overlay>
          <a-menu>
            <a-menu-item  v-if="getUserSf()=='T'">
              <!-- <a href="javascript:;">后台管理</a> -->
              <RouterLink to="/dashboard/analysis">后台管理</RouterLink>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:void(0);" @click="userStore?.confirmLoginOut();">安全退出</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </span>
    <YjfkModal ref="YjfkModalTab"></YjfkModal>
  </a-layout-header>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { DownOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store/modules/user';
  import YjfkModal from '/@/views/site/yjfk/YjfkModal.vue';
  import { getUserSf } from '/@/views/site/utils/index';

  const props = defineProps({
    showRightButton: { type: Boolean, default: false }
  });


  const projectName = import.meta.env.VITE_GLOB_APP_TITLE;

  const YjfkModalTab = ref();
  //用户相关
  const userStore = useUserStore();

function toIndex(){
  window.location.href="/site/index"
}

  function smoothScroll(topNum){
    setTimeout(() => {
      if(topNum > 0){
        topNum = topNum - 50;
        document.body.scrollTop = topNum;
        smoothScroll(topNum);
      }
    },1);
  }

  function toTop(toId){
    let topNum = 0;
    if(toId){
      let toDom: any = document?.querySelector('#' + toId);

      console.log(`🚀 ------------------------------------------------🚀`);
      console.log(`🚀 ~ file: header.vue:91 ~ toTop ~ toDom:`, toDom);
      console.log(`🚀 ------------------------------------------------🚀`);

      topNum = toDom?.offsetTop??0;

      console.log(`🚀 --------------------------------------------------🚀`);
      console.log(`🚀 ~ file: header.vue:97 ~ toTop ~ topNum:`, topNum);
      console.log(`🚀 --------------------------------------------------🚀`);

    }else{
      topNum = document.body.scrollTop;
      smoothScroll(topNum);
    }
  }

  function toDom(toId){
    let toDom: any = document?.querySelector('#' + toId);
    let topNum = toDom?.offsetTop??0;
    document.body.scrollTop = topNum;
  }

  /**
   * 意见反馈
   */
  function funYjfk(){
    YjfkModalTab.value.add()
  }

</script>
<style lang="less" scoped>
#siteMain {
  #maxSite {
    .topTitle {
      font-size: 1.5rem;
    }
    .topRight {
      float: right;
      .topRightMenu {
        font-size: 1.1rem;
      }
    }
    .footerRight {
      float: right;
    }
  }
}
#topDiv {
  position: absolute;
  right: 1rem;
  top: 5rem;
  z-index: 1;
  width: 4rem;
  .topButton {
    background: #c2c2c2;
    margin-bottom: 2rem;
    padding: 0.5rem;
    width: 4rem;
    font-size:3rem;
  }
  .topYiJianFanKui {
    background: #1c84c6;
    color:#FFF;
    font-size:1.5rem;
    padding: 0.5rem;
    width: 4rem;
    line-height: 2.1rem;
  }
  .topLinkTextEllipsis {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
}



</style>