update:代码备份

src/pages/training/components/ScreenHint.vue

@@ -0,0 +1,89 @@
+<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>