hangzhan_page/src/framework/showMobile/ui/Show.Header.vue

<template>
  <div class="v_header" @touchmove.prevent v-clickoutside="handleoutside">
    <div v-if="vtitle" class="title">{{vtitle}}</div>
    <div class="right" :class="{ more: showMore }" @click="onShowMore">
      <i class="iconfont icon-a-9gedian"></i>
      <div v-if="showMore">
        <ul>
          <li @click.stop="onShowIntro">
            <i class="iconfont icon-jianjie"></i>
            <span v-html="'简介'"></span>
          </li>
          <li @click="isBgm = !isBgm">
            <i
              class="iconfont"
              :class="!isBgm ? 'icon-yinleguan' : 'icon-yinlekai'"
            ></i>
            <span v-html="'音乐'"></span>
          </li>
          <li @click.stop="onShowShare">
            <i class="iconfont icon-fenxiang"></i>
            <span v-html="'分享'"></span>
          </li>
        </ul>
      </div>
    </div>
    <vIntro v-if="isShowIntro" @close="isShowIntro = false" />
    <vShare v-if="isShowShare" @close="isShowShare = false" />
  </div>
</template>
<script>
import vIntro from "./intro";
import vShare from "./share";

export default {
  props:['vtitle'],
  components: { vIntro,vShare },
  data() {
    return {
      showMore: false,
      isShowIntro: false,
      isShowShare: false,
      isBgm: true,
    };
  },

  methods: {
    handleoutside() {
      this.showMore = false;
    },
    onShowIntro() {
      this.showMore = false;
      this.isShowIntro = true;
    },
    onShowShare() {
      this.showMore = false;
      this.isShowShare = true;
    },
    onShowMore() {
      this.showMore = !this.showMore;
    },
  },

  watch: {
    isBgm(newVal) {
      this.$bus.$emit("toggleBgm", newVal);
    },
  },

  mounted() {
    console.log(this.vtitle);
  },
};
</script>
<style lang="less" scoped>
@bkc: rgba(32, 32, 32, 0.6);
.v_header {
  font-size: 16px;
  top: 12px;
  position: fixed;
  left: 0;
  width: 100%;
  color: #fff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  z-index: 2004;
  .content {
    position: absolute;
    top: 60px;
    left: 30px;
    right: 30px;
    padding: 10px;
    background: @bkc;
    border-radius: 14px;
    font-size: 14px;
    text-align: center;
    width: auto;
    > div {
      display: inline-block;
      text-align: left;
      letter-spacing: 1px;
      word-break: break-all;
      white-space: normal;
      line-height: 1.5;
    }

    > i {
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 12px 10px;
      border-color: transparent transparent @bkc;
    }
  }

  .right {
    position: absolute;
    right: 8px;
    top: 1px;
    width: 44px;
    height: 60px;
    display: flex;
    > i {
      font-size: 28px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -70%);
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(10px);
      border-radius: 4px;
    }
    > div {
      position: absolute;
      display: flex;
      flex-direction: column;
      right: 0;
      top: 50px;
      background-color: @bkc;
      border-radius: 5px;
      padding: 0 6px;
      &::after {
        content: "";
        position: absolute;
        top: -5px;
        right: 10px;
        width: 0;
        height: 0;
        border-width: 0 5px 5px;
        border-style: solid;
        border-color: transparent transparent @bkc;
      }

      li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0;
        text-align: center;
        border-bottom: 1px solid @color;
        padding: 14px 10px;
        &:last-of-type {
          border-bottom: none;
        }
        i {
          font-size: 28px;
        }
        span {
          white-space: nowrap;
          font-size: 14px;
          display: inline-block;
          margin-top: 4px;
        }
      }
    }
  }

  .title {
    --height: 40px;
    margin: 0;
    height: var(--height);
    line-height: var(--height);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding: 0 15px;
    display: inline-block;
    text-shadow: 1px 0 2px rgb(0 0 0 / 16%);
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
    position: absolute;
    -webkit-transition: background 0.3s ease, min-width 0.3s ease,
      border-radius 0.3s ease;
    transition: background 0.3s ease, min-width 0.3s ease,
      border-radius 0.3s ease;
    min-width: 86%;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(transparent),
      color-stop(29%, rgba(0, 0, 0, 0.2)),
      color-stop(69%, rgba(0, 0, 0, 0.2)),
      to(transparent)
    );
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 0, 0, 0.2) 29%,
      rgba(0, 0, 0, 0.2) 69%,
      transparent
    );
    margin-top: 0;
    text-align: center;
  }
}
</style>
<style lang="less">
.animated.short {
  transition: 0.3s ease all;
  &.faster {
    animation-duration: 0.3s;
  }
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 1rem, 0);
    }
    to {
      opacity: 1;
      transform: translateZ(0);
    }
  }
  @keyframes fadeOutDown {
    0% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate3d(0, 1rem, 0);
    }
  }
}
</style>