horzi_rai_wxa/components/suspen_button.vue

<template>
  <view class="suspen-button">
    <view class="px-suspen-button">
      <view :class="['center-button', 'px-button', { active: open }]" @click.stop="onOpen">
        <image v-if="!$slots.center" mode="widthFix" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/most_confidential.png"> </image>
      </view>
      <view :class="['top-button', 'px-button', 'ot-button', { 'active-top': open, 'hidden-top': !first && !open }]" @click.stop="goSecretDetail(1)">
        <image v-if="!$slots.top" mode="widthFix" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/report_choiceness.png"> </image>
      </view>
      <view :class="['left-button', 'px-button', 'ot-button', { 'active-left': open, 'hidden-left': !first && !open }]" @click.stop="goSecretDetail(2)">
        <image v-if="!$slots.bottom" mode="widthFix" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/this_week.png"> </image>
      </view>
      <view :class="['bottom-button', 'px-button', 'ot-button', { 'active-bottom': open, 'hidden-bottom': !first && !open }]" @click.stop="goSecretDetail(3)">
        <image v-if="!$slots.left" mode="widthFix" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/last_week.png"> </image>
      </view>
    </view>
    <view :class="[open ? 'mask-show' : '']"  @click.stop="onOpen"> </view>
  </view>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      first: true, //样式的一个切换
      open: false,
    };
  },
  methods: {
    onOpen() {
      this.open = !this.open;
      this.first = false;
    },
    /* 绝密标签点击后的跳转 */
    goSecretDetail(type) {
      uni.navigateTo({
        url: "/reportPages/secretDetails/secretDetails?type=" + type,
      });
      this.onOpen();
    },
  },
};
</script>

<style lang="scss" scoped>
.suspen-button {
  width: 100%;
  height: 100%;
}
.mask-show {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.3s;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 900;
  transition: all 0.3s ease-in-out 0s;
  transform: scale(1, 1);
}
.px-suspen-button {
  position: fixed;
  z-index: 999;
  bottom: 320rpx;
  right: 180rpx;
}

.px-button {
  position: absolute;
  border-radius: 50%;
  top: 0rpx;
  left: 0rpx;
  height: 120rpx;
  width: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  overflow: hidden;
  z-index: 999;

  image {
    width: 100%;
    height: 100%;
  }

  &.center-button {
    z-index: 1000;
  }

  &.ot-button {
    display: none;
    opacity: 0;

    &.active-top {
      animation: 0.5s ease top forwards;
      display: flex;
    }

    &.hidden-top {
      animation: 0.5s ease hidetop forwards;
      display: flex;
    }

    &.active-left {
      animation: 0.5s ease left forwards;
      display: flex;
    }

    &.hidden-left {
      animation: 0.5s ease hideleft forwards;
      display: flex;
    }

    &.active-bottom {
      animation: 0.5s ease bottom forwards;
      display: flex;
    }

    &.hidden-bottom {
      animation: 0.5s ease hidebottom forwards;
      display: flex;
    }
  }
}

@keyframes center {
  0% {
  }

  100% {
    transform: rotate(315deg);
    opacity: 1;
  }
}

@keyframes bottom {
  0% {
    opacity: 0;
  }

  100% {
    top: 120rpx;
    left: -100rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes left {
  0% {
    opacity: 0;
  }

  100% {
    top: 0rpx;
    left: -180rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes top {
  0% {
    opacity: 0;
  }

  100% {
    top: -120rpx;
    left: -90rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes hideleft {
  0% {
    top: 0rpx;
    left: -180rpx;
    opacity: 1;
  }

  100% {
    top: 0rpx;
    left: 0rpx;
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes hidebottom {
  0% {
    top: 100rpx;
    left: -120rpx;
    opacity: 1;
  }

  100% {
    top: 0rpx;
    left: 0rpx;
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes hidetop {
  0% {
    top: -100rpx;
    left: -120rpx;
    opacity: 1;
  }

  100% {
    top: 0rpx;
    left: 0rpx;
    transform: rotate(360deg);
    opacity: 0;
  }
}
</style>