feat: 骨架屏

@@ -4,7 +4,7 @@
 
 @Entry
 @Component
-export struct detailedSkeleton {
+export struct channelSkeleton {
   @State quantity: Array<number> = [1, 2, 3,]
 
   build() {
@@ -22,7 +22,7 @@ export struct detailedSkeleton {
 
 
             Column() {
-              textArea('35%', 80)
+              textArea('35%', 78)
             }
             .margin({ right: 0 })
           }
@@ -33,7 +33,7 @@ export struct detailedSkeleton {
 
 
         Column() {
-          textArea('100%', 150)
+          textArea('100%', 204)
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .SkeletonStyle()
@@ -48,7 +48,7 @@ export struct detailedSkeleton {
             .RightStyle()
 
             Column() {
-              textArea('35%', 80)
+              textArea('35%', 78)
             }
             .margin({ right: 0 })
           }
@@ -70,13 +70,13 @@ function textArea(width: number | Resource | string = '100%', height: number | R
     .height(height)
     .backgroundColor('#FFF2F3F4')
     .margin({ top: 10 })
-    .borderRadius(5)
+  // .borderRadius(5)
 }
 
 // 全局公共样式
 @Styles
 function SkeletonStyle() {
-  .padding({ right: 20, left: 20 })
+  .padding({ right: 18, left: 18 })
   .width('100%')
   .margin({ top: 10 })
 }

@@ -34,7 +34,7 @@ export struct detailedSkeleton {
         .alignItems(HorizontalAlign.Start)
 
         Column() {
-          textArea('100%', 150)
+          textArea('100%', 180)
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .SkeletonStyle()
@@ -61,13 +61,13 @@ function textArea(width: number | Resource | string = '100%', height: number | R
     .height(height)
     .backgroundColor('#FFF2F3F4')
     .margin({ top: 10 })
-    .borderRadius(5)
+  // .borderRadius(5)
 }
 
 // 全局公共样式
 @Styles
 function SkeletonStyle() {
-  .padding({ right: 20, left: 20 })
+  .padding({ right: 18, left: 18 })
   .width('100%')
   .margin({ top: 10 })
 }
\ No newline at end of file

@@ -14,18 +14,18 @@ export struct detailedSkeleton {
           Column() {
             Row() {
               Column() {
-                Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(50)// 后缀名不能省略
+                Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(47)// 后缀名不能省略
                   .interpolation(ImageInterpolation.High)
-                textArea('100%', 12)
+                textArea('100%', 9)
               }.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
 
               Column() {
-                textArea(24, 20)
-                textArea(24, 3)
-                textArea(24, 20)
+                textArea(27, 25)
+                textArea(27, 4)
+                textArea(27, 20)
               }
               .border({ width: 1 })
-              .borderColor('#FFF2F3F4')
+              .borderColor('#FFF5F5F5')
               .padding({ right: 2, left: 2, top: 0, bottom: 2 })
               .justifyContent(FlexAlign.SpaceEvenly)
               .alignItems(HorizontalAlign.Start)
@@ -33,13 +33,15 @@ export struct detailedSkeleton {
             .justifyContent(FlexAlign.SpaceBetween)
             .width('98%')
 
+            // .height(64)
+
             BoxAndLine().width('100%')
-            BoxAndBox({ firstBoxNumber: '65%', boxHeight: 70 })
+            BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
             Column() {
-              textArea('100%', 100)
+              textArea('100%', 79)
             }
 
-            BoxAndBox({ firstBoxNumber: '30%', boxHeight: 50 })
+            BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
 
           }.width('45%')
           .opacity(1)
@@ -48,17 +50,17 @@ export struct detailedSkeleton {
 
           Column() {
             Column() {
-              textArea('100%', 12)
+              textArea('100%', 13)
             }.width('100%')
 
             BoxAndLine()
 
             Column() {
-              textArea('95%', 100)
+              textArea('95%', 126)
             }
 
             Column() {
-              textArea('95%', 12)
+              textArea('95%', 13)
             }
 
             Row() {
@@ -72,7 +74,7 @@ export struct detailedSkeleton {
             }.width('95%').justifyContent(FlexAlign.SpaceBetween)
 
             Column() {
-              textArea('95%', 120)
+              textArea('95%', 100)
             }
           }.width('45%')
         }.justifyContent(FlexAlign.SpaceBetween)
@@ -89,8 +91,8 @@ struct BoxAndLine {
   build() {
     Column() {
       textArea('100%', 130)
-      textArea('100%', 12)
-      textArea('80%', 12)
+      textArea('100%', 13)
+      textArea('80%', 13)
     }.width('98%').alignItems(HorizontalAlign.Start)
   }
 }
@@ -119,7 +121,7 @@ function textArea(width: number | Resource | string = '100%', height: number | R
   Row()
     .width(width)
     .height(height)
-    .backgroundColor('#FFF6F6F6')
+    .backgroundColor('#FFF5F5F5')
     .margin({ top: 5 })
   // .borderRadius(5)
 }
@@ -127,7 +129,7 @@ function textArea(width: number | Resource | string = '100%', height: number | R
 // 全局公共样式
 @Styles
 function SkeletonStyle() {
-  .padding({ right: 20, left: 20 })
+  .padding({ right: 14, left: 14 })
   .width('100%')
   .margin({ top: 5 })
 }