💄 美化抽奖页

src/assets/index.css

@@ -33,6 +33,7 @@
   --tgc-blue-2: #00aeec; /* Bilibili btn bg */
   --tgc-blue-3: #4b5466; /* Genshin icon bg */
   --tgc-pink-1: #fb7299; /* Bilibili btn bg */
+  --tgc-red-1: #e06c63; /* Mys bbs color */
   --tgc-yellow-1: #ffcd0c; /* Genshin btn bg */
   --tgc-yellow-2: #f4d8a8; /* Genshin confirm text */
 

src/views/t-anno-json.vue

@@ -70,4 +70,9 @@ onMounted(async () => {
 .jv-container {
   background: var(--content-bg-2) !important;
 }
+
+.jv-key,
+.jv-array {
+  color: var(--box-text-4) !important;
+}
 </style>

src/views/t-lottery.vue

@@ -16,7 +16,7 @@
           </v-avatar>
         </template>
         <template #append>
-          <v-btn variant="outlined" @click="backPost()"> 返回 </v-btn>
+          <v-btn variant="outlined" @click="backPost()"> 返回</v-btn>
         </template>
         {{ lotteryCard.creator.nickname }}
         <v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
@@ -30,18 +30,18 @@
         </div>
       </div>
     </div>
-  </div>
+    <div v-if="timeStatus === '已开奖'">
-  <div v-if="timeStatus === '已开奖'" class="lottery-box">
+      <div class="lottery-title">中奖详情</div>
-    <div class="lottery-title">中奖详情</div>
+      <div v-for="reward in lotteryCard.rewards" :key="reward.name" class="lottery-list">
-    <div v-for="reward in lotteryCard.rewards" :key="reward.name" class="lottery-list">
+        <div class="reward-title">{{ reward.name }} {{ reward.win }}/{{ reward.goal }}</div>
-      <div class="reward-title">{{ reward.name }} {{ reward.win }}/{{ reward.goal }}</div>
+        <div class="lottery-grid">
-      <div class="lottery-grid">
+          <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
-        <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
+            <div class="lottery-user-avatar">
-          <div class="lottery-user-avatar">
+              <img :src="user.avatar_url" alt="avatar" />
-            <img :src="user.avatar_url" alt="avatar" />
+            </div>
-          </div>
+            <div class="lottery-user-nickname" :title="user.nickname">
-          <div class="lottery-user-nickname">
+              {{ user.nickname }}
-            {{ user.nickname }}
+            </div>
           </div>
         </div>
       </div>
@@ -157,28 +157,25 @@ onUpdated(() => {
 <style lang="css">
 .lottery-box {
   padding: 10px;
-  border-radius: 25px 5px 5px;
+  border-radius: 20px;
   margin-bottom: 10px;
-  background: rgb(255 255 255 / 10%);
+  background: var(--box-bg-1);
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
 }
 
 .lottery-title {
   height: 40px;
   margin-left: 40px;
-  color: var(--content-text-3);
+  color: var(--common-text-title);
-  font-family: Genshin, serif;
+  font-family: var(--font-title);
   font-size: 20px;
 }
 
 .lottery-list {
   padding: 5px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   margin-bottom: 10px;
-  background: rgb(0 0 0 / 40%);
+  background: var(--box-bg-2);
-  box-shadow: 0 0 10px rgb(255 255 255 / 10%);
-  color: #faf7e8;
-  font-family: Genshin-Light, serif;
 }
 
 .reward-title {
@@ -203,8 +200,7 @@ onUpdated(() => {
   align-items: center;
   border-radius: 40px;
   margin: 5px;
-  background: var(--content-bg-2);
+  background: var(--box-bg-3);
-  font-family: Genshin-Light, serif;
 }
 
 .lottery-user-avatar {
@@ -223,30 +219,27 @@ onUpdated(() => {
 }
 
 .lottery-user-nickname {
-  display: inline-block;
   overflow: hidden;
-  color: var(--content-text-3);
+  max-width: 120px;
-  font-family: Genshin-Light, "仿宋", serif;
+  color: var(--box-text-4);
   font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .lottery-json {
-  border-radius: 25px 5px;
+  border: 1px solid var(--common-shadow-1);
-  margin-bottom: 10px;
+  border-radius: 10px;
-  background: rgb(255 255 255 / 10%);
+  background: var(--box-bg-1);
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
-  color: #faf7e8;
-  font-family: Consolas, serif;
 }
 
 .jv-container {
-  border-radius: 25px 5px !important;
+  border-radius: 10px;
-  background: rgb(0 0 0 / 60%) !important;
+  background: var(--box-bg-2) !important;
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%) !important;
 }
 
 .jv-key,
 .jv-array {
-  color: #f0c674 !important;
+  color: var(--box-text-4) !important;
 }
 </style>

src/views/t-post-json.vue

@@ -68,4 +68,9 @@ onMounted(async () => {
 .jv-container {
   background: var(--box-bg-2) !important;
 }
+
+.jv-key,
+.jv-array {
+  color: var(--box-text-4) !important;
+}
 </style>