背景：

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

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

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

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

@Entry
@ComponentV2
struct Index {
  readonly PAGE_FULL: string = "100%";
  readonly PRE_96: string = "96%";
  readonly SIZE_40: number = 40;
  readonly SIZE_30: number = 30;
  readonly SIZE_20: number = 20;
  readonly SIZE_16: number = 16;
  readonly SIZE_8: number = 8;
  readonly SIZE_4: number = 4;
  @Local origin: string = '山园小梅・其一'
  @Local author: string = '林逋'
  @Local content: string = '疏影横斜水清浅，暗香浮动月黄昏。'
  @Local category: string = '古诗文 - 自然 - 梅花'
  @Local status: number = 0

  //   {
  //   "content": "疏影横斜水清浅，暗香浮动月黄昏。",
  //   "author": "林逋",
  //   "origin": "山园小梅・其一",
  //   "category": "古诗文 - 自然 - 梅花"
  // },
  // {
  //   "content": "秋风生渭水，落叶满长安。",
  // "author": "贾岛",
  // "origin": "忆江上吴处士",
  // "category": "