UI优化

src/pages/mine-bow-data.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+import { getPractiseAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const arrows = ref([]);
+
+onLoad(async (options) => {
+  if (options.id) {
+    const result = await getPractiseAPI(options.id);
+    arrows.value = result.arrows;
+  }
+});
+</script>
+
+<template>
+  <Container title="个人练习 - 靶纸">
+    <view class="container">
+      <!-- <view class="header">
+        <view>
+          <Avatar :src="user.avatar" frame />
+          <view>
+            <text>{{ user.nickName }}</text>
+            <text>{{ user.lvlName }}</text>
+          </view>
+        </view>
+      </view> -->
+      <view :style="{ marginBottom: '20px' }">
+        <BowTarget :scores="arrows" :showLatestArrow="false" />
+      </view>
+      <view class="desc">
+        <text>{{ arrows.length }}</text>
+        <text>支箭，共</text>
+        <text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
+        <text>环</text>
+      </view>
+      <ScorePanel
+        :rowCount="arrows.length === 12 ? 6 : 9"
+        :total="arrows.length"
+        :scores="arrows.map((a) => a.ring)"
+        :margin="arrows.length === 12 ? 4 : 1"
+        :fontSize="arrows.length === 12 ? 25 : 22"
+      />
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 20px);
+  padding: 10px;
+}
+.header > view:first-child {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+.header > view:first-child > view:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 10px;
+  color: #fff;
+}
+.header > view:first-child > view:last-child > text:last-child {
+  font-size: 10px;
+  color: #fff9;
+  background-color: #5f51ff;
+  padding: 2px 5px;
+  border-radius: 10px;
+  margin-top: 5px;
+}
+.header > view:last-child > image {
+  width: 40px;
+}
+.desc {
+  color: #fff;
+  margin-bottom: 40px;
+  width: 100%;
+  text-align: center;
+}
+.desc > text:nth-child(2),
+.desc > text:nth-child(4) {
+  color: #fed847;
+}
+</style>