UI更新

src/components/PointRecord.vue

@@ -0,0 +1,89 @@
+<script setup>
+const props = defineProps({
+  signin: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <view class="labels">
+        <text>反曲弓</text>
+        <text>5 米</text>
+        <text>40 全环靶</text>
+      </view>
+      <view>
+        <text>2025-07-10 14:00:00</text>
+      </view>
+    </view>
+    <view>
+      <image src="../static/bow-target.png" mode="widthFix" />
+      <view class="aroow-amount">
+        <text>共</text>
+        <text>36</text>
+        <text>箭</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  background-color: #fff;
+  border-radius: 15px;
+  display: flex;
+  margin-bottom: 15px;
+  height: 24vw;
+}
+.container > view {
+  position: relative;
+  margin-left: 15px;
+}
+.container > view:first-child {
+  width: calc(100% - 5vw);
+}
+.container > view:first-child > view {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  align-items: center;
+}
+.labels {
+  align-items: flex-end !important;
+}
+.labels > text {
+  font-size: 12px;
+  color: #333333;
+  border: 1px solid #eee;
+  margin-right: 10px;
+  border-radius: 10px;
+  padding: 5px 10px;
+}
+.container > view:last-child {
+  margin-right: 1vw;
+}
+.container > view:last-child > image {
+  width: 24vw;
+}
+.aroow-amount {
+  position: absolute;
+  background-color: #0009;
+  border-radius: 10px;
+  color: #fffc;
+  font-size: 12px;
+  line-height: 22px;
+  width: 60px;
+  display: flex;
+  justify-content: center;
+  top: calc(50% - 11px);
+  left: calc(50% - 30px);
+}
+.aroow-amount > text:nth-child(2) {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+}
+</style>