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>

src/pages/training/practise-one.vue

@@ -4,7 +4,7 @@ import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import ShootProgress from "./components/ShootProgress.vue";
 import BowTarget from "./components/BowTarget.vue";
-import ScorePanel2 from "@/components/ScorePanel2.vue";
+import ScorePanel2 from "./components/ScorePanel2.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
@@ -153,15 +153,23 @@ onBeforeUnmount(() => {
               mode="aspectFit"
             />
           </button>
-          <view class="bat-text-box">
+          <view class="bat-text-big-box">
             <image
               class="dao-icon"
-              src="/static/dao-icon.png"
+              src="../../static/training-difficulty-design/dao-icon.png"
               mode="widthFix"
             />
+            <view class="bat-text-box">
+              <view class="bat-text-small-box">
+                <view class="text-round-box">
+                  <view class="text1">每箭命中9环之上</view>
+                  <view class="text2">剩余<text class="text2-yellow">3</text>箭</view>
+                </view>
+              </view>
+            </view>
           </view>
         </view>
-        <ScorePanel2 :arrows="scores" />
+        <ScorePanel2 :arrows="scores" :total="total" />
         <ScoreResult
           v-if="practiseResult.details"
           :rowCount="6"
@@ -223,16 +231,13 @@ onBeforeUnmount(() => {
 .sound-text-box{
   height: 125rpx;
   padding: 0 56rpx;
-  background: pink;
+  display: flex;
+  align-items: flex-end;
 }
 .sound-btn {
   width: 76rpx;
   height: 70rpx;
   border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 56rpx;
 }
 
 .sound-btn::after {
@@ -243,7 +248,7 @@ onBeforeUnmount(() => {
   width: 76rpx;
   height: 70rpx;
 }
-.bat-bext-box{
+.bat-text-big-box{
   flex: 1;
   position: relative;
 }
@@ -254,4 +259,42 @@ onBeforeUnmount(() => {
   left: 0;
   bottom: 0;
 }
+.text-round-box{
+  width: 100%;
+}
+.bat-text-box{
+  display: flex;
+}
+.bat-text-small-box{
+  background: rgba(0, 0, 0, 0.5);
+  width: auto;
+  min-width: 100rpx;
+  border-radius: 16rpx 60rpx 60rpx 16rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 176rpx;
+  height: 112rpx;
+  padding-right: 30rpx;
+  font-size: 30rpx;
+  color: #E7BA80;
+}
+.text1{
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #E7BA80;
+  line-height: 42rpx;
+}
+.text2{
+  color: #FFFFFF;
+  font-size: 26rpx;
+  font-weight: 400;
+  line-height: 36rpx;
+}
+.text2-yellow{
+  font-size: 30rpx;
+  color: #FFD947;
+  font-weight: 500;
+  margin: 0 4rpx;
+}
 </style>