💄 调整UI

2026-03-19 04:29:45 +08:00 · 2025-03-20 10:32:31 +08:00
parent 31874e07c4
commit f4a0165e81
5 changed files with 52 additions and 53 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,7 +30,7 @@ importers:
        specifier: ^2.3.1
        version: 2.3.1
      '@tauri-apps/plugin-opener':
-        specifier: ~2.2.6
+        specifier: ^2.2.6
        version: 2.2.6
      '@tauri-apps/plugin-os':
        specifier: ^2.2.1
--- a/src/components/app/t-itemBox.vue
+++ b/src/components/app/t-itemBox.vue
@@ -68,8 +68,8 @@ const props = defineProps<TItemBoxProps>();
  left: 0;
  overflow: hidden;
  width: v-bind("props.modelValue.size");
-  border-radius: 5px;
-  aspect-ratio: 1;
+  height: v-bind("props.modelValue.height");
+  border-radius: 4px;
 }

 .tib-bg img {
@@ -82,8 +82,8 @@ const props = defineProps<TItemBoxProps>();
  position: relative;
  overflow: hidden;
  width: v-bind("props.modelValue.size");
-  border-radius: 5px;
-  aspect-ratio: 1;
+  height: v-bind("props.modelValue.height");
+  border-radius: 4px;
 }

 .tib-icon img {
@@ -98,11 +98,11 @@ const props = defineProps<TItemBoxProps>();
  left: 0;
  display: flex;
  width: v-bind("props.modelValue.size");
+  height: v-bind("props.modelValue.height");
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  border-radius: 5px;
-  aspect-ratio: 1;
+  border-radius: 4px;
 }

 .tib-lt {
@@ -111,9 +111,9 @@ const props = defineProps<TItemBoxProps>();
  left: 3%;
  display: flex;
  width: v-bind("props.modelValue.ltSize");
+  height: v-bind("props.modelValue.ltSize");
  align-items: center;
  justify-content: center;
-  aspect-ratio: 1;
 }

 .tib-lt img {
@@ -128,12 +128,12 @@ const props = defineProps<TItemBoxProps>();
  right: 0;
  display: flex;
  width: v-bind("props.modelValue.rtSize");
+  height: v-bind("props.modelValue.rtSize");
  align-items: center;
  justify-content: center;
-  aspect-ratio: 1;
  background: rgb(0 0 0 / 40%);
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 4px;
  color: var(--tgc-white-1);
  font-family: var(--font-title);
 }
@@ -150,8 +150,8 @@ const props = defineProps<TItemBoxProps>();
  -webkit-backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));
  backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));
  background: rgb(20 20 20 / 40%);
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
  color: var(--tgc-white-1);
  font-family: var(--font-title);
  font-size: v-bind("((props.modelValue.innerHeight ?? 0) / 2).toString() + 'px'");
@@ -159,8 +159,8 @@ const props = defineProps<TItemBoxProps>();

 .tib-inner img {
  width: v-bind("(props.modelValue.innerHeight ?? 0).toString() + 'px'");
+  height: v-bind("(props.modelValue.innerHeight ?? 0).toString() + 'px'");
  padding: 1px;
-  aspect-ratio: 1;
 }

 .tib-inner span {
--- a/src/components/app/to-nameCard.vue
+++ b/src/components/app/to-nameCard.vue
@@ -138,23 +138,23 @@ async function shareNameCard(): Promise<void> {
  overflow: hidden;
  width: 800px;
  height: 400px;
-  border-radius: 10px;
+  border-radius: 4px;
 }

 .ton-bg {
  position: absolute;
  width: 100%;
  height: 100%;
-  border-radius: 10px;
+  border-radius: 4px;
 }

 .ton-type {
  position: absolute;
  top: 10px;
  left: 10px;
-  padding: 0 5px;
+  padding: 0 4px;
  border: 1px solid var(--tgc-white-1);
-  border-radius: 5px;
+  border-radius: 4px;
  color: var(--tgc-white-1);
 }

@@ -169,8 +169,8 @@ async function shareNameCard(): Promise<void> {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
-  padding: 10px;
-  border-radius: 10px;
+  padding: 8px;
+  border-radius: 4px;
  backdrop-filter: blur(5px);
  background: rgb(0 0 0 / 25%);
  color: var(--tgc-white-1);
@@ -202,7 +202,7 @@ async function shareNameCard(): Promise<void> {
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--tgc-white-1);
-  border-radius: 5px;
+  border-radius: 4px;
  color: var(--tgc-white-1);
 }
 </style>
--- a/src/components/userAchi/tua-achi-overlay.vue
+++ b/src/components/userAchi/tua-achi-overlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" blur-val="0">
+  <TOverlay v-model="visible" blur-val="5px">
    <div class="tua-ao-container" v-if="props.data">
      <slot name="left"></slot>
      <div class="tua-ao-box">
@@ -11,26 +11,32 @@
            {{ props.data.description }}
          </span>
        </div>
-        <div class="tua-ao-mid-title">
-          <span>所属系列：</span>
-          <span class="tua-ao-click" @click="emits('select-series', props.data.series)">
-            {{ AppAchievementSeriesData.find((s) => s.id === props.data?.series)?.name ?? "未知" }}
-          </span>
+        <div class="tua-ao-mid">
+          <div class="tua-ao-mid-title">
+            <span>所属系列：</span>
+            <span class="tua-ao-click" @click="emits('select-series', props.data.series)">
+              {{
+                AppAchievementSeriesData.find((s) => s.id === props.data?.series)?.name ?? "未知"
+              }}
+            </span>
+          </div>
+          <div class="tua-ao-mid-title">
+            <span>原石奖励：</span>
+            <span>{{ props.data.reward }}</span>
+          </div>
+          <div class="tua-ao-mid-title">
+            <span>触发方式：</span>
+            <span>{{
+              props.data.trigger.task ? "完成以下所有任务" : props.data.trigger.type
+            }}</span>
+          </div>
+          <div class="tua-ao-mid-item" v-for="item in props.data.trigger.task" :key="item.questId">
+            <v-icon>mdi-alert-decagram</v-icon>
+            <span class="tua-ao-click" @click="searchDirect(item.name)">{{ item.name }}</span>
+            <span>（{{ item.type }}）</span>
+          </div>
        </div>
-        <div class="tua-ao-mid-title">
-          <span>原石奖励：</span>
-          <span>{{ props.data.reward }}</span>
-        </div>
-        <div class="tua-ao-mid-title">
-          <span>触发方式：</span>
-          <span>{{ props.data.trigger.task ? "完成以下所有任务" : props.data.trigger.type }}</span>
-        </div>
-        <div class="tua-ao-mid-item" v-for="item in props.data.trigger.task" :key="item.questId">
-          <v-icon>mdi-alert-decagram</v-icon>
-          <span class="tua-ao-click" @click="searchDirect(item.name)">{{ item.name }}</span>
-          <span>（{{ item.type }}）</span>
-        </div>
-        <div>
+        <div class="tua-ao-bottom">
          <div class="tua-ao-bottom-title">
            <span>是否完成：</span>
            <span>{{ props.data.isCompleted ? "是" : "否" }}</span>
@@ -93,7 +99,7 @@ async function share(): Promise<void> {
  display: flex;
  align-items: center;
  justify-content: center;
-  column-gap: 10px;
+  column-gap: 8px;
 }

 .tua-ao-box {
@@ -103,10 +109,10 @@ async function share(): Promise<void> {
  width: 600px;
  flex-direction: column;
  align-items: flex-start;
-  padding: 10px;
-  border-radius: 10px;
+  padding: 8px;
+  border-radius: 4px;
  background: var(--box-bg-1);
-  row-gap: 10px;
+  row-gap: 8px;
 }

 .tua-ao-top {
@@ -123,14 +129,6 @@ async function share(): Promise<void> {
  font-size: 24px;
 }

-.tua-ao-top-main :last-child {
-  padding: 0 5px;
-  border-radius: 5px;
-  background: var(--box-bg-2);
-  color: var(--box-text-5);
-  font-family: var(--font-title);
-}
-
 .tua-ao-mid-title,
 .tua-ao-bottom-title {
  font-size: 18px;
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -11,6 +11,7 @@
          :items="uidList"
          label="存档UID"
          variant="outlined"
+          width="200px"
        />
        <span>{{ title }}</span>
      </div>