UI更新

src/components/ScreenHint2.vue

@@ -0,0 +1,66 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: null,
+  },
+  height: {
+    type: Number,
+    default: 100,
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in">
+      <image src="../static/point-book-tip-bg.png" mode="widthFix" />
+      <slot />
+    </view>
+    <IconButton
+      v-if="!!onClose"
+      src="../static/close-white-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);
+  display: flex;
+  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: 75vw;
+  margin-bottom: 15px;
+  border-radius: 20px;
+  overflow: hidden;
+  background: #fff;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+  top: 0;
+}
+</style>