fix: 修改UI结构

features/feature/src/main/ets/view/MainView.ets

@@ -11,174 +11,197 @@ export struct MainView {
 
   build() {
     ytBuildComp(){
-      Column() {
-        Stack({alignContent: Alignment.Top}){
-          List(){
-            // logo
-            ListItem(){
-              Text('京东快递合作伙伴')
-                .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
-                .padding({top: this.vm.safeTop})
-            }
-            .padding({bottom: 13})
+      RelativeContainer(){
+        List(){
+          // logo
+          ListItem(){
+            Text('京东快递合作伙伴')
+              .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
+              .padding({top: this.vm.safeTop})
+          }
+          .padding({bottom: 13})
 
-            // 搜索框
-            ListItem(){
-              this.customSearch()
-            }
+          // 搜索框
+          ListItem(){
+            this.customSearch()
+          }
 
 
-            ListItem(){
-              Column(){
-                // 轮播
-                Swiper(){
-                  Row()
-                    .height(150)
-                    .width('100%')
-                    .backgroundColor(Color.Orange)
-                }
-                .height(150)
-                .width("100%")
-                .enabled(false)
-                .indicator(false)
-                .borderRadius(30)
+          ListItem(){
+            Column(){
+              // 轮播
+              Swiper(){
+                Row()
+                  .height(150)
+                  .width('100%')
+                  .backgroundColor(Color.Orange)
+              }
+              .height(150)
+              .width("100%")
+              .enabled(false)
+              .indicator(false)
+              .borderRadius(30)
 
 
-                // 功能
-                Row(){
-                  ForEach(this.vm.function1, (item: BasicType, index) => {
-                    Column({space: 5}){
-                      Image(item.src)
-                        .width(60)
-                        .aspectRatio(1)
+              // 功能
+              Row(){
+                ForEach(this.vm.function1, (item: BasicType, index) => {
+                  Column({space: 5}){
+                    Image(item.src)
+                      .width(60)
+                      .aspectRatio(1)
 
-                      Text(item.text)
-                        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
-                    }
-                    .onClick(item.click)
-                  })
-                }
-                .width("100%")
-                .margin({top: 22})
-                .justifyContent(FlexAlign.SpaceAround)
+                    Text(item.text)
+                      .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+                  }
+                  .onClick(item.click)
+                })
+              }
+              .width("100%")
+              .margin({top: 22})
+              .justifyContent(FlexAlign.SpaceAround)
 
 
-                // 榜单
-                Row({space: 7}){
-                  ForEach(['畅销版单TOP', '月度推荐'], (item: string, index) => {
-                    Column({space: 5}){
-                      Text(item)
-                        .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#663815'}))
+              // 榜单
+              Row({space: 7}){
+                ForEach(['畅销版单TOP', '月度推荐'], (item: string, index) => {
+                  Column({space: 5}){
+                    Text(item)
+                      .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#663815'}))
 
-                      Text('查看更多>>')
-                        .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: index == 0 ?'#B27500' : '#E45C0B'}))
-                    }
-                    .layoutWeight(1)
-                    .aspectRatio(1)
-                    .justifyContent(FlexAlign.Start)
-                    .alignItems(HorizontalAlign.Start)
-                    .padding({left: 15, top: 17, right: 15, bottom: 17})
-                    .backgroundImage( index == 0 ?
-                    $r('[basic].media.png_TopRecommend') :
-                    $r('[basic].media.png_MonthRecommend') )
-                    .backgroundImageSize({ width: '100%', height: '100%'})
-                    .onClick(() => {
-                      // todo 完成榜单的跳转
-                    })
+                    Text('查看更多>>')
+                      .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: index == 0 ?'#B27500' : '#E45C0B'}))
+                  }
+                  .layoutWeight(1)
+                  .aspectRatio(1)
+                  .justifyContent(FlexAlign.Start)
+                  .alignItems(HorizontalAlign.Start)
+                  .padding({left: 15, top: 17, right: 15, bottom: 17})
+                  .backgroundImage( index == 0 ?
+                  $r('[basic].media.png_TopRecommend') :
+                  $r('[basic].media.png_MonthRecommend') )
+                  .backgroundImageSize({ width: '100%', height: '100%'})
+                  .onClick(() => {
+                    // todo 完成榜单的跳转
                   })
-                }
-                .width("100%")
-                .margin({top: 18})
+                })
+              }
+              .width("100%")
+              .margin({top: 18})
 
 
-                // 新书上架
-                Column({space: 18}){
-                  Row({space: 8}){
-                    Text('新书上架')
-                      .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))
+              // 新书上架
+              Column({space: 18}){
+                Row({space: 8}){
+                  Text('新书上架')
+                    .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))
 
-                    Text('查看更多>>')
-                      .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: '#807A66'}))
-                  }
-                  .width("100%")
-                  .justifyContent(FlexAlign.Start)
-                  .alignItems(VerticalAlign.Bottom)
-
-                  Grid(){
-                    ForEach(new Array(4).fill(''), (item: string, index) => {
-                      GridItem(){
-                        Column(){
-                          Image('https://th.bing.com/th/id/R.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0')
-                            .width('100%')
-                            .aspectRatio(148/100)
-
-                          Column({space: 5}){
-                            Text('红楼梦幼儿美绘本 第四卷红楼梦幼儿美绘本 第四卷')
-                              .maxLines(2)
-                              .textOverflow({overflow: TextOverflow.Ellipsis})
-                              .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
-
-                            Row({space: 8}){
-                              tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
-                              tagItemComp('3-8岁', '#FC9911', '#FFF5E7')
-                            }
-                            .width("100%")
-                            .justifyContent(FlexAlign.Start)
+                  Text('查看更多>>')
+                    .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: '#807A66'}))
+                }
+                .width("100%")
+                .justifyContent(FlexAlign.Start)
+                .alignItems(VerticalAlign.Bottom)
+
+                Grid(){
+                  ForEach(new Array(4).fill(''), (item: string, index) => {
+                    GridItem(){
+                      Column(){
+                        Image('https://th.bing.com/th/id/R.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0')
+                          .width('100%')
+                          .aspectRatio(148/100)
+
+                        Column({space: 5}){
+                          Text('红楼梦幼儿美绘本 第四卷红楼梦幼儿美绘本 第四卷')
+                            .maxLines(2)
+                            .textOverflow({overflow: TextOverflow.Ellipsis})
+                            .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
+
+                          Row({space: 8}){
+                            tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
+                            tagItemComp('3-8岁', '#FC9911', '#FFF5E7')
                           }
                           .width("100%")
-                          .padding({left: 8, right: 8, top: 8, bottom: 8})
+                          .justifyContent(FlexAlign.Start)
                         }
-                        .width('100%')
-                        .borderRadius(8)
-                        .aspectRatio(152/180)
-                        .backgroundColor(Color.White)
-                        .border({width: 2, color: '#000000'})
+                        .width("100%")
+                        .padding({left: 8, right: 8, top: 8, bottom: 8})
                       }
-                    })
-                  }
-                  .rowsGap(16)
-                  .maxCount(2)
-                  .width("100%")
-                  .columnsGap(10)
-                  .layoutWeight(1)
-                  .columnsTemplate('repeat(2, 1fr)')
+                      .width('100%')
+                      .borderRadius(8)
+                      .aspectRatio(152/180)
+                      .backgroundColor(Color.White)
+                      .border({width: 2, color: '#000000'})
+                    }
+                  })
                 }
-                .height(500)
-                .height(470)
+                .rowsGap(16)
+                .maxCount(2)
                 .width("100%")
-                .margin({top: 25})
-                .padding({left: 18, right: 18, top: 20})
-                .backgroundImage($r('[basic].media.png_newBook'))
-                .backgroundImageSize({width: '100%', height: '100%'})
+                .columnsGap(10)
+                .layoutWeight(1)
+                .columnsTemplate('repeat(2, 1fr)')
               }
+              .height(500)
+              .height(470)
               .width("100%")
+              .margin({top: 25})
+              .padding({left: 18, right: 18, top: 20})
+              .backgroundImage($r('[basic].media.png_newBook'))
+              .backgroundImageSize({width: '100%', height: '100%'})
             }
-            .margin({top: 13})
+            .width("100%")
+          }
+          .margin({top: 13})
 
 
 
-            ListItem(){}
-            .padding({ bottom: 16 })
+          ListItem(){}
+          .padding({ bottom: 16 })
+        }
+        .width('100%')
+        .height('100%')
+        .scrollBar(BarState.Off)
+        .padding({ left: 16, right: 16 })
+        .onScrollIndex((index: number) => {
+          this.vm.scrollIndex = index
+          console.log(`index = ${JSON.stringify(index)}`)
+        })
+        .linearGradient({ colors: [['#F9EDAE', 0], ['#FFFFFF', 0.4]] })
+
+
+
+        // 客服小鹿
+        Column(){
+          Row().width(57).aspectRatio(1).backgroundColor(Color.White).borderRadius(50)
+            .shadow({color: '#000000', radius: 10})
+          Text('客服小鹿')
+            .borderRadius(16)
+            .margin({top: -10})
+            .backgroundColor('#FECF2F')
+            .padding({top: 10, left: 6, right: 6, bottom: 10})
+            .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
+            // .shadow({color: '#000000', radius: 10})
+        }
+        .margin({bottom: 150, right: 16})
+        .alignRules({
+          right: { anchor: '__container__', align: HorizontalAlign.End},
+          bottom: { anchor: '__container__', align: VerticalAlign.Bottom}
+        })
+
+        if(this.vm.scrollIndex > 0){
+          Row(){
+            this.deerTitleComp()
           }
-          .width('100%')
-          .height('100%')
-          .scrollBar(BarState.Off)
-          .padding({ left: 16, right: 16 })
-          .onScrollIndex((index: number) => {
-            this.vm.scrollIndex = index
-            console.log(`index = ${JSON.stringify(index)}`)
+          .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100 }))
+          .alignRules({
+            left: { anchor: '__container__', align: HorizontalAlign.Start},
+            top: { anchor: '__container__', align: VerticalAlign.Top}
           })
-
-          if(this.vm.scrollIndex > 0){
-            Row(){
-              this.deerTitleComp()
-            }
-            .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100 }))
-          }
         }
       }
       .width('100%')
-      .linearGradient({ colors: [['#F9EDAE', 0], ['#FFFFFF', 0.4]] })
+      .height('100%')
     }
   }
 
@@ -194,6 +217,7 @@ export struct MainView {
     .width('100%')
     .backgroundColor(Color.White)
     .alignItems(HorizontalAlign.Center)
+    .borderRadius({bottomLeft: 16, bottomRight: 16})
     .shadow({ offsetY: 13, radius: 16, color: '#0A000000' })
     .padding({top: this.vm.safeTop, bottom: 10, left: 16, right: 16})
   }