背景：

前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例 仅供参考

先上本期效果图 ，里面图片自行替换

效果图1完整代码案例如下：

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State inputValue: string = '';
  @State role: number = 0;
  @State roleal: number = 0;

  build() {
    Column({ space: 8 }) {
      Stack({ alignContent: Alignment.Bottom }) {
        Column() {
          Column({ space: 4 }) {
            Text($r('app.string.EntryAbility_label'))
              .fontSize(22)
              .fontColor(Color.Black)
              .fontWeight(FontWeight.Bolder)
            Text("介绍")
              .fontSize(15)
              .fontColor(Color.Black)
          }
          .width('100%')
          .justifyContent(FlexAlign.Center)
          .padding({
            top: 4,
            bottom: 8
          })

          Scroll() {
            Column({ space: 8 }) {
              Row() {
                Row({ space: 8 }) {
                  Row() {
                    Text('帮我写一个祝华为鸿蒙取得更大成绩的祝福语')
                      .fontSize(14)
                      .fontColor(Color.Black)
                  }
                  .width('auto')
                  .backgroundColor('#BAD7DB')
                  .padding({
                    left: 16,
                    right: 16,