多图（图集）详情页 底部titles代码优化

@@ -5,9 +5,6 @@ const TAG = 'MultiPictureDetailPageComponent';
 
 @Component
 export struct MultiPictureDetailItemComponent {
-  private photoListLength: number = 1;
-  private index: number = 1;
-  private newsTitle: string = '';
   private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
 
 
@@ -28,45 +25,6 @@ export struct MultiPictureDetailItemComponent {
       .height('100%')
       .width('100%')
 
-
-      Row() {
-        Flex({
-          direction: FlexDirection.Column,
-          justifyContent: FlexAlign.Start
-        }) {
-          Text() {
-            Span(`${this.index + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
-            Span(`/${this.photoListLength}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
-          }.fontColor(Color.White).margin(4)
-
-          Text(`${this.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
-            .fontWeight(600).lineHeight(24)
-            .margin ({
-              top: 4,
-              left: 0,
-              bottom: 4,
-              right: 0
-            })
-          Text(`${this.MultiPictureDetailItem.picDesc}`).fontColor(Color.White)
-            .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .margin ({
-            top: 4,
-            left: 0,
-            bottom: 4,
-            right: 18
-          })
-        }
-      }
-      .width('100%')
-      .height(178)
-      .margin ({
-        top: 8,
-        left: 18,
-        bottom: 8,
-        right: 18
-      })
-
     }
     .backgroundColor(Color.Black)
     .width('100%')

@@ -68,8 +68,8 @@ export struct MultiPictureDetailPageComponent {
     RelativeContainer() {
       if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
         Swiper(this.swiperController) {
-          ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
-            MultiPictureDetailItemComponent({ photoListLength: this.contentDetailData.photoList?.length , index: index, newsTitle: this.contentDetailData.newsTitle, MultiPictureDetailItem: item })
+          ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
+            MultiPictureDetailItemComponent({  MultiPictureDetailItem: item })
           })
         }
         .index(this.swiperIndex)
@@ -167,6 +167,50 @@ export struct MultiPictureDetailPageComponent {
           .id('e_attention')
         }
 
+        Row() {
+          Flex({
+            direction: FlexDirection.Column,
+            justifyContent: FlexAlign.Start
+          }) {
+            Text() {
+              Span(`${this.swiperIndex + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
+              Span(`/${this.contentDetailData.photoList.length}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
+            }.fontColor(Color.White).margin(4)
+
+            Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
+              .fontWeight(600).lineHeight(24)
+              .margin ({
+                top: 4,
+                left: 0,
+                bottom: 4,
+                right: 0
+              })
+            Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`).fontColor(Color.White)
+              .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+              .margin ({
+                top: 4,
+                left: 0,
+                bottom: 4,
+                right: 18
+              })
+              .maxLines(3)
+          }
+        }
+        .width('100%')
+        .height(178)
+        .margin ({
+          top: 8,
+          left: 18,
+          bottom: 8,
+          right: 18
+        })
+        .id('e_swiper_titles')
+        .alignRules({
+          bottom: { anchor: "e_swiper_content", align: VerticalAlign.Bottom },
+          middle: { anchor: "e_swiper_content", align: HorizontalAlign.Center }
+        })
+
         OperRowListView({
           contentDetailData: this.contentDetailData,
         })