1/* 2 * Copyright (c) 2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { WorkerTab } from '../component/WorkerTab'; 17import { TaskPoolTab } from '../component/TaskPoolTab'; 18 19@Entry 20@Component 21struct Index { 22 private controller: TabsController = new TabsController(); 23 @State index: number = 0; 24 25 @Builder tabJsWorker() { 26 Column() { 27 Text("Worker") 28 .width("57vp") 29 .height("22vp") 30 .position({ x: "0vp", y: "17vp" }) 31 .fontFamily("HarmonyHeiTi-Medium") 32 .fontSize(16) 33 .fontColor(this.index === 0 ? "#007DFF" : "#182431") 34 .textAlign(TextAlign.Center) 35 .lineHeight(22) 36 .fontWeight(this.index === 0 ? 500 : 400) 37 .opacity(this.index === 0 ? 1 : 0.6) 38 Line() 39 .width("57vp") 40 .height("2vp") 41 .position({ x: "0", y: "46vp" }) 42 .backgroundColor(this.index === 0 ? "#007DFF" : "linear-gradient(269deg,rgba(0,0,0,0.00)%,#FFFFFF 10%)") 43 } 44 .id("tabJsWorker") 45 .width("100%") 46 .height("100%") 47 .position({ x: "65%", y: "0vp" }) 48 .onClick(() => { 49 this.index = 0; 50 this.controller.changeIndex(this.index); 51 }) 52 } 53 54 @Builder tabTaskPool() { 55 Column() { 56 Text("TaskPool") 57 .width("68vp") 58 .height("22vp") 59 .position({ x: "10vp", y: "17vp" }) 60 .fontFamily("HarmonyHeiTi-Medium") 61 .fontSize(16) 62 .fontColor(this.index === 1 ? "#007DFF" : "#182431") 63 .textAlign(TextAlign.Center) 64 .lineHeight(22) 65 .fontWeight(this.index === 1 ? 500 : 400) 66 .opacity(this.index === 1 ? 1 : 0.6) 67 Line() 68 .width("68vp") 69 .height("2vp") 70 .position({ x: "10vp", y: "46vp" }) 71 .backgroundColor(this.index === 1 ? "#007DFF" : "linear-gradient(269deg,rgba(0,0,0,0.00)%,#FFFFFF 10%)") 72 } 73 .id("tabTaskPool") 74 .height("100%") 75 .width("100%") 76 .position({ x: "4%", y: "0" }) 77 .onClick(() => { 78 this.index = 1; 79 this.controller.changeIndex(this.index); 80 }) 81 } 82 83 build() { 84 Row() { 85 Column() { 86 Text("ConcurrentModule") 87 .width("100%") 88 .height("41vp") 89 .position({ x: "7%", y: "31vp" }) 90 .fontColor("#182431") 91 .fontSize("30fp") 92 .fontFamily("HarmonyHeiTi-Bold") 93 .lineHeight(41) 94 .fontWeight(700) 95 .textAlign(TextAlign.Start) 96 97 Tabs({ 98 barPosition: BarPosition.Start, 99 controller: this.controller 100 }) { 101 TabContent() { 102 WorkerTab(); 103 } 104 .width("100%") 105 .height("100%") 106 .tabBar(this.tabJsWorker) 107 108 TabContent() { 109 TaskPoolTab(); 110 } 111 .width("100%") 112 .height("100%") 113 .tabBar(this.tabTaskPool) 114 } 115 .width("100%") 116 .height("696vp") 117 .barWidth("100%") 118 .barHeight("56vp") 119 .position({ x: "0vp", y: "80vp" }) 120 .padding({ bottom: "24vp" }) 121 .backgroundImage("linear-gradient(269deg,rgba(0,0,0,0.00)%,#FFFFFF 10%)") 122 .barMode(BarMode.Fixed) 123 .onChange((index: number) => { 124 this.index = index; 125 }) 126 } 127 .backgroundColor("#f1f3f5") 128 .width("100%") 129 .height("100%") 130 } 131 .width("100%") 132 .height("100%") 133 } 134} 135