💄 美化样式

src/components/main/t-position.vue

@@ -8,13 +8,13 @@
       <v-card
         v-for="card in positionCards"
         :key="card.post_id"
-        style="background: var(--content-bg-2); color: #546d8b; border-radius: 5px"
+        class="position-card"
       >
-        <v-list style="background: var(--content-bg-2); color: #546d8b">
+        <v-list class="position-list">
           <v-list-item :title="card.title" :subtitle="card.abstract">
             <template #prepend>
-              <v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
-                <v-img :src="card.icon" style="border-radius: 10px" />
+              <v-avatar rounded="0" @click="toPost(card)">
+                <v-img :src="card.icon" />
               </v-avatar>
             </template>
             <template #append>
@@ -26,16 +26,19 @@
         </v-list>
         <v-divider class="border-opacity-75" />
         <v-card-text>
-          <div style="min-width: 200px;display: inline-block">
+          <div class="position-card-text">
             <v-icon>mdi-calendar-clock</v-icon>
-            {{ card.time.start }} ~ {{ card.time.end }}
+            <span>{{ card.time.start }} ~ {{ card.time.end }}</span>
           </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">{{
+          <div class="position-card-text">
+            <v-icon>mdi-clock-outline</v-icon>
+            <span>剩余时间：</span>
+            <!-- 玉鈫蓝 -->
+            <span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #126e82">{{
               positionTimeGet[card.post_id]
             }}</span>
-            <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
+            <!-- 粉红 -->
+            <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #f2b9b2">已结束</span>
           </div>
         </v-card-text>
       </v-card>
@@ -141,23 +144,23 @@ onUnmounted(() => {
 .position-box {
   margin-bottom: 10px;
   padding: 10px;
-  font-family: Genshin, serif;
-  background: rgb(255 255 255 / 10%);
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
+  box-shadow: 0 0 10px var(--common-bg-4);
   border-radius: 5px;
 }
 
 .position-title {
-  color:rgb(255 255 255 / 80%);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+  color: var(--common-text);
+  font-family: var(--font-title);
   font-size: 20px;
   display: flex;
+  align-items: center;
+  justify-content: start;
 }
 
 .position-icon {
-  width: 25px;
-  height: 25px;
-  margin-right: 10px;
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
 }
 
 .position-grid {
@@ -166,4 +169,43 @@ onUnmounted(() => {
   grid-gap: 20px;
   margin-top: 10px;
 }
+
+.position-card {
+  background: #45b787; /* 蛙绿 */
+  color: #eef7f2; /* 月白 */
+  border-radius: 5px
+}
+
+.dark .position-card {
+  background: #1f2623; /* 苷蓝绿 */
+}
+
+.position-list {
+  font-family: var(--font-title);
+  background: inherit;
+  color: inherit;
+}
+
+.position-list :deep(img) {
+  border-radius: 5px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: all 0.3s;
+}
+
+.position-list :deep(img):hover {
+  cursor: pointer;
+  scale: 1.5;
+}
+
+.position-card-text {
+  min-width: 200px;
+  display: inline-block;
+  align-items: center;
+}
+
+.position-card-text :nth-child(1) {
+  margin: 0 5px;
+}
 </style>