积分表UI修改

src/components/PointRecord.vue

@@ -10,6 +10,12 @@ const props = defineProps({
 const bowOptions = ref({});
 const targetOptions = ref({});
 
+const toDetailPage = () => {
+  uni.navigateTo({
+    url: `/pages/point-book-detail?id=${props.data.id}`,
+  });
+};
+
 onMounted(() => {
   const result = uni.getStorageSync("point-book-config");
   (result.bowOption || []).forEach((item) => {
@@ -22,9 +28,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" @click="toDetailPage">
     <view>
       <view class="labels">
+        <view></view>
         <text>{{
           bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
         }}</text>
@@ -38,10 +45,15 @@ onMounted(() => {
       <view>
         <text>{{ data.createAt }}</text>
       </view>
+      <view>
+        <text>黄心率：{{ data.yellowRate * 100 }}%</text>
+        <text>10环数：{{ data.tenRings }}</text>
+        <text>平均：{{ data.averageRing }}</text>
+      </view>
     </view>
     <view>
       <image src="../static/bow-target.png" mode="widthFix" />
-      <view class="aroow-amount">
+      <view class="arrow-amount">
         <text>共</text>
         <text>{{ data.arrows * data.groups }}</text>
         <text>箭</text>
@@ -53,38 +65,54 @@ onMounted(() => {
 <style scoped>
 .container {
   background-color: #fff;
-  border-radius: 15px;
   display: flex;
-  margin-bottom: 15px;
-  height: 24vw;
+  align-items: center;
+  border-radius: 25rpx;
+  margin-bottom: 25rpx;
+  height: 200rpx;
+  border: 1rpx solid #fed847;
 }
 .container > view {
   position: relative;
   margin-left: 15px;
 }
 .container > view:first-child {
-  width: calc(100% - 5vw);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 50rpx);
+  color: #333333;
 }
 .container > view:first-child > view {
   width: 100%;
-  height: 50%;
+  display: flex;
+  position: relative;
+}
+.container > view:first-child > view:nth-child(3) {
   display: flex;
   align-items: center;
+  font-size: 20rpx;
+  color: #666;
 }
-.container > view:first-child > view:last-child {
-  font-weight: 500;
-  color: #000;
+.container > view:first-child > view:nth-child(3) > text {
+  margin-right: 10rpx;
 }
 .labels {
   align-items: flex-end !important;
 }
+.labels > view:first-child {
+  position: absolute;
+  bottom: 0;
+  height: 10rpx;
+  background: #fee947;
+  border-radius: 5rpx;
+  width: 300rpx;
+}
 .labels > text {
-  font-size: 12px;
-  color: #333333;
-  border: 1px solid #eee;
+  font-size: 26rpx;
   margin-right: 10px;
-  border-radius: 10px;
-  padding: 5px 10px;
+  position: relative;
 }
 .container > view:last-child {
   margin-right: 1vw;
@@ -92,7 +120,7 @@ onMounted(() => {
 .container > view:last-child > image {
   width: 24vw;
 }
-.aroow-amount {
+.arrow-amount {
   position: absolute;
   background-color: #0009;
   border-radius: 10px;
@@ -105,7 +133,7 @@ onMounted(() => {
   top: calc(50% - 11px);
   left: calc(50% - 30px);
 }
-.aroow-amount > text:nth-child(2) {
+.arrow-amount > text:nth-child(2) {
   color: #fff;
   font-size: 14px;
   margin: 0 3px;