diff --git a/features/home/src/main/ets/view/BannerView.ets b/features/home/src/main/ets/view/BannerView.ets
index 34e502dbd81606c7e367f02071860903a3b6da0c..e80f75464072c3f01eb5d7d633ee4458491b25ae 100644
--- a/features/home/src/main/ets/view/BannerView.ets
+++ b/features/home/src/main/ets/view/BannerView.ets
@@ -53,7 +53,8 @@ export struct BannerView {
     this.bannerDataSource = new BannerDataSource(this.bannerImgList);
   }
 
-  @Styles focusedStyles(): void {
+  @Styles
+  focusedStyles(): void {
     .border({
       width: $r('app.float.focus_radius_width'),
       color: $r('app.color.focus_radius_color'),
@@ -61,7 +62,8 @@ export struct BannerView {
     })
   }
 
-  @Styles normalStyles(): void {
+  @Styles
+  normalStyles(): void {
     .border({
       width: 0,
       radius: $r('app.float.banner_focus_radius')
@@ -75,8 +77,9 @@ export struct BannerView {
         Swiper() {
           LazyForEach(this.bannerDataSource, (item: Banner, index: number) => {
             Stack() {
-              Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() :
-                item.getBannerImg().getImgSrc())
+              Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              item.getBannerImg().getImgSrcSm() :
+              item.getBannerImg().getImgSrc())
                 .objectFit(ImageFit.Fill)
                 .borderRadius($r('app.float.banner_img_border_radius'))
                 .height(CommonConstants.FULL_PERCENT)
@@ -90,8 +93,8 @@ export struct BannerView {
 
               Column() {
                 Text(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-                  item.getDescription().getDescription()[0] + item.getDescription().getDescription()[1] :
-                  item.getDescription().getDescription()[0])
+                  `${item.getDescription().getDescription()[0]}${item.getDescription().getDescription()[1]}` :
+                item.getDescription().getDescription()[0])
                   .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
                   .fontWeight(item.getDescription().getFontWeight()[0])
                   .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
@@ -107,7 +110,7 @@ export struct BannerView {
                   .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
                   .maxLines(1)
                   .visibility(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-                    Visibility.None : Visibility.Visible)
+                  Visibility.None : Visibility.Visible)
 
                 Text(item.getDescription().getDescription()[2])
                   .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1])
@@ -127,9 +130,9 @@ export struct BannerView {
                 item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
               })
               .alignItems(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-                HorizontalAlign.Center : HorizontalAlign.Start)
+              HorizontalAlign.Center : HorizontalAlign.Start)
               .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-                FlexAlign.Start : FlexAlign.Center)
+              FlexAlign.Start : FlexAlign.Center)
               .height(CommonConstants.FULL_PERCENT)
               .width(CommonConstants.FULL_PERCENT)
             }
@@ -156,8 +159,9 @@ export struct BannerView {
         )
         .loop(true)
         .width(CommonConstants.FULL_PERCENT)
-        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 1) ?
-          Visibility.None : Visibility.Visible)
+        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+          (this.currentTopIndex === 1) ?
+        Visibility.None : Visibility.Visible)
         .effectMode(EdgeEffect.None)
         // The sizes of the front and rear banners on the MD and LG devices are different.
         .prevMargin(new BreakpointType($r('app.float.swiper_prev_next_margin_sm'),
@@ -202,8 +206,9 @@ export struct BannerView {
         }
         .height(this.getBannerNewHeight(this.windowWidth))
         .width(CommonConstants.FULL_PERCENT)
-        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 1) ?
-          Visibility.Visible : Visibility.None)
+        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+          (this.currentTopIndex === 1) ?
+        Visibility.Visible : Visibility.None)
         .padding({
           left: $r('app.float.banner_padding_sm'),
           right: $r('app.float.banner_padding_sm')
@@ -215,8 +220,10 @@ export struct BannerView {
         bottom: $r('app.float.banner_margin')
       })
       .padding({
-        left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : '0',
-        right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : '0'
+        left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') :
+          '0',
+        right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') :
+          '0'
       })
       .visibility(this.currentTopIndex === 2 ? Visibility.None : Visibility.Visible)
 
@@ -224,9 +231,8 @@ export struct BannerView {
         // Immersive layout.
         Column() {
           Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-            this.bannerImgList[2].getDescription().getDescription()[0] +
-            this.bannerImgList[2].getDescription().getDescription()[1] :
-            this.bannerImgList[2].getDescription().getDescription()[0])
+            `${this.bannerImgList[2].getDescription().getDescription()[0]}${this.bannerImgList[2].getDescription()
+              .getDescription()[1]}` : this.bannerImgList[2].getDescription().getDescription()[0])
             .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'),
               $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg'))
               .getValue(this.currentWidthBreakpoint))
@@ -250,7 +256,7 @@ export struct BannerView {
             .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
             .maxLines(1)
             .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-              Visibility.None : Visibility.Visible)
+            Visibility.None : Visibility.Visible)
 
           Text(this.bannerImgList[2].getDescription().getDescription()[2])
             .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'),
@@ -278,9 +284,9 @@ export struct BannerView {
         .height(CommonConstants.FULL_PERCENT)
         .width(CommonConstants.FULL_PERCENT)
         .alignItems(new BreakpointType(true, false, false).getValue(this.currentWidthBreakpoint) ?
-          HorizontalAlign.Center : HorizontalAlign.Start)
+        HorizontalAlign.Center : HorizontalAlign.Start)
         .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-          FlexAlign.Start : FlexAlign.Center)
+        FlexAlign.Start : FlexAlign.Center)
       }
       .margin({
         top: $r('app.float.immersive_col_margin')
@@ -295,18 +301,20 @@ export struct BannerView {
       .visibility(this.currentTopIndex === 2 ? Visibility.Visible : Visibility.None)
     }
     .width(CommonConstants.FULL_PERCENT)
-    .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
-      $r('app.float.side_bar_width') : 0 })
+    .padding({
+      left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+      $r('app.float.side_bar_width') : 0
+    })
   }
 
   getBannerNewHeight(windowWidth: number): string {
     // Obtain the window width and subtract the blank parts on both sides.
     let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
       HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) -
-      HomeConstants.LG_SIDEBAR_WIDTH;
+    HomeConstants.LG_SIDEBAR_WIDTH;
     // Calculate the width of a single image based on the percent.
     result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) * CommonConstants.FOUR /
-      HomeConstants.ELEVEN;
+    HomeConstants.ELEVEN;
     // Calculate the total height of the grid layout.
     return result / HomeConstants.NEW_BANNER_ASPECT_RATIO + HomeConstants.HEIGHT_UNIT;
   }
@@ -321,7 +329,7 @@ struct BannerText {
   build() {
     Stack() {
       Image(((this.index === 0) || (this.index === 1)) ? this.banner.getBannerImg().getImgSrcSm() :
-        this.banner.getBannerImg().getImgSrc())
+      this.banner.getBannerImg().getImgSrc())
         .width(CommonConstants.FULL_PERCENT)
         .height(CommonConstants.FULL_PERCENT)
         .objectFit(ImageFit.Fill)
@@ -329,8 +337,8 @@ struct BannerText {
 
       Column() {
         Text(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-          this.banner.getDescription().getDescription()[0] + this.banner.getDescription().getDescription()[1] :
-          this.banner.getDescription().getDescription()[0])
+          `${this.banner.getDescription().getDescription()[0]}${this.banner.getDescription().getDescription()[1]}` :
+        this.banner.getDescription().getDescription()[0])
           .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
           .fontWeight(this.banner.getDescription().getFontWeight()[0])
           .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
@@ -346,7 +354,7 @@ struct BannerText {
           .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
           .maxLines(1)
           .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-            Visibility.None : Visibility.Visible)
+          Visibility.None : Visibility.Visible)
 
         Text(this.banner.getDescription().getDescription()[2])
           .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1])
@@ -361,14 +369,14 @@ struct BannerText {
       }
       .padding({
         left: !this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-          this.banner.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0',
+        this.banner.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0',
         top: !this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-          this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
+        this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
       })
       .alignItems(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-        HorizontalAlign.Center : HorizontalAlign.Start)
+      HorizontalAlign.Center : HorizontalAlign.Start)
       .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-        FlexAlign.Start : FlexAlign.Center)
+      FlexAlign.Start : FlexAlign.Center)
       .width(CommonConstants.FULL_PERCENT)
       .height(CommonConstants.FULL_PERCENT)
     }