调整设置面板样式

packages/artplayer/src/setting/index.js

@@ -16,19 +16,23 @@ export default class Setting {
 
     init() {
         const {
-            template: { $settingClose },
+            template: { $setting },
             events: { proxy },
         } = this.art;
 
-        proxy($settingClose, 'click', () => {
-            this.hide();
+        proxy($setting, 'click', e => {
+            if (e.target === $setting) {
+                this.hide();
+            }
         });
 
-        this.add(flip({
-            disable: false,
-            name: 'flip',
-            index: 10,
-        }));
+        this.add(
+            flip({
+                disable: false,
+                name: 'flip',
+                index: 10,
+            }),
+        );
     }
 
     add(item, callback) {

packages/artplayer/src/style/setting.scss

@@ -9,15 +9,15 @@
         width: 100%;
         align-items: center;
         justify-content: center;
-        pointer-events: none;
         .artplayer-setting-inner {
-            position: relative;
-            width: 300px;
-            height: 250px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 50%;
+            height: 100%;
             font-size: 12px;
             background: rgba(0, 0, 0, 0.8);
-            border-radius: 3px;
-            pointer-events: all;
             overflow: hidden;
             .artplayer-setting-body {
                 overflow-y: auto;
@@ -31,23 +31,10 @@
                         margin-bottom: 10px;
                     }
                     .art-setting-body {
-                        color: rgba(255, 255, 255, 0.8);
+                        color: rgba(255, 255, 255, 0.85);
                     }
                 }
             }
-            .artplayer-setting-close {
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: 20px;
-                height: 20px;
-                line-height: 20px;
-                text-align: center;
-                color: rgba(255, 255, 255, .8);
-                background: rgba(0, 0, 0, .5);
-                font-size: 20px;
-                cursor: pointer;
-            }
         }
 
         .art-setting-btns {

packages/artplayer/src/template.js

@@ -40,7 +40,6 @@ export default class Template {
             <div class="artplayer-setting">
               <div class="artplayer-setting-inner">
                 <div class="artplayer-setting-body"></div>
-                <div class="artplayer-setting-close">×</div>
               </div>
             </div>
             <div class="artplayer-info">
@@ -70,7 +69,6 @@ export default class Template {
         this.$setting = this.$container.querySelector('.artplayer-setting');
         this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
         this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
-        this.$settingClose = this.$container.querySelector('.artplayer-setting-close');
         this.$info = this.$container.querySelector('.artplayer-info');
         this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
         this.$infoClose = this.$container.querySelector('.artplayer-info-close');