update:更新靶纸，新增约战次数

src/pages/grade-intro.vue

@@ -1,31 +1,66 @@
 <script setup>
+import { computed } from "vue";
 import Container from "@/components/Container.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
+
+const MAX_LEVEL = 100;
+const LEVEL_NODE_WIDTH_RPX = 72;
+const TRACK_PADDING_RPX = 20;
+const windowWidth = uni.getSystemInfoSync().windowWidth;
+const rpxToPx = (value) => (value * windowWidth) / 750;
+const levels = Array.from({ length: MAX_LEVEL }, (_, index) => index + 1);
+const currentLevel = computed(() => {
+  const level = Number(user.value?.lvl) || 1;
+  return Math.min(Math.max(level, 1), MAX_LEVEL);
+});
+const currentLevelScrollLeft = computed(() => {
+  const nodeWidth = rpxToPx(LEVEL_NODE_WIDTH_RPX);
+  const trackPadding = rpxToPx(TRACK_PADDING_RPX);
+  const contentWidth = rpxToPx(
+    TRACK_PADDING_RPX * 2 + MAX_LEVEL * LEVEL_NODE_WIDTH_RPX
+  );
+  const currentCenter =
+    trackPadding + (currentLevel.value - 1) * nodeWidth + nodeWidth / 2;
+  const targetLeft = currentCenter - windowWidth / 2;
+  const maxScrollLeft = Math.max(contentWidth - windowWidth, 0);
+
+  return Math.min(Math.max(targetLeft, 0), maxScrollLeft);
+});
 </script>
 
 <template>
   <Container title="等级介绍">
     <view class="container">
       <!-- 等级进度条 -->
-      <view class="level-progress">
-        <view v-for="(_, index) in 10" :key="index" class="progress-dot">
+      <scroll-view
+        class="level-progress"
+        scroll-x
+        :show-scrollbar="false"
+        :scroll-left="currentLevelScrollLeft"
+        scroll-with-animation
+      >
+        <view class="level-track">
           <view
-            :style="{
-              backgroundColor:
-                index + 1 < user.lvl
-                  ? '#fff9'
-                  : index + 1 === user.lvl
-                  ? '#fed847'
-                  : 'transparent',
-              borderColor: index + 1 === user.lvl ? '#fed847' : '#fff9',
-            }"
-          />
-          <view />
+            v-for="level in levels"
+            :id="`level-${level}`"
+            :key="level"
+            :class="[
+              'level-node',
+              level < currentLevel ? 'level-node--done' : '',
+              level === currentLevel ? 'level-node--current' : '',
+            ]"
+          >
+            <view class="level-node__top">
+              <view class="level-node__dot" />
+              <view v-if="level < MAX_LEVEL" class="level-node__line" />
+            </view>
+            <text class="level-node__label">{{ level }}</text>
+          </view>
         </view>
-      </view>
+      </scroll-view>
 
       <!-- 说明文本 -->
       <view class="body">
@@ -65,28 +100,80 @@ const { user } = storeToRefs(store);
 
 .level-progress {
   width: 100%;
-  height: 32rpx;
-  display: flex;
-  justify-content: center;
-  padding-top: 20rpx;
-  padding-bottom: 40rpx;
+  white-space: nowrap;
+  padding: 24rpx 0 34rpx;
+  box-sizing: border-box;
 }
 
-.progress-dot {
+.level-track {
+  display: inline-flex;
+  align-items: flex-start;
+  padding-left: 20rpx;
+  padding-right: 20rpx;
+}
+
+.level-node {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 72rpx;
+  flex: 0 0 72rpx;
+}
+
+.level-node__top {
   display: flex;
   align-items: center;
+  width: 100%;
 }
-.progress-dot > view:first-child {
-  width: 3.8vw;
-  height: 3.8vw;
+
+.level-node__dot {
+  width: 28rpx;
+  height: 28rpx;
   border-radius: 50%;
-  border: 1px solid #fff9;
+  border: 3rpx solid rgba(255, 255, 255, 0.45);
+  box-sizing: border-box;
 }
-.progress-dot > view:last-child {
-  width: 3.8vw;
-  height: 1px;
-  margin: 0 2px;
-  background-color: #fff9;
+
+.level-node__line {
+  flex: 1;
+  height: 2rpx;
+  background-color: rgba(255, 255, 255, 0.45);
+}
+
+.level-node__label {
+  width: 28rpx;
+  margin-top: 14rpx;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 24rpx;
+  line-height: 28rpx;
+  text-align: center;
+}
+
+.level-node--done .level-node__dot {
+  background-color: #ffffff;
+  border-color: #ffffff;
+}
+
+.level-node--done .level-node__line {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.level-node--done .level-node__label {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.level-node--current .level-node__dot {
+  background-color: #fed847;
+  border-color: #fed847;
+}
+
+.level-node--current .level-node__line {
+  background-color: rgba(255, 255, 255, 0.45);
+}
+
+.level-node--current .level-node__label {
+  color: #fed847;
+  font-weight: 700;
 }
 
 .body {