💄 调整垫数显示位置&样式

src/components/userGacha/gro-data-reset.vue

@@ -1,130 +0,0 @@
-<!-- 垫数 -->
-<template>
-  <div class="gro-dr-box">
-    <div class="gro-dr-progress" />
-    <div class="gro-dr-icon">
-      <img alt="empty" src="/UI/app/empty.webp" />
-    </div>
-    <div class="gro-dr-info">
-      <div class="gro-dr-cnt">{{ props.count }}</div>
-      <div class="gro-dr-hint">垫</div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-
-type GroDataResetProps = {
-  /** 计算星级 */
-  compute: "4" | "5";
-  /** 祈愿类型 */
-  gacha: string;
-  /** 当前垫数 */
-  count: number;
-};
-
-const props = defineProps<GroDataResetProps>();
-const progressColor = computed<string>(() => {
-  if (props.gacha === "normal") return "#61afef";
-  if (props.compute === "4") return "#c678dd";
-  if (props.compute === "5") return "#d19a66";
-  return "#61afef";
-});
-const width = computed<string>(() => {
-  let final = 10;
-  if (props.compute === "5") {
-    if (props.gacha === "302") final = 80;
-    else final = 90;
-  }
-  return ((props.count / final) * 100).toFixed(2) + "%";
-});
-</script>
-<style lang="scss" scoped>
-.gro-dr-box {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 48px;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 8px;
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 4px;
-  margin-bottom: 8px;
-  background: var(--box-bg-2);
-  column-gap: 4px;
-}
-
-.gro-dr-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: v-bind(width);
-  max-width: 100%;
-  height: 4px;
-  border-radius: 4px;
-  background: v-bind(progressColor); /* stylelint-disable-line value-keyword-case */
-}
-
-.gro-dr-icon {
-  display: flex;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.gro-dr-base {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.gro-dr-name {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 14px;
-  line-height: 18px;
-}
-
-.gro-dr-time {
-  color: var(--box-text-7);
-  font-size: 12px;
-  line-height: 14px;
-}
-
-.gro-dr-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  column-gap: 4px;
-}
-
-.gro-dr-cnt {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-}
-
-.gro-dr-hint {
-  display: flex;
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border-radius: 50%;
-  background: var(--box-bg-3);
-  color: var(--tgc-od-blue);
-  font-family: var(--font-title);
-  transform: rotate(25deg);
-}
-</style>

src/components/userGacha/gro-data-view.vue

@@ -4,6 +4,18 @@
     <div ref="headerRef" class="gro-dv-header">
       <div class="gro-dvt-title">
         <span>{{ title }}</span>
+        <GroResetCard
+          v-if="props.dataType !== 'new'"
+          :count="reset5count - 1"
+          :gacha="props.dataType"
+          compute="5"
+        />
+        <GroResetCard
+          v-if="props.dataType !== 'new'"
+          :count="reset4count - 1"
+          :gacha="props.dataType"
+          compute="4"
+        />
         <span>{{ props.dataVal.length }}</span>
       </div>
       <div class="gro-dvt-subtitle">
@@ -13,7 +25,7 @@
       <!-- 4星相关数据 -->
       <div :class="{ 'has-up': isUpPool }" class="gro-mid-list">
         <div class="gro-ml-title s4">★★★★</div>
-        <div class="gro-ml-card reset" title="点击切换垫数显示" @click="switchShowReset()">
+        <div class="gro-ml-card">
           <span>垫</span>
           <span>{{ reset4count - 1 }}</span>
         </div>
@@ -33,7 +45,7 @@
       <!-- 5星相关数据 -->
       <div :class="{ 'has-up': star5UpAvg !== '' }" class="gro-mid-list">
         <div class="gro-ml-title s5">★★★★★</div>
-        <div class="gro-ml-card reset" title="点击切换垫数显示" @click="switchShowReset()">
+        <div class="gro-ml-card">
           <span>垫</span>
           <span>{{ reset5count - 1 }}</span>
         </div>
@@ -65,12 +77,6 @@
       </v-tabs>
       <v-window v-model="tab" class="gro-bottom-window">
         <v-window-item class="gro-b-window-item" value="5">
-          <GroDataReset
-            v-if="props.dataType !== 'new' && showReset"
-            :count="reset5count - 1"
-            :gacha="props.dataType"
-            compute="5"
-          />
           <v-virtual-scroll :item-height="48" :items="star5List">
             <template #default="{ item }">
               <GroDataLine
@@ -83,12 +89,6 @@
           </v-virtual-scroll>
         </v-window-item>
         <v-window-item class="gro-b-window-item" value="4">
-          <GroDataReset
-            v-if="props.dataType !== 'new' && showReset"
-            :count="reset4count - 1"
-            :gacha="props.dataType"
-            compute="4"
-          />
           <v-virtual-scroll :item-height="48" :items="star4List">
             <template #default="{ item }">
               <GroDataLine
@@ -120,7 +120,7 @@ import {
 } from "vue";
 
 import GroDataLine, { type GroDataLineProps } from "./gro-data-line.vue";
-import GroDataReset from "./gro-data-reset.vue";
+import GroResetCard from "./gro-reset-card.vue";
 
 import { AppGachaData } from "@/data/index.js";
 
@@ -147,7 +147,6 @@ const startDate = ref<string>(""); // 最早的时间
 const endDate = ref<string>(""); // 最晚的时间
 const star5List = shallowRef<Array<GroDataLineProps>>([]); // 5星物品数据
 const star4List = shallowRef<Array<GroDataLineProps>>([]); // 4星物品数据
-const showReset = ref<boolean>(true);
 const reset5count = ref<number>(1); // 5星垫抽数量
 const reset4count = ref<number>(1); // 4星垫抽数量
 const star3count = ref<number>(0); // 3星物品数量
@@ -220,11 +219,6 @@ watch(
   },
 );
 
-// 切换垫数显示
-function switchShowReset(): void {
-  showReset.value = !showReset.value;
-}
-
 function loadData(): void {
   title.value = getTitle();
   const tempData = props.dataVal;
@@ -375,10 +369,15 @@ function getPg(star: "5" | "4" | "3"): string {
   display: flex;
   width: 100%;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   color: var(--common-text-title);
+  column-gap: 8px;
   font-family: var(--font-title);
   font-size: 18px;
+
+  :last-child {
+    margin-left: auto;
+  }
 }
 
 .gro-dvt-subtitle {

src/components/userGacha/gro-reset-card.vue

@@ -0,0 +1,65 @@
+<!-- 垫数卡片 -->
+<template>
+  <div class="gro-rc-box">
+    <div class="gro-rc-progress" />
+    <span>距上个{{ props.compute }}星</span>
+    <span>{{ props.count }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+type GroResetCardProps = {
+  /** 计算星级 */
+  compute: "4" | "5";
+  /** 祈愿类型 */
+  gacha: string;
+  /** 当前垫数 */
+  count: number;
+};
+
+const props = defineProps<GroResetCardProps>();
+const color = computed<string>(() => {
+  if (props.compute === "4") return "#c678dd";
+  return "#d19a66";
+});
+const width = computed<string>(() => {
+  let final = 10;
+  if (props.compute === "5") {
+    if (props.gacha === "302") final = 80;
+    else final = 90;
+  }
+  return ((props.count / final) * 100).toFixed(2) + "%";
+});
+</script>
+<style lang="scss" scoped>
+.gro-rc-box {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 4px;
+  border: 1px solid v-bind(color);
+  border-radius: 4px;
+  color: v-bind(color);
+  column-gap: 8px;
+  font-size: 14px;
+
+  span {
+    z-index: 1;
+  }
+}
+
+.gro-rc-progress {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: v-bind(width);
+  height: 100%;
+  background: v-bind(color);
+  opacity: 0.3;
+}
+</style>