添加部分样式

src/base.css

@@ -0,0 +1,6 @@
+/* 基础颜色值 */
+
+body{
+  --live-backound-color: #25292E;
+  --live-color: #fff;
+}

src/components/live-broadcast/action-bar.tsx

@@ -7,7 +7,6 @@ export default defineComponent({
   render() {
     return (
       <div>
-        <ElButton onClick={RuntimeUtils.closeLive}>关闭直播</ElButton>
         <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton>
         <ElDropdown
           onCommand={RuntimeUtils.setSelectCamera}

src/components/live-broadcast/header.module.less

@@ -0,0 +1,10 @@
+.header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 13px 19px;
+  >.title{
+    font-size: 18px;
+    font-weight: normal;
+  }
+}

src/components/live-broadcast/header.tsx

@@ -1,13 +1,15 @@
 import { defineComponent } from 'vue'
 import { ElButton } from 'element-plus'
+import runtime, * as RuntimeUtils from './runtime'
+import styles from './header.module.less'
 
 export default defineComponent({
   name: 'LiveBroadcastHeader',
   render() {
     return (
-      <div>
-        <h3>直播内容：如何在校管乐团中锻炼孩子的自我管理及团队协作意识</h3>
-        <ElButton type="danger">关闭直播</ElButton>
+      <div class={styles.header}>
+        <h3 class={styles.title}>直播内容：如何在校管乐团中锻炼孩子的自我管理及团队协作意识</h3>
+        <ElButton type="danger" onClick={RuntimeUtils.closeLive}>关闭直播</ElButton>
       </div>
     )
   }

src/components/live-broadcast/index.module.less

@@ -0,0 +1,8 @@
+.main{
+  width: 100%;
+  background-color: var(--live-backound-color);
+  color: var(--live-color);
+  .video{
+    width: 100%;
+  }
+}

src/components/live-broadcast/index.tsx

@@ -4,6 +4,7 @@ import Header from './header'
 import ActionBar from './action-bar'
 import runtime, * as RuntimeUtils from './runtime'
 import { removeMedia } from './helpers'
+import styles from './index.module.less'
 
 const videoRef = ref<HTMLVideoElement | null>(null)
 
@@ -61,9 +62,9 @@ export default defineComponent({
   },
   render() {
     return (
-      <div>
+      <div class={styles.main}>
         <Header/>
-        <video ref={videoRef}></video>
+        <video class={styles.video} ref={videoRef}></video>
         <ActionBar/>
         <div>video: {runtime.videoStatus}, imStatus: {runtime.imConnectStatus}</div>
       </div>

src/main.ts

@@ -6,6 +6,7 @@ import router from './router'
 import 'element-plus/dist/index.css'
 import './permission'
 import './icons' // icon
+import './base.css'
 
 createApp(App)
   .use(ElementPlus)