xf-ohos/entry/src/main/ets/pages/DistributedControl.ets

import {TitleStateComp,}from '../common/component/TitleStateComp'
import { BottomOperateComp } from '../common/component/BottomOperateComp';
import router from '@ohos.router';
@Entry
@Component
export struct DistributeControl{
  @State click:boolean=true
  private isHomePage: boolean = false
  build(){
    Column(){
      TitleStateComp({ isHomePage: this.isHomePage})
      Column(){
        Row(){
          Image($r('app.media.Frame'))
            .height('52px')
            .height('52px')
            .padding({left:20})
            .onClick(()=>{
              router.pushUrl({
                url:'pages/Distribute'
              })
            })
          Text('分布式控制')
            .width('80%')
            .fontSize('51px')
            .fontColor('#e6000000')
            .textAlign(TextAlign.Center)
            .height('100%')
        } .height('10%')
        .width('100%')
        Row(){
          Blank()
            Image($r('app.media.distributeimage'))
              .height('90%')
              .width('60%')
              .border({width:5})
              .borderRadius(21)
          Column(){
            Column(){

          }.width('100%')
            .height('20%')
            Column({space:60}){
              if(this.click===true){
                Column(){
                  Image($r('app.media.suoping'))
                    .width('150px')
                    .height('150px')
                    .onClick(()=>{
                      this.click=false
                    })
                  Text('锁屏')
                    .fontSize('32px')
                    .fontColor('#e6000000')
                    .fontWeight(FontWeight.Medium)
                }

              } else if (this.click===false) {
                Column(){
                  Image($r('app.media.unlock'))
                    .width('150px')
                    .height('150px')
                    .onClick(()=>{
                      this.click=true
                    })
                  Text('解锁')
                    .fontSize('32px')
                    .fontColor('#e6000000')
                    .fontWeight(FontWeight.Medium)
                }
              }
              Column(){
                Image($r('app.media.xiping'))
                  .width('150px')
                  .height('150px')
                  .onClick(()=>{
                    this.click=true
                  })
                Text('熄屏')
                  .fontSize('32px')
                  .fontColor('#e6000000')
                  .fontWeight(FontWeight.Medium)
              }

            }.width('100%')
            .height('60%')
            Column(){
              Text('退出')
                .width('70%')
                .height('50%')
                .fontColor('#fff')
                .borderRadius(21)
                .textAlign(TextAlign.Center)
                .backgroundColor("#0A59F7")
                .onClick(()=>{
                  router.pushUrl({
                    url:'pages/Distribute'
                  })
                })
            }.width('100%')
            .height('20%')
            .justifyContent(FlexAlign.Center)





          }.height("100%")
          .width('25%')
          .justifyContent(FlexAlign.Center)

        }
        .width('100%')
        .height('90%')

      }
      .width('100%')
      .height('84%')
      BottomOperateComp({ isHomePage: this.isHomePage })
    }.width('100%')
    .height('100%')

  }
}