From bc22612da7ea56cdc2753a19558b735f474b26c2 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Wed, 15 Oct 2025 11:06:32 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pageNews/to-channel.vue | 42 +++++++++++++++++---------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/pageNews/to-channel.vue b/src/components/pageNews/to-channel.vue
index 07932352..8d939d24 100644
--- a/src/components/pageNews/to-channel.vue
+++ b/src/components/pageNews/to-channel.vue
@@ -11,7 +11,8 @@
           @click="toChannel(item)"
         >
           <TMiImg :src="item.icon" alt="icon" :ori="true" />
-          <span>{{ item.title }}</span>
+          <span class="toc-list-title">{{ item.title }}</span>
+          <span class="toc-list-id">GID:{{ item.gid }}</span>
         </div>
       </div>
     </div>
@@ -59,32 +60,38 @@ async function toChannel(item: ChannelItem): Promise<void> {
 </script>
 <style lang="css" scoped>
 .toc-box {
-  padding: 10px;
-  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border-radius: 4px;
   background: var(--app-page-bg);
+  row-gap: 12px;
 }
 
 .toc-title {
   color: var(--common-text-title);
   font-family: var(--font-title);
-  font-size: 20px;
+  font-size: 18px;
 }
 
 .toc-list {
   display: grid;
-  margin-top: 10px;
-  grid-gap: 10px;
-  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .toc-list-item {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: start;
   border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
+  border-radius: 4px;
   background: var(--box-bg-1);
   color: var(--box-text-1);
+  column-gap: 8px;
   cursor: pointer;
   transition: all 0.5s linear;
 
@@ -95,17 +102,22 @@ async function toChannel(item: ChannelItem): Promise<void> {
   }
 
   img {
-    width: 45px;
-    height: 45px;
-    margin-right: 10px;
-    border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
+    width: 48px;
+    height: 48px;
   }
 
-  span {
-    margin-right: 10px;
+  .toc-list-title {
+    margin-right: 8px;
     font-family: var(--font-title);
     font-size: 16px;
   }
+
+  .toc-list-id {
+    position: absolute;
+    right: 4px;
+    bottom: 2px;
+    font-size: 6px;
+    opacity: 0.3;
+  }
 }
 </style>