背景：

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

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

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

• Index

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { EventMyItem } from './EventMyItem';

export class ListItem1 {
  img: ResourceStr;
  title: string;
  content: string;
  version: string;

  constructor(img: ResourceStr, title: string, content: string, version: string) {
    this.img = img;
    this.title = title;
    this.content = content;
    this.version = version;
  }
}


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State listItem1: ListItem1[] = [
    new ListItem1($r('app.media.img'), '我爱我家', '北京我爱我家房地产经纪有限...', '版本6.30.0介绍|隐私」权限'),
    new ListItem1($r('app.media.img_1'), '头条搜索极速版', '北京抖音信息服务有限公司', '版本10.1.3.0|介绍|隐私|权限'),
    new ListItem1($r('app.media.img_2'), '番茄免费小说', '北京臻鼎科技有限公司', '版本6.5.1.32|介绍|隐私」权限'),
    new ListItem1($r('app.media.img_3'), '百度极速版', '百度在线网络技术(北京)有...', '版本6.39.0..介绍」隐私」权限'),
    new ListItem1($r('app.media.img_4'), '上古王冠', '厦门极致互动网络技术股份有...', '版本2.010...介绍」隐私」权限'),
    new ListItem1($r('app.media.img_5'), '途虎养车', '上海阑途信息技术有限公司', '