💄 卡片样式调整

BTMuli · Mar 21, 2024 · 1405b54 · 1405b54
1 parent 8707a82
commit 1405b54
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 64 deletions.
diff --git a/src/assets/css/anno-parser.css b/src/assets/css/anno-parser.css
@@ -1,7 +1,7 @@
 /*
  * @file assets/css/post-parser.css
  * @description 游戏公告解析 css
- * @since Beta v0.4.4
+ * @since Beta v0.4.5
  */
 
 .anno-body {
@@ -54,7 +54,7 @@
 
 .anno-content :deep(details) {
   padding: 10px;
-  border: #35acce 2px solid;
+  border: 1px var(--common-shadow-2) solid;
   border-radius: 10px;
   margin: 10px;
 }
@@ -64,7 +64,7 @@
 }
 
 .anno-content :deep(details) ::marker {
-  color: #35acce;
+  color: var(--tgc-pink-1);
   content: "✧";
 }
 

diff --git a/src/components/main/t-postcard.vue b/src/components/main/t-postcard.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="tpc-card" v-if="card">
+  <v-card rounded v-if="card">
     <div class="tpc-cover">
       <img :src="card.cover" alt="cover" @click="createPost(card)" />
       <div v-if="isAct" class="tpc-act">
@@ -172,16 +172,6 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
 }
 </script>
 <style lang="css" scoped>
-.tpc-card {
-  border-radius: 5px;
-  background: var(--app-page-bg);
-  color: var(--box-text-1);
-}
-
-.dark .tpc-card {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .tpc-cover {
   position: relative;
   display: flex;
@@ -212,6 +202,7 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
 .tpc-title {
   overflow: hidden;
   width: 100%;
+  font-family: var(--font-title);
   font-size: 18px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -227,9 +218,8 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
   padding: 5px;
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
-  background: rgb(0 0 0/20%);
+  background: var(--common-shadow-2);
   border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
   box-shadow: 0 0 10px var(--tgc-dark-1);
   color: var(--tgc-white-1);
 }

diff --git a/src/pages/common/Announcements.vue b/src/pages/common/Announcements.vue
@@ -31,11 +31,10 @@
   <v-window v-model="tab">
     <v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
       <div class="anno-grid">
-        <v-card v-for="item in annoCards[value]" :key="item.id" class="anno-card">
+        <v-card rounded v-for="item in annoCards[value]" :key="item.id">
           <div class="anno-cover" :title="item.title">
             <img :src="item.banner" alt="cover" @click="createAnno(item)" />
             <div class="anno-info">
-              <div class="anno-id">ID:{{ item.id }}</div>
               <div class="anno-time">
                 <v-icon>mdi-clock-time-four-outline</v-icon>
                 <span>{{ item.timeStr }}</span>
@@ -208,7 +207,7 @@ function getAnnoTime(content: string): string | false {
   }
   if (content.match(regexes[3])) {
     const res = content.match(regexes[3]);
-    return `${res?.[1].split(" ")[0]} ~ ${res?.[2].split(" ")[0]}`;
+    return `${res?.[1]} ~ ${res?.[2]}`;
   }
   if (content.match(regexes[4])) {
     const res = content.match(regexes[4]);
@@ -267,6 +266,10 @@ function createAnno(item: TGApp.App.Announcement.ListCard): void {
   font-family: var(--font-title);
 }
 
+.dark .anno-switch-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .anno-grid {
   display: grid;
   padding: 5px;
@@ -275,28 +278,14 @@ function createAnno(item: TGApp.App.Announcement.ListCard): void {
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 }
 
-.anno-card {
-  border-radius: 5px;
-  background: var(--app-page-bg);
-  color: var(--box-text-1);
-}
-
-/* 增加辨识度 */
-.dark .anno-card {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .anno-cover {
   position: relative;
   display: flex;
   overflow: hidden;
   width: 100%;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid var(--common-shadow-2);
   aspect-ratio: 36 / 13;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
 }
 
 .anno-cover img {
@@ -332,42 +321,13 @@ function createAnno(item: TGApp.App.Announcement.ListCard): void {
   font-size: 12px;
 }
 
-.anno-id {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px 30px 5px 5px;
-  background: var(--app-page-bg);
-  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
-  color: var(--app-page-content);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--common-shadow-2);
-    clip-path: polygon(
-      calc(100% - 25px) 0,
-      100% 0,
-      100% 100%,
-      calc(100% - 25px) 100%,
-      calc(100% - 10px) 50%
-    );
-    content: "";
-  }
-}
-
 .anno-time {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 5px;
   color: var(--tgc-white-1);
   gap: 5px;
-  opacity: 0.8;
 }
 
 .anno-label {
@@ -380,9 +340,8 @@ function createAnno(item: TGApp.App.Announcement.ListCard): void {
   padding: 5px;
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
-  background: rgb(0 0 0/20%);
+  background: var(--common-shadow-2);
   border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
   box-shadow: 0 0 10px var(--tgc-dark-1);
   color: var(--tgc-white-1);
 }