vant weapp - Card 商品卡片 (修改标题与金额中间间距太大问题)

前言

最近在使用 Vant-weapp 小程序组件，使用 Card 组件想实现这样一个界面：

在官方文档中给出的示例配置中，你根本无法调整中部宽度。。

解决方案

调整如下三个类，具体看下方代码：

• .van-card__bottom：金额 / 虚拟价格 / 数量，那一块容器。
• .van-card__img：图像容器。
• .van-card__thumb：左侧容器(图像)

/* 金额/虚拟价格 - 上浮 */
.van-card__bottom{
     
  padding-bottom: 80rpx!important;
}

/* 调整图像大小(最好用百分比) */
.van-card__img{
     
  width: 55%!important;
  height: 55%!important;
}

/* 调整左侧图像容器 - 使其贴近 */
.van-card__thumb{
     
  margin-right:-44rpx!important;
}