From d206d99993f63dc60d2c8690236d57f34ed737de Mon Sep 17 00:00:00 2001
From: lloyd <754415+llince@user.noreply.gitee.com>
Date: Mon, 9 Dec 2024 09:44:27 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=B8=80=E6=AC=A1=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=EF=BC=8C=E5=A4=9A=E7=AB=AF=E9=83=A8=E7=BD=B2-=E9=9F=B3?=
 =?UTF-8?q?=E4=B9=90=E4=B8=93=E8=BE=91=E3=80=91=E5=B8=83=E5=B1=80=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 products/phone/src/main/ets/pages/Index.ets | 139 ++++++++++----------
 1 file changed, 72 insertions(+), 67 deletions(-)

diff --git a/products/phone/src/main/ets/pages/Index.ets b/products/phone/src/main/ets/pages/Index.ets
index 111aca5..7e6bbfb 100644
--- a/products/phone/src/main/ets/pages/Index.ets
+++ b/products/phone/src/main/ets/pages/Index.ets
@@ -49,81 +49,86 @@ struct Index {
 
   build() {
     Navigation(this.pageIndexInfos) {
-      GridRow({
-        breakpoints: {
-          value: BreakpointConstants.BREAKPOINT_VALUE,
-          reference: BreakpointsReference.WindowSize
-        },
-        columns: {
-          sm: BreakpointConstants.COLUMN_SM,
-          md: BreakpointConstants.COLUMN_MD,
-          lg: BreakpointConstants.COLUMN_LG
-        },
-        gutter: { x: BreakpointConstants.GUTTER_X },
-        direction: GridRowDirection.Row
-      }) {
-        GridCol({
-          span: {
-            sm: BreakpointConstants.SPAN_SM,
-            md: BreakpointConstants.SPAN_MD,
-            lg: BreakpointConstants.SPAN_LG
+      Scroll() {
+        GridRow({
+          breakpoints: {
+            value: BreakpointConstants.BREAKPOINT_VALUE,
+            reference: BreakpointsReference.WindowSize
           },
-          offset: {
-            md: BreakpointConstants.OFFSET_MD,
-            lg: BreakpointConstants.OFFSET_LG
-          }
+          columns: {
+            sm: BreakpointConstants.COLUMN_SM,
+            md: BreakpointConstants.COLUMN_MD,
+            lg: BreakpointConstants.COLUMN_LG
+          },
+          gutter: { x: BreakpointConstants.GUTTER_X },
+          direction: GridRowDirection.Row
         }) {
-          Column({ space: HomeConstants.COLUMN_SPACE }) {
-            ForEach(this.indexItemList, (item: IndexItem) => {
-              Column() {
-                Text(item.title)
-                  .fontSize($r('app.float.title_font_size'))
-                  .fontColor(Color.White)
-                Text(item.description)
-                  .fontSize($r('app.float.description_font_size'))
-                  .opacity(HomeConstants.TEXT_OPACITY)
-                  .fontColor(Color.White)
-                  .margin({
-                    top: $r('app.float.description_margin_top')
-                  })
-                Blank()
-                Column() {
-                  Button() {
-                    Text(item.button)
-                      .fontSize($r('app.float.button_font_size'))
+          GridCol({
+            span: {
+              sm: BreakpointConstants.SPAN_SM,
+              md: BreakpointConstants.SPAN_MD,
+              lg: BreakpointConstants.SPAN_LG
+            },
+            offset: {
+              md: BreakpointConstants.OFFSET_MD,
+              lg: BreakpointConstants.OFFSET_LG
+            }
+          }) {
+            Column({ space: HomeConstants.COLUMN_SPACE }) {
+              ForEach(this.indexItemList, (item: IndexItem) => {
+                Stack() {
+                  Image(item.icon)
+                    .width('100%')
+                    .aspectRatio(2.18)
+                    .borderRadius($r('app.float.item_border_radius'))
+                  Column() {
+                    Text(item.title)
+                      .fontSize($r('app.float.title_font_size'))
+                      .fontColor(Color.White)
+                    Text(item.description)
+                      .fontSize($r('app.float.description_font_size'))
+                      .opacity(HomeConstants.TEXT_OPACITY)
                       .fontColor(Color.White)
+                      .margin({
+                        top: $r('app.float.description_margin_top')
+                      })
+                    Blank()
+                    Column() {
+                      Button() {
+                        Text(item.button)
+                          .fontSize($r('app.float.button_font_size'))
+                          .fontColor(Color.White)
+                      }
+                      .backgroundColor($r('app.color.button_background_color'))
+                      .borderRadius($r('app.float.button_border_radius'))
+                      .width($r('app.float.button_width'))
+                      .height($r('app.float.button_height'))
+                      .onClick(() => {
+                        this.pageIndexInfos.pushPathByName(item.url, null);
+                      })
+                    }
+                    .alignItems(HorizontalAlign.End)
+                    .width(StyleConstants.FULL_WIDTH)
                   }
-                  .backgroundColor($r('app.color.button_background_color'))
-                  .borderRadius($r('app.float.button_border_radius'))
-                  .width($r('app.float.button_width'))
-                  .height($r('app.float.button_height'))
-                  .onClick(() => {
-                    this.pageIndexInfos.pushPathByName(item.url, null);
-                  })
+                  .width(StyleConstants.FULL_WIDTH)
+                  .aspectRatio(2.18)
+                  .padding($r('app.float.item_padding'))
+                  .alignItems(HorizontalAlign.Start)
+                  .justifyContent(FlexAlign.SpaceBetween)
                 }
-                .alignItems(HorizontalAlign.End)
-                .width(StyleConstants.FULL_WIDTH)
-              }
-              .width(StyleConstants.FULL_WIDTH)
-              .height($r('app.float.item_height'))
-              .backgroundImage(item.icon)
-              .backgroundImageSize({
-                width: StyleConstants.FULL_WIDTH,
-                height: $r('app.float.item_height')
-              })
-              .borderRadius($r('app.float.item_border_radius'))
-              .padding($r('app.float.item_padding'))
-              .alignItems(HorizontalAlign.Start)
-              .justifyContent(FlexAlign.SpaceBetween)
-            }, (item: IndexItem, index?: number) => index + JSON.stringify(item))
+                .borderRadius($r('app.float.item_border_radius'))
+              }, (item: IndexItem, index?: number) => index + JSON.stringify(item))
+            }
           }
         }
+        .padding({
+          top: $r('app.float.column_padding_top'),
+          left: $r('app.float.column_padding_left'),
+          right: $r('app.float.column_padding_right'),
+          bottom: $r('app.float.column_padding_top')
+        })
       }
-      .padding({
-        top: $r('app.float.column_padding_top'),
-        left: $r('app.float.column_padding_left'),
-        right: $r('app.float.column_padding_right')
-      })
+      .scrollBar(BarState.Off)
     }
     .mode(NavigationMode.Stack)
     .navDestination(this.PagesMap)
-- 
Gitee