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

<template>
  <view class="web-header">
    <!-- 首页 -->
    <div class="header-borer 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 header-right">
        <view class="nav-list r_cursor" @click="onTargetPage('pages/web/home/index')"> 首页 </view>
        <view class="nav-list r_cursor" @click="onTargetPage('pages/web/product/index')">
          产品与服务
        </view>
        <view class="nav-list r_cursor" @click="onTargetPage('pages/web/dynamic/index')">
          最新动态
        </view>
        <view class="nav-list r_cursor" @click="onTargetPage('pages/web/about/index')">
          关于我们
        </view>
        <view class="nav-list r_cursor" @click="onTargetPage('pages/web/contact/index')">
          联系我们
        </view>
        <view class="nav-long r_flex_center r_cursor" @click="onTargetPage(0)">
          登录
        </view>
      </view>
    </div>
  </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,
    };
  },

  computed: {
    rightPx() {
      return uni.upx2px(this.right);
    },
    bottomPx() {
      return uni.upx2px(this.bottom);
    },
  },

  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%;
}

.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;
}

.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>