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

<template>
  <a-layout-header>
    <!-- <BackTop/> -->
    <div id="topDiv">
      <div class="topButton" @click="toTop">
        <ArrowUpOutlined/>
      </div>
      <div class="topYiJianFanKui" @click="funYjfk">
        意见反馈
      </div>
    </div>
    <span class="topTitle">管理系统</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>
              <!-- <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';

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

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

  function toTop(){
    let topNum = document.body.scrollTop;
    smoothScroll(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;
  .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;
  }
}



</style>