调整样式

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

@@ -20,3 +20,44 @@
     line-height: 1;
   }
 }
+:global {
+  .el-button:active {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  .el-dropdown__popper.el-popper {
+    border-color: var(--live-main-color) !important;
+  }
+
+  .el-dropdown__popper.el-popper[role=tooltip] .el-popper__arrow::before {
+    border-color: var(--live-main-color);
+    background-color: var(--live-main-color);
+  }
+
+  .el-slider {
+    --el-slider-height: 2px;
+    --el-slider-button-size: 14px;
+    --el-slider-button-wrapper-offset: -17px;
+    --el-slider-main-bg-color: #00D6C9;
+  }
+  .el-slider__button {
+    border-color: var(--live-color);
+    background-color: #00D6C9;
+  }
+}
+
+
+.volumeSlider {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  width: 195px;
+  height: 55px;
+  background-color: var(--live-main-color);
+  border-color: var(--live-main-color);
+  .volumeIcon {
+    width: 14px;
+    height: 15px;
+    padding-right: 8px;
+  }
+}

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

@@ -1,10 +1,15 @@
 import { defineComponent  } from 'vue'
-import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
+import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
 import styles from './action-bar.module.less'
 
 export default defineComponent({
   name: 'LiveBroadcast-ActionBar',
+  data() {
+    return {
+      volume: 20,
+    }
+  },
   render() {
     return (
       <div class={styles['action-bar']}>
@@ -33,17 +38,31 @@ export default defineComponent({
               <span class={styles['bar-btn-text']}>摄像头</span>
             </div>
           </ElDropdown>
-          <div class={styles['bar-btn']}>
-            <ElButton type="primary" color="transparent">
-              <SvgIcon
-                name="volume"
-                style={{
-                  width: '52px'
-                }}
-              />
-            </ElButton>
-            <span class={styles['bar-btn-text']}>音量调节</span>
-          </div>
+          <ElDropdown
+            placement="top-start"
+            popper-class={styles['popper-class']}
+            // @ts-ignore
+            vSlots={{
+              dropdown: () => (
+                <div class={styles.volumeSlider}>
+                  <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
+                  <ElSlider modelValue={this.volume} size="small" input-size="small" />
+                </div>
+              )
+            }}
+          >
+            <div class={styles['bar-btn']}>
+              <ElButton type="primary" color="transparent">
+                <SvgIcon
+                  name="volume"
+                  style={{
+                    width: '52px'
+                  }}
+                />
+              </ElButton>
+              <span class={styles['bar-btn-text']}>音量调节</span>
+            </div>
+          </ElDropdown>
           <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
             <ElButton type="primary" color="transparent">
               <SvgIcon

src/components/live-message/index.tsx

@@ -25,11 +25,11 @@ export default defineComponent({
         <div class={styles.dataCount}>
           <div>
             <p class={styles.num}>1361</p>
-            <p class={styles.text}><SvgIcon name="message-look" color="red" class={styles.dataIcon} />当前观看</p>
+            <p class={styles.text}><SvgIcon name="message-look" color="#fff" class={styles.dataIcon} />当前观看</p>
           </div>
           <div>
             <p class={styles.num}>1361</p>
-            <p class={styles.text}><SvgIcon name="message-giveUp" class={styles.dataIcon} />累计点赞</p>
+            <p class={styles.text}><SvgIcon name="message-giveUp" color="#fff" class={styles.dataIcon} />累计点赞</p>
           </div>
         </div>
 

src/components/svg-icon/index.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     const symbolId = `#${prefix}-${name}`
 
     return (
-      <svg {...this.$attrs} aria-hidden="true">
+      <svg {...this.$attrs} aria-hidden="true" style={{ color: color }}>
         <use href={symbolId} fill={color} />
       </svg>
     )

src/pages/home/header/index.tsx

@@ -1,14 +1,18 @@
 import { defineComponent } from "vue";
-import { ElDropdownMenu, ElDropdown, ElDropdownItem } from "element-plus";
+import { ElDropdownMenu, ElDropdown, ElDropdownItem, ElMessage } from "element-plus";
+import router from "/src/router";
 import styles from './index.module.less';
 import request from '/src/helpers/request';
+import { removeToken } from "/src/utils/auth";
 
 export default defineComponent({
   methods: {
     async loginOut() {
       try {
-        await request.post('/api-auth/exit');
-        this.$router.push('/login');
+        await request.post('/api-auth/exit', { data: {} });
+        ElMessage.success('退出成功');
+        removeToken();
+        (this as any).$router.push('/login');
       } catch(e) {
         // TODO: handle error
       }