UI优化

src/components/ScreenHint.vue

@@ -8,20 +8,30 @@ const props = defineProps({
   },
   onClose: {
     type: Function,
-    default: () => {},
+    default: null,
   },
   mode: {
     type: String,
     default: "normal",
   },
 });
+const getContentHeight = () => {
+  if (props.mode === "tall") return "47vw";
+  if (props.mode === "square") return "74vw";
+  return '36vw'
+};
 </script>
 
 <template>
   <view class="container" :style="{ display: show ? 'flex' : 'none' }">
-    <view class="scale-in">
+    <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"
       />
@@ -38,6 +48,7 @@ const props = defineProps({
       <slot />
     </view>
     <IconButton
+      v-if="!!onClose"
       src="../static/close-gold-outline.png"
       :width="30"
       :onClick="onClose"
@@ -64,15 +75,14 @@ const props = defineProps({
   justify-content: center;
   position: relative;
   width: 70vw;
-  min-height: 22vh;
-  margin-bottom: 20px;
   color: #fff;
+  margin-bottom: 15px;
 }
 .container > view:first-child > image {
   position: absolute;
   width: 80vw;
   left: -7%;
-  bottom: -20vw;
+  bottom: -18vw;
   z-index: -1;
   transform: translateY(-75px);
 }