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

src/views/t-lottery.vue

@@ -1,8 +1,7 @@
 <template>
   <TSwitchTheme />
-  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-  <div v-else>
-    <div class="lottery-div">
+  <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>
@@ -14,6 +13,11 @@
             <v-img :src="lotteryCard.creator.avatar_url" />
           </v-avatar>
         </template>
+        <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>
@@ -30,21 +34,8 @@
         </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">
-        <template #prepend>
-          <img src="../assets/icons/arrow-right.svg" alt="right">
-        </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 v-if="timeStatus === '已开奖'" class="lottery-box">
     <div class="lottery-title">
       中奖详情
     </div>
@@ -64,19 +55,19 @@
       </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>