HNKDBOSS-WEB/hn-website/components/web-header/index.vue

<template>
  <view class="web-header snow_is_show">
    <!-- 首页 -->
    <view class="header-borer snow_is_show flex r_flex_space">
      <view class="r_flex_space r_wzjc" @click="onTargetPage(0)">
        <img
          class="logo-img"
          src="/static/background/gs-logo-z.png"
          style="width: 28rpx; height: 28rpx; margin: 5rpx"
        />
        海南省信息通信有限公司
      </view>

      <view class="r_flex_space snow_is_show header-right">
        <view
          class="nav-list r_transform3 r_cursor"
          :class="routeName == 'pages/web/home/index' ? 'avtive' : ''"
          @click="onTargetPage('pages/web/home/index')"
        >
          首页
        </view>
        <view
          class="nav-list r_transform3 r_cursor"
          :class="routeName == 'pages/web/product/index' ? 'avtive' : ''"
          @click="onTargetPage('pages/web/product/index')"
        >
          产品与服务
        </view>
        <view
          class="nav-list r_transform3 r_cursor"
          :class="routeName == 'pages/web/dynamic/index' ? 'avtive' : ''"
          @click="onTargetPage('pages/web/dynamic/index')"
        >
          最新动态
        </view>
        <view
          class="nav-list r_transform3 r_cursor"
          :class="routeName == 'pages/web/about/index' ? 'avtive' : ''"
          @click="onTargetPage('pages/web/about/index')"
        >
          关于我们
        </view>
        <view
          class="nav-list r_transform3 r_cursor"
          :class="routeName == 'pages/web/contact/index' ? 'avtive' : ''"
          @click="onTargetPage('pages/web/contact/index')"
        >
          联系我们
        </view>
        <view
          class="nav-long r_flex_center r_cursor"
          @click="
            () => {
              $toast('暂未开通');
            }
          "
        >
          登录
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTabBarLinks } from "@/core/app";

export default {
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    right: {
      type: Number,
      default: 30,
    },
    bottom: {
      type: Number,
      default: 100,
    },
  },

  data() {
    return {
      // 弹窗显示控制
      isShow: false,
      transparent: true,
      routeName: "",
    };
  },

  computed: {
    rightPx() {
      return uni.upx2px(this.right);
    },
    bottomPx() {
      return uni.upx2px(this.bottom);
    },
  },
  onLoad(options) {
    // console.log("页面参数:", options);
    // console.log("当前路径:", this.$page.route);
  },
  mounted() {
    // 获取当前页面路由信息
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    // 获取当前页面路径
    const route = currentPage.route;
    this.routeName = route;

    // 检查是否有自定义属性
    const checkHasAttribute = (element) => {
      return !!element.getAttribute("snow_is_show");
    };
    const main = document.querySelectorAll(".tran>uni-view") || [];
    const paragraphs = [...(main || [])];
    paragraphs.forEach((item) => {
      // console.log(item, "动画遍历", item.className.includes('snow_is_show'))
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !checkHasAttribute(item) && !item.className.includes('snow_is_show')) {
            // 元素进入视口
            item.classList.add("ld");
            item.classList.add("ld-float-btt-in");
            item.setAttribute("snow_is_show", true);
          }
        });
      });
      observer.observe(item);
    });
  },
  methods: {
    /**
     * 导航菜单切换事件
     */
    onToggleShow() {
      const app = this;
      app.isShow = !app.isShow;
      app.transparent = false;
    },

    /**
     * 导航页面跳转
     */
    onTargetPage(data) {
      if (data) {
        this.$navTo(data);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 快捷导航 */
.shortcut {
  position: fixed;
  right: calc(var(--window-right) + var(--right));
  bottom: calc(var(--window-bottom) + var(--bottom));
  width: 76rpx;
  height: 76rpx;
  line-height: 1;
  z-index: 5;
  border-radius: 50%;
}

.avtive {
  color: #016fff;
}
.r_wzjc {
  font-weight: 900;
}
.header-borer {
  font-size: 11rpx;
  height: 35rpx;
}

.nav-long {
  font-size: 8rpx;
  width: 65rpx;
  height: 35rpx;
  background: #016fff;
  border-radius: 0px 0px 0px 0px;
  color: #fff;
  text-align: center;
}

.web-header {
}

/* 导航菜单元素 */
.nav-list {
  padding-top: 6rpx;
  font-size: 11rpx;
  font-weight: 900;
  margin-right: 40rpx;
  &:hover {
    color: #016fff;
  }
}

.nav-item .iconfont {
  font-size: 40rpx;
}

/* 导航开关 */

.nav-item__switch {
  opacity: 1;
}

.shortcut_click_show {
  margin-bottom: 0;
  background: #ff5454;
}

/* 显示动画 */

.show_80 {
  bottom: 384rpx;
  animation: show_80 0.3s forwards;
}

.show_60 {
  bottom: 288rpx;
  animation: show_60 0.3s forwards;
}

.show_40 {
  bottom: 192rpx;
  animation: show_40 0.3s forwards;
}

.show_20 {
  bottom: 96rpx;
  animation: show_20 0.3s forwards;
}

@keyframes show_20 {
  from {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }

  to {
    bottom: 96rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes show_40 {
  from {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }

  to {
    bottom: 192rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes show_60 {
  from {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }

  to {
    bottom: 288rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes show_80 {
  from {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }

  to {
    bottom: 384rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

/* 隐藏动画 */

.hide_80 {
  bottom: 0;
  animation: hide_80 0.3s;
  opacity: 0;
}

.hide_60 {
  bottom: 0;
  animation: hide_60 0.3s;
  opacity: 0;
}

.hide_40 {
  bottom: 0;
  animation: hide_40 0.3s;
  opacity: 0;
}

.hide_20 {
  bottom: 0;
  animation: hide_20 0.3s;
  opacity: 0;
}

@keyframes hide_20 {
  from {
    bottom: 96rpx;
    transform: rotate(360deg);
    opacity: 1;
  }

  to {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }
}

@keyframes hide_40 {
  from {
    bottom: 192rpx;
    transform: rotate(360deg);
    opacity: 1;
  }

  to {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }
}

@keyframes hide_60 {
  from {
    bottom: 288rpx;
    transform: rotate(360deg);
    opacity: 1;
  }

  to {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }
}

@keyframes hide_80 {
  from {
    bottom: 384rpx;
    transform: rotate(360deg);
    opacity: 1;
  }

  to {
    bottom: 0;
    transform: rotate(0deg);
    opacity: 0;
  }
}
</style>