From d1e778bcb7a49487f34e1fcfe51f30055b02aa31 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 20 Jun 2023 21:12:15 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E7=BE=8E=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/overlay/to-channel.vue | 49 ++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/overlay/to-channel.vue b/src/components/overlay/to-channel.vue
index 3d2486c1..0e8e84d4 100644
--- a/src/components/overlay/to-channel.vue
+++ b/src/components/overlay/to-channel.vue
@@ -1,13 +1,20 @@
 <template>
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
     <div class="toc-box">
-      <div class="toc-title">
-        请选择要跳转的频道
+      <div class="toc-top">
+        <div class="toc-title">
+          请选择要跳转的频道
+        </div>
+        <div class="toc-list">
+          <div v-for="item in channelList" class="toc-list-item" @click="toChannel(item.link)">
+            <img :src="item.icon" alt="icon">
+            <span>{{ item.title }}</span>
+          </div>
+        </div>
       </div>
-      <div class="toc-list">
-        <div v-for="item in channelList" class="toc-list-item" @click="toChannel(item.link)">
-          <img :src="item.icon" alt="icon">
-          <span>{{ item.title }}</span>
+      <div class="toc-close" @click="onCancel">
+        <div class="toc-close-btn">
+          <v-icon>mdi-close</v-icon>
         </div>
       </div>
     </div>
@@ -84,7 +91,8 @@ const channelList: ToChannelItem[] = [
 function onCancel () {
   visible.value = false;
 }
-function toChannel (link:string) {
+
+function toChannel (link: string) {
   visible.value = false;
   router.push(link);
   setTimeout(() => {
@@ -94,8 +102,12 @@ function toChannel (link:string) {
 </script>
 <style lang="css" scoped>
 .toc-box {
-  background: rgb(255 255 255 / 30%);
+  padding: 10px;
+}
+
+.toc-top {
   border-radius: 5px;
+  background: rgb(255 255 255 / 30%);
   padding: 10px;
 }
 
@@ -106,6 +118,7 @@ function toChannel (link:string) {
 }
 
 .toc-list {
+  margin-top: 10px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 10px;
@@ -140,4 +153,24 @@ function toChannel (link:string) {
   font-size: 16px;
   margin-right: 10px;
 }
+
+.toc-close {
+  height: 60px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toc-close-btn {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: rgb(255 255 255 / 30%);
+  color: #faf7e8;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>