update:代码备份

2026-05-29 17:46:52 +08:00
parent 8b25a10d4c
commit b3fc11f1b1
8 changed files with 1322 additions and 108 deletions
@@ -0,0 +1,124 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  arrows: {
+    type: Array,
+    default: () => [],
+  },
+  fontSize: {
+    type: Number,
+    default: 25,
+  },
+  completeEffect: {
+    type: Boolean,
+    default: true,
+  },
+});
+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);
+watch(
+  () => props.total,
+  (newValue) => {
+    items.value = new Array(newValue).fill(9);
+  }
+);
+const timer = ref(null);
+onMounted(() => {
+  timer.value = setInterval(() => {
+    bgIndex.value = bgIndex.value === 0 ? 1 : 0;
+  }, 200);
+});
+onBeforeUnmount(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+  }
+});
+</script>
+<template>
+  <view class="container">
+    <image
+      v-if="total > 0 && arrows.length === total && completeEffect"
+      :src="bgImages[bgIndex]"
+      class="complete-light"
+      :style="{
+        width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
+          (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
+        }px)`,
+        height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
+          (100 / (total * 2)) *
+          ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
+        }px)`,
+        top: `${total === 12 ? -2 : -3}vw`,
+      }"
+    />
+    <view
+      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" />
+      <text
+        :style="{ fontWeight: arrows[index] !== undefined ? 'bold' : 'normal' }"
+        >{{
+          !arrows[index] ? "-" : arrows[index].ringX ? "X" : arrows[index].ring
+        }}</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 92vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 4vw;
+  position: relative;
+  padding: 1vw 0;
+}
+.score-item {
+  /* background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center; */
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.score-item > image {
+  position: absolute;
+  width: 100%;
+  top: 5%;
+}
+.score-item > text {
+  position: relative;
+  margin-top: 2px;
+}
+.complete-light {
+  position: absolute;
+}
+</style>