update

packages/artplayer/src/icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 32 32" width="100%"><path d="m 12.59,20.34 4.58,-4.59 -4.58,-4.59 1.41,-1.41 6,6 -6,6 z" fill="#fff"/></svg>

packages/artplayer/src/icons/index.js

@@ -10,6 +10,7 @@ import screenshot from './screenshot.svg';
 import setting from './setting.svg';
 import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
+import arrowRight from './arrow-right.svg';
 import pip from './pip.svg';
 
 export default class Icons {
@@ -26,6 +27,7 @@ export default class Icons {
             setting,
             fullscreen,
             fullscreenWeb,
+            arrowRight,
             pip,
             ...art.option.icons,
         };

packages/artplayer/src/setting/index.js

@@ -1,10 +1,13 @@
 import Component from '../utils/component';
+import { append, addClass } from '../utils/dom';
+
 import playbackRate from './playbackRate';
 
 export default class Setting extends Component {
     constructor(art) {
         super(art);
 
+        this.art = art;
         this.name = 'setting';
 
         const {
@@ -17,6 +20,8 @@ export default class Setting extends Component {
         if (option.setting) {
             art.once('ready', () => {
                 this.add(playbackRate(art));
+                this.add(playbackRate(art));
+                this.add(playbackRate(art));
             });
 
             art.on('blur', () => {
@@ -25,7 +30,18 @@ export default class Setting extends Component {
         }
     }
 
+    creatItme(item) {
+        const { icons } = this.art;
+        const $item = document.createElement('div');
+        addClass($item, 'art-setting-item');
+        append($item, `<div class="art-setting-item-left">${item.html}</div>`);
+        const $right = append($item, `<div class="art-setting-item-right"></div>`);
+        append($right, icons.arrowRight);
+        return $item;
+    }
+
     add(option) {
-        console.log(option);
+        const $item = this.creatItme(option);
+        append(this.$parent, $item);
     }
 }

packages/artplayer/src/style/setting.scss

@@ -1,15 +1,48 @@
 .art-video-player {
     .art-settings {
         display: none;
+        flex-direction: column;
         position: absolute;
         z-index: 90;
         right: 10px;
         bottom: 60px;
         width: 250px;
-        min-height: 100px;
         max-height: 300px;
         overflow: auto;
-        background-color: #000;
+        font-size: 13px;
+        padding: 5px 0;
+        background-color: rgba(0, 0, 0, 0.9);
+
+        .art-setting-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 35px;
+            padding: 0 5px 0 15px;
+            line-height: 1;
+            cursor: pointer;
+
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+
+            .art-setting-item-left {
+                display: flex;
+                align-items: center;
+                color: rgba(255, 255, 255, 0.75);
+            }
+
+            .art-setting-item-right {
+                display: flex;
+                align-items: center;
+                color: rgba(255, 255, 255, 0.95);
+
+                .art-icon {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+        }
     }
 
     &.art-setting-show {