fix: 图片下载功能展示问题，不符合UI规范

@@ -29,8 +29,9 @@ export struct ImageDownloadComponent {
       //   .width(24)
       //   .width(24)
       //   .height(24)
       //   .height(24)
       //   .margin({bottom:6})
       //   .margin({bottom:6})
-      SaveButton({ icon: SaveIconStyle.LINES })
+      SaveButton({ icon: SaveIconStyle.FULL_FILLED, buttonType: ButtonType.Capsule })
         .iconSize(24)
         .iconSize(24)
+        .backgroundColor(Color.Transparent)
         .iconColor(Color.White)
         .iconColor(Color.White)
         .onClick(async () => {
         .onClick(async () => {
           console.info(`cj2024 onClick ${this.imageBuffer}`)
           console.info(`cj2024 onClick ${this.imageBuffer}`)

@@ -11,7 +11,6 @@ const TAG = 'MultiPictureListPage';
 @Entry
 @Entry
 @Component
 @Component
 export struct MultiPictureListPage {
 export struct MultiPictureListPage {
-  private scroller: Scroller = new Scroller()
   @State swiperIndex: number = 0;
   @State swiperIndex: number = 0;
   photoList: PhotoListBean[] = [];
   photoList: PhotoListBean[] = [];
   private swiperController: SwiperController = new SwiperController()
   private swiperController: SwiperController = new SwiperController()
@@ -96,9 +95,6 @@ export struct MultiPictureListPage {
           this.currentUrl = this.photoList[targetIndex]?.picPath
           this.currentUrl = this.photoList[targetIndex]?.picPath
         })
         })
 
 
-        Row() {
-          Scroll(this.scroller) {
-            Row() {
         Flex({
         Flex({
           direction: FlexDirection.Row,
           direction: FlexDirection.Row,
           justifyContent: FlexAlign.SpaceBetween
           justifyContent: FlexAlign.SpaceBetween
@@ -115,39 +111,22 @@ export struct MultiPictureListPage {
               .fontWeight(500)
               .fontWeight(500)
               .lineHeight(19)
               .lineHeight(19)
           }
           }
+          .alignSelf(ItemAlign.Center)
           .fontColor(Color.White)
           .fontColor(Color.White)
-                .margin(4)
-              }
+          ImageDownloadComponent({ url: this.currentUrl })
         }
         }
-            .width('100%')
         .margin({
         .margin({
-              top: 8,
-              left: 18,
-              bottom: 24,
-              right: 18
+          top: 14,
+          left: 20,
+          bottom: 14,
+          right: 0
         })
         })
-          }
-          .scrollable(ScrollDirection.Vertical)
-          .scrollBarWidth(0)
-        }
         .id('e_swiper_titles')
         .id('e_swiper_titles')
         .alignRules({
         .alignRules({
           bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
           bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
         })
       }
       }
-      ImageDownloadComponent({ url: this.currentUrl })
-        .alignRules({
-          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
-          right: { anchor: "__container__", align: HorizontalAlign.End }
-        })
-        .margin({
-          top: 8,
-          left: 18,
-          bottom: 24,
-          right: 18
-        })
-        .id("downloadImg")
     }
     }
     .width('100%')
     .width('100%')
     .height('100%')
     .height('100%')

@@ -457,8 +457,6 @@ export struct MultiPictureDetailPageComponent {
 
 
   @Builder
   @Builder
   YShowDownload() {
   YShowDownload() {
-    Column() {
-      Row() {
     Flex({
     Flex({
       direction: FlexDirection.Row,
       direction: FlexDirection.Row,
       justifyContent: FlexAlign.SpaceBetween
       justifyContent: FlexAlign.SpaceBetween
@@ -476,18 +474,12 @@ export struct MultiPictureDetailPageComponent {
             .fontWeight(500)
             .fontWeight(500)
             .lineHeight(19)
             .lineHeight(19)
         }
         }
+        .alignSelf(ItemAlign.Center)
         .fontColor(Color.White)
         .fontColor(Color.White)
-            .margin(4)
       }
       }
 
 
       if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
       if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
         ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
         ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
-              .margin({
-                top: 8,
-                left: 18,
-                bottom: 24,
-                right: 18
-              })
           .parallelGesture(
           .parallelGesture(
             TapGesture()
             TapGesture()
               .onAction((event: GestureEvent) => {
               .onAction((event: GestureEvent) => {
@@ -495,9 +487,12 @@ export struct MultiPictureDetailPageComponent {
               }))
               }))
       }
       }
     }
     }
-      }
-      .width('100%')
-    }
+    .margin({
+      top: 14,
+      left: 20,
+      bottom: 14,
+      right: 0
+    })
     .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
     .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
       TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
       TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
     ))
     ))