早晚报布局

 import router from '@ohos.router'
 import router from '@ohos.router'
 import { FrontLinkObject, MorningEveningPaperDTO } from 'wdBean'
 import { FrontLinkObject, MorningEveningPaperDTO } from 'wdBean'
-import { Logger } from 'wdKit';
-import PageViewModel from '../viewmodel/PageViewModel';
-import { PageComponent } from './page/PageComponent';
+
+// import { Logger } from 'wdKit';
+// import PageViewModel from '../viewmodel/PageViewModel';
+// import { PageComponent } from './page/PageComponent';
 
 
 const TAG = 'MorningEveningPaperComponent';
 const TAG = 'MorningEveningPaperComponent';
 
 
@@ -34,14 +35,14 @@ export struct MorningEveningPaperComponent {
 
 
   async aboutToAppear() {
   async aboutToAppear() {
     console.info(TAG, `aboutToAppear`);
     console.info(TAG, `aboutToAppear`);
-    let paperDTO = await PageViewModel.getMorningEveningPaperData(this.paperPageId)
-    if (paperDTO) {
-      this.morningEveningPaperDTO = paperDTO;
-      if (paperDTO.groups && paperDTO.groups.length > 0) {
-        this.groupId = paperDTO.groups[0].id + ''
-      }
-      Logger.info(TAG, `aboutToAppear, paperDTO is not empty`);
-    }
+    // let paperDTO = await PageViewModel.getMorningEveningPaperData(this.paperPageId)
+    // if (paperDTO) {
+    //   this.morningEveningPaperDTO = paperDTO;
+    //   if (paperDTO.groups && paperDTO.groups.length > 0) {
+    //     this.groupId = paperDTO.groups[0].id + ''
+    //   }
+    //   Logger.info(TAG, `aboutToAppear, paperDTO is not empty`);
+    // }
   }
   }
 
 
   build() {
   build() {
@@ -110,51 +111,65 @@ export struct MorningEveningPaperComponent {
 
 
         ListItem() {
         ListItem() {
           Row() {
           Row() {
-            Row() {
+            Stack({ alignContent: Alignment.Start }) {
+              Image($r('app.media.listen_left_bg'))
+                .width('100%')
+                .height('100%')
+                .objectFit(ImageFit.Contain)
               Image($r('app.media.icon_listen'))
               Image($r('app.media.icon_listen'))
                 .width(24)
                 .width(24)
                 .height(24)
                 .height(24)
                 .margin({ left: 10 })
                 .margin({ left: 10 })
+                .alignSelf(ItemAlign.Start)
+
               Text('晚上好， 请收听今日新闻播报')
               Text('晚上好， 请收听今日新闻播报')
                 .fontSize(14)
                 .fontSize(14)
-                .margin({ left: 10 })
+                .margin({ left: 50 })
                 .fontColor(Color.Black)
                 .fontColor(Color.Black)
                 .maxLines(1)
                 .maxLines(1)
                 .textOverflow({ overflow: TextOverflow.Ellipsis })
                 .textOverflow({ overflow: TextOverflow.Ellipsis })
             }
             }
-            .width('72%')
-            .height(56)
-            .backgroundImage($r('app.media.listen_left_bg'))
+            .layoutWeight(1)
+            .height('100%')
+
+            Stack({ alignContent: Alignment.Center }) {
+              Image($r('app.media.listen_right_bg'))
+                .width('100%')
+                .height('100%')
+                .objectFit(ImageFit.Contain)
 
 
-            Row() {
               Image($r('app.media.ic_red_triangle'))
               Image($r('app.media.ic_red_triangle'))
-                .width(30)
-                .height(30)
-                .margin({ left: 15 })
+                .width(24)
+                .height(24)
+                .margin({ left: 10 })// .alignSelf(ItemAlign.Center)
                 .objectFit(ImageFit.Contain)
                 .objectFit(ImageFit.Contain)
             }
             }
-            .justifyContent(FlexAlign.Center)
-            // .width(94)
-            .width('28%')
             // .aspectRatio(7 / 4)
             // .aspectRatio(7 / 4)
-            .height(56)
-            .backgroundImage($r('app.media.listen_right_bg'))
+            .height('100%')
+            // .justifyContent(FlexAlign.Center)
+            // .width(94)
+            // .width(140)
+            .width('20%')
+            // .height(56)
+            .onClick(() => {
+              console.info(TAG, `onClick listen_right_bg`);
+            })
           }
           }
-          .width('100%')
+          // .width('100%')
           .height(56)
           .height(56)
+          .alignItems(VerticalAlign.Center)
           .justifyContent(FlexAlign.SpaceBetween)
           .justifyContent(FlexAlign.SpaceBetween)
-
           // .backgroundColor(Color.Red)
           // .backgroundColor(Color.Red)
         }
         }
 
 
         ListItem() {
         ListItem() {
-          PageComponent({
-            currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
-            navIndex: 0,
-            pageId: '31320', //this.groupId,
-            channelId: ''
-          })
-        }
+          // PageComponent({
+          //   currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
+          //   navIndex: 0,
+          //   pageId: '31320', //this.groupId,
+          //   channelId: ''
+          // })
+        }.height(500)
       }
       }
       // .backgroundColor('#FFF1F3F5')
       // .backgroundColor('#FFF1F3F5')
       // .backgroundColor(Color.Blue)
       // .backgroundColor(Color.Blue)
@@ -212,7 +227,7 @@ export struct MorningEveningPaperComponent {
 
 
       Text(item?.summary ?? "")
       Text(item?.summary ?? "")
         .margin({ top: 10 })
         .margin({ top: 10 })
-        .fontSize(13)
+        .fontSize(14)
         .fontColor($r('app.color.white'))
         .fontColor($r('app.color.white'))
         .maxLines(3)
         .maxLines(3)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
         .textOverflow({ overflow: TextOverflow.Ellipsis })
@@ -223,7 +238,7 @@ export struct MorningEveningPaperComponent {
         .id('txt_summary')
         .id('txt_summary')
 
 
       Text(item?.title ?? "")
       Text(item?.title ?? "")
-        .fontSize(23)
+        .fontSize(24)
         .fontColor($r('app.color.white'))
         .fontColor($r('app.color.white'))
         .maxLines(2)
         .maxLines(2)
         .alignRules({
         .alignRules({