diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index ce47069b..6f2e9734 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -64,6 +64,12 @@ const iconKeys = [
     'ToolOutlined',
     'FileOutlined',
     'LikeOutlined',
+    'CaretUpOutlined',
+    'CaretRightOutlined',
+    'CaretLeftOutlined',
+    'CaretDownOutlined',
+    'MinusOutlined',
+    'AudioOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/components/Player/index.vue b/src/components/Player/index.vue
index 9a8ec8bc..a23db048 100644
--- a/src/components/Player/index.vue
+++ b/src/components/Player/index.vue
@@ -11,8 +11,8 @@ import 'vue3-video-play/dist/style.css';
 import vue3videoPlay from 'vue3-video-play';
 
 const options = reactive({
-    width: '800px', //播放器高度
-    height: '450px', //播放器高度
+    width: '500px', //播放器高度
+    height: '280px', //播放器高度
     color: '#409eff', //主题色
     title: '', //视频名称
     src: 'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4', //视频源
diff --git a/src/components/Player/mediaTool.less b/src/components/Player/mediaTool.less
new file mode 100644
index 00000000..68edb215
--- /dev/null
+++ b/src/components/Player/mediaTool.less
@@ -0,0 +1,128 @@
+.live-player-tools {
+    display: flex;
+    flex-basis: 250px;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 24px;
+    padding: 0 12px;
+
+    .direction {
+        position: relative;
+        display: grid;
+        grid-gap: 2px;
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        margin-bottom: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        transform: rotateZ(45deg);
+
+        .direction-item {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-bottom: 100%;
+            font-size: 36px;
+            background-color: rgba(#000, 0.1);
+            transition: background-color 0.3s;
+
+            .direction-icon {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%) rotateZ(-45deg);
+            }
+        }
+
+        .direction-audio {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45%;
+            height: 45%;
+            font-size: 30px;
+            background-color: #fff;
+            border-radius: 50%;
+            transform: translate(-50%, -50%) rotateZ(-45deg);
+        }
+
+        .zoom .zoom-item,
+        & .direction-item {
+            &:hover {
+                color: #fff;
+                background-color: @primary-color-hover;
+            }
+
+            &:active {
+                color: #fff;
+                background-color: @primary-color-active;
+            }
+        }
+
+        > div {
+            cursor: pointer;
+            &.disable {
+                color: @disabled-color;
+            }
+        }
+    }
+
+    .zoom {
+        display: grid;
+        grid-gap: 2px;
+        grid-template-columns: 1fr 1fr;
+
+        .zoom-item {
+            padding: 8px 0;
+            font-size: 24px;
+            text-align: center;
+            background-color: rgba(#000, 0.1);
+            cursor: pointer;
+
+            &:hover {
+                color: #fff;
+                background-color: @primary-color-hover;
+            }
+
+            &:active {
+                color: #fff;
+                background-color: @primary-color-active;
+            }
+        }
+
+        .zoom-in {
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+        }
+
+        .zoom-out {
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+}
+
+@media screen {
+    @media (min-width: 1300px) {
+        .live-player-tools {
+            flex-basis: 150px;
+            margin-left: 16px;
+
+            .direction {
+                .direction-item {
+                    font-size: 24px;
+                }
+            }
+
+            .zoom {
+                .zoom-item {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/Player/mediaTool.vue b/src/components/Player/mediaTool.vue
index 40538e8f..64a2b6ab 100644
--- a/src/components/Player/mediaTool.vue
+++ b/src/components/Player/mediaTool.vue
@@ -1,8 +1,36 @@
 <!-- 视频播放工具栏 -->
 <template>
-    <div class="page-container">视频播放工具栏</div>
+    <div class="live-player-tools">
+        <div class="direction">
+            <div class="direction-item up">
+                <AIcon class="direction-icon" type="CaretUpOutlined" />
+            </div>
+            <div class="direction-item right">
+                <AIcon class="direction-icon" type="CaretRightOutlined" />
+            </div>
+            <div class="direction-item left">
+                <AIcon class="direction-icon" type="CaretLeftOutlined" />
+            </div>
+            <div class="direction-item down">
+                <AIcon class="direction-icon" type="CaretDownOutlined" />
+            </div>
+            <div class="direction-audio">
+                <!-- <AIcon type="AudioOutlined" /> -->
+            </div>
+        </div>
+        <div class="zoom">
+            <div class="zoom-item zoom-in">
+                <AIcon type="PlusOutlined" />
+            </div>
+            <div class="zoom-item zoom-out">
+                <AIcon type="MinusOutlined" />
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts"></script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import './mediaTool.less';
+</style>