添加匹配环节的名字

src/components/Matching.vue

@@ -11,91 +11,93 @@ const props = defineProps({
   },
 });
 const playerNames = [
-  "彭妮·希利",
+  "乐正青山",
-  "埃琳娜·奥西波娃",
+  "宇文玉兰",
-  "凯西·考夫霍尔德",
+  "岑思宇",
+  "邬梓瑜",
+  "范子衿",
   "旗鼓相当的对手",
-  "马乌罗·内斯波利",
+  "乐子睿",
-  "埃琳娜·奥西波娃",
+  "时春晓",
-  "凯西·考夫霍尔德",
+  "柏孤鸿",
+  "东宫锦瑟",
+  "段干流云",
+];
+const textStyles = [
+  {
+    color: "#fff9",
+    fontSize: "18px",
+  },
+  {
+    color: "#fff",
+    fontSize: "22px",
+  },
+  {
+    color: "#fed847",
+    fontSize: "30px",
+  },
 ];
 
-const totalTop = ref(0);
+const rowHeight = 100 / 7;
-const timer = ref(null);
+const totalHeight = (playerNames.length / 7) * 100 + 7;
-const textStyles = ref([]);
 
-const getTextStyle = (top) => {
+const currentTop = ref(-totalHeight + rowHeight * 0);
-  const styles = [
+const timer = ref(null);
-    {
+
-      color: "#fff9",
+const getTextStyle = (top, index) => {
-      fontSize: "20px",
+  const count = Math.floor(
-    },
+    ((totalHeight + (top + rowHeight / 3)) / rowHeight).toFixed(1)
-    {
+  );
-      color: "#fff",
+  if (index === 12 - count) return textStyles[0];
-      fontSize: "24px",
+  else if (index === 13 - count) return textStyles[1];
-    },
+  else if (index === 14 - count) return textStyles[2];
-    {
+  else if (index === 15 - count) return textStyles[1];
-      color: "#fed847",
+  else if (index === 16 - count) return textStyles[0];
-      fontSize: "30px",
+  return {
-    },
-  ];
-  const data = new Array(14).fill({
     color: "#fff6",
-    fontSize: "16px",
+    fontSize: "14px",
-  });
+  };
-  const unitHeight = 100 / 7;
-  let style = {};
-  if (top >= 100 - unitHeight / 2) {
-    for (let j = 0; j < 5; j++) {
-      data[j + 1] = styles[j > 2 ? 4 - j : j];
-    }
-  } else {
-    new Array(7).fill(1).some((_, i) => {
-      if (
-        top >= unitHeight * i - unitHeight / 2 &&
-        top < unitHeight * (i + 1) - unitHeight / 2
-      ) {
-        for (let j = 0; j < 5; j++) {
-          data[7 + j + 1 - i] = styles[j > 2 ? 4 - j : j];
-        }
-        return true;
-      }
-      return false;
-    });
-  }
-  return data;
 };
 watch(
   () => props.onComplete,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
-      if (timer.value) clearInterval(timer.value);
+      if (timer.value) {
+        clearInterval(timer.value);
+        timer.value = null;
+      }
       timer.value = setInterval(() => {
-        if (totalTop.value === 100) {
+        const count = Math.round(
+          (
+            (totalHeight + (currentTop.value + rowHeight / 3)) /
+            rowHeight
+          ).toFixed(1)
+        );
+        if (count === 10) {
           clearInterval(timer.value);
+          timer.value = null;
           setTimeout(() => {
             newVal();
           }, 1500);
         } else {
-          totalTop.value += 0.5;
+          currentTop.value += 2;
         }
-        textStyles.value = getTextStyle(totalTop.value);
+      }, 40);
-      }, 10);
     }
   }
 );
 onMounted(() => {
   timer.value = setInterval(() => {
-    if (totalTop.value === 100) {
+    if (currentTop.value >= -4) {
-      totalTop.value = 0;
+      currentTop.value = -totalHeight;
     } else {
-      totalTop.value += 2;
+      currentTop.value += 2;
     }
-    textStyles.value = getTextStyle(totalTop.value);
   }, 40);
 });
 onBeforeUnmount(() => {
   if (timer.value) clearInterval(timer.value);
+  timer.value = null;
 });
 </script>
 
@@ -107,30 +109,13 @@ onBeforeUnmount(() => {
       class="matching-bg"
     />
     <view>
-      <view
+      <view class="player-names" :style="{ top: `${currentTop}%` }">
-        class="player-names"
-        :style="{
-          top: `${totalTop - 100}%`,
-        }"
-      >
         <text
-          v-for="(name, index) in playerNames"
+          v-for="(name, index) in [...playerNames, ...playerNames]"
           :key="index"
           :style="{
-            lineHeight: `${95 / 7}vw`,
+            lineHeight: `${rowHeight}vw`,
-            ...(textStyles[index] || {}),
+            ...getTextStyle(currentTop, index),
-          }"
-        >
-          {{ name }}
-        </text>
-      </view>
-      <view class="player-names" :style="{ top: `${totalTop}%` }">
-        <text
-          v-for="(name, index) in playerNames"
-          :key="index"
-          :style="{
-            lineHeight: `${95 / 7}vw`,
-            ...(textStyles[index + 7] || {}),
           }"
         >
           {{ name }}
@@ -156,7 +141,7 @@ onBeforeUnmount(() => {
   height: 95vw;
   overflow: hidden;
   position: absolute;
-  top: 30.5vw;
+  top: 30vw;
 }
 .matching-bg {
   position: absolute;
@@ -176,7 +161,6 @@ onBeforeUnmount(() => {
 }
 .player-names {
   width: 100%;
-  height: 95vw;
   display: flex;
   flex-direction: column;
   position: absolute;