fix:bug_001-人民号的类型布局设计鸿蒙与安卓不一致

-import  { DisplayUtils, Logger } from 'wdKit'
+import { DisplayUtils, Logger } from 'wdKit'
 import { PeopleShipHomePageDataModel } from '../../viewmodel/PeopleShipHomePageDataModel'
 import { PeopleShipHomePageDataModel } from '../../viewmodel/PeopleShipHomePageDataModel'
 import { PeopleShipHomeArticleListComponent } from './PeopleShipHomeArticleListComponent'
 import { PeopleShipHomeArticleListComponent } from './PeopleShipHomeArticleListComponent'
 import { ArticleCountData, ArticleTypeData } from 'wdBean'
 import { ArticleCountData, ArticleTypeData } from 'wdBean'
@@ -8,9 +8,7 @@ import { RefreshLayoutBean } from '../page/RefreshLayoutBean'
 
 
 @Component
 @Component
 export struct PeopleShipHomeListComponent {
 export struct PeopleShipHomeListComponent {
-
   private controller: TabsController = new TabsController()
   private controller: TabsController = new TabsController()
-
   @State tabArr: ArticleTypeData[] = []
   @State tabArr: ArticleTypeData[] = []
   @State creatorId: string = ''
   @State creatorId: string = ''
   // 发布数量
   // 发布数量
@@ -19,47 +17,69 @@ export struct PeopleShipHomeListComponent {
   @State private isLoading: boolean = false
   @State private isLoading: boolean = false
   @Consume topHeight: number
   @Consume topHeight: number
 
 
-
   build() {
   build() {
     if (this.isLoading) {
     if (this.isLoading) {
       this.LoadingLayout()
       this.LoadingLayout()
     }
     }
     // 列表
     // 列表
-    else if(this.publishCount == 0) {
+    else if (this.publishCount == 0) {
       // 无数据展示
       // 无数据展示
       EmptyComponent().height(DisplayUtils.getDeviceHeight() - this.topHeight)
       EmptyComponent().height(DisplayUtils.getDeviceHeight() - this.topHeight)
-    } else  {
-      Tabs({ barPosition: BarPosition.Start, controller: this.controller}) {
-        ForEach(this.tabArr, (item: ArticleTypeData, index: number) => {
-          TabContent() {
-            PeopleShipHomeArticleListComponent({
-              typeModel: item,
-              creatorId: this.creatorId,
-              currentTopSelectedIndex: this.currentIndex,
-              currentIndex: index
-            })
-          }.tabBar(this.tabBuilder(index, item.name ?? ''))
+    } else {
+      Column() {
+        Column() {
+          // 页签
+          Row() {
+            Scroll() {
+              Row() {
+                ForEach(this.tabArr, (item: ArticleTypeData, index: number) => {
+                  this.Tab(index, item.name ?? '')
+                })
+              }
+              .justifyContent(FlexAlign.Start)
+            }
+            .align(Alignment.Start)
+            .scrollable(ScrollDirection.Horizontal)
+            .scrollBar(BarState.Off)
+            .width('100%')
+          }
+          .alignItems(VerticalAlign.Bottom)
+          .width('100%')
+        }
+        .alignItems(HorizontalAlign.Start)
+        .width('100%')
 
 
-        })
+        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
+          ForEach(this.tabArr, (item: ArticleTypeData, index: number) => {
+            TabContent() {
+              PeopleShipHomeArticleListComponent({
+                typeModel: item,
+                creatorId: this.creatorId,
+                currentTopSelectedIndex: this.currentIndex,
+                currentIndex: index
+              })
+            }
+            // }.tabBar(this.tabBuilder(index, item.name ?? ''))
+          })
 
 
+        }
+        .backgroundColor(Color.White)
+        .barWidth('100%')
+        .barHeight(0)
+        .vertical(false)
+        .height(DisplayUtils.getDeviceHeight() - 144)
+        .animationDuration(0)
+        .divider({
+          strokeWidth: '0.5vp',
+          color: $r('app.color.color_F5F5F5'),
+          startMargin: 0,
+          endMargin: 0
+        })
+        .onChange((index: number) => {
+          this.currentIndex = index
+        })
       }
       }
-      .backgroundColor(Color.White)
-      .barWidth('100%')
-      .barHeight('44vp')
-      .vertical(false)
-      .height(DisplayUtils.getDeviceHeight() - 100)
-      .animationDuration(0)
-      .divider({
-        strokeWidth: '0.5vp',
-        color: $r('app.color.color_F5F5F5'),
-        startMargin: 0,
-        endMargin: 0
-      })
-      .onChange((index: number) => {
-        this.currentIndex = index
-      })
     }
     }
-
   }
   }
 
 
   @Builder
   @Builder
@@ -70,21 +90,33 @@ export struct PeopleShipHomeListComponent {
     }).height(DisplayUtils.getDeviceHeight() - this.topHeight)
     }).height(DisplayUtils.getDeviceHeight() - this.topHeight)
   }
   }
 
 
-  @Builder tabBuilder(index: number, name: string) {
+  // 单独的页签
+  @Builder
+  Tab(index: number, name: string) {
     Column() {
     Column() {
       Text(name)
       Text(name)
-        .fontColor(this.currentIndex === index ? $r('app.color.color_222222') : $r('app.color.color_666666') )
+        .fontColor(this.currentIndex === index ? $r('app.color.color_222222') : $r('app.color.color_666666'))
         .fontSize(18)
         .fontSize(18)
         .fontWeight(this.currentIndex === index ? 500 : 400)
         .fontWeight(this.currentIndex === index ? 500 : 400)
         .lineHeight(22)
         .lineHeight(22)
         .height(22)
         .height(22)
-        .margin({ top: 11, bottom: 1 })
       Divider()
       Divider()
         .width('15vp')
         .width('15vp')
         .strokeWidth(2)
         .strokeWidth(2)
         .color('#CB0000')
         .color('#CB0000')
         .opacity(this.currentIndex === index ? 1 : 0)
         .opacity(this.currentIndex === index ? 1 : 0)
-    }.width('100%')
+    }
+    .justifyContent(FlexAlign.Center)
+    .constraintSize({ minWidth: 35 })
+    .margin({
+      left: '16vp',
+      right: '16vp'
+    })
+    .height('44vp')
+    .onClick(() => {
+      this.controller.changeIndex(index)
+      this.currentIndex = index
+    })
   }
   }
 
 
   async aboutToAppear() {
   async aboutToAppear() {