💄 优化抽奖页详情页面样式

src/views/t-lottery.vue

@@ -1,82 +1,73 @@
 <template>
   <TSwitchTheme />
-  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-  <div v-else>
-    <div class="lottery-div">
-      <div class="lottery-title">
-        抽奖详情
-        <span style="color:#E06C63">{{ timeStatus === "已开奖" ? timeStatus : `待开奖 ${timeStatus}` }}</span>
-      </div>
-      <div class="lottery-list">
-        <v-list-item>
-          <template #prepend>
-            <v-avatar>
-              <v-img :src="lotteryCard.creator.avatar_url" />
-            </v-avatar>
-          </template>
-          {{ lotteryCard.creator.nickname }}
-          <v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
-        </v-list-item>
-        <div class="reward-title">
-          参与方式：{{ participationMethod }}
-        </div>
-        <div class="reward-title">
-          抽奖 ID：{{ lotteryCard.id }}
-        </div>
-        <div class="reward-title">
-          奖品详情
-          <div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="reward-subtitle">
-            {{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}份
-          </div>
-        </div>
-      </div>
-      <v-btn class="lottery-back" @click="backPost()">
-        <img src="../assets/icons/circle-cancel.svg" alt="back">
-        <span>返回</span>
-      </v-btn>
-      <v-btn v-show="appStore.devMode" class="card-dev-btn" @click="showJson = true">
+  <TOLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
+  <div v-if="!loading" class="lottery-box">
+    <div class="lottery-title">
+      抽奖详情
+      <span style="color:#E06C63">{{ timeStatus === "已开奖" ? timeStatus : `待开奖 ${timeStatus}` }}</span>
+    </div>
+    <div class="lottery-list">
+      <v-list-item>
         <template #prepend>
-          <img src="../assets/icons/arrow-right.svg" alt="right">
+          <v-avatar>
+            <v-img :src="lotteryCard.creator.avatar_url" />
+          </v-avatar>
         </template>
-        JSON
-      </v-btn>
-    </div>
-    <div v-show="showJson" class="lottery-json">
-      <JsonViewer :value="jsonData" copyable boxed />
-    </div>
-    <div v-if="timeStatus === '已开奖'" class="lottery-div">
-      <div class="lottery-title">
-        中奖详情
+        <template #append>
+          <v-btn variant="outlined" @click="backPost()">
+            返回
+          </v-btn>
+        </template>
+        {{ lotteryCard.creator.nickname }}
+        <v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
+      </v-list-item>
+      <div class="reward-title">
+        参与方式：{{ participationMethod }}
       </div>
-      <div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="lottery-list">
-        <div class="reward-title">
-          {{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}/{{ reward.winnerNumber }}
+      <div class="reward-title">
+        抽奖 ID：{{ lotteryCard.id }}
+      </div>
+      <div class="reward-title">
+        奖品详情
+        <div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="reward-subtitle">
+          {{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}份
         </div>
-        <div class="lottery-grid">
-          <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
-            <div class="lottery-user-avatar">
-              <img :src="user.avatar_url" alt="avatar">
-            </div>
-            <div class="lottery-user-nickname">
-              {{ user.nickname }}
-            </div>
+      </div>
+    </div>
+  </div>
+  <div v-if="timeStatus === '已开奖'" class="lottery-box">
+    <div class="lottery-title">
+      中奖详情
+    </div>
+    <div v-for="reward in lotteryCard.rewards" :key="reward.rewardName" class="lottery-list">
+      <div class="reward-title">
+        {{ reward.rewardName }} {{ reward.scheduledWinnerNumber }}/{{ reward.winnerNumber }}
+      </div>
+      <div class="lottery-grid">
+        <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
+          <div class="lottery-user-avatar">
+            <img :src="user.avatar_url" alt="avatar">
+          </div>
+          <div class="lottery-user-nickname">
+            {{ user.nickname }}
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div class="lottery-json">
+    <JsonViewer :value="jsonData" copyable boxed />
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted, reactive, onUpdated } from "vue";
+import { onMounted, onUpdated, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/main/t-loading.vue";
+import TOLoading from "../components/overlay/to-loading.vue";
 import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
-// store
-import { useAppStore } from "../store/modules/app";
 // plugins
 import MysOper from "../plugins/Mys";
 // interface
@@ -87,9 +78,6 @@ const loading = ref(true as boolean);
 const loadingTitle = ref("正在加载");
 const loadingEmpty = ref(false as boolean);
 
-// store
-const appStore = useAppStore();
-
 // 定时器
 const lotteryTimer = ref(null as any);
 // 参与方式
@@ -113,7 +101,6 @@ function flushTimeStatus () {
 // 数据
 const lotteryId = useRoute().params.lottery_id as string;
 const lotteryCard = ref({} as LotteryCard);
-const showJson = ref(false as boolean);
 let jsonData = reactive({} as LotteryData);
 const timeStatus = ref("未知" as string);
 
@@ -172,64 +159,42 @@ onUpdated(() => {
 
 </script>
 <style lang="css">
-.lottery-div {
-  background: var(--content-bg-2);
-  border-radius: 10px;
+.lottery-box {
   margin-bottom: 10px;
   padding: 10px;
+  background: rgb(255 255 255 / 10%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
+  border-radius: 25px 5px 5px;
 }
 
 .lottery-title {
   font-family: Genshin, serif;
   font-size: 20px;
+  height: 40px;
   color: var(--content-text-3);
   margin-left: 40px;
 }
 
-.reward-title {
-  font-family: Genshin-Light, serif;
-  font-size: 16px;
+.lottery-list {
+  background: rgb(0 0 0 / 40%);
+  box-shadow: 0 0 10px rgb(255 255 255 / 10%);
+  border-radius: 5px;
+  padding: 5px;
+  margin-bottom: 10px;
   color: #faf7e8;
+  font-family: Genshin-Light, serif;
+}
+
+.reward-title {
+  font-size: 16px;
   margin: 10px;
 }
 
 .reward-subtitle {
-  font-family: Genshin-Light, serif;
   font-size: 16px;
-  color: #faf7e8;
   opacity: 0.5;
 }
 
-.lottery-list {
-  background: var(--content-bg-1);
-  border-radius: 10px;
-  margin: 10px;
-  padding: 10px;
-  color: #faf7e8;
-  font-family: Genshin-Light, serif;
-}
-
-.lottery-back {
-  margin: 5px;
-  height: 30px;
-  border-radius: 40px;
-  font-family: Genshin, serif;
-  background: #4A5366;
-}
-
-.lottery-back img {
-  position: absolute;
-  left: 5px;
-  width: 25px;
-  height: 25px;
-}
-
-.lottery-back span {
-  color: #faf7e8;
-  font-size: 16px;
-  margin-left: 10px;
-}
-
 .lottery-grid {
   border-radius: 10px;
   display: grid;
@@ -270,12 +235,22 @@ onUpdated(() => {
 }
 
 .lottery-json {
-  padding: 20px;
-  border-radius: 20px;
+  margin-bottom: 10px;
+  background: rgb(255 255 255 / 10%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
+  border-radius: 25px 5px;
   font-family: Consolas, serif;
+  color: #faf7e8;
 }
 
 .jv-container {
-  background: var(--content-bg-2) !important;
+  background: rgb(0 0 0 / 60%) !important;
+  border-radius: 25px 5px !important;
+  box-shadow: 0 0 10px rgb(0 0 0 / 40%) !important;
+}
+
+.jv-key,
+.jv-array {
+  color: #f0c674 !important;
 }
 </style>