HarmonyOS 项目要做一个页面，页面中有多级tab的切换展示；如何做布局？

@Entry  
@Component  
struct Index {  
  list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]  
  build() {  
      Scroll() {  
        Column(){  
        Image($r('app.media.app_icon')).width('100%').height(300).objectFit(ImageFit.Auto)  
          Tabs() {  
            TabContent() {  
              Tabs() {  
                TabContent() {  
                  List({space:10}) {  
                    ForEach(this.list, (item: number) => {  
                      ListItem(){  
                        Column() {  
                          Text(`当前是${item}`)  
                        }.width('100%').height(300).justifyContent(FlexAlign.Center).backgroundColor(Color.Gray).borderRadius(10)  
                      }  
                    })  
                  }.padding({left:10, right:10}).nestedScroll({  
                    scrollForward:NestedScrollMode.PARENT_FIRST,  
                    scrollBackward:NestedScrollMode.SELF_FIRST  
                  })  
                }.tabBar('直播目录')  
                TabContent() {  
                }.tabBar('录播目录')  
                TabContent() {  
                }.tabBar('面授课')  
              }  
            }.tabBar('目录')  
            TabContent() {  
            }.tabBar('详情')  
            TabContent() {  
            }.tabBar('资料')  
          }  
      }  
    }  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.