UI流程完善

src/components/CoachComment.vue

@@ -0,0 +1,61 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  content: {
+    type: String,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in">
+      <image src="../static/coach-comment.png" mode="widthFix" />
+      <slot />
+    </view>
+    <IconButton
+      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.6);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 70vw;
+  color: #fff;
+  margin-bottom: 25vw;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 80vw;
+  left: -5vw;
+  bottom: -20vw;
+  z-index: -1;
+}
+</style>