shoot-miniprograms/src/components/PointRecord.vue

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const bowOptions = ref({});
const targetOptions = ref({});

onMounted(() => {
  const result = uni.getStorageSync("point-book-config");
  (result.bowOption || []).forEach((item) => {
    bowOptions.value[item.id] = item;
  });
  (result.targetOption || []).forEach((item) => {
    targetOptions.value[item.id] = item;
  });
});
</script>

<template>
  <view class="container">
    <view>
      <view class="labels">
        <text>{{
          bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
        }}</text>
        <text>{{ data.distance }} 米</text>
        <text>{{
          targetOptions[data.targetType]
            ? targetOptions[data.targetType].name
            : ""
        }}</text>
      </view>
      <view>
        <text>{{ data.createAt }}</text>
      </view>
    </view>
    <view>
      <image src="../static/bow-target.png" mode="widthFix" />
      <view class="aroow-amount">
        <text>共</text>
        <text>{{ data.arrows * data.groups }}</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>