diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/common/constants/CommonConstants.ets b/scenario/arkui/MyMusic/entry/src/main/ets/common/constants/CommonConstants.ets
index 6ec9a59611cae6506928a2f653b8a6de5f00d2e2..649cb18cc8206af4a15453f9194ad50d04cb338c 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/common/constants/CommonConstants.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/common/constants/CommonConstants.ets
@@ -89,5 +89,6 @@ export default class CommonConstants {
    * Mine tab index
    */
   static readonly SOCIAL_TAB_INDEX = 4;
+
 }
 
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/common/utils/Logger.ts b/scenario/arkui/MyMusic/entry/src/main/ets/common/utils/Logger.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c1189e3b74d4cf8a810a82303296b29d6ea2994
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/common/utils/Logger.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import hilog from '@ohos.hilog';
+
+class Logger {
+  private domain: number;
+  private prefix: string;
+  private format: string = '%{public}s, %{public}s';
+
+  constructor(prefix: string) {
+    this.prefix = prefix;
+    this.domain = 0xFF00;
+  }
+
+  debug(...args: string[]): void {
+    hilog.debug(this.domain, this.prefix, this.format, args);
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]): void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]): void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export default new Logger('[Samples_VideoPlay]');
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ecf51560ed2fc979836fa9e4a35df5a95e400d47
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * List item data entity.
+ */
+export default class AudioItem {
+  /**
+   * Text of list item.
+   */
+  title: string;
+  /**
+   * Image of list item.
+   */
+  img: Resource;
+  /**
+   * Other resource of list item.
+   */
+  time: number;
+  artist: string
+
+  constructor(title: string, img: Resource, artist: string, time: number) {
+    this.title = title;
+    this.img = img;
+    this.time = time;
+    this.artist = artist;
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets b/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets
new file mode 100644
index 0000000000000000000000000000000000000000..73f067381e4155bfbd0e06e764415ad78809d2fb
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Logger from '../common/utils/Logger';
+import emitter from '@ohos.events.emitter';
+import AudioItem from './AudioItem';
+
+export default class PlayerManager {
+  private tag: string = 'PlayerManager';
+  private state: number = -1;
+  // 播放状态，未初始化-1，停止0，播放1，暂停2
+  private currentTime: number = 0;
+  private item: AudioItem = new AudioItem('',$r('app.media.ic_gallery_frame_overlay_soundphoto'),'',0);
+  private list: AudioItem[] = [];
+  private listPosition: number = 0;
+  private intervalID: number = -1;
+  private innerEvent: emitter.InnerEvent = {
+    eventId: 1,
+    priority: emitter.EventPriority.HIGH
+  };
+
+  /**
+   * 初始化
+   */
+  playList(list: AudioItem[], pos: number): void {
+    this.stop();
+    if (list.length <= 0) {
+      Logger.error(this.tag, 'PlayList:' + 'list length <= 0');
+      return;
+    }
+    if (list.length > pos) {
+      this.listPosition = pos;
+    } else {
+      Logger.error(this.tag, 'PlayList:' + 'Position over length');
+      return;
+    }
+    this.list = list;
+    this.currentTime = 0;
+    this.item = list[this.listPosition];
+    this.state = 0;
+    this.play();
+  }
+
+  /**
+   * 播放
+   */
+  play(): void {
+    if (this.state === -1 || this.state === 1) {
+      Logger.error(this.tag, 'Play:' + 'state error');
+      return;
+    }
+    this.state = 1
+    this.intervalID = setInterval(() => {
+      if (this.currentTime > this.item.time) {
+        this.next();
+      } else {
+        Logger.error(this.tag, 'Play:' + this.item.title + ':' + this.currentTime.toString());
+        let eventData: emitter.EventData = {
+          data: {
+            "state": this.state,
+            "currentTime": this.currentTime
+          }
+        };
+        emitter.emit(this.innerEvent, eventData);
+        this.currentTime = this.currentTime + 1;
+      }
+    }, 1000);
+    Logger.error(this.tag, 'Start interval id:' + this.intervalID.toString());
+  }
+
+  /**
+   * 暂停
+   */
+  pause(): void {
+    if (this.state === -1) {
+      Logger.error(this.tag, 'Play:' + 'state error');
+      return;
+    }
+    this.state = 2;
+    if (this.intervalID !== -1) {
+      Logger.error(this.tag, 'Pause release interval id:' + this.intervalID.toString());
+      clearInterval(this.intervalID)
+    }
+    Logger.error(this.tag, 'Pause:' + this.item.title);
+    let eventData: emitter.EventData = {
+      data: {
+        "state": this.state,
+        "currentTime": this.currentTime
+      }
+    };
+    emitter.emit(this.innerEvent, eventData);
+  }
+
+  /**
+   * 停止
+   */
+  stop(): void {
+    if (this.state === -1) {
+      Logger.error(this.tag, 'Play:' + 'state error');
+      return;
+    }
+    if (this.intervalID !== -1) {
+      Logger.error(this.tag, 'Stop release interval id:' + this.intervalID.toString());
+      clearInterval(this.intervalID)
+    }
+    this.state = 0;
+    this.currentTime = 0;
+    Logger.error(this.tag, 'Stop:' + this.item.title);
+    let eventData: emitter.EventData = {
+      data: {
+        "state": this.state,
+        "currentTime": this.currentTime
+      }
+    };
+    emitter.emit(this.innerEvent, eventData);
+  }
+
+  /**
+   * 下一首
+   */
+  next(): void {
+    if (this.state === -1) {
+      return;
+    }
+    this.stop();
+    Logger.error(this.tag, 'Play finish:' + this.listPosition.toString());
+    if (this.listPosition + 1 === this.list.length) {
+      this.listPosition = 0;
+    } else {
+      this.listPosition = this.listPosition + 1;
+    }
+    Logger.error(this.tag, 'Play next:' + this.listPosition.toString());
+    this.item = this.list[this.listPosition]
+    this.play();
+  }
+
+  //上一首
+  previous() {
+
+  }
+
+  //播放顺序
+  setPlayMode() {
+
+  }
+
+  getItem(): AudioItem {
+    return this.item;
+  }
+}
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets b/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets
index 1d957ebc3d1b9e8f3cb477b83b7d33ca863f0ff9..5a55d3ad44d9c8956bf2fbf971280fbe859ac506 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets
@@ -20,6 +20,7 @@ import Mine from '../view/Mine'
 import PlayerBar from '../view/PlayerBar';
 import Community from "../view/Community"
 import Follow from '../view/Follow';
+import PlayerManager from '../manager/PlayerManager'
 
 /**
  * Main page
@@ -29,10 +30,14 @@ import Follow from '../view/Follow';
 struct MainPage {
   @State currentIndex: number = CommonConstants.HOME_TAB_INDEX;
   private tabsController: TabsController = new TabsController();
-  @Provide playingTitle: string = '红色的河'
-  @Provide playingArtist: string = '旅行团乐队/吴青峰'
-  @Provide playingImg: Resource = $r('app.media.ic_gallery_frame_overlay_soundphoto')
-  @Provide rotateAngle: number = 0;
+  @State playerManager: PlayerManager = new PlayerManager();
+
+  aboutToAppear() {
+    AppStorage.setOrCreate('playerManager', this.playerManager);
+  }
+
+  aboutToDisappear() {
+  }
 
   @Builder
   TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets
index 17b5822575fc5fdc5ebecae819c92e786dd7e1d4..0bb054c36037d015f13904facba2134b866dad29 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets
@@ -14,6 +14,9 @@
  */
 import ItemData from '../viewmodel/ItemData';
 import prompt from '@ohos.promptAction';
+import hilog from '@ohos.hilog';
+import AudioItem from '../manager/AudioItem';
+import PlayerManager  from '../manager/PlayerManager';
 
 /**
  * List item information component.
@@ -21,10 +24,7 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct BookFirstItem {
   private item: ItemData = new ItemData('', $r('app.media.fig1'), '', $r('app.media.fig1'));
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   build() {
     Column() {
@@ -44,13 +44,11 @@ export default struct BookFirstItem {
     .margin('8vp')
     .borderRadius($r('app.float.podcast_text_border_Radius'))
     .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
+      let list  = [new AudioItem(this.item.title,this.item.img,this.item.subTitle,120)]
+      this.playerManager.playList(list,0)
     })
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets
index bc6d2006480a7d4eeea6b14fbec8110dac17055a..bffbc7f383f98e407102bcb1ea2b5b0367909511 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 export default struct BookSecondItem {
   private item: ItemData = new ItemData('', $r('app.media.fig1'), '', $r('app.media.fig1'));
   private imgWidth: string = '';
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -40,11 +36,7 @@ export default struct BookSecondItem {
         .maxLines(2)
     }
     .margin('8vp')
-    .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
+    .onClick(() => {;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets
index 45bd458a481b2aae624840c4d4488574fc16040d..7e61b498ea708f96f5e134429584d09fb83a7f1c 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 export default struct BookTriItem {
   private items: ItemData[] = new Array<ItemData>();
   ;
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -78,15 +74,11 @@ export default struct BookTriItem {
         }
         .margin($r('app.float.home_homeCell_margin'))
         .onClick(() => {
-          this.playingTitle = item.title;
-          this.playingArtist = item.subTitle;
-          this.playingImg = item.img;
-          this.rotateAngle = 360;
           prompt.showToast({
             message: '进入歌单：' + item.title
           })
         })
-      }, (item: ItemData) => JSON.stringify(item))
+      })
     }
     .width('90%')
     .alignItems(HorizontalAlign.Start)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/Community.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/Community.ets
index 4f3002cc9e75bf68ef798eb2d34065ac0f24466a..dc4530c8ac5945de209cba3ba24633364a988924 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/Community.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/Community.ets
@@ -32,7 +32,7 @@ export default struct Community {
   TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
     Column() {
       Text(title)
-        .fontSize($r('app.float.normal_text_size'))
+        .fontSize('20fp')
         .fontColor(this.subCurrentIndex === index ? $r('app.color.mainPage_selected') : $r('app.color.mainPage_normal'))
       Image(this.subCurrentIndex === index ? selectedImg : normalImg)
         .width($r('app.float.mainPage_baseTab_size'))
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityRoom.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityRoom.ets
index b85868820d4579683832321b2ccb91ce552da157..9817ba3b4fee3a1d8d8a8570acd565b3efbc3f9f 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityRoom.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityRoom.ets
@@ -30,7 +30,7 @@ export default struct CommunityRoom {
           MineActivityItem({ item })
         }
         .align(Alignment.Start)
-      }, (item: MineActivityItemData) => JSON.stringify(item))
+      })
     }.margin('12vp')
     .edgeEffect(EdgeEffect.Spring)
     .nestedScroll({
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets
index 0bbc43795e48ade666b8e19ae5070c3cb38d65e6..869abd27dd1b168d0cdc5abbfff8ca5bbe205cef 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets
@@ -16,6 +16,11 @@
 import MineActivityItem from './MineActivityItem';
 import MineActivityItemData from '../viewmodel/MineActivityItemData';
 import mainViewModel from '../viewmodel/MainViewModel';
+import ListHead from './ListHead';
+import TriItem from './TriItem';
+import TriItemData from '../viewmodel/TriItemData';
+import SquareTriItem from './SquareTriItem';
+import SquareTriItemData from '../viewmodel/SquareTriItemData';
 
 
 /**
@@ -23,19 +28,72 @@ import mainViewModel from '../viewmodel/MainViewModel';
  */
 @Component
 export default struct CommunitySquare {
+  @State isAd: boolean = true;
+
   build() {
-    List({ space: 10 }) {
-      ForEach(mainViewModel.getMineActivityItemData(), (item: MineActivityItemData) => {
-        ListItem() {
-          MineActivityItem({ item })
+    Scroll() {
+      Column() {
+        if (this.isAd) {
+          Stack() {
+            Image($r('app.media.green2023'))
+              .height('100%')
+              .width('100%')
+              .objectFit(ImageFit.Fill)
+              .borderRadius('12vp')
+            Image($r('app.media.ic_public_close_wh'))
+              .height('32vp')
+              .width('32vp')
+              .margin('4vp')
+              .onClick(() => {
+                this.isAd = false;
+              })
+          }
+          .height('100vp')
+          .width('90%')
+          .alignContent(Alignment.TopEnd)
         }
-        .align(Alignment.Start)
-      }, (item: MineActivityItemData) => JSON.stringify(item))
-    }.margin('12vp')
-    .edgeEffect(EdgeEffect.Spring)
-    .nestedScroll({
-      scrollForward: NestedScrollMode.PARENT_FIRST,
-      scrollBackward: NestedScrollMode.SELF_FIRST
-    })
+        List({ space: 10 }) {
+          ForEach(mainViewModel.getMineActivityItemData(), (item: MineActivityItemData) => {
+            ListItem() {
+              MineActivityItem({ item })
+            }
+            .align(Alignment.Start)
+          })
+          ListItem() {
+            Column(){
+              ListHead({
+                imgRefresh: Visibility.None,
+                imgArrow: Visibility.None,
+                imgMore: Visibility.None,
+                isPlayer: Visibility.None,
+                title: '大家都在聊'
+              })
+              Scroll() {
+                Row() {
+                  ForEach(mainViewModel.getSquareThirdGridData(), (items: SquareTriItemData[]) => {
+                    SquareTriItem({ items })
+                  })
+                }
+                .margin($r('app.float.home_secondGrid_margin'))
+                .alignItems(VerticalAlign.Top)
+              }
+              .scrollable(ScrollDirection.Horizontal)
+              .scrollBar(BarState.Off)
+            }
+          }
+          ForEach(mainViewModel.getMineActivityItemData1(), (item: MineActivityItemData) => {
+            ListItem() {
+              MineActivityItem({ item })
+            }
+            .align(Alignment.Start)
+          })
+        }.margin('12vp')
+        .edgeEffect(EdgeEffect.Spring)
+        .nestedScroll({
+          scrollForward: NestedScrollMode.PARENT_FIRST,
+          scrollBackward: NestedScrollMode.SELF_FIRST
+        })
+      }
+    }
   }
 }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityVideo.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityVideo.ets
index 8ddfcc73509f59bff18001258468036b5aaba85d..9d068b255b5e06d651d0d2f0788f7e2309c1e7b4 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityVideo.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunityVideo.ets
@@ -16,6 +16,8 @@
 import MineActivityItem from './MineActivityItem';
 import MineActivityItemData from '../viewmodel/MineActivityItemData';
 import mainViewModel from '../viewmodel/MainViewModel';
+import VideoRecommend from './VideoRecommend';
+import VideoMV from './VideoMV';
 
 
 /**
@@ -23,19 +25,56 @@ import mainViewModel from '../viewmodel/MainViewModel';
  */
 @Component
 export default struct CommunityVideo {
+  @State subCurrentIndex: number = 0;
+  private tabsController: TabsController = new TabsController();
+
+  @Builder
+  TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
+    Column() {
+      Text(title)
+        .fontSize($r('app.float.normal_text_size'))
+        .fontColor(this.subCurrentIndex === index ? '#f0f0f0' : '#0e0e0e')
+        .borderRadius('20vp')
+        .padding({top:'4vp',bottom:'4vp',left:'8vp',right:'8vp'})
+        .margin({left:'20vp',right:'20vp'})
+        .textAlign(TextAlign.Center)
+        .backgroundColor(this.subCurrentIndex === index ?'#E02020':'#00ffffff')
+    }
+    .height($r('app.float.mainPage_barHeight'))
+    .margin({
+      top: $r('app.float.mainPage_padding'),
+      left: $r('app.float.mainPage_padding'),
+      right: $r('app.float.mainPage_padding')
+    })
+    .onClick(() => {
+      this.subCurrentIndex = index;
+      this.tabsController.changeIndex(this.subCurrentIndex);
+    })
+  }
   build() {
-    List({ space: 10 }) {
-      ForEach(mainViewModel.getMineActivityItemData(), (item: MineActivityItemData) => {
-        ListItem() {
-          MineActivityItem({ item })
-        }
-        .align(Alignment.Start)
-      }, (item: MineActivityItemData) => JSON.stringify(item))
-    }.margin('12vp')
-    .edgeEffect(EdgeEffect.Spring)
-    .nestedScroll({
-      scrollForward: NestedScrollMode.PARENT_FIRST,
-      scrollBackward: NestedScrollMode.SELF_FIRST
+    Tabs({
+      barPosition: BarPosition.End,
+      controller: this.tabsController
+    }) {
+      TabContent() {
+        VideoRecommend();
+      }
+      .tabBar(this.TabBuilder('推荐', 0,
+        $r('app.media.ic_screenshot_line_select'), $r('app.media.ic_screenshot_line')))
+
+      TabContent() {
+        VideoMV();
+      }
+      .tabBar(this.TabBuilder('MV', 1,
+        $r('app.media.ic_screenshot_line_select'), $r('app.media.ic_screenshot_line')))
+    }
+    .width('100%')
+    .barHeight($r('app.float.mainPage_barHeight'))
+    .barWidth('70%')
+    .barMode(BarMode.Scrollable)
+    .barPosition(BarPosition.Start)
+    .onChange((index: number) => {
+      this.subCurrentIndex = index;
     })
   }
 }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets
index 373a6d754053001ed81ab95abc7a40fb961ae7b1..f187fd3bb9d9ad7294d2ff55ac856072354a6228 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets
@@ -61,7 +61,7 @@ export default struct Follow {
                       .textOverflow({ overflow: TextOverflow.Ellipsis })
                   }.width('64vp')
                   .margin({ right: '16vp' })
-                }, (item: ItemData) => JSON.stringify(item))
+                })
               }
             }
             .scrollable(ScrollDirection.Horizontal)
@@ -95,7 +95,7 @@ export default struct Follow {
                 MineActivityItem({ item })
               }
               .align(Alignment.Start)
-            }, (item: MineActivityItemData) => JSON.stringify(item))
+            })
           }.margin('12vp')
           .edgeEffect(EdgeEffect.Spring)
           .divider({ strokeWidth: 1, color: 0xF0F0F0 })
@@ -135,7 +135,7 @@ export default struct Follow {
                 MineActivityItem({ item })
               }
               .align(Alignment.Start)
-            }, (item: MineActivityItemData) => JSON.stringify(item))
+            })
           }
           .margin('12vp')
           .edgeEffect(EdgeEffect.Spring)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/Home.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/Home.ets
index 53b6b7df31d24d3fecf5acae97202520374911cc..cac19d4d6897d8217b8b8e36582d5fcc51fafef9 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/Home.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/Home.ets
@@ -41,7 +41,7 @@ export default struct Home {
           Swiper(this.swiperController) {
             ForEach(mainViewModel.getSwiperImages(), (img: Resource) => {
               Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
-            }, (img: Resource) => JSON.stringify(img.id))
+            })
           }
           .margin({ top: $r('app.float.home_swiper_margin') })
           .autoPlay(true)
@@ -50,7 +50,7 @@ export default struct Home {
             Row() {
               ForEach(mainViewModel.getFirstGridData(), (item: ItemData) => {
                 SmallItem({ item })
-              }, (item: ItemData) => JSON.stringify(item))
+              })
             }.margin($r('app.float.home_secondGrid_margin'))
           }
           .scrollable(ScrollDirection.Horizontal)
@@ -68,7 +68,7 @@ export default struct Home {
             Row() {
               ForEach(mainViewModel.getSecondGridData(), (item: MidItemData) => {
                 MidItem({ item })
-              }, (item: MidItemData) => JSON.stringify(item))
+              })
             }
             .margin($r('app.float.home_secondGrid_margin'))
             .alignItems(VerticalAlign.Top)
@@ -89,7 +89,7 @@ export default struct Home {
             Row() {
               ForEach(mainViewModel.getThirdGridData(), (items: TriItemData[]) => {
                 TriItem({ items })
-              }, (items: TriItemData[]) => JSON.stringify(items))
+              })
             }
             .margin($r('app.float.home_secondGrid_margin'))
             .alignItems(VerticalAlign.Top)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHead.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHead.ets
index 77246813a2af85707e427afd69d751e125ede812..1ff69f9880a20f08180a9d875cb0c84734d517f0 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHead.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHead.ets
@@ -52,7 +52,7 @@ export default struct ListHead {
         .visibility(this.imgRefresh)
         .margin($r('app.float.head_name_margin'))
       Text(this.title)
-        .fontSize($r('app.float.normal_text_size'))
+        .fontSize('20fp')
         .fontWeight(FontWeight.Medium)
       Image($r('app.media.ic_public_arrow_right'))
         .objectFit(ImageFit.Contain)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets
index 1c78e86f9863af90f2d63505dd04d42bbe6d9532..46e020ee584f709358d106bb0675bab1cb96c86c 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets
@@ -16,17 +16,15 @@
 import ItemData from '../viewmodel/MidItemData';
 import hilog from '@ohos.hilog';
 import prompt from '@ohos.promptAction';
+import PlayerManager  from '../manager/PlayerManager';
 
 /**
  * List item information component.
  */
 @Component
 export default struct MidItem {
-  private item: ItemData = new ItemData('', $r('app.media.fig1'), '', '');
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
+  private item: ItemData = new ItemData('', $r('app.media.fig1'), '',[], '');
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   aboutToAppear() {
     let space: number = 0;
@@ -101,12 +99,9 @@ export default struct MidItem {
   }
 
   enterList() {
-    this.playingTitle = this.item.title.replace(' ', '');
-    this.playingArtist = 'None';
-    this.playingImg = this.item.img;
-    this.rotateAngle = 360;
     prompt.showToast({
       message: '进入歌单：' + this.item.title.replace(' ', '')
     })
+    this.playerManager.playList(this.item.list,0)
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivity.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivity.ets
index a5010a82a947f2bc90b9932c5166770c13c71d21..8e3d1050a1c9133d082d2731df5964a9a3fc69a6 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivity.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivity.ets
@@ -30,7 +30,7 @@ export default struct MineActivity {
           MineActivityItem({ item })
         }
         .align(Alignment.Start)
-      }, (item: MineActivityItemData) => JSON.stringify(item))
+      })
     }.margin('12vp')
     .edgeEffect(EdgeEffect.Spring)
     .nestedScroll({
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivityItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivityItem.ets
index 01eadb4121644d81301db138ea84e6a0770f32d5..1a23e82eacf6f20739de81bfaa6be95c9d9b5722 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivityItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineActivityItem.ets
@@ -26,23 +26,16 @@ export default struct MineActivityItem {
   private item: ItemData = new ItemData('', [$r('app.media.fig21')],
     new MineListItemData('', $r('app.media.fig21'), '', Visibility.None, Visibility.None),
     0, 0, 0, [], undefined);
-  private layoutOptions: GridLayoutOptions = {
-    regularSize: [1, 1],
-    irregularIndexes: [0, 7], // 索引为0和7的GridItem占用的列数由onGetIrregularSizeByIndex指定
-    onGetIrregularSizeByIndex: (index: number) => {
-      if (index === 0) {
-        return [1, 5]
-      }
-      return [1, index % 6 + 1]
-    }
-  }
-  @State imgWidth: string = '90%'
+
+  @State imgWidth: string = '90%';
 
   aboutToAppear() {
-    if (this.item.imgs.length === 2) {
-      this.imgWidth = '45%'
-    } else if (this.item.imgs.length > 2) {
-      this.imgWidth = '30%'
+    if (this.item.imgs.length === 1) {
+      this.imgWidth = '90%';
+    } else if (this.item.imgs.length === 2 || this.item.imgs.length === 4) {
+      this.imgWidth = '45%';
+    } else {
+      this.imgWidth = '30%';
     }
   }
 
@@ -60,7 +53,7 @@ export default struct MineActivityItem {
               .width(this.imgWidth)
               .borderRadius('12vp')
           }
-        }, (img: Resource) => JSON.stringify(img))
+        })
       }
       .layoutDirection(GridDirection.Row)
       .maxCount(3)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets
index 326e1dad7d6c0bffff8fda0897d060e8d05caabc..faaff317ce50b73263d25957bcf1981a54657250 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct MineListItem {
   private item: ItemData = new ItemData('', $r('app.media.fig21'), '', Visibility.None, Visibility.None);
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Row() {
@@ -77,10 +73,6 @@ export default struct MineListItem {
     .alignItems(VerticalAlign.Center)
     .width('100%')
     .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineMusic.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineMusic.ets
index 93d2cf5a6f7aab85b60122ad5d1beed80e01c231..ee4f63a07ce84e951d6409ae3c3ca411a15c4e63 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineMusic.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineMusic.ets
@@ -58,7 +58,7 @@ export default struct MineMusic {
               MineListItem({ item })
             }
             .align(Alignment.Start)
-          }, (item: MineListItemData) => JSON.stringify(item))
+          })
         }.margin('12vp')
         .edgeEffect(EdgeEffect.Spring)
         .nestedScroll({
@@ -75,7 +75,7 @@ export default struct MineMusic {
               MineListItem({ item })
             }
             .align(Alignment.Start)
-          }, (item: MineListItemData) => JSON.stringify(item))
+          })
         }.margin('12vp')
         .edgeEffect(EdgeEffect.Spring)
         .nestedScroll({
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MinePodCast.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MinePodCast.ets
index 60cebe616495bef010efef99c253cdc512af13a7..017ece6960be28d0ddaf2a3c270cc7cff190de40 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MinePodCast.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MinePodCast.ets
@@ -58,7 +58,7 @@ export default struct MinePodCast {
             Column() {
               ForEach(mainViewModel.getMinePodCastListItemData(), (item: MineListItemData) => {
                 MineListItem({ item }).margin({bottom:'10vp'})
-              }, (item: MineListItemData) => JSON.stringify(item))
+              })
             }
           }.align(Alignment.Start)
 
@@ -78,7 +78,7 @@ export default struct MinePodCast {
                   GridItem() {
                     MidItem({ item })
                   }
-                }, (item: MidItemData) => JSON.stringify(item))
+                })
               }
               .columnsTemplate('1fr 1fr 1fr')
               .rowsTemplate('1fr 1fr')
@@ -131,7 +131,7 @@ export default struct MinePodCast {
               MineListItem({ item })
             }
             .align(Alignment.Start)
-          }, (item: MineListItemData) => JSON.stringify(item))
+          })
         }.margin('12vp')
         .edgeEffect(EdgeEffect.Spring)
         .nestedScroll({
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets
index b9014ebf94205d4596939b6919f3340af9903944..2f4769bf11fc14d8ab286477b628563d292b2066 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets
@@ -16,12 +16,53 @@
 /**
  * List item information component.
  */
+import emitter from '@ohos.events.emitter';
+import Logger from '../common/utils/Logger';
+import PlayerManager from '../manager/PlayerManager'
+import AudioItem from '../manager/AudioItem';
+
 @Component
 export default struct PlayerBar {
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
+  private tag: string = 'PlayerBar';
+  @State playingTitle: string = '红色的河'
+  @State playingArtist: string = '旅行团乐队/吴青峰'
+  @State playingImg: Resource = $r('app.media.ic_gallery_frame_overlay_soundphoto')
+  @State rotateAngle: number = 0;
+  @State durationTime: number = 100; // 总时长
+  @State currentTime: number = 0; // 当前时间
+  @State state: number = 0; // 播放状态
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
+  private innerEvent: emitter.InnerEvent = {
+    eventId: 1,
+    priority: emitter.EventPriority.HIGH
+  };
+
+  aboutToAppear() {
+    emitter.on(this.innerEvent, (eventData: emitter.EventData) => {
+      if (eventData !== undefined && eventData.data !== undefined) {
+        Logger.error(this.tag, 'state:' + eventData.data.state);
+        Logger.error(this.tag, 'currentTime:' + eventData.data.currentTime);
+        this.currentTime = eventData.data.currentTime;
+        if (this.state !== 1 && eventData.data.state === 1) {
+          this.playingTitle = this.playerManager.getItem().title;
+          this.durationTime = this.playerManager.getItem().time;
+          this.playingArtist = this.playerManager.getItem().artist;
+          this.playingImg = this.playerManager.getItem().img;
+          if (this.rotateAngle === 0) {
+            this.rotateAngle = 360;
+          }
+        }
+        if (eventData.data.state !== 1) {
+          this.rotateAngle = 0;
+        }
+        this.state = eventData.data.state;
+      }
+    });
+  }
+
+  aboutToDisappear() {
+    emitter.off(1);
+  }
 
   build() {
     Column() {
@@ -54,11 +95,40 @@ export default struct PlayerBar {
         }.width('35%')
 
         Blank()
-        Image($r('app.media.ic_public_pause_norm'))
-          .objectFit(ImageFit.Contain)
-          .width($r('app.float.home_homeCell_size'))
-          .height($r('app.float.home_homeCell_size'))
-          .margin({ right: $r('app.float.home_text_margin') })
+        Stack() {
+          Row({ space: 40 }) {
+            Progress({ value: 0, total: this.durationTime, type: ProgressType.Ring })
+              .color(Color.Black)
+              .value(this.currentTime)
+              .width('100%')
+              .height('100%')
+              .style({ strokeWidth: '2vp' })
+          }
+
+          if (this.state === 1) {
+            Image($r('app.media.ic_public_pause'))
+              .objectFit(ImageFit.Contain)
+              .width('90%')
+              .height('90%')
+              .padding('4vp')
+              .onClick(() => {
+                this.playerManager.pause();
+              })
+          } else {
+            Image($r('app.media.ic_public_play'))
+              .objectFit(ImageFit.Contain)
+              .width('90%')
+              .height('90%')
+              .padding('4vp')
+              .onClick(() => {
+                this.playerManager.play();
+              })
+          }
+        }.alignContent(Alignment.Center)
+        .width('32vp')
+        .height('32vp')
+        .margin({ right: $r('app.float.home_text_margin') })
+
         Image($r('app.media.ic_public_view_list'))
           .objectFit(ImageFit.Contain)
           .width($r('app.float.home_homeCell_size'))
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets
index d43e2d68e7f8ee1bf13bcaaf7b93c2a280f86819..42821b77f2f1a185fba7c3659c845213c1260bd4 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct PodCastBigItem {
   private item: ItemData = new ItemData('', $r('app.media.fig1'), '', '', '', '', '');
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -117,10 +113,6 @@ export default struct PodCastBigItem {
     .width('90%')
     .height('320vp')
     .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFirst.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFirst.ets
index 76c3c5f58f2575bf3bfff72ac283272ec012f4b6..04dc0cc1ee6f37f342544529d70c2b024a42a030 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFirst.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFirst.ets
@@ -65,7 +65,7 @@ export default struct PodCastContentFirst {
                 .borderRadius($r('app.float.podcast_text_border_Radius'))
                 .border({ width: 1, color: 0xE0E0E0, radius: 8, style: BorderStyle.Solid })
                 .textAlign(TextAlign.Center)
-            }, (item: ItemData) => JSON.stringify(item))
+            })
           }
         }
         .scrollable(ScrollDirection.Horizontal)
@@ -162,7 +162,7 @@ export default struct PodCastContentFirst {
             GridItem() {
               MidItem({ item })
             }
-          }, (item: MidItemData) => JSON.stringify(item))
+          })
         }
         .columnsTemplate('1fr 1fr 1fr')
         .rowsTemplate('1fr 1fr')
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFourth.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFourth.ets
index 5fb9dade63cc1fe08a985f5df9a58836e86d434e..e198b7ada7f7352d75dcda8619751e481f4931f0 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFourth.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentFourth.ets
@@ -63,11 +63,11 @@ export default struct PodCastContentFourth {
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.SpaceBetween)
-            }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+            })
             Swiper(this.swiperController) {
               ForEach(mainViewModel.getSwiperImages(), (img: Resource) => {
                 Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
-              }, (img: Resource) => JSON.stringify(img.id))
+              })
             }
             .margin({ top: $r('app.float.home_swiper_margin') })
             .height('120vp')
@@ -81,7 +81,7 @@ export default struct PodCastContentFourth {
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.SpaceBetween)
-            }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+            })
             Text('下滑加载更多......')
               .width(CommonConstants.FULL_PARENT)
               .height($r('app.float.bottom_barHeight'))
@@ -100,7 +100,7 @@ export default struct PodCastContentFourth {
               Row() {
                 ForEach(mainViewModel.getSelectFirst(), (item: SelectFirstItemData) => {
                   SelectFirstItem({ item })
-                }, (item: SelectFirstItemData) => JSON.stringify(item))
+                })
               }
             }
             .scrollable(ScrollDirection.Horizontal)
@@ -176,7 +176,7 @@ export default struct PodCastContentFourth {
                 }.justifyContent(FlexAlign.SpaceBetween)
                 .width('100%')
                 .margin('8vp')
-              }, (item: SelectFirstItemData) => JSON.stringify(item))
+              })
             }
             .padding('8vp')
             .borderRadius('12vp')
@@ -198,7 +198,7 @@ export default struct PodCastContentFourth {
               Row() {
                 ForEach(mainViewModel.getSecondGridData(), (item: MidItemData) => {
                   MidItem({ item })
-                }, (item: MidItemData) => JSON.stringify(item))
+                })
               }
               .margin($r('app.float.home_secondGrid_margin'))
               .alignItems(VerticalAlign.Top)
@@ -218,7 +218,7 @@ export default struct PodCastContentFourth {
             Swiper(this.swiperController) {
               ForEach(mainViewModel.getSwiperImages(), (img: Resource) => {
                 Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
-              }, (img: Resource) => JSON.stringify(img.id))
+              })
             }
             .margin({ top: $r('app.float.home_swiper_margin') })
             .height('120vp')
@@ -232,7 +232,7 @@ export default struct PodCastContentFourth {
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.SpaceBetween)
-            }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+            })
             Text('下滑加载更多......')
               .width(CommonConstants.FULL_PARENT)
               .height($r('app.float.bottom_barHeight'))
@@ -250,7 +250,7 @@ export default struct PodCastContentFourth {
             Swiper(this.swiperController) {
               ForEach(mainViewModel.getSwiperImages(), (img: Resource) => {
                 Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
-              }, (img: Resource) => JSON.stringify(img.id))
+              })
             }
             .margin({ top: $r('app.float.home_swiper_margin') })
             .height('120vp')
@@ -264,7 +264,7 @@ export default struct PodCastContentFourth {
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.SpaceBetween)
-            }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+            })
             Text('下滑加载更多......')
               .width(CommonConstants.FULL_PARENT)
               .height($r('app.float.bottom_barHeight'))
@@ -287,7 +287,7 @@ export default struct PodCastContentFourth {
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.SpaceBetween)
-            }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+            })
           }
         }
         .scrollBar(BarState.Off)
@@ -326,7 +326,7 @@ export default struct PodCastContentFourth {
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.SpaceBetween)
-            }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+            })
           }
         }
         .scrollBar(BarState.Off)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentSecond.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentSecond.ets
index cfcc9f683c5d47227a90e713b6ad36a428b8ac47..608ab7eb7920a4125ea348c19dc1bbfa155836c0 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentSecond.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentSecond.ets
@@ -55,7 +55,7 @@ export default struct PodCastContentSecond {
           Row() {
             ForEach(mainViewModel.getPodCastSecond(), (item: ItemData) => {
               BookFirstItem({ item })
-            }, (item: ItemData) => JSON.stringify(item))
+            })
           }
         }
         .scrollable(ScrollDirection.Horizontal)
@@ -78,7 +78,7 @@ export default struct PodCastContentSecond {
             BookSecondItem({ item: mainViewModel.getPodCastSecondVip(), imgWidth: '128vp' })
             ForEach(mainViewModel.getPodCastSecond2(), (item: ItemData) => {
               BookSecondItem({ item: item, imgWidth: '64vp' })
-            }, (item: ItemData) => JSON.stringify(item))
+            })
           }
           .alignItems(VerticalAlign.Top)
         }
@@ -95,7 +95,7 @@ export default struct PodCastContentSecond {
               Row() {
                 ForEach(mainViewModel.getBookTriData1(), (items: BookTriItemData[]) => {
                   BookTriItem({ items })
-                }, (items: BookTriItemData[]) => JSON.stringify(items))
+                })
               }
               .margin($r('app.float.home_secondGrid_margin'))
               .alignItems(VerticalAlign.Top)
@@ -111,7 +111,7 @@ export default struct PodCastContentSecond {
               Row() {
                 ForEach(mainViewModel.getBookTriData1(), (items: BookTriItemData[]) => {
                   BookTriItem({ items })
-                }, (items: BookTriItemData[]) => JSON.stringify(items))
+                })
               }
               .margin($r('app.float.home_secondGrid_margin'))
               .alignItems(VerticalAlign.Top)
@@ -128,7 +128,7 @@ export default struct PodCastContentSecond {
               Row() {
                 ForEach(mainViewModel.getBookTriData1(), (items: BookTriItemData[]) => {
                   BookTriItem({ items })
-                }, (items: BookTriItemData[]) => JSON.stringify(items))
+                })
               }
               .margin($r('app.float.home_secondGrid_margin'))
               .alignItems(VerticalAlign.Top)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentThird.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentThird.ets
index 0c39e881840d844d7f7c106b34b11c8562e50869..000d634d7c0768ec75c98892cfddd5d98b9780c6 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentThird.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastContentThird.ets
@@ -41,7 +41,7 @@ export default struct PodCastContentThird {
               .borderRadius($r('app.float.podcast_text_border_Radius'))
               .border({ width: 1, color: 0xE0E0E0, radius: 8, style: BorderStyle.Solid })
               .textAlign(TextAlign.Center)
-          }, (item: ItemData) => JSON.stringify(item))
+          })
         }
 
         ListHead({
@@ -57,7 +57,7 @@ export default struct PodCastContentThird {
           Row() {
             ForEach(mainViewModel.getBookTriData2(), (items: BookTriItemData[]) => {
               BookTriItem({ items })
-            }, (items: BookTriItemData[]) => JSON.stringify(items))
+            })
           }
           .margin($r('app.float.home_secondGrid_margin'))
           .alignItems(VerticalAlign.Top)
@@ -76,7 +76,7 @@ export default struct PodCastContentThird {
         Column() {
           ForEach(mainViewModel.getBookTriBigData(), (item: PodCastBigItemData) => {
             PodCastBigItem({ item })
-          }, (items: PodCastBigItemData[]) => JSON.stringify(items))
+          })
         }
 
         Text('下滑加载更多......')
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets
index 16d9d39d1795311a225bf65d2ba9819898489627..ad2b46d5fb329463598f31ac13b73b2f7b1b2804 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct PodCastListenItem {
   private item: ItemData = new ItemData('', $r('app.media.fig1'), '', '', '', '', '');
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -80,10 +76,6 @@ export default struct PodCastListenItem {
     .margin('12vp')
     .justifyContent(FlexAlign.SpaceBetween)
     .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets
index dc1aafc1b29f58c0ea55d620cfcee0a7dc19ef7d..507d5b0ed8b8be0dc0f60be9681c68a0abefb7ae 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct RadioItem {
   private items: ItemData[] = new Array<ItemData>();
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Scroll() {
@@ -75,15 +71,11 @@ export default struct RadioItem {
           .borderRadius($r('app.float.home_backgroundImage_borderRadius'))
           .alignItems(VerticalAlign.Center)
           .onClick(() => {
-            this.playingTitle = item.title;
-            this.playingArtist = item.subTitle;
-            this.playingImg = item.img;
-            this.rotateAngle = 360;
             prompt.showToast({
               message: '进入歌单：' + item.title
             })
           })
-        }, (item: ItemData) => JSON.stringify(item))
+        })
       }
     }
     .scrollable(ScrollDirection.Horizontal)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets
index dcbc2ab4ba45a1fb68f786a488bdc5b77058912e..30fb3ba3ee1eaae0a0ec65b72c130a5a78e3dacd 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct SelectFirstItem {
   private item: ItemData = new ItemData('', $r('app.media.fig1'), '', 'ffffff');
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -53,10 +49,6 @@ export default struct SelectFirstItem {
     .margin('8vp')
     .borderRadius($r('app.float.podcast_text_border_Radius'))
     .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets
index 664db6383fc093259df2c495fa04dbebe64da3f4..6012f770ca318408cd1284020fdd7c6a34818aeb 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets
@@ -90,7 +90,7 @@ export default struct Setting {
               this.settingCell(item)
             }
             .height($r('app.float.setting_list_height'))
-          }, (item: ItemData) => JSON.stringify(item))
+          })
         }
         .backgroundColor(Color.White)
         .divider({
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets
index 7bda736c7ff10865bc12a1ee763bb1da86de8e2a..dacb70b77e48c3f999e78a9a2de25ca51be46d95 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct SmallItem {
   private item: ItemData = new ItemData('', $r('app.media.fig1'), '', $r('app.media.fig1'));
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -37,10 +33,6 @@ export default struct SmallItem {
         .margin({ top: $r('app.float.home_homeCell_margin') })
     }.width('20%')
     .onClick(() => {
-      this.playingTitle = this.item.title;
-      this.playingArtist = this.item.subTitle;
-      this.playingImg = this.item.img;
-      this.rotateAngle = 360;
       prompt.showToast({
         message: '进入歌单：' + this.item.title
       })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/SquareTriItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/SquareTriItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c25af95721b5d339bd482bc3463a9a4432599771
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/SquareTriItem.ets
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@ohos.promptAction';
+import SquareTriItemData from '../viewmodel/SquareTriItemData';
+
+/**
+ * List item information component.
+ */
+@Component
+export default struct SquareTriItem {
+  private items: SquareTriItemData[] = new Array<SquareTriItemData>();
+
+  build() {
+    Column() {
+      ForEach(this.items, (item: SquareTriItemData) => {
+        Row() {
+          Text('#')
+            .fontColor(Color.Blue)
+            .fontSize('20fp')
+            .margin('4vp')
+          Text(item.title)
+            .fontSize('18fp')
+            .maxLines(1)
+          Image(item.img)
+            .width('24vp')
+            .height('24vp')
+          if ('新' === item.subTitle) {
+            Text(item.subTitle)
+              .fontColor(Color.Green)
+              .backgroundColor('#1100ff00')
+              .padding('2vp')
+              .borderRadius('2vp')
+              .fontSize('12fp')
+          } else if('热' === item.subTitle){
+            Text(item.subTitle)
+              .fontColor(Color.Red)
+              .backgroundColor('#11ff0000')
+              .padding('2vp')
+              .borderRadius('2vp')
+              .fontSize('12fp')
+          }
+        }
+        .margin('8vp')
+      })
+    }
+    .width('90%')
+    .margin({ right: '12vp' })
+    .backgroundColor(Color.White)
+    .borderRadius('16vp')
+    .alignItems(HorizontalAlign.Start)
+
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets
index 7b277ee1c3e76ea45c7ed482081a5962e94a9551..9b0fff99ea7ad7bbc3ace640917323fe9b9075a7 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets
@@ -22,10 +22,6 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct TriItem {
   private items: ItemData[] = new Array<ItemData>();
-  @Consume playingTitle: string;
-  @Consume playingArtist: string;
-  @Consume playingImg: Resource;
-  @Consume rotateAngle: number;
 
   build() {
     Column() {
@@ -53,15 +49,11 @@ export default struct TriItem {
         }
         .margin($r('app.float.home_homeCell_margin'))
         .onClick(() => {
-          this.playingTitle = item.title;
-          this.playingArtist = item.subTitle;
-          this.playingImg = item.img;
-          this.rotateAngle = 360;
           prompt.showToast({
             message: '进入歌单：' + item.title
           })
         })
-      }, (item: ItemData) => JSON.stringify(item))
+      })
     }
     .width('90%')
     .alignItems(HorizontalAlign.Start)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoMV.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoMV.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4c1cd5a6e9f59c97434ef95dc4d50918893d094a
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoMV.ets
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MineActivityItem from './MineActivityItem';
+import MineActivityItemData from '../viewmodel/MineActivityItemData';
+import mainViewModel from '../viewmodel/MainViewModel';
+import ListHead from './ListHead';
+import TriItem from './TriItem';
+import TriItemData from '../viewmodel/TriItemData';
+import SquareTriItem from './SquareTriItem';
+import SquareTriItemData from '../viewmodel/SquareTriItemData';
+
+
+/**
+ * Home tab content
+ */
+@Component
+export default struct VideoMV {
+  @State isAd: boolean = true;
+
+  build() {
+    List({ space: 10 }) {
+      ForEach(mainViewModel.getMineActivityItemData(), (item: MineActivityItemData) => {
+        ListItem() {
+          MineActivityItem({ item })
+        }
+        .align(Alignment.Start)
+      })
+    }.margin('12vp')
+    .edgeEffect(EdgeEffect.Spring)
+    .nestedScroll({
+      scrollForward: NestedScrollMode.PARENT_FIRST,
+      scrollBackward: NestedScrollMode.SELF_FIRST
+    })
+  }
+}
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoRecommend.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoRecommend.ets
new file mode 100644
index 0000000000000000000000000000000000000000..bd4f0617f1678b72d359b20878f9210eae66d817
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoRecommend.ets
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MineActivityItemData from '../viewmodel/MineActivityItemData';
+import mainViewModel from '../viewmodel/MainViewModel';
+import VideoRecommendItem from './VideoRecommendItem';
+
+
+/**
+ * Home tab content
+ */
+@Component
+export default struct VideoRecommend {
+  build() {
+    List({ space: 10 }) {
+      ForEach(mainViewModel.getMineActivityItemData(), (item: MineActivityItemData) => {
+        ListItem() {
+          VideoRecommendItem({ item })
+        }
+        .align(Alignment.Start)
+      })
+    }.margin('12vp')
+    .edgeEffect(EdgeEffect.Spring)
+    .nestedScroll({
+      scrollForward: NestedScrollMode.PARENT_FIRST,
+      scrollBackward: NestedScrollMode.SELF_FIRST
+    })
+  }
+}
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoRecommendItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoRecommendItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f60e48f4fac8cbda718da6230b925494d6813f32
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/VideoRecommendItem.ets
@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ItemData from '../viewmodel/MineActivityItemData';
+import MineListItemData from '../viewmodel/MineListItemData';
+import MineListItem from './MineListItem';
+import MineUserItem from './MineUserItem';
+
+/**
+ * List item information component.
+ */
+@Component
+export default struct VideoRecommendItem {
+  private item: ItemData = new ItemData('', [$r('app.media.fig21')],
+    new MineListItemData('', $r('app.media.fig21'), '', Visibility.None, Visibility.None),
+    0, 0, 0, [], undefined);
+
+  @State imgWidth: string = '90%';
+
+  aboutToAppear() {
+    if (this.item.imgs.length === 1) {
+      this.imgWidth = '90%';
+    } else if (this.item.imgs.length === 2 || this.item.imgs.length === 4) {
+      this.imgWidth = '45%';
+    } else {
+      this.imgWidth = '30%';
+    }
+  }
+
+  build() {
+    Column() {
+      //Video(){}
+      MineUserItem({ item: this.item.userItem })
+        .margin({ top: '16vp' })
+      Text(this.item.title)
+        .margin({ top: '16vp' })
+        .padding({ left: '64vp' })
+      Grid() {
+        ForEach(this.item.imgs, (img: Resource) => {
+          GridItem() {
+            Image(img)
+              .width(this.imgWidth)
+              .borderRadius('12vp')
+          }
+        })
+      }
+      .layoutDirection(GridDirection.Row)
+      .maxCount(3)
+      .minCount(1)
+      .columnsGap(10)
+      .rowsGap(10)
+      .scrollBar(BarState.Off)
+      .width('100%')
+      .margin({ top: '16vp' })
+      .padding({ left: '64vp' })
+
+      if (this.item.contentItem !== undefined) {
+        MineListItem({ item: this.item.contentItem })
+          .margin({ left: '64vp', top: '16vp' })
+          .backgroundColor('#e9e9e9')
+          .padding('12vp')
+          .width('80%')
+          .borderRadius('12vp')
+      }
+      Row() {
+        ForEach(this.item.topics, (topic: string) => {
+          Text(topic)
+            .fontSize('12vp')
+            .fontColor('#a0a0a0')
+            .padding('4vp')
+            .backgroundColor('#f0f0f0')
+            .borderRadius('8vp')
+            .margin({ right: '4vp' })
+        })
+      }
+      .margin({ left: '64vp', top: '16vp' })
+
+      Row() {
+        Row() {
+          Image($r('app.media.ic_public_share'))
+            .width('24vp')
+            .height('24vp')
+          if (this.item.comments !== 0) {
+            Text(this.item.share.toString()).margin({ left: '4vp' })
+          } else {
+            Text('分享').margin({ left: '4vp' })
+          }
+        }.width('25%')
+
+        Row() {
+          Image($r('app.media.ic_public_comments'))
+            .width('24vp')
+            .height('24vp')
+          if (this.item.comments !== 0) {
+            Text(this.item.comments.toString()).margin({ left: '4vp' })
+          } else {
+            Text('评论').margin({ left: '4vp' })
+          }
+        }.width('25%')
+
+        Row() {
+          Image($r('app.media.ic_public_thumbsup'))
+            .width('24vp')
+            .height('24vp')
+          if (this.item.comments !== 0) {
+            Text(this.item.comments.toString()).margin({ left: '4vp' })
+          } else {
+            Text('赞').margin({ left: '4vp' })
+          }
+        }.width('25%')
+
+        Blank()
+        Image($r('app.media.ic_public_more_list'))
+          .width('24vp')
+          .height('24vp')
+      }.width('100%')
+      .padding({ left: '64vp' })
+      .margin({ top: '16vp' })
+      .justifyContent(FlexAlign.SpaceBetween)
+    }
+
+    .alignItems(HorizontalAlign.Start)
+    .margin({ bottom: '12vp' })
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets
index 393a9962fc80576d3056c47378de43fea527e526..696c0eb7d0edfeb2885ab243654f1e64c932c95a 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets
@@ -16,7 +16,7 @@
 /**
  * List item data entity.
  */
-export default class TriItemData {
+export default class BookTriItemData {
   /**
    * Text of list item.
    */
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets
index 5c939016c0461b6d4522d928022935714e32f002..3209918ff04baac436eea038c680450de8687318 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets
@@ -22,6 +22,8 @@ import PodCastBigItemData from './PodCastBigItemData';
 import SelectFirstItemData from './SelectFirstItemData';
 import MineListItemData from './MineListItemData';
 import MineActivityItemData from './MineActivityItemData';
+import SquareTriItemData from './SquareTriItemData';
+import AudioItem from '../manager/AudioItem';
 
 
 /**
@@ -70,12 +72,30 @@ export class MainViewModel {
    */
   getSecondGridData(): Array<MidItemData> {
     let secondGridData: MidItemData[] = [
-      new MidItemData('民谣 | 简单的喜欢最长远', $r('app.media.top'), '1024万', '最近常听'),
-      new MidItemData('挪威天才 AW Faded！ 神曲完美了上亿人的愿望', $r('app.media.new'), '24万', ''),
-      new MidItemData('节奏控系列【抖腿-ing】', $r('app.media.brand'), '47万', ''),
-      new MidItemData('下班回家时超适合放松的歌单', $r('app.media.found'), '475万', '收藏过万'),
-      new MidItemData('555超适合放松的歌单', $r('app.media.found'), '475万', '收藏过万'),
-      new MidItemData('666回家时超适合放松的歌单', $r('app.media.found'), '475万', '收藏过万')
+      new MidItemData('民谣 | 简单的喜欢最长远', $r('app.media.top'), '1024万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)], '最近常听'),
+      new MidItemData('挪威天才 AW Faded！ 神曲完美了上亿人的愿望', $r('app.media.new'), '24万',
+        [new AudioItem('唯一', $r('app.media.quareblue8'), '告五人', 161),
+          new AudioItem('日落大道', $r('app.media.quarered7'), '梁博', 223),
+          new AudioItem('Gravity', $r('app.media.quaregreen5'), 'Klaas', 112)],''),
+      new MidItemData('节奏控系列【抖腿-ing】', $r('app.media.brand'), '47万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('下班回家时超适合放松的歌单', $r('app.media.found'), '475万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'收藏过万'),
+      new MidItemData('555超适合放松的歌单', $r('app.media.found'), '475万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'收藏过万'),
+      new MidItemData('666回家时超适合放松的歌单', $r('app.media.found'), '475万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'收藏过万')
     ];
     return secondGridData;
   }
@@ -109,6 +129,35 @@ export class MainViewModel {
     return thirdGridDatas;
   }
 
+  getSquareThirdGridData(): Array<SquareTriItemData[]> {
+    let thirdGridDatas = Array<SquareTriItemData[]>();
+    let thirdGridData1: SquareTriItemData[] = [
+      new SquareTriItemData('有关圣诞的仪式感🎄', '热'),
+      new SquareTriItemData('🔥村庄年度生活观察', '新'),
+      new SquareTriItemData('海外艺人新年彩蛋待领取', '热'),
+      new SquareTriItemData('考研加油！', '新'),
+      new SquareTriItemData('泰勒电影乐迷团专场🎦', '热'),
+    ];
+    let thirdGridData2: SquareTriItemData[] = [
+      new SquareTriItemData('法老官宣', '新'),
+      new SquareTriItemData('圣诞emo歌', '新'),
+      new SquareTriItemData('适合寒冷冬夜听的歌', '新'),
+      new SquareTriItemData('爱人？仇人！', '新'),
+      new SquareTriItemData('我知道我爱你', '新'),
+    ];
+    let thirdGridData3: SquareTriItemData[] = [
+      new SquareTriItemData('甘肃地震愿平安', ''),
+      new SquareTriItemData('被这句歌词击穿♥了 ', ''),
+      new SquareTriItemData('电影《三大队》', ''),
+      new SquareTriItemData('无法自拔不能代替那种爱', '新'),
+      new SquareTriItemData('人生像过山车', '新'),
+    ];
+    thirdGridDatas.push(thirdGridData1);
+    thirdGridDatas.push(thirdGridData2);
+    thirdGridDatas.push(thirdGridData3);
+    return thirdGridDatas;
+  }
+
   getBookTriData1(): Array<BookTriItemData[]> {
     let thirdGridDatas = Array<BookTriItemData[]>();
     let thirdGridData1: BookTriItemData[] = [
@@ -229,12 +278,30 @@ export class MainViewModel {
    */
   getPodCastGridData(): Array<MidItemData> {
     let aGridData: MidItemData[] = [
-      new MidItemData('民谣 | 简单的喜欢最长远', $r('app.media.top'), '1024万', '最近常听'),
-      new MidItemData('挪威天才 AW Faded！ 神曲完美了上亿人的愿望', $r('app.media.new'), '24万', ''),
-      new MidItemData('节奏控系列【抖腿-ing】', $r('app.media.brand'), '47万', ''),
-      new MidItemData('下班回家时超适合放松的歌单', $r('app.media.found'), '475万', '收藏过万'),
-      new MidItemData('节奏控系列【抖腿-ing】11', $r('app.media.brand'), '47万', ''),
-      new MidItemData('下班回家时超适合放松的歌单11', $r('app.media.found'), '475万', '收藏过万')
+      new MidItemData('民谣 | 简单的喜欢最长远', $r('app.media.top'), '1024万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'最近常听'),
+      new MidItemData('挪威天才 AW Faded！ 神曲完美了上亿人的愿望', $r('app.media.new'), '24万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('节奏控系列【抖腿-ing】', $r('app.media.brand'), '47万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('下班回家时超适合放松的歌单', $r('app.media.found'), '475万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'收藏过万'),
+      new MidItemData('节奏控系列【抖腿-ing】11', $r('app.media.brand'), '47万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('下班回家时超适合放松的歌单11', $r('app.media.found'), '475万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'收藏过万')
     ];
     return aGridData;
   }
@@ -377,46 +444,74 @@ export class MainViewModel {
 
   getMineActivityItemData(): Array<MineActivityItemData> {
     let listData: MineActivityItemData[] = [
-      new MineActivityItemData('四年好短啊~', [$r('app.media.fig21')],
-        new MineListItemData('闲潭春半', $r('app.media.brand'), '8月23日', Visibility.Visible, Visibility.Visible),
-        0, 1, 1, ['#心语推歌墙'], new MineListItemData('想着你', $r('app.media.fig31'), '郭顶', Visibility.None, Visibility.None)),
+      new MineActivityItemData('这一年在村里，原来i人有这么美好的回忆。刚好自己喜欢看书和去旅行，下一年，求身体健康~',
+        [$r('app.media.quareblue1'), $r('app.media.quarered2'), $r('app.media.quarepink3'), $r('app.media.yellow4')],
+        new MineListItemData('橘生淮南yhy', $r('app.media.brand'), '8月23日', Visibility.Visible, Visibility.Visible),
+        6, 36, 1139, ['#2023村庄年度观察'], new MineListItemData('2023村庄年度生活观察', $r('app.media.fig5'), '一起回归过去的2023年', Visibility.None, Visibility.None)),
+      new MineActivityItemData('歌曲能倒带，那我们呢', [$r('app.media.found'), $r('app.media.quarered8'), $r('app.media.brand1')],
+        new MineListItemData('Ar1a_5', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
+        0, 20, 405, ['#晒晒我的村民证件', '#集合啦村民们'], new MineListItemData('白兰鸽巡游记', $r('app.media.fig31'), '丢火车', Visibility.None, Visibility.None)),
+    ];
+    return listData;
+  }
+
+  getMineActivityItemData1(): Array<MineActivityItemData> {
+    let listData: MineActivityItemData[] = [
+      new MineActivityItemData('OpenhHarmony 回归本源设计，从浩瀚宇宙中抽象出动态语言，模拟真实世界中的物理动力学，将万有引力融入到动效设计中。\n引入轻拟物美学风格，以真实生活中的质感，为用户带来全新交互体验。\n跨设备的超级终端一拖即连，万能卡片轻轻一滑即可获取所需信息，带来全场景智慧生活新体验', [],
+        new MineListItemData('阿荣_J5', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
+        0, 360, 1220, [], new MineListItemData('太聪明 Beat', $r('app.media.fig41'), 'Zy', Visibility.None, Visibility.None)),
       new MineActivityItemData('也是有证的村民了', [$r('app.media.found')],
         new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
         0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们'])
     ];
     return listData;
   }
+
   getFollowActivityItemData(): Array<MineActivityItemData> {
     let listData: MineActivityItemData[] = [
-      new MineActivityItemData('1知道你们很着急，年末惊喜来袭~\n2023云音乐年度听歌报告正式上线啦！\n一键开启你的年度听过报告，回归你的2023！', [$r('app.media.fig1')],
+      new MineActivityItemData('九宫格：知道你们很着急，年末惊喜来袭~\n2023云音乐年度听歌报告正式上线啦！\n一键开启你的年度听过报告，回归你的2023！',
+        [$r('app.media.quarered0'), $r('app.media.quaregreen0'), $r('app.media.quarepink0'), $r('app.media.quareblue0'), $r('app.media.quaregreen0'),
+          $r('app.media.quarered0'), $r('app.media.quaregreen0'), $r('app.media.quarepink0'), $r('app.media.quareblue0')],
         new MineListItemData('云音乐VIP', $r('app.media.brand'), '昨天12：03', Visibility.Visible, Visibility.Visible),
         11, 667, 1996, ['#2023年度听歌报告']),
-      new MineActivityItemData('2，年末惊喜来袭~\n2023云音乐年度听歌报告正式上线啦！\n一键开启你的年度听过报告，回归你的2023！', [$r('app.media.fig1'),$r('app.media.fig2')],
+      new MineActivityItemData('四幅图：年末惊喜来袭~\n2023云音乐年度听歌报告正式上线啦！\n一键开启你的年度听过报告，回归你的2023！',
+        [$r('app.media.quarered1'), $r('app.media.quaregreen2'), $r('app.media.quarepink3'), $r('app.media.quareblue4')],
         new MineListItemData('云音乐VIP', $r('app.media.brand'), '昨天12：03', Visibility.Visible, Visibility.Visible),
         11, 667, 1996, ['#2023年度听歌报告']),
-      new MineActivityItemData('3知道你们很着急，年末惊喜来袭~\n2023云音乐年度听歌报告正式上线啦！\n一键开启你的年度听过报告，回归你的2023！', [$r('app.media.fig1'),$r('app.media.fig2'),$r('app.media.fig3')],
+      new MineActivityItemData('五幅图：知道你们很着急，年末惊喜来袭~\n2023云音乐年度听歌报告正式上线啦！\n一键开启你的年度听过报告，回归你的2023！',
+        [$r('app.media.quarered1'), $r('app.media.quaregreen2'), $r('app.media.quarepink3'), $r('app.media.quareblue4'), $r('app.media.quaregreen5')],
         new MineListItemData('云音乐VIP', $r('app.media.brand'), '昨天12：03', Visibility.Visible, Visibility.Visible),
         11, 667, 1996, ['#2023年度听歌报告']),
-      new MineActivityItemData('也是有证的村民了', [$r('app.media.found')],
+      new MineActivityItemData('一幅图', [$r('app.media.found')],
+        new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
+        0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们']),
+      new MineActivityItemData('两幅图', [$r('app.media.quaregreen2'), $r('app.media.quarepink3')],
         new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
         0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们'])
-    ];
+    ]
+    ;
     return listData;
   }
+
   getRecommendActivityItemData(): Array<MineActivityItemData> {
     let listData: MineActivityItemData[] = [
-      new MineActivityItemData('四年好短啊~', [$r('app.media.fig21'),$r('app.media.brand1'),$r('app.media.fig31'),$r('app.media.fig41'),$r('app.media.fig1'),$r('app.media.fig2'),$r('app.media.fig3')],
+      new MineActivityItemData('七幅图：四年好短啊~',
+        [$r('app.media.brand1'), $r('app.media.brand1'), $r('app.media.fig31'), $r('app.media.fig41'), $r('app.media.fig1'), $r('app.media.fig2'), $r('app.media.fig3')],
         new MineListItemData('闲潭春半', $r('app.media.brand'), '8月23日', Visibility.Visible, Visibility.Visible),
         0, 1, 1, ['#心语推歌墙'], new MineListItemData('想着你', $r('app.media.fig31'), '郭顶', Visibility.None, Visibility.None)),
-      new MineActivityItemData('也是有证的村民了', [$r('app.media.found')],
+      new MineActivityItemData('六幅图：也是有证的村民了',
+        [$r('app.media.quarepink3'), $r('app.media.yellow1'), $r('app.media.yellow2'), $r('app.media.yellow3'), $r('app.media.quarepink3'), $r('app.media.yellow4')],
         new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
         0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们']),
-    new MineActivityItemData('2也是有证的村民了', [$r('app.media.found')],
-      new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
-      0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们']),
-    new MineActivityItemData('3也是有证的村民了', [$r('app.media.found')],
-      new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
-      0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们'])
+      new MineActivityItemData('三幅图：也是有证的村民了',
+        [$r('app.media.yellow4'), $r('app.media.quarepink3'), $r('app.media.yellow4')],
+        new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
+        0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们']),
+      new MineActivityItemData('八幅图：也是有证的村民了',
+        [$r('app.media.yellow0'), $r('app.media.quarepink3'), $r('app.media.yellow2'), $r('app.media.yellow3'), $r('app.media.yellow4'),
+          $r('app.media.quarepink3'), $r('app.media.yellow4'), $r('app.media.yellow4')],
+        new MineListItemData('闲潭春半', $r('app.media.brand'), '2021年9月22日', Visibility.None, Visibility.None),
+        0, 0, 0, ['#晒晒我的村民证件', '#集合啦村民们'])
     ];
     return listData;
   }
@@ -455,12 +550,30 @@ export class MainViewModel {
 
   getMinePodCastGridData(): Array<MidItemData> {
     let aGridData: MidItemData[] = [
-      new MidItemData('西海之声 Radio SayHi！', $r('app.media.top'), '1024万', ''),
-      new MidItemData('蕊希电台', $r('app.media.new'), '24万', ''),
-      new MidItemData('十大童年经典中文儿歌', $r('app.media.brand'), '47万', ''),
-      new MidItemData('广播剧《我就是想贿赂你》', $r('app.media.found'), '475万', ''),
-      new MidItemData('倾城天下|热播影视剧原著', $r('app.media.brand'), '47万', ''),
-      new MidItemData('一首歌一个故事', $r('app.media.found'), '1亿', '')
+      new MidItemData('西海之声 Radio SayHi！', $r('app.media.top'), '1024万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('蕊希电台', $r('app.media.new'), '24万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('十大童年经典中文儿歌', $r('app.media.brand'), '47万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('广播剧《我就是想贿赂你》', $r('app.media.found'), '475万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('倾城天下|热播影视剧原著', $r('app.media.brand'), '47万',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],''),
+      new MidItemData('一首歌一个故事', $r('app.media.found'), '1亿',
+        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
+          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)],'')
     ];
     return aGridData;
   }
@@ -476,9 +589,10 @@ export class MainViewModel {
     ];
     return listData;
   }
+
   getFollowers(): Array<ItemData> {
     let listData: ItemData[] = [
-      new ItemData('get_a_life', $r("app.media.found"), '', ),
+      new ItemData('get_a_life', $r("app.media.found"), '',),
       new ItemData('初玖宅柒', $r("app.media.fig3"), '',),
       new ItemData('金陵靓仔', $r("app.media.fig4"), '',),
       new ItemData('吹口哨的青蛙', $r("app.media.about"), '',),
@@ -488,7 +602,6 @@ export class MainViewModel {
     ];
     return listData;
   }
-
 }
 
 export default new MainViewModel();
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MidItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MidItemData.ets
index 06b76af96484b5cdebe638b067ecb8653191027d..5f04c47da384865d298a1d0428024c949811e860 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MidItemData.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MidItemData.ets
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import AudioItem from '../manager/AudioItem';
 
 /**
  * List item data entity.
@@ -30,11 +31,13 @@ export default class MidItemData {
    */
   others?: string;
   subTitle: string
+  list: AudioItem[] = []
 
-  constructor(title: string, img: Resource, subTitle: string, others?: string) {
+  constructor(title: string, img: Resource, subTitle: string, list: AudioItem[], others?: string) {
     this.title = title;
     this.img = img;
     this.others = others;
     this.subTitle = subTitle;
+    this.list = list;
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/SquareTriItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/SquareTriItemData.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2b5efabfef9d025a22faed919c8996c773a28c12
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/SquareTriItemData.ets
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * List item data entity.
+ */
+export default class SquareTriItemData {
+  /**
+   * Text of list item.
+   */
+  title: string;
+  /**
+   * Image of list item.
+   */
+  img?: Resource;
+  subTitle: string
+
+  constructor(title: string,subTitle: string, img?: Resource) {
+    this.title = title;
+    this.img = img;
+    this.subTitle = subTitle;
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets
index 86431c5a67e6da45e30e4620067a1f487ce656f6..aa33cb0e6d9952448c17776dd543b55c21298e46 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets
@@ -16,7 +16,7 @@
 /**
  * List item data entity.
  */
-export default class BookTriItemData {
+export default class TriItemData {
   /**
    * Text of list item.
    */
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/green2023.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/green2023.png
new file mode 100644
index 0000000000000000000000000000000000000000..fae1e73cc32cb568399e69be9a12c0fa2eb2aeb7
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/green2023.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_close_bk.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_close_bk.png
new file mode 100644
index 0000000000000000000000000000000000000000..803d689b672390ee9d72507b22d0448e8d0a659b
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_close_bk.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_close_wh.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_close_wh.png
new file mode 100644
index 0000000000000000000000000000000000000000..b286bd3cedd72ed59f930dc1682143de35ff6686
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_close_wh.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_pause.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..833902ec7a4362c6a9d1c1fed2975dbd60d31203
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_pause.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue0.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue0.png
new file mode 100644
index 0000000000000000000000000000000000000000..6001bdc9f5e5d65062ab3a9390d2c268121310e7
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue0.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue1.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue1.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fd9cdb13e86b8c04e689599c781f058bc531cf9
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue1.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue2.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed23230dc19fa046065784a29f1cc34d158c0c76
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue2.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue3.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue3.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c09440f8b65ba31c9e01ab360c266fcbd57298c
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue3.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue4.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue4.png
new file mode 100644
index 0000000000000000000000000000000000000000..922d2ccf5d4f60a1c7f2915270e27d978605a897
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue4.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue5.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue5.png
new file mode 100644
index 0000000000000000000000000000000000000000..78ddf4f5fbf38ed7c86e83799b64a38f9b8da5ba
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue5.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue6.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue6.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a29a7142e0731f1d608d589a4d57ce6c0626f83
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue6.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue7.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue7.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf98c9622d2d9356bfd10ac2502bc20062900b06
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue7.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue8.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue8.png
new file mode 100644
index 0000000000000000000000000000000000000000..72cc8295eb18bdbd15bd496933728dcb23c12fa1
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quareblue8.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen0.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen0.png
new file mode 100644
index 0000000000000000000000000000000000000000..e154443afc0d1cd891b8eebffdb3855047b864cc
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen0.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen1.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cabdaa00c1cde01f3d7ad109b5b6513190fa370
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen1.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen2.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d598c7a799b1b8b5440bf60efbd4dcdcda61e531
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen2.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen3.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen3.png
new file mode 100644
index 0000000000000000000000000000000000000000..b56389e2358bd821465c0954fcc0b89bc74cd02a
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen3.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen4.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen4.png
new file mode 100644
index 0000000000000000000000000000000000000000..816468acdc97cb0e59db314cddbf46f3ba590951
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen4.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen5.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen5.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa64ca6a5ffc276f6527004d83a7067c056061dd
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen5.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen6.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen6.png
new file mode 100644
index 0000000000000000000000000000000000000000..389953a25306555466052bd7c5a9b280fa0ef30b
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen6.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen7.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen7.png
new file mode 100644
index 0000000000000000000000000000000000000000..2de0fa6223cbb836aefe74ad992a65e5438fd5a1
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen7.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen8.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen8.png
new file mode 100644
index 0000000000000000000000000000000000000000..05b9e5215a6de7eabeb3b24e9d2638445a2a1630
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quaregreen8.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink0.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink0.png
new file mode 100644
index 0000000000000000000000000000000000000000..658e264f8d0228d7d26732e37184fcb7060e9554
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink0.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink1.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ba4717c01f1b981ee6c4bc41e00a3aa132963f9
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink1.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink2.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b1a912725400edf2c3656f6c80823fd60639c2e
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink2.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink3.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink3.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1ca8621651d0607f5a368e61e43f1121ca4e773
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink3.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink4.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink4.png
new file mode 100644
index 0000000000000000000000000000000000000000..e08f06696743816d523688be59bb3e6dbb55253b
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink4.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink5.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink5.png
new file mode 100644
index 0000000000000000000000000000000000000000..54175b7268c69b70641bae0ee1d094558e1879ec
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink5.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink6.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink6.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2545acbc542d3bcc61bdb50cc238ab7f75a4657
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink6.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink7.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink7.png
new file mode 100644
index 0000000000000000000000000000000000000000..9822e59456ced353d6cda933e397696e0b972cf5
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink7.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink8.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink8.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cb9154687ae1d7936b3f0c3e9f49aca16ef85b9
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarepink8.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered0.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered0.png
new file mode 100644
index 0000000000000000000000000000000000000000..9869a02e092a603bf4edbb16aa9b3b4bd56d544e
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered0.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered1.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5453b1971ed6522ddc1f9595786cc21cf96ad79a
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered1.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered2.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered2.png
new file mode 100644
index 0000000000000000000000000000000000000000..dad6d76f67e140b0e539076261ef375cab87b39b
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered2.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered3.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered3.png
new file mode 100644
index 0000000000000000000000000000000000000000..166b42747780d0b638d560e90e142ebb7a08e5e2
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered3.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered4.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered4.png
new file mode 100644
index 0000000000000000000000000000000000000000..0361bb2db845e5a0a782c27fd82e3e5eced6e072
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered4.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered5.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered5.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cbeec9e738eb62eb442d75f36d334679c7933ac
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered5.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered6.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered6.png
new file mode 100644
index 0000000000000000000000000000000000000000..41482b0c7071209c98c2fedaec06289deb564466
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered6.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered7.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered7.png
new file mode 100644
index 0000000000000000000000000000000000000000..90ddbb3325162c28b62624b873525d94cfbecda1
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered7.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered8.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered8.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d8741935b91f2d2e4cee514ff93570c995a0081
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/quarered8.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow0.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow0.png
new file mode 100644
index 0000000000000000000000000000000000000000..90fea2386f8cada049be6bd6d70ca42e7a75c845
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow0.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow1.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0163e6bd02f80a805e22ff7a99c667a636525aed
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow1.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow2.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7b0488dd1869e5f6b631c73f4767d5a91cff495
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow2.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow3.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow3.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0ef8a25447ae7d0ec7308200f5d2df7e17a2037
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow3.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow4.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow4.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9712ec0aba845d917e29eeca44b4f2dd102f115
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow4.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow5.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow5.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e9f250caa86b83d8ffd563237636492f469e762
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow5.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow6.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow6.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa362235efaa1f7a16ff28395f5797bfbfbd851f
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow6.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow7.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow7.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d0629aa48f85edeca1dd4026248cf0dff0ca54d
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow7.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow8.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow8.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b3c035bcf796460e99f736137d8f496c7072c7e
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/yellow8.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/rawfile/video1.mp4 b/scenario/arkui/MyMusic/entry/src/main/resources/rawfile/video1.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..e89bdff923a22a778a39edce405bb1092a14449d
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/rawfile/video1.mp4 differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/rawfile/video2.mp4 b/scenario/arkui/MyMusic/entry/src/main/resources/rawfile/video2.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..587eef0060b3beec8102ac1030c92beeb34ccb24
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/rawfile/video2.mp4 differ