From faf272c8a76f62be2033267659bdb0daeb5e1c71 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sat, 23 Nov 2024 17:31:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E5=89=8D=E7=AB=AF=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatRenderer/TextMessage.vue   |  6 ++---
 frontend/src/layout/Sidebar.vue               | 10 +++++---
 frontend/src/layout/index.vue                 | 23 ++++++++-----------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue
index 266adbc..393b7ac 100644
--- a/frontend/src/components/ChatRenderer/TextMessage.vue
+++ b/frontend/src/components/ChatRenderer/TextMessage.vue
@@ -84,12 +84,12 @@ export default {
 }
 </script>
 
-<style>
-yt-live-chat-text-message-renderer>#content>#message>.el-badge {
+<style scoped>
+#message >>> .el-badge {
   margin-left: 10px;
 }
 
-yt-live-chat-text-message-renderer>#content>#message>.el-badge .el-badge__content {
+#message >>> .el-badge__content {
   font-size: 12px !important;
   line-height: 18px !important;
   text-shadow: none !important;
diff --git a/frontend/src/layout/Sidebar.vue b/frontend/src/layout/Sidebar.vue
index 77f5977..f4a0f96 100644
--- a/frontend/src/layout/Sidebar.vue
+++ b/frontend/src/layout/Sidebar.vue
@@ -83,16 +83,20 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .el-scrollbar {
   height: 100%;
 }
 
-.scrollbar-wrapper {
+.el-scrollbar >>> .scrollbar-wrapper {
   overflow-x: hidden !important;
 }
 
-.scrollbar-wrapper .el-menu {
+.el-scrollbar >>> .el-menu {
   border: none;
 }
+
+.el-scrollbar >>> .is-horizontal {
+  display: none;
+}
 </style>
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 60e94f1..aef3071 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -12,7 +12,7 @@
       <sidebar></sidebar>
     </el-aside>
     <el-main>
-      <el-button v-show="isMobile" class="menu-button" icon="el-icon-s-unfold" @click="hideSidebar = false"></el-button>
+      <el-button v-show="isMobile" icon="el-icon-s-unfold" @click="hideSidebar = false"></el-button>
       <keep-alive>
         <router-view></router-view>
       </keep-alive>
@@ -51,8 +51,8 @@ export default {
 }
 </script>
 
-<style>
-.app-wrapper, .sidebar-container {
+<style scoped>
+.app-wrapper {
   height: 100%;
 }
 
@@ -67,11 +67,12 @@ export default {
 }
 
 .sidebar-container {
+  height: 100%;
   background-color: #304156;
   overflow: hidden;
 }
 
-.app-wrapper.mobile .sidebar-container {
+.mobile .sidebar-container {
   position: fixed;
   top: 0;
   left: 0;
@@ -79,13 +80,13 @@ export default {
   z-index: 1001;
 }
 
-.app-wrapper.mobile .sidebar-container.hide-sidebar {
+.mobile .sidebar-container.hide-sidebar {
   pointer-events: none;
   transition-duration: 0.3s;
   transform: translate3d(-230px, 0, 0);
 }
 
-.sidebar-container .logo-container {
+.logo-container {
   width: 100%;
   height: 50px;
   line-height: 50px;
@@ -93,14 +94,14 @@ export default {
   text-align: center;
 }
 
-.sidebar-container .logo-container .sidebar-logo {
+.sidebar-logo {
   width: 32px;
   height: 32px;
   vertical-align: middle;
   margin-right: 12px;
 }
 
-.sidebar-container .logo-container .sidebar-title {
+.sidebar-title {
   display: inline-block;
   margin: 0;
   color: #fff;
@@ -111,7 +112,7 @@ export default {
   vertical-align: middle;
 }
 
-.sidebar-container .version {
+.version {
   height: 30px;
   background: #2b2f3a;
   color: #aaa;
@@ -121,8 +122,4 @@ export default {
   vertical-align: middle;
   text-align: center;
 }
-
-.sidebar-container .is-horizontal {
-  display: none;
-}
 </style>