feat: 滑动卡片样式

@@ -54,8 +54,7 @@ export struct ZhSingleRow02 {
 
   resetEdgeAnimation() {
     if (this.moreWidth > this.initMoreWidth) {
-      this.moreWidth = this.moreWidth - 1
-      this.resetEdgeAnimation();
+      this.moreWidth = 16
     }
     this.resetMoreTips()
   }
@@ -92,6 +91,13 @@ export struct ZhSingleRow02 {
             })
           }
           if (this.compDTO.operDataList.length >= 2) {
+            Row() {
+              Ellipse()
+                .width(2* (this.moreWidth - this.initMoreWidth - 1))
+                .height('100%')
+                .fill(0xe9e9e9)
+                .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 , top: 0 })
+
               Column() {
                 if (this.moreWidth > this.initMoreWidth + 2) {
                   Text(this.moreTips)
@@ -103,10 +109,12 @@ export struct ZhSingleRow02 {
               .justifyContent(FlexAlign.Center)
               .align(Alignment.Center)
               .height('100%')
-            .width(this.moreWidth)
+              .width(this.initMoreWidth)
               .backgroundColor(0xe9e9e9)
               .borderRadius({ topLeft: 5, bottomLeft: 5 })
             }
+            .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
+          }
         }
       }
       .width(CommonConstants.FULL_WIDTH)

@@ -78,8 +78,7 @@ export struct ZhSingleRow03 {
 
   resetEdgeAnimation() {
     if (this.moreWidth > this.initMoreWidth) {
-      this.moreWidth = this.moreWidth - 1
-      this.resetEdgeAnimation();
+      this.moreWidth = 16
     }
     this.resetMoreTips()
   }
@@ -167,6 +166,13 @@ export struct ZhSingleRow03 {
             })
           }
           if (this.compDTO.operDataList.length >= 2) {
+            Row() {
+              Ellipse()
+                .width(2* (this.moreWidth - this.initMoreWidth - 1))
+                .height(116)
+                .fill(0xf9f9f9)
+                .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 , top: 0 })
+
               Column() {
                 if (this.moreWidth > this.initMoreWidth + 2) {
                   Text(this.moreTips)
@@ -177,10 +183,12 @@ export struct ZhSingleRow03 {
               }
               .justifyContent(FlexAlign.Center)
               .align(Alignment.Center)
-            .width(this.moreWidth)
+              .height(116)
+              .width(this.initMoreWidth)
               .backgroundColor(0xf9f9f9)
               .borderRadius({ topLeft: 5, bottomLeft: 5 })
-            .height(116)
+            }
+            .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
           }
         }
       }

@@ -43,8 +43,7 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
 
   resetEdgeAnimation() {
     if (this.moreWidth > this.initMoreWidth) {
-      this.moreWidth = this.moreWidth - 1
-      this.resetEdgeAnimation();
+      this.moreWidth = 16
     }
     this.resetMoreTips()
   }
@@ -141,7 +140,15 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
               })
             })
           }
-          if (this.compDTO.operDataList.length > 2) {
+
+          if (this.compDTO.operDataList.length >= 2) {
+            Row() {
+              Ellipse()
+                .width(2* (this.moreWidth - this.initMoreWidth - 1))
+                .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+                .fill(0xf1f3f4)
+                .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 })
+
               Column() {
                 if (this.moreWidth > this.initMoreWidth + 2) {
                   Text(this.moreTips)
@@ -152,10 +159,12 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
               }
               .justifyContent(FlexAlign.Center)
               .align(Alignment.Center)
-            .width(this.moreWidth)
+              .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+              .width(this.initMoreWidth)
               .backgroundColor(0xf1f3f4)
               .borderRadius({ topLeft: 5, bottomLeft: 5 })
-            .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+            }
+            .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
           }
         }
       }

@@ -53,8 +53,7 @@ export struct LiveHorizontalCardComponent {
 
   resetEdgeAnimation() {
     if (this.moreWidth > this.initMoreWidth) {
-      this.moreWidth = this.moreWidth - 1
-      this.resetEdgeAnimation();
+      this.moreWidth = 16
     }
     this.resetMoreTips()
   }
@@ -166,6 +165,13 @@ export struct LiveHorizontalCardComponent {
               })
             }
             if (this.compDTO.operDataList.length >= 2) {
+              Row() {
+                Ellipse()
+                  .width(2* (this.moreWidth - this.initMoreWidth - 1))
+                  .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+                  .fill(0xf1f3f4)
+                  .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 })
+
                 Column() {
                   if (this.moreWidth > this.initMoreWidth + 2) {
                     Text(this.moreTips)
@@ -176,10 +182,12 @@ export struct LiveHorizontalCardComponent {
                 }
                 .justifyContent(FlexAlign.Center)
                 .align(Alignment.Center)
-              .width(this.moreWidth)
+                .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+                .width(this.initMoreWidth)
                 .backgroundColor(0xf1f3f4)
                 .borderRadius({ topLeft: 5, bottomLeft: 5 })
-              .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+              }
+              .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
             }
           }
         }