1 使用场景：

常见于电商的价格场景，比如￥3.9或3.9元的效果美观效果。

2 目标效果：

3 蓝湖样式基础代码：

￥
width:28px;
height:28px;
font-size:28px;
font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
font-weight:bold;
color:rgba(237,41,0,1);
line-height:28px;

3.9
width:36px;
height:28px;
font-size:56px;
font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
font-weight:bold;
color:rgba(237,41,0,1);
line-height:28px;

29.9
width:224px;
height:80px;
font-size:88px;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(246,35,46,1);
line-height:80px;

元
font-size:40px;


大家可以试试根据这个样式实现上面效果，我之前会遇到两个问题，一是下浮不了，二是有个间隙（格式化代码）。

4 我的代码：

￥3.9

  29.9
  元


.num-1 {
  width: 36rpx;
  font-size: 56rpx;
  font-weight: bold;
  color: rgba(237, 41, 0, 1);
}

.num-1::first-letter{
  font-size:28rpx;
}

.num-2{
  font-size:88rpx;
  font-weight:600;
  color:rgba(246,35,46,1);
  line-height:80rpx;
}

.num-2 text:last-child{
  font-size: 40rpx;
  line-height:40rpx;
}

5 实现效果：

6 代码片段：

https://developers.weixin.qq.com/s/TXymsvm17qgq

7 温馨提示：

• 公司在自行开发、运营着电商小程序，欢迎交流共同进步。
• 不定期分享文章，欢迎关注哈。