UI流程完善

src/components/ScoreResult.vue

@@ -0,0 +1,155 @@
+<script setup>
+import { ref } from "vue";
+import IconButton from "@/components/IconButton.vue";
+import SButton from "@/components/SButton.vue";
+import CoachComment from "@/components/CoachComment.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const items = ref(new Array(props.total).fill(9));
+const showPanel = ref(true);
+const showComment = ref(false);
+const closePanel = () => {
+  showPanel.value = false;
+  setTimeout(() => {
+    props.onClose();
+  }, 300);
+};
+setTimeout(() => {
+  showPanel.value = true;
+}, 300);
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'block' : 'none' }">
+    <view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
+      <image src="../static/finish-tip.png" mode="widthFix" />
+      <image src="../static/finish-frame.png" mode="widthFix" />
+      <text>完成36箭，获得36点经验</text>
+    </view>
+    <view
+      class="container-content"
+      :style="{ transform: `translateY(${showPanel ? '0%' : '100%'})` }"
+    >
+      <view>
+        <text>本剧成绩（共{{ total }}环）：</text>
+        <button>
+          <text>查看靶纸</text>
+          <image
+            src="../static/enter-arrow-blue.png"
+            mode="widthFix"
+            :style="{ width: '20px' }"
+          />
+        </button>
+      </view>
+      <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
+        <view v-for="(score, index) in items" :key="index">
+          {{ score }}<text>环</text>
+        </view>
+      </view>
+      <view>
+        <IconButton name="分享" src="../static/share.png" />
+        <IconButton
+          name="教练点评"
+          src="../static/review.png"
+          :onClick="() => (showComment = true)"
+        />
+        <SButton width="70vw" :rounded="30" :onClick="closePanel"
+          >下一步</SButton
+        >
+      </view>
+    </view>
+    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
+      您本次练习取得了 环的成绩，所有箭支上靶后的平均点间距为 ，成绩优秀。
+      针对您本次的练习，我们建议您将设备的瞄准器向左侧调整。
+    </CoachComment>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.container-header {
+  margin-top: 20vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0;
+}
+.container-header > text:last-child {
+  color: #fff;
+  text-align: center;
+  margin-top: -100px;
+}
+.container-content {
+  width: calc(100vw - 20px);
+  background-color: #fff;
+  position: absolute;
+  bottom: 0;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 10px;
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+.container-content > view:first-child {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.container-content > view:first-child > button {
+  display: flex;
+  align-items: center;
+  color: #287fff;
+  font-size: 14px;
+}
+.container-content > view:nth-child(2) {
+  display: grid;
+  row-gap: 10px;
+  column-gap: 5px;
+  justify-content: flex-start;
+  margin: 10px 0;
+}
+.container-content > view:nth-child(2) > view {
+  background: linear-gradient(#fbfbfb, #f5f5f5);
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 27px;
+  color: #333333;
+}
+.container-content > view:nth-child(2) > view > text {
+  font-size: 12px;
+  color: #666666;
+  margin-left: 3px;
+}
+.container-content > view:nth-child(3) {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+</style>