HarmonyOS Text/Span使用问题

//自定义组件Tags  
@Component  
struct Tags {  
  @Prop tagsText: string;  
  @Prop tagsType: string;  
  @Prop isFront: boolean = false;  
  @Prop frontText: string;  
  @Prop frontIcon: string;  
  @State TagsOptions: TagsInterface = {};  
  
  aboutToAppear(){  
    let tagsColor:TagsColor = {};  
    Object.entries(TagsTypeOption).forEach((item:[string,TagsColor])=>{  
      if(item[0] === this.tagsType){  
        tagsColor = item[1];  
      }  
    })  
    this.TagsOptions = {  
      text:this.tagsText,  
      frontText:this.frontText,  
      frontIcon:this.frontIcon,  
      tagsColor:tagsColor  
    }  
  }  
  
  build() {  
    Row() {  
      if (this.isFront) {  
        if(this.TagsOptions.frontText){  
          Text(this.TagsOptions.frontText)  
            .fontColor(this.TagsOptions.tagsColor?.color)  
            .fontSize('10vp')  
            .height('16vp')  
            .padding('2vp')  
            .backgroundColor(this.TagsOptions.tagsColor?.frontBgColor)  
            .border({  
              width: { right: '1vp', left:'0vp', top:'0vp', bottom:'0vp' },  
              color: this.TagsOptions.tagsColor?.borderColor,  
            })  
        }  
        if(this.TagsOptions.frontIcon){  
          Image($r(this.TagsOptions.frontIcon))  
            .size({ width: '14vp', height: '14vp' })  
            .padding('2vp')  
            .backgroundColor(this.TagsOptions.tagsColor?.frontBgColor)  
            .border({  
              width: { right: '1vp', left:'0vp', top:'0vp', bottom:'0vp' },  
              color: this.TagsOptions.tagsColor?.borderColor,  
            })  
        }  
      }  
      Text(this.TagsOptions.text)  
        .fontColor(this.TagsOptions.tagsColor?.color)  
        .fontSize('10vp')  
        .height('16vp')  
        .padding('2vp')  
        .backgroundColor(this.TagsOptions.tagsColor?.bgColor)  
  
    }  
    .height('16vp')  
    .border({  
      width: '1vp',  
      color: this.TagsOptions.tagsColor?.borderColor,  
      radius: '2vp'  
    })  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

@Entry  
@Component  
struct tagsTest {  
  build() {  
    Row() {  
      Tags({tagsText:'新品',tagsType:'newProduct'})  
        .margin({  
          right:'5vp'  
        })  
      Tags({tagsText:'额外5倍积分',tagsType:'bonusPoint',isFront:true, frontIcon:'app.media.icon'})  
        .margin({  
          right:'5vp'  
        })  
      Tags({tagsText:'3.1元',tagsType:'saveMoney',isFront:true, frontText:'省'})  
    }  
    .height('100%')  
    .justifyContent(FlexAlign.Center)  
  }  
}  
  
class TagsInterface {  
  text?:string  
  frontText?:string  
  frontIcon?:string  
  tagsColor?:TagsColor  
}  
class TagsColor{  
  bgColor?:string  
  borderColor?:string  
  color?:string  
  frontBgColor?:string  
}  
  
class TagsType{  
  newProduct?:TagsColor  
  bonusPoint?:TagsColor  
  saveMoney?:TagsColor  
}  
  
const TagsTypeOption:TagsType = {  
  newProduct: {  
    bgColor: "#00af3b",  
    borderColor: "#00af3b",  
    color: "#ffffff",  
    frontBgColor: "",  
  },  
  bonusPoint:{  
    bgColor: "#feffff",  
    borderColor: "#fa8027",  
    color: "#f2c5a0",  
    frontBgColor: "#fff7f4",  
  },  
  saveMoney:{  
    bgColor: "#feffff",  
    borderColor: "#ffdada",  
    color: "#ff0005",  
    frontBgColor: "#ffeded",  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.