添加样式

src/base.css

@@ -3,4 +3,5 @@
 body{
   --live-backound-color: #25292E;
   --live-color: #fff;
+  --video-backound-color: #000;
 }

src/components/live-broadcast/action-bar.module.less

@@ -0,0 +1,7 @@
+.action-bar{
+  box-sizing: border-box;
+  height: var(--action-bar-height);
+  padding: 14px 22px;
+  display: flex;
+  align-items: center;
+}

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

@@ -1,15 +1,18 @@
 import { defineComponent  } from 'vue'
 import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
+import styles from './action-bar.module.less'
 
 export default defineComponent({
   name: 'LiveBroadcast-ActionBar',
   render() {
     return (
-      <div>
+      <div class={styles['action-bar']}>
         <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton>
         <ElDropdown
+          placement="top"
           onCommand={RuntimeUtils.setSelectCamera}
+          // @ts-ignore
           vSlots={{
             dropdown: () => (
               <ElDropdownMenu>
@@ -21,7 +24,9 @@ export default defineComponent({
           <ElButton type="primary">视频设备</ElButton>
         </ElDropdown>
         <ElDropdown
+          placement="top"
           onCommand={RuntimeUtils.setSelectMicrophone}
+          // @ts-ignore
           vSlots={{
             dropdown: () => (
               <ElDropdownMenu>

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

@@ -3,6 +3,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 13px 19px;
+  height: var(--header-height);
+  box-sizing: border-box;
   >.title{
     font-size: 18px;
     font-weight: normal;

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

@@ -1,8 +1,16 @@
 .main{
+  --header-height: 68px;
+  --action-bar-height: 88px;
   width: 100%;
   background-color: var(--live-backound-color);
   color: var(--live-color);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
   .video{
     width: 100%;
+    max-height: calc(100vh - var(--header-height) - var(--action-bar-height));
+    flex: 1;
+    background-color: var(--video-backound-color);
   }
 }

src/components/live-broadcast/index.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
         <Header/>
         <video class={styles.video} ref={videoRef}></video>
         <ActionBar/>
-        <div>video: {runtime.videoStatus}, imStatus: {runtime.imConnectStatus}</div>
+        {/* <div>video: {runtime.videoStatus}, imStatus: {runtime.imConnectStatus}</div> */}
       </div>
     )
   }