update:代码备份

src/pages/training/components/ScorePanel2.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  arrows: {
+    type: Array,
+    default: () => [],
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const getDisplayText = (arrow = {}) => {
+  if (!arrow || !arrow.ring) return "";
+  return arrow.ringX ? "X" : String(arrow.ring);
+};
+
+const isLowScore = (arrow = {}) => {
+  if (!arrow || !arrow.ring || arrow.ringX) return false;
+  return Number(arrow.ring) < 8;
+};
+
+const displayArrows = computed(() => {
+  const list = [...props.arrows];
+  if (props.total > 0 && list.length < props.total) {
+    list.push(null);
+  }
+  return list;
+});
+</script>
+
+<template>
+  <view v-if="displayArrows.length" class="score-panel">
+    <view class="score-grid">
+      <view
+        v-for="(arrow, index) in displayArrows"
+        :key="index"
+        class="score-card"
+      >
+        <image class="score-card-bg" src="../../../static/training-difficulty-design/block-gold.png"></image>
+        <text
+          class="score-value"
+          :class="{ 'score-value--low': isLowScore(arrow) }"
+        >
+          {{ getDisplayText(arrow) }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.score-panel {
+  width: 100%;
+  padding: 30rpx 40rpx 0 40rpx;
+  box-sizing: border-box;
+}
+
+.score-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.score-card {
+  position: relative;
+  width: 100rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-right: 14rpx;
+  margin-bottom: 14rpx;
+}
+
+.score-card:nth-child(6n) {
+  margin-right: 0;
+}
+
+.score-card-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100rpx;
+  height: 56rpx;
+}
+
+.score-value {
+  position: relative;
+  z-index: 1;
+  min-width: 28rpx;
+  text-align: center;
+  font-size: 34rpx;
+  line-height: 1;
+  font-weight: 700;
+  font-style: italic;
+  color: #f6e3b2;
+  text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
+  margin-left: -10rpx;
+}
+
+.score-value--low {
+  color: #cfcfcf;
+  text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
+}
+</style>