shoot-miniprograms/src/components/ScreenHint.vue

<script setup>
import IconButton from "./IconButton.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: null,
  },
  mode: {
    type: String,
    default: "normal",
  },
});
const getContentHeight = () => {
  if (props.mode === "tall") return "50vw";
  if (props.mode === "square") return "74vw";
  return "36vw";
};
</script>

<template>
  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
    <view class="scale-in" :style="{ height: getContentHeight() }">
      <image
        v-if="mode === 'normal'"
        src="../static/screen-hint-bg.png"
        mode="widthFix"
      />
      <image
        v-if="mode === 'tall'"
        src="../static/coach-comment.png"
        mode="widthFix"
      />
      <image
        v-if="mode === 'square'"
        src="../static/prompt-bg-square.png"
        mode="widthFix"
      />
      <image
        v-if="mode === 'small'"
        src="../static/finish-frame.png"
        mode="widthFix"
      />
      <slot />
    </view>
    <IconButton
      v-if="!!onClose"
      src="../static/close-gold-outline.png"
      :width="30"
      :onClick="onClose"
    />
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.container > view:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 70vw;
  color: #fff;
  margin-bottom: 15px;
}
.container > view:first-child > image {
  position: absolute;
  width: 80vw;
  left: -7%;
  bottom: -18vw;
  z-index: -1;
  transform: translateY(-75px);
}
</style>