Просмотр исходного кода

设置页面加上图片效果

onecold 1 год назад
Родитель
Сommit
603287e227

+ 2 - 1
entry/src/main/ets/pages/NewIndex.ets

@@ -416,7 +416,8 @@ struct NewIndex {
       bottomRight: 20
     })
     // .backgroundColor($r('app.color.silvery'))
-    .backgroundColor($r('app.color.index_background'))
+    // .backgroundColor($r('app.color.index_background'))
+    .backgroundColor($r('app.color.user_center_card_background'))
     .alignItems(HorizontalAlign.Start)
     .translate({ x: this.offsetX, y: 0, z: 0 })
     .transition({ type: TransitionType.Insert, translate: { x: -DisplayUtil.getWidth(), y: 0 } })

+ 241 - 86
entry/src/main/ets/pages/SettingPage.ets

@@ -389,11 +389,10 @@ export struct SettingPage {
       // 主题色分组卡片
       Column() {
         Row() {
+          SymbolGlyph($r('sys.symbol.paintpalette'))
+            .fontSize(20)
+            .fontColor([this.themeColor])
 
-          Image($r('app.media.theme'))
-            .width(20)
-            .height(20)
-            .fillColor(this.themeColor)
           Text('主题色')
             .fontSize(15)
             .fontWeight(500)
@@ -576,9 +575,15 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 主题设置弹框入口
             Button({ type: ButtonType.Normal, stateEffect: true }) {
+
               Row() {
+                SymbolGlyph($r('sys.symbol.sun_max'))
+                  .fontSize(20)
+                  .fontColor([this.themeColor])
+                  .alignSelf(ItemAlign.Center)
+                  .margin({ left: 15 })
                 Text('主题设置')
-                  .margin({ left: 18 })
+                  .margin({ left: 8 })
                   .fontSize(15)
                   .fontColor(Color.Gray)
                   .fontWeight(480)
@@ -614,8 +619,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             Button({ type: ButtonType.Normal, stateEffect: true }) {
               Row() {
+                SymbolGlyph($r('sys.symbol.paintpalette'))
+                  .fontSize(20)
+                  .fontColor([this.themeColor])
+                  .alignSelf(ItemAlign.Center)
+                  .margin({ left: 15 })
                 Text('自定义背景')
-                  .margin({ left: 18 })
+                  .margin({ left: 8 })
                   .fontSize(15)
                   .fontColor(Color.Gray)
                   .fontWeight(480)
@@ -653,36 +663,41 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
             // 滚动隐藏'
-            Row() {
-              Text('滚动隐藏')
-                .margin({ left: 18 })
-                .fontSize(15)
-                .fontColor(Color.Gray)
-                .fontWeight(480)
-                .layoutWeight(1)
-              Toggle({ type: ToggleType.Switch, isOn: this.isScrollHide })
-                .selectedColor(this.themeColor)
-                .switchPointColor(Color.White)
-                .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-                .margin({ right: 18 })
-                .onChange((checked: boolean) => {
-                  this.isScrollHide = checked;
-                  PreferencesUtil.put(SettingPage.IS_SCROLL_HIDE, this.isScrollHide)
-                  this.sendChangeEvent()
-                })
-                .width(50)
-                .height(30);
-            }
-            .height(55)
-            .visibility(Visibility.None)
-            .clickEffect({ level: ClickEffectLevel.HEAVY })
-
-            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-              .visibility(Visibility.None)
+            // Row() {
+            //   Text('滚动隐藏')
+            //     .margin({ left: 18 })
+            //     .fontSize(15)
+            //     .fontColor(Color.Gray)
+            //     .fontWeight(480)
+            //     .layoutWeight(1)
+            //   Toggle({ type: ToggleType.Switch, isOn: this.isScrollHide })
+            //     .selectedColor(this.themeColor)
+            //     .switchPointColor(Color.White)
+            //     .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+            //     .margin({ right: 18 })
+            //     .onChange((checked: boolean) => {
+            //       this.isScrollHide = checked;
+            //       PreferencesUtil.put(SettingPage.IS_SCROLL_HIDE, this.isScrollHide)
+            //       this.sendChangeEvent()
+            //     })
+            //     .width(50)
+            //     .height(30);
+            // }
+            // .height(55)
+            // .visibility(Visibility.None)
+            // .clickEffect({ level: ClickEffectLevel.HEAVY })
+            //
+            // Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            //   .visibility(Visibility.None)
             // 网格布局
             Row() {
-              Text('网格模式')
-                .margin({ left: 18 })
+              SymbolGlyph($r('sys.symbol.square_grid_2x2'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
+              Text('卡片模式')
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -705,8 +720,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 封面方形
             Row() {
+              SymbolGlyph($r('sys.symbol.rectangle'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('封面方形')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -730,8 +750,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             //播放列表透明
             Row() {
+              SymbolGlyph($r('sys.symbol.circle_lefthalf_inset_filled'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('播放列表背景透明')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -756,8 +781,13 @@ export struct SettingPage {
 
             // 网格封面大
             Row() {
+              SymbolGlyph($r('sys.symbol.picture'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('列表封面大小')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -784,8 +814,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 封面顶部
             Row() {
+              SymbolGlyph($r('sys.symbol.arrowshape_up'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('封面顶部')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -815,8 +850,13 @@ export struct SettingPage {
                 })
               // 封面顶部
               Row() {
+                SymbolGlyph($r('sys.symbol.shutter_photo'))
+                  .fontSize(20)
+                  .fontColor([this.themeColor])
+                  .alignSelf(ItemAlign.Center)
+                  .margin({ left: 15 })
                 Text('顶部大封面')
-                  .margin({ left: 18 })
+                  .margin({ left: 8 })
                   .fontSize(15)
                   .fontColor(Color.Gray)
                   .fontWeight(480)
@@ -850,8 +890,13 @@ export struct SettingPage {
 
             // 切歌动画效果
             Row() {
+              SymbolGlyph($r('sys.symbol.music'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('切歌动画效果')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -876,8 +921,13 @@ export struct SettingPage {
 
             // 圆形播放按钮
             Row() {
+              SymbolGlyph($r('sys.symbol.circle'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('圆形播放按钮')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -929,8 +979,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 启动时播放
             Row() {
+              SymbolGlyph($r('sys.symbol.play_circle'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('启动时播放')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -954,8 +1009,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 列表是否可左滑
             Row() {
+              SymbolGlyph($r('sys.symbol.indentation_left'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('列表是否可左滑')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -978,8 +1038,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记住播放进度
             Row() {
+              SymbolGlyph($r('sys.symbol.rectangle_split_3x1'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('记住最后一首进度')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1003,8 +1068,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记忆播放
             Row() {
+              SymbolGlyph($r('sys.symbol.route_plan'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('记忆播放')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1030,8 +1100,13 @@ export struct SettingPage {
 
             // 长按默认倍数
             Row() {
+              SymbolGlyph($r('sys.symbol.timer'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('长按默认倍数')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1068,8 +1143,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 默认排序模式
             Row() {
+              SymbolGlyph($r('sys.symbol.text_and_arrow_down'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('默认排序模式')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1100,8 +1180,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 保存播放模式
             Row() {
+              SymbolGlyph($r('sys.symbol.clock'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('保存播放模式')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1124,8 +1209,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
               .visibility(Visibility.None)
             Row() {
+              SymbolGlyph($r('sys.symbol.sun_max'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('与其他应用同时播放')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1149,8 +1239,13 @@ export struct SettingPage {
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 播放背景随音乐封面
             Row() {
+              SymbolGlyph($r('sys.symbol.paperplane'))
+                .fontSize(20)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 15 })
               Text('播放背景随音乐封面')
-                .margin({ left: 18 })
+                .margin({ left: 8 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
@@ -1236,8 +1331,13 @@ export struct SettingPage {
 
 
       Row() {
+        SymbolGlyph($r('sys.symbol.text_clipboard'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('显示分类导航')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1261,8 +1361,13 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
       Row() {
+        SymbolGlyph($r('sys.symbol.label'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('显示播放全部')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1286,8 +1391,13 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 显示私密音频
       Row() {
+        SymbolGlyph($r('sys.symbol.lock'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('显示私密音频')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1311,8 +1421,13 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 播放页单行歌词
       Row() {
+        SymbolGlyph($r('sys.symbol.close_sidebar'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('播放页单行歌词')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1337,8 +1452,13 @@ export struct SettingPage {
 
       // 二级菜单新风格
       Row() {
+        SymbolGlyph($r('sys.symbol.satellite_map'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('二级菜单新风格')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1362,8 +1482,13 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 播放页返回键
       Row() {
+        SymbolGlyph($r('sys.symbol.arrow_left'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('显示播放页返回键')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1385,35 +1510,45 @@ export struct SettingPage {
       .clickEffect({ level: ClickEffectLevel.HEAVY })
 
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-      // 自动隐藏进度条两侧的按钮
-      Row() {
-        Text('自动隐藏进度条两侧的按钮')
-          .margin({ left: 18 })
-          .fontSize(15)
-          .fontColor(Color.Gray)
-          .fontWeight(480)
-          .layoutWeight(1)
-        Toggle({ type: ToggleType.Switch, isOn: this.is_auto_hide_progress })
-          .selectedColor(this.themeColor)
-          .switchPointColor(Color.White)
-          .margin({ right: 18 })
-          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .onChange((checked: boolean) => {
-            this.is_auto_hide_progress = checked;
-            PreferencesUtil.put(SettingPage.IS_AUTO_HIDE_PROGRESS, this.is_auto_hide_progress)
-            this.sendChangeEvent()
-          })
-          .width(50)
-          .height(30);
-      }
-      .height(55)
-      .clickEffect({ level: ClickEffectLevel.HEAVY })
-
-      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+      // // 自动隐藏进度条两侧的按钮
+      // Row() {
+      //   SymbolGlyph($r('sys.symbol.sun_max'))
+      //     .fontSize(20)
+      //     .fontColor([this.themeColor])
+      //     .alignSelf(ItemAlign.Center)
+      //     .margin({ left: 15 })
+      //   Text('自动隐藏进度条两侧的按钮')
+      //     .margin({ left: 8 })
+      //     .fontSize(15)
+      //     .fontColor(Color.Gray)
+      //     .fontWeight(480)
+      //     .layoutWeight(1)
+      //   Toggle({ type: ToggleType.Switch, isOn: this.is_auto_hide_progress })
+      //     .selectedColor(this.themeColor)
+      //     .switchPointColor(Color.White)
+      //     .margin({ right: 18 })
+      //     .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      //     .onChange((checked: boolean) => {
+      //       this.is_auto_hide_progress = checked;
+      //       PreferencesUtil.put(SettingPage.IS_AUTO_HIDE_PROGRESS, this.is_auto_hide_progress)
+      //       this.sendChangeEvent()
+      //     })
+      //     .width(50)
+      //     .height(30);
+      // }
+      // .height(55)
+      // .clickEffect({ level: ClickEffectLevel.HEAVY })
+      //
+      // Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 显示我的收藏
       Row() {
+        SymbolGlyph($r('sys.symbol.heart'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('显示我的收藏')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1437,8 +1572,13 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 显示最近播放
       Row() {
+        SymbolGlyph($r('sys.symbol.clock'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
         Text('显示最近播放')
-          .margin({ left: 18 })
+          .margin({ left: 8 })
           .fontSize(15)
           .fontColor(Color.Gray)
           .fontWeight(480)
@@ -1479,8 +1619,13 @@ export struct SettingPage {
     Button({ type: ButtonType.Capsule, stateEffect: true }) {
       Column() {
         Row() {
+          SymbolGlyph($r('sys.symbol.hand_draw'))
+            .fontSize(20)
+            .fontColor([this.themeColor])
+            .alignSelf(ItemAlign.Center)
+            .margin({ left: 15 })
           Text('设置教程:')
-            .margin({ left: 18 })
+            .margin({ left: 8 })
             .fontSize(15)
             .fontColor(Color.Gray)
             .fontWeight(480)
@@ -1532,8 +1677,13 @@ export struct SettingPage {
       // 歌词API
       Button({ type: ButtonType.Normal, stateEffect: true }) {
         Row() {
+          SymbolGlyph($r('sys.symbol.lightbulb'))
+            .fontSize(20)
+            .fontColor([this.themeColor])
+            .alignSelf(ItemAlign.Center)
+            .margin({ left: 15 })
           Text('歌词:')
-            .margin({ left: 18, right: 6 })
+            .margin({ left: 8, right: 6 })
             .fontSize(15)
             .fontColor(Color.Gray)
           Text(this.lyricApiUrl)
@@ -1561,8 +1711,13 @@ export struct SettingPage {
       // 封面API
       Button({ type: ButtonType.Normal, stateEffect: true }) {
         Row() {
+          SymbolGlyph($r('sys.symbol.picture'))
+            .fontSize(20)
+            .fontColor([this.themeColor])
+            .alignSelf(ItemAlign.Center)
+            .margin({ left: 15 })
           Text('封面:')
-            .margin({ left: 18, right: 6 })
+            .margin({ left: 8, right: 6 })
             .fontSize(15)
             .fontColor(Color.Gray)
           Text(this.coverApiUrl)

+ 3 - 3
entry/src/main/ets/view/LocalMusic.ets

@@ -7062,7 +7062,7 @@ export struct LocalMusic {
             this.playProgressView()
             // this.playCenterView()
           }
-          .margin({ bottom: 20, right: this.currentLyricAlignMode == 0 ? 0 : 30 })
+          .margin({ bottom: 30, right: this.currentLyricAlignMode == 0 ? 0 : 30 })
         }
       }
       .position({
@@ -7427,7 +7427,7 @@ export struct LocalMusic {
         curve: 'ease-in-out' // 可选动画曲线
       })
       .backgroundColor(Color.Transparent)
-      .margin({ left: 20, right: 10 })
+      .margin({  right: 10 })
       .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
       .onClick(async () => {
         this.setLoopMode()
@@ -7701,7 +7701,7 @@ export struct LocalMusic {
           this.playCenterView()
           // this.playProgressView()
         }
-        .position({ left: 40, bottom: 48 })
+        .position({ left: 28, bottom: 38 })
 
       } else {
         this.BottomControl()