fix |> 修复竖屏直播结束页面直播时长显示样式问题

@@ -6,7 +6,7 @@ import { SpConstants } from 'wdConstant/Index'
 import { ContentDetailRequest, postInteractAccentionOperateParams } from 'wdDetailPlayApi/Index'
 import { NumberFormatterUtils, DateTimeUtils, SPHelper } from 'wdKit/Index'
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
-import { router } from '@kit.ArkUI'
+import { LengthMetrics, router } from '@kit.ArkUI'
 
 const TAG = 'PlayerEndView'
 
@@ -18,8 +18,9 @@ export struct PlayerEndView {
   @Consume liveRoomDataBean: LiveRoomDataBean
   @State duration: string = ''
   @State followStatus: String = '0';
-  private onBack: () => void = () => {
-  }
+  private onBack: () => void = () => {}
+  controller: TextController = new TextController()
+  muStyleString: MutableStyledString = new MutableStyledString("")
 
   aboutToAppear(): void {
     this.calculateLiveDuration()
@@ -122,14 +123,17 @@ export struct PlayerEndView {
               .padding({ top: 8 })
           }
           Blank().height(this.contentDetailData.rmhInfo == null ? 26:16)
-          Stack() {
+          Row() {
             Row() {
               Column() {
-                Text(this.duration).fontWeight(600).fontSize(20).fontColor(Color.White)
+                Text(undefined, {controller: this.controller}).fontWeight(600).fontSize(20).fontColor(Color.White)
                 Text('直播时长').fontWeight(400).fontSize(12).fontColor(Color.White)
               }
-
-              Blank().width(1).height(32).margin({ left: 36, right: 36 })
+            }
+            .width(306/2.0)
+            .justifyContent(FlexAlign.Center)
+            Text('').width(1).height(32).backgroundColor('#33FFFFFF')
+            Row() {
               Column() {
                 Text(NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean?.pv || ''))
                   .fontWeight(600)
@@ -138,8 +142,9 @@ export struct PlayerEndView {
                 Text('观看人数').fontWeight(400).fontSize(12).fontColor(Color.White)
               }
             }
-            Text('').width(1).height(32).backgroundColor('#33FFFFFF')
-          }
+            .width(306/2.0)
+            .justifyContent(FlexAlign.Center)
+          }.width(307)
           if (this.contentDetailData.rmhInfo != null) {
             Row() {
               Text(this.followStatus == '0' ? '关注' : '已关注')
@@ -209,6 +214,14 @@ export struct PlayerEndView {
             }
             router.back();
           })
+          .onAreaChange(()=>{
+            /*
+            此处是为了更新直播时长这个属性字符串，在aboutToAppear里面写，无效，可能因为组件当时还没渲染出来，
+            返回按钮是PlayerEndView这个自定义组件的最后一个元素，它已经渲染了，前面的组件也就肯定渲染了
+            */
+            this.dealStyleString()
+          })
+
 
       }.width('100%')
 
@@ -223,4 +236,28 @@ export struct PlayerEndView {
 
 
   }
+  dealStyleString() {
+    let dayString = "天"
+    let hourString = "时"
+    const  minuteString = "分"
+
+    const styledKey =  StyledStringKey.FONT
+    const textStyle =  new TextStyle({fontSize: LengthMetrics.vp(12), fontWeight: 500})
+    this.muStyleString = new MutableStyledString(this.duration)
+
+    this.customSetStringStyle(dayString, styledKey, textStyle)
+    this.customSetStringStyle(hourString, styledKey, textStyle)
+    this.customSetStringStyle(minuteString, styledKey, textStyle)
+    this.controller.setStyledString(this.muStyleString)
+  }
+  customSetStringStyle(startString: string, styledKey:StyledStringKey, textStyle: TextStyle) {
+    if (this.duration.includes(startString)) {
+      this.muStyleString.setStyle({
+        start: this.duration.indexOf(startString),
+        length: 1,
+        styledKey: styledKey,
+        styledValue: textStyle
+      })
+    }
+  }
 }
\ No newline at end of file