update:优化样式

src/pages/training/components/BowData.vue

@@ -1,7 +1,7 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
 import Avatar from "@/components/Avatar.vue";
-import BowTarget from "@./BowTarget.vue";
+import BowTarget from "./BowTarget.vue";
 import ScorePanel from "./ScorePanel.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -30,7 +30,7 @@ const props = defineProps({
 
 <template>
   <view class="container" :style="{ display: show ? 'flex' : 'none' }">
-    <AppBackground :type="1" />
+    <AppBackground :type="10" />
     <view class="header">
       <view>
         <Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
@@ -40,7 +40,7 @@ const props = defineProps({
         </view>
       </view>
       <view @click="onClose">
-        <image src="../static/close-white.png" mode="widthFix" />
+        <image src="/static/close-white.png" mode="widthFix" />
       </view>
     </view>
     <view :style="{ width: '100%', marginBottom: '20px' }">

src/pages/training/components/ScorePanel.vue

@@ -23,13 +23,24 @@ const props = defineProps({
   },
 });
 const items = ref(new Array(props.total).fill(9));
-const width = ref(92);
-const itemWidth = ref(0);
 const bgImages = [
   "../static/complete-light1.png",
   "../static/complete-light2.png",
 ];
 const bgIndex = ref(0);
+
+const getDisplayText = (arrow) => {
+  if (!arrow) return "-";
+  if (arrow.ringX) return "X";
+  return arrow.ring ?? "-";
+};
+
+const isLowScore = (arrow) => {
+  if (!arrow || arrow.ringX) return false;
+  const ring = Number(arrow.ring);
+  return Number.isFinite(ring) && ring < 6;
+};
+
 watch(
   () => props.total,
   (newValue) => {
@@ -69,55 +80,77 @@ onBeforeUnmount(() => {
       v-for="(_, index) in items"
       :key="index"
       class="score-item"
-      :style="{
-        width: 100 / (rowCount + 2) + 'vw',
-        height: 100 / (rowCount + 2) + 'vw',
-        lineHeight: 100 / (rowCount + 2) + 'vw',
-        fontSize: fontSize + 'px',
-        margin: 100 / (total * 2) + 'px',
-      }"
     >
-      <image src="/static/score-bg.png" mode="widthFix" />
+      <image
+        class="score-item-bg"
+        :src="
+          isLowScore(arrows[index])
+            ? '/static/training-difficulty-design/block-gray.png'
+            : '/static/training-difficulty-design/block-gold.png'
+        "
+      />
       <text
-        :style="{ fontWeight: arrows[index] !== undefined ? 'bold' : 'normal' }"
+        class="score-value"
-        >{{
+        :class="{ 'score-value--low': isLowScore(arrows[index]) }"
-          !arrows[index] ? "-" : arrows[index].ringX ? "X" : arrows[index].ring
-        }}</text
       >
+        {{ getDisplayText(arrows[index]) }}
+      </text>
     </view>
   </view>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
-  width: 92vw;
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  box-sizing: border-box;
-  margin: 0 4vw;
   position: relative;
-  padding: 1vw 0;
+  padding: 30rpx 40rpx 0 40rpx;
 }
 .score-item {
-  /* background-image: url("../static/score-bg.png");
+  position: relative;
-  background-size: cover;
+  width: 100rpx;
-  background-repeat: no-repeat;
+  height: 56rpx;
-  background-position: center; */
-  color: #fed847;
   display: flex;
-  justify-content: center;
   align-items: center;
-  position: relative;
+  justify-content: center;
+  overflow: hidden;
+  margin-right: 14rpx;
+  margin-bottom: 14rpx;
 }
-.score-item > image {
+
+.score-item:nth-child(6n) {
+  margin-right: 0;
+}
+
+.score-item-bg {
   position: absolute;
-  width: 100%;
+  top: 0;
-  top: 5%;
+  left: 0;
+  width: 100rpx;
+  height: 56rpx;
 }
-.score-item > text {
+
+.score-value {
   position: relative;
-  margin-top: 2px;
+  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);
+}
+
 .complete-light {
   position: absolute;
 }

src/pages/training/components/ScreenHint.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IconButton from "./IconButton.vue";
+import IconButton from "@/components/IconButton.vue";
 
 const props = defineProps({
   show: {
@@ -27,29 +27,29 @@ const getContentHeight = () => {
     <view class="scale-in" :style="{ height: getContentHeight() }">
       <image
         v-if="mode === 'normal'"
-        src="../static/screen-hint-bg.png"
+        src="/static/screen-hint-bg.png"
         mode="widthFix"
       />
       <image
         v-if="mode === 'tall'"
-        src="../static/coach-comment.png"
+        src="/static/coach-comment.png"
         mode="widthFix"
       />
       <image
         v-if="mode === 'square'"
-        src="../static/prompt-bg-square.png"
+        src="/static/prompt-bg-square.png"
         mode="widthFix"
       />
       <image
         v-if="mode === 'small'"
-        src="../static/finish-frame.png"
+        src="/static/finish-frame.png"
         mode="widthFix"
       />
       <slot />
     </view>
     <IconButton
       v-if="!!onClose"
-      src="../static/close-gold-outline.png"
+      src="/static/close-gold-outline.png"
       :width="30"
       :onClick="onClose"
     />