diff --git a/commons/base/src/main/ets/utils/PipWindowUtil.ets b/commons/base/src/main/ets/utils/PipWindowUtil.ets
index 624d83202b514dd268e3c154629b512c95964964..a2208d9425d65a5d7fa1d0024f4b9a7a8c6cd470 100644
--- a/commons/base/src/main/ets/utils/PipWindowUtil.ets
+++ b/commons/base/src/main/ets/utils/PipWindowUtil.ets
@@ -48,8 +48,7 @@ export class PipWindowUtil {
     return this.mXComponentController;
   }
   // [Start start_pip]
-  async startPip(navId: string, mXComponentController: XComponentController, context: Context, pageInfos: NavPathStack):
-    Promise<void> {
+  async startPip(navId: string, mXComponentController: XComponentController, context: Context, pageInfos: NavPathStack): Promise<void> {
     if (canIUse('SystemCapability.Window.SessionManager')) {
       if (!PiPWindow.isPiPEnabled()) {
         Logger.error(`picture in picture disabled for current OS`);
diff --git a/features/detail/src/main/ets/view/LiveMaskLayer.ets b/features/detail/src/main/ets/view/LiveMaskLayer.ets
index 538809dc47bfc78cc84da10a02891508dd20381d..e91f4536d0008f6c288b3857ec359a59e03b8a75 100644
--- a/features/detail/src/main/ets/view/LiveMaskLayer.ets
+++ b/features/detail/src/main/ets/view/LiveMaskLayer.ets
@@ -22,7 +22,7 @@ import { LiveViewModel, LiveProduct } from '../viewmodel/LiveViewModel';
 @Component
 export struct LiveMaskLayer {
   @StorageLink('topRectHeight') topRectHeight: number = 0;
-  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Prop currentBreakpoint: string = 'lg';
   @State currentProductIndex: number = 0;
   @State liveProductList: LiveProduct[] = new LiveViewModel().getProductList().reverse();
   @Link detailType: string;
@@ -31,10 +31,8 @@ export struct LiveMaskLayer {
   build() {
     // [Start change_flex_direction]
     Flex({
-      direction: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? FlexDirection.Row :
-        FlexDirection.Column,
-      justifyContent: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? FlexAlign.SpaceBetween :
-        FlexAlign.End
+      direction: this.currentBreakpoint === 'lg' ? FlexDirection.Row : FlexDirection.Column,
+      justifyContent: this.currentBreakpoint === 'lg' ? FlexAlign.SpaceBetween : FlexAlign.End
     }) {
       Comment({ currentBreakpoint: this.currentBreakpoint })
       LiveShopList({
@@ -47,7 +45,7 @@ export struct LiveMaskLayer {
     .layoutWeight(1)
     .padding({
       left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
-      right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+      right: this.currentBreakpoint === 'lg' ?
         $r('app.float.live_mask_padding_right_lg') : 0,
       top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight
     })
diff --git a/features/detail/src/main/ets/view/LiveShopList.ets b/features/detail/src/main/ets/view/LiveShopList.ets
index 234c74044ab553d144cdd0219365344c1513807d..2c9b986407ba72591163710f3b2059c7f03d3b12 100644
--- a/features/detail/src/main/ets/view/LiveShopList.ets
+++ b/features/detail/src/main/ets/view/LiveShopList.ets
@@ -113,8 +113,7 @@ export struct LiveShopList {
     .width(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT :
       $r('app.float.shop_width_index0_lg'))
     // [Start set_list_direction]
-    .listDirection(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Axis.Vertical :
-      Axis.Horizontal)
+    .listDirection(this.currentBreakpoint === 'lg' ? Axis.Vertical : Axis.Horizontal)
     // [End set_list_direction]
   }
 }
\ No newline at end of file
diff --git a/features/detail/src/main/ets/view/ProductDetail.ets b/features/detail/src/main/ets/view/ProductDetail.ets
index 24a15c30da8eb21c08f8c75b2f6650afdf6bccb7..6556bd96635fadd644480bc48595b6a37169bd5a 100644
--- a/features/detail/src/main/ets/view/ProductDetail.ets
+++ b/features/detail/src/main/ets/view/ProductDetail.ets
@@ -89,11 +89,10 @@ export struct ProductPicture {
             // [StartExclude product_detail]
             .height(ResourceUtil.getCommonImgSize()[1])
             .width(ResourceUtil.getCommonImgSize()[1])
-            .margin({ right: this.pageBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
-              $r('app.float.picture_icon_margin_sm') : $r('app.float.picture_icon_margin') })
-              // [EndExclude product_detail]
+            .margin({ right: this.pageBreakpoint === 'sm' ? '16vp' : '24vp' })
+            // [EndExclude product_detail]
             .onClick(() => {
-              if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0]) {
+              if (deviceInfo.deviceType === '2in1') {
                 return;
               }
               if (!this.isSplitMode) {
@@ -107,7 +106,7 @@ export struct ProductPicture {
                 (this.context as common.UIAbilityContext).terminateSelf();
               }
             })
-              // [End product_detail]
+            // [End product_detail]
             .visibility(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_MD || this.isSplitMode ?
               Visibility.Visible : Visibility.None)
           Image($r('app.media.ic_more'))
diff --git a/features/detail/src/main/ets/view/ProductHome.ets b/features/detail/src/main/ets/view/ProductHome.ets
index 5ed16cfd5e6d5edd3c33fec8e29647ed0f703285..8a1911e1899c84da8a58e4c25fcd575f3721dc28 100644
--- a/features/detail/src/main/ets/view/ProductHome.ets
+++ b/features/detail/src/main/ets/view/ProductHome.ets
@@ -52,11 +52,11 @@ export struct ProductHome {
       SideBarContainer() {
         Column() {
           Image($r('app.media.icon_close_4'))
-            // [StartExclude product_side_bar_container_1]
+            // [StartExclude product_side_bar_container]
             .width(ResourceUtil.getCommonImgSize()[1])
             .height(ResourceUtil.getCommonImgSize()[1])
             .onClick(() => {
-              if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+              if (this.currentBreakpoint === 'lg') {
                 this.isShowingSidebar = false;
               }
             })
@@ -64,20 +64,20 @@ export struct ProductHome {
               top: $r('app.float.detail_lg_top_row_margin'),
               bottom: $r('app.float.detail_lg_top_row_margin')
             })
-          // [EndExclude product_side_bar_container_1]
+          // [EndExclude product_side_bar_container]
           AllComments()
         }
         .alignItems(HorizontalAlign.End)
-        .height(CommonConstants.FULL_PERCENT)
+        .height('100%')
         .padding({
-          top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight,
-          left: $r('app.float.three_column_page_padding'),
-          right: $r('app.float.three_column_page_padding')
+          top: deviceInfo.deviceType === '2in1' ? 0 : this.topRectHeight,
+          left: '32vp',
+          right: '32vp'
         })
 
         Row() {
-          // [StartExclude product_side_bar_container_2]
-          if (this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG) {
+          // [StartExclude product_side_bar_container]
+          if (this.currentBreakpoint !== 'lg') {
             Column() {
               Scroll() {
                 Column() {
@@ -152,24 +152,24 @@ export struct ProductHome {
             .layoutWeight(1)
             .justifyContent(FlexAlign.Start)
           }
-          // [EndExclude product_side_bar_container_2]
+          // [EndExclude product_side_bar_container]
         }
-        // [StartExclude product_side_bar_container_3]
+        // [StartExclude product_side_bar_container]
         .alignItems(VerticalAlign.Top)
         .height(CommonConstants.FULL_PERCENT)
         .width(CommonConstants.FULL_PERCENT)
         .layoutWeight(2)
-        // [EndExclude product_side_bar_container_3]
+        // [EndExclude product_side_bar_container]
       }
       .showSideBar(this.isShowingSidebar)
       .showControlButton(false)
       .sideBarPosition(SideBarPosition.End)
       .divider({
-        strokeWidth: $r('app.float.sidebar_divider_width'),
+        strokeWidth: '1vp',
         color: ResourceUtil.getCommonDividerColor()
       })
-      .minSideBarWidth(this.getUIContext().px2vp(this.windowWidth) / CommonConstants.THREE)
-      .maxSideBarWidth(this.getUIContext().px2vp(this.windowWidth) / CommonConstants.THREE)
+      .minSideBarWidth(this.getUIContext().px2vp(this.windowWidth) / 3)
+      .maxSideBarWidth(this.getUIContext().px2vp(this.windowWidth) / 3)
       .autoHide(false)
       // [End product_side_bar_container]
     }
diff --git a/features/detail/src/main/ets/view/ProductMoreDetail.ets b/features/detail/src/main/ets/view/ProductMoreDetail.ets
index 944fb991e9c067e4e8352787cb5d0c324112adb6..192c0af39ad8c64b9ba1a9fdecea12eef0a6629b 100644
--- a/features/detail/src/main/ets/view/ProductMoreDetail.ets
+++ b/features/detail/src/main/ets/view/ProductMoreDetail.ets
@@ -51,7 +51,7 @@ export struct ProductMoreDetail {
       // [Start product_more_detail_view]
       Row() {
         Column() {
-          // [StartExclude product_more_detail_view_1]
+          // [StartExclude product_more_detail_view]
           Scroll() {
             Column() {
               ProductPicture({
@@ -71,16 +71,15 @@ export struct ProductMoreDetail {
 
           ProductUtilView({ isMoreDetail: $isMoreDetail, isShoppingBag: $isShoppingBag, isCustomerService:
             $isCustomerService })
-          // [EndExclude product_more_detail_view_1]
+          // [EndExclude product_more_detail_view]
         }
-        .height(CommonConstants.FULL_PERCENT)
+        .height('100%')
         // Setting the width ratio of offering details to side panel.
-        .layoutWeight(new BreakpointType(0, CommonConstants.THREE, CommonConstants.FIVE)
-          .getValue(this.currentBreakpoint))
-        .borderWidth({ right: $r('app.float.more_detail_col_border_width') })
+        .layoutWeight(new BreakpointType(0, 3, 5).getValue(this.currentBreakpoint))
+        .borderWidth({ right: '1vp' })
         .borderColor(ResourceUtil.getCommonBorderColor()[0])
         // Hide the product details page under the SM breakpoint.
-        .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None : Visibility.Visible)
+        .visibility(this.currentBreakpoint === 'sm' ? Visibility.None : Visibility.Visible)
 
         Column() {
           // Check the auxiliary information page of the side panel.
@@ -96,7 +95,7 @@ export struct ProductMoreDetail {
         .height(CommonConstants.FULL_PERCENT)
         // [EndExclude product_more_detail_view_2]
         // Setting the width ratio of offering details to side panel.
-        .layoutWeight(CommonConstants.THREE)
+        .layoutWeight(3)
       }
       // [End product_more_detail_view]
       .height(CommonConstants.FULL_PERCENT)
diff --git a/features/detail/src/main/ets/view/ProductUtilView.ets b/features/detail/src/main/ets/view/ProductUtilView.ets
index 885f2f421f362a1e5394944cee1d5a19a231b974..5f328547dbcac9e1c96b1bea7cf433a96ac4810e 100644
--- a/features/detail/src/main/ets/view/ProductUtilView.ets
+++ b/features/detail/src/main/ets/view/ProductUtilView.ets
@@ -48,18 +48,18 @@ export struct ProductUtilView {
   PayCardBuilder() {
     Column() {
       PayCard({
-        // [StartExclude pay_card_builder_1]
+        // [StartExclude pay_card_builder]
         isOpen: $isDialogOpen,
         detailType: $detailType,
         currentBreakpoint: this.currentBreakpoint
-        // [EndExclude pay_card_builder_1]
+        // [EndExclude pay_card_builder]
       })
     }
-    // [StartExclude pay_card_builder_2]
+    // [StartExclude pay_card_builder]
     .padding({ top: $r('app.float.util_pay_padding') })
     .width(CommonConstants.FULL_PERCENT)
     .height(CommonConstants.FULL_PERCENT)
-    // [EndExclude pay_card_builder_2]
+    // [EndExclude pay_card_builder]
   }
   // [End pay_card_builder]
   build() {
@@ -120,30 +120,30 @@ export struct ProductUtilView {
           // [Start dialog_btn]
           Button(DetailConstants.BUTTON_NAMES(this.context)[1])
             // [StartExclude dialog_btn]
-            .fontSize($r('app.float.util_button_font'))
+            .fontSize('16fp')
             .fontColor(Color.White)
-            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            .fontWeight(500)
             .layoutWeight(1)
-            .height($r('app.float.util_button_height'))
+            .height('40vp')
             .borderRadius(ResourceUtil.getCommonBorderRadius()[7])
-            .backgroundColor($r('app.color.util_button_2'))
+            .backgroundColor('#CF0A2C')
             .displayPriority(4)
               // [EndExclude dialog_btn]
             .bindSheet($$this.isDialogOpen,
               this.PayCardBuilder(), {
-                height: $r('app.float.pay_bind_sheet_height'),
+                height: '620vp',
                 preferType: SheetType.CENTER,
                 dragBar: false,
                 enableOutsideInteractive: true,
                 onDisappear: () => { this.isDialogOpen = false },
                 showClose: false,
-                backgroundColor: $r('app.color.pay_bind_sheet_background')
+                backgroundColor: '#F1F3F5'
               })
             .onClick(() => {
               if (this.isLivePage || this.isSplitMode) {
                 return;
               }
-              if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+              if (this.currentBreakpoint === 'sm') {
                 this.isDialogOpen = true;
               } else {
                 if (this.dialogController === null) {
@@ -186,32 +186,32 @@ export struct ProductUtilView {
 // [Start pay_card_dialog]
 @CustomDialog
 struct PayCardDialog {
-  // [StartExclude pay_card_dialog_1]
+  // [StartExclude pay_card_dialog]
   @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
   @State isDialogOpen: boolean = false;
   @State detailType: string = CommonConstants.BIND_SHEET_PAGE_TYPES[3];
   private dialogController?: CustomDialogController;
-  // [EndExclude pay_card_dialog_1]
+  // [EndExclude pay_card_dialog]
 
   build() {
     Column() {
       PayCard({
-        // [StartExclude pay_card_dialog_2]
+        // [StartExclude pay_card_dialog]
         isOpen: $isDialogOpen,
         detailType: $detailType,
         currentBreakpoint: this.currentBreakpoint,
         dialogController: this.dialogController
-        // [EndExclude pay_card_dialog_2]
+        // [EndExclude pay_card_dialog]
       })
     }
-    // [StartExclude pay_card_dialog_3]
+    // [StartExclude pay_card_dialog]
     .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
     .padding({ top: $r('app.float.pay_dialog_padding') })
     .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.pay_dialog_width_lg') :
       $r('app.float.pay_dialog_width'))
     .height(DetailConstants.EIGHTY_PERCENT)
     .borderRadius(ResourceUtil.getCommonBorderRadius()[8])
-    // [EndExclude pay_card_dialog_3]
+    // [EndExclude pay_card_dialog]
   }
 }
 // [End pay_card_dialog]
diff --git a/features/home/src/main/ets/view/ClassifyContent.ets b/features/home/src/main/ets/view/ClassifyContent.ets
index 9f924c3747b76268b6995ce1814c8b73b8685a0e..2d6b09bc634ebd9be16530062ccec66e23a914aa 100644
--- a/features/home/src/main/ets/view/ClassifyContent.ets
+++ b/features/home/src/main/ets/view/ClassifyContent.ets
@@ -91,9 +91,7 @@ export struct ClassifyContent {
       // Setting the double column view of the navigation.
       .mode(NavigationMode.Split)
       // Initialize the width of the navigation bar.
-      .navBarWidth(new BreakpointType($r('app.float.classify_navigation_bar_width_sm'),
-        $r('app.float.classify_navigation_bar_width_md'), $r('app.float.classify_navigation_bar_width_lg'))
-        .getValue(this.currentBreakpoint))
+      .navBarWidth(new BreakpointType('96vp', '144vp', '200vp').getValue(this.currentBreakpoint))
       // Set the minimum width and maximum width of the navigation bar under different breakpoints to be the same.
       .navBarWidthRange([new BreakpointType($r('app.float.classify_navigation_bar_width_sm'),
         $r('app.float.classify_navigation_bar_width_md'), $r('app.float.classify_navigation_bar_width_lg'))