💄 样式调整，透明色感觉挺好看的

src/App.vue

@@ -15,8 +15,8 @@
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
-import TSidebar from "./components/t-sidebar.vue";
-import TBackTop from "./components/t-backTop.vue";
+import TSidebar from "./components/main/t-sidebar.vue";
+import TBackTop from "./components/main/t-backTop.vue";
 // tauri
 import { app, event, fs, window } from "@tauri-apps/api";
 // store

src/components/main/t-backTop.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div v-show="canTop" class="back-top" @click="handleScrollTop">
-      <img src="../assets/icons/arrow-top.svg" alt="back-icon">
+      <img src="../../assets/icons/arrow-top.svg" alt="back-icon">
     </div>
   </transition>
 </template>

src/components/main/t-calendar.vue

@@ -1,31 +1,33 @@
 <template>
-  <v-list class="calendar-card">
-    <v-list-item>
-      <v-list-item-title style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif">
-        <v-icon color="#EBD49E">
+  <div class="calendar-box">
+    <div class="calendar-title">
+      <div class="calendar-title-left">
+        <v-icon size="small">
           mdi-calendar-clock
         </v-icon>
-        今日素材
-        <span style="color: #faf7e8">{{ dateNow }}</span>
+        <span>今日素材</span>
+        <span>{{ dateNow }}</span>
+      </div>
+      <div class="calendar-title-right">
         <v-btn
           v-for="text of btnText"
           :key="text.week"
-          class="calendar-btn"
+          class="calendar-title-btn"
           :style="{
-            border: text.week === weekNow ? '2px solid var(--btn-bg-1)' : '0',
-            background: text.week === btnNow ? 'var(--btn-bg-1)' : 'var(--calendar-btn-bg)',
-            color: '#faf7e8',
-            marginBottom: '1px'
+            boxShadow: text.week === weekNow ? '0 0 5px #FEC90B' : 'none',
+            background: text.week === btnNow ? 'rgba(0,0,0,0.8)' : 'rgba(0,0,0,0.3)',
           }"
           @click="getContents(text.week)"
         >
           {{ text.text }}
         </v-btn>
-      </v-list-item-title>
-      <div class="calendar-box">
-        <div class="calendar-single">
-          <div class="calendar-title">
-            天赋培养
+      </div>
+    </div>
+    <div class="calendar-divider" />
+    <div class="calendar-sub">
+      <div class="calendar-sub-title">
+        <img src="/src/assets/icons/arrow-right.svg" alt="character">
+        <span>角色突破</span>
       </div>
       <div class="cards-grid">
         <div
@@ -38,9 +40,10 @@
         </div>
       </div>
     </div>
-        <div class="calendar-single">
-          <div class="calendar-title">
-            武器突破
+    <div class="calendar-sub">
+      <div class="calendar-sub-title">
+        <img src="/src/assets/icons/arrow-right.svg" alt="character">
+        <span>武器突破</span>
       </div>
       <div class="cards-grid">
         <div
@@ -53,8 +56,6 @@
         </div>
       </div>
     </div>
-      </div>
-    </v-list-item>
     <v-snackbar v-model="snackbar" :timeout="1500" :color="snackbarColor">
       {{ snackbarText }}
     </v-snackbar>
@@ -87,7 +88,7 @@
           <div class="detail-btn">
             <v-btn @click="showDetail(selectedItem)">
               <template #append>
-                <img src="../assets/icons/arrow-right.svg" alt="right">
+                <img src="../../assets/icons/arrow-right.svg" alt="right">
               </template>
               详情
             </v-btn>
@@ -98,19 +99,19 @@
         <v-icon>mdi-close</v-icon>
       </div>
     </v-overlay>
-  </v-list>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
-import TMiniAvatar from "./t-mini-avatar.vue";
-import TMiniWeapon from "./t-mini-weapon.vue";
-import TCalendarMaterial from "./t-calendar-material.vue";
+import TMiniAvatar from "../mini/t-mini-avatar.vue";
+import TMiniWeapon from "../mini/t-mini-weapon.vue";
+import TCalendarMaterial from "../mini/t-calendar-material.vue";
 // data
-import { AppCalendarData } from "../data";
+import { AppCalendarData } from "../../data";
 // interface
-import { OBC_CONTENT_API } from "../plugins/Mys/interface/utils";
-import { createTGWindow } from "../utils/TGWindow";
+import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
+import { createTGWindow } from "../../utils/TGWindow";
 
 // loading
 const loading = ref(true as boolean);
@@ -212,45 +213,79 @@ function getContents (day: number) {
 }
 </script>
 <style lang="css" scoped>
-/* calendar 大盒子 */
-.calendar-card {
-    margin-top: 10px;
-    font-family: Genshin-Light, serif;
-    background: var(--content-bg-1);
-    border-radius: 10px;
-}
-
-.calendar-btn {
-    margin-left: 10px;
-    font-family: Genshin-Light, serif;
-    color: var(--btn-text-1);
-    border-radius: 10px;
-}
-
 .calendar-box {
-    margin: 5px;
-}
-
-.calendar-single {
   margin-bottom: 10px;
-    background: var(--content-bg-2);
-    color: var(--content-bg-1);
-    border-radius: 10px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
 }
 
 .calendar-title {
-    font-size: 1.5rem;
+  height: 45px;
+  font-size: 20px;
+  display: flex;
+  color:rgba(255, 255, 255, 0.8);
+}
+
+.calendar-title-left {
+  width: 20%;
+  height: 45px;
   font-family: Genshin, serif;
-    color: #546D8B;
-    padding-left: 15px;
-    padding-top: 10px;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+}
+
+.calendar-title-left span {
+  margin-left: 10px;
+}
+
+.calendar-title-right {
+  width: 80%;
+  font-family: Genshin-Light, serif;
+  height: 45px;
+}
+
+.calendar-title-btn {
+    margin-left: 10px;
+    border-radius: 5px;
+}
+
+.calendar-divider {
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.calendar-sub {
+    margin: 5px;
+}
+
+.calendar-sub-title {
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  font-family: Genshin-Light, serif;
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+}
+
+.calendar-sub-title img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
 }
 
 .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    grid-gap: 10px;
-    padding: 10px;
+    grid-gap: 8px;
 }
 
 /* overlay 盒子 */

src/components/main/t-pool.vue

@@ -1,10 +1,9 @@
 <template>
-  <v-list class="pool-card">
-    <v-list-item>
-      <v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
-        <img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon">
+  <div class="pool-box">
+    <div class="pool-title">
+      <img src="../../assets/icons/icon-wish.svg" alt="wish" class="pool-title-icon">
       限时祈愿
-      </v-list-item-title>
+    </div>
     <div v-if="!loading" class="pool-grid">
       <v-card
         v-for="pool in poolCards"
@@ -42,24 +41,23 @@
         </v-card-text>
       </v-card>
     </div>
-    </v-list-item>
     <v-snackbar v-model="showBar" :color="barColor" timeout="1000">
       {{ barText }}
     </v-snackbar>
-  </v-list>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 // store
-import { useHomeStore } from "../store/modules/home";
+import { useHomeStore } from "../../store/modules/home";
 // utils
-import { createTGWindow } from "../utils/TGWindow";
+import { createTGWindow } from "../../utils/TGWindow";
 // plugins
-import MysOper from "../plugins/Mys";
+import MysOper from "../../plugins/Mys";
 // interface
-import { GachaCard, GachaData } from "../plugins/Mys/interface/gacha";
+import { GachaCard, GachaData } from "../../plugins/Mys/interface/gacha";
 
 // vue
 const router = useRouter();
@@ -211,18 +209,29 @@ onUnmounted(() => {
 </script>
 
 <style lang="css" scoped>
-.pool-wish-icon {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
+.pool-box {
+  margin-bottom: 10px;
+  padding: 10px;
+  font-family: Genshin, serif;
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
 }
 
-.pool-card {
-  font-family: Genshin, serif;
-  width: 100%;
-  background: var(--content-bg-1);
-  border-radius: 10px;
-  margin-top: 10px;
+.pool-title {
+  color:rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  font-size: 20px;
+  display: flex;
+}
+
+.pool-title-icon {
+  width: 25px;
+  height: 25px;
+  transform: translate(0, 2px);
+  margin-right: 10px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .pool-grid {

src/components/main/t-position.vue

@@ -1,15 +1,14 @@
 <template>
-  <v-list class="position-card">
-    <v-list-item>
-      <v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
-        <img src="../assets/icons/board.svg" alt="act" class="position-act-icon">
+  <div class="position-box">
+    <div class="position-title">
+      <img src="../../assets/icons/board.svg" alt="act" class="position-icon">
       近期活动
-      </v-list-item-title>
+    </div>
     <div v-if="!loading" class="position-grid">
       <v-card
         v-for="card in positionCards"
         :key="card.post_id"
-          style="background: var(--content-bg-2); color: #546d8b; border-radius: 10px"
+        style="background: var(--content-bg-2); color: #546d8b; border-radius: 5px"
       >
         <v-list style="background: var(--content-bg-2); color: #546d8b">
           <v-list-item :title="card.title" :subtitle="card.abstract">
@@ -18,45 +17,41 @@
                 <v-img :src="card.icon" style="border-radius: 10px" />
               </v-avatar>
             </template>
+            <template #append>
+              <v-btn variant="outlined" @click="toPost(card)">
+                查看
+              </v-btn>
+            </template>
           </v-list-item>
         </v-list>
         <v-divider class="border-opacity-75" />
         <v-card-text>
-            <span style="width: 60%">
+          <div style="min-width: 200px;display: inline-block">
             <v-icon>mdi-calendar-clock</v-icon>
             {{ card.time.start }} ~ {{ card.time.end }}
-            </span>
-          </v-card-text>
-          <v-card-actions>
-            <span style="width: 80%; margin-left: 10px">
-              <v-icon>mdi-clock-outline</v-icon>
-              剩余时间：
+          </div>
+          <div style="min-width: 200px;display: inline-block">
+            <v-icon>mdi-clock-outline</v-icon>剩余时间：
             <span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #90caf9">{{
               positionTimeGet[card.post_id]
             }}</span>
             <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
-            </span>
-            <v-btn class="card-btn" @click="toPost(card)">
-              <template #prepend>
-                <img src="../assets/icons/circle-check.svg" alt="check">查看
-              </template>
-            </v-btn>
-          </v-card-actions>
+          </div>
+        </v-card-text>
       </v-card>
     </div>
-    </v-list-item>
-  </v-list>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 // utils
-import { createTGWindow } from "../utils/TGWindow";
+import { createTGWindow } from "../../utils/TGWindow";
 // plugins
-import MysOper from "../plugins/Mys";
+import MysOper from "../../plugins/Mys";
 // interface
-import { PositionCard } from "../plugins/Mys/interface/position";
+import { PositionCard } from "../../plugins/Mys/interface/position";
 
 // vue
 const router = useRouter();
@@ -143,22 +138,31 @@ onUnmounted(() => {
 </script>
 
 <style lang="css" scoped>
-.position-act-icon {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
+.position-box {
+  margin-bottom: 10px;
+  padding: 10px;
+  font-family: Genshin, serif;
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
 }
 
-.position-card {
-  margin-top: 10px;
-  font-family: Genshin, serif;
-  background: var(--content-bg-1);
-  border-radius: 10px;
+.position-title {
+  color:rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  font-size: 20px;
+  display: flex;
+}
+
+.position-icon {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
 }
 
 .position-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(400px, 1fr));
+  grid-template-columns: repeat(3, minmax(calc(400px + 2rem), 1fr));
   grid-gap: 20px;
   margin-top: 10px;
 }

src/components/main/t-sidebar.vue

@@ -26,7 +26,7 @@
       </v-list-item>
       <v-list-item title="公告" value="announcements" link href="/announcements">
         <template #prepend>
-          <img src="../assets/icons/board.svg" alt="annoIcon" class="side-icon">
+          <img src="../../assets/icons/board.svg" alt="annoIcon" class="side-icon">
         </template>
       </v-list-item>
       <v-list-item title="咨讯" value="news" link href="/news/2">
@@ -36,7 +36,7 @@
       </v-list-item>
       <v-list-item title="成就" value="achievements" link href="/achievements">
         <template #prepend>
-          <img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
+          <img src="../../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
         </template>
       </v-list-item>
       <v-divider />
@@ -56,7 +56,7 @@
         </template>
         <v-list-item title="GCG" value="wiki-GCG" link href="/wiki/GCG">
           <template #prepend>
-            <img src="../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
+            <img src="../../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
           </template>
         </v-list-item>
         <v-list-item title="角色图鉴" value="wiki-character" link href="/wiki/character">
@@ -90,7 +90,7 @@
         </v-list-item>
         <v-list-item title="设置" value="config" link href="/config">
           <template #prepend>
-            <img src="../assets/icons/setting.svg" alt="setting" class="side-icon">
+            <img src="../../assets/icons/setting.svg" alt="setting" class="side-icon">
           </template>
         </v-list-item>
       </div>
@@ -104,8 +104,8 @@ import { computed, ref, onMounted } from "vue";
 // tauri
 import { event } from "@tauri-apps/api";
 // store
-import { useAppStore } from "../store/modules/app";
-import { useUserStore } from "../store/modules/user";
+import { useAppStore } from "../../store/modules/app";
+import { useUserStore } from "../../store/modules/user";
 
 const appStore = useAppStore();
 const userStore = useUserStore();

src/components/main/t-switchTheme.vue

@@ -13,7 +13,7 @@ import { computed, onMounted } from "vue";
 // tauri
 import { event } from "@tauri-apps/api";
 // store
-import { useAppStore } from "../store/modules/app";
+import { useAppStore } from "../../store/modules/app";
 
 // store
 const appStore = useAppStore();

src/components/overlay/t-confirm.vue

@@ -13,13 +13,13 @@
         </div>
         <div class="confirm-btn-box">
           <button class="confirm-btn" @click="onCancel">
-            <img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
+            <img class="btn-icon" src="../../assets/icons/circle-cancel.svg" alt="cancel">
             <span class="btn-text">
               {{ cancel }}
             </span>
           </button>
           <button class="confirm-btn" @click="onConfirm">
-            <img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm">
+            <img class="btn-icon" src="../../assets/icons/circle-check.svg" alt="confirm">
             <span class="btn-text">
               {{ confirm }}
             </span>

src/pages/Achievements.vue

@@ -110,7 +110,7 @@
 <script lang="ts" setup>
 // vue
 import { onMounted, ref, onBeforeMount, computed } from "vue";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // tauri
 import { dialog, fs } from "@tauri-apps/api";
 // Store

src/pages/Announcements.vue

@@ -95,7 +95,7 @@
 // vue
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // store
 import { useAppStore } from "../store/modules/app";
 // utils

src/pages/Config.vue

@@ -175,8 +175,8 @@
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
-import TLoading from "../components/t-loading.vue";
-import TConfirm from "../components/t-confirm.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TConfirm from "../components/overlay/t-confirm.vue";
 // tauri
 import { fs, app, os } from "@tauri-apps/api";
 // store

src/pages/Home.vue

@@ -6,10 +6,10 @@
 <script lang="ts" setup>
 // vue
 import { ref, markRaw, onMounted, onUnmounted, onUpdated } from "vue";
-import TLoading from "../components/t-loading.vue";
-import TPool from "../components/t-pool.vue";
-import TPosition from "../components/t-position.vue";
-import TCalendar from "../components/t-calendar.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TPool from "../components/main/t-pool.vue";
+import TPosition from "../components/main/t-position.vue";
+import TCalendar from "../components/main/t-calendar.vue";
 // store
 import { useHomeStore } from "../store/modules/home";
 import { useAppStore } from "../store/modules/app";

src/pages/WIKI/Character.vue

@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, computed } from "vue";
-import TMiniAvatar from "../../components/t-mini-avatar.vue";
+import TMiniAvatar from "../../components/mini/t-mini-avatar.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppCharacterData } from "../../data";

src/pages/WIKI/GCG.vue

@@ -98,7 +98,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, onMounted, computed } from "vue";
-import TLoading from "../../components/t-loading.vue";
+import TLoading from "../../components/overlay/t-loading.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppGCGData } from "../../data";

src/pages/WIKI/Weapon.vue

@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, computed } from "vue";
-import TMiniWeapon from "../../components/t-mini-weapon.vue";
+import TMiniWeapon from "../../components/mini/t-mini-weapon.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppWeaponData } from "../../data";

src/views/t-anno-json.vue

@@ -19,8 +19,8 @@
 import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // utils

src/views/t-anno.vue

@@ -19,8 +19,8 @@
 // vue
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins

src/views/t-lottery.vue

@@ -73,8 +73,8 @@
 import { ref, onMounted, reactive, onUpdated } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // store

src/views/t-news.vue

@@ -218,7 +218,7 @@
 // vue
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // store
 import { useAppStore } from "../store/modules/app";
 // plugin

src/views/t-post-json.vue

@@ -15,8 +15,8 @@
 import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins

src/views/t-post.vue

@@ -10,12 +10,12 @@
 // vue
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
 import MysOper from "../plugins/Mys";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 
 // loading
 const loading = ref(true as boolean);