微信小程序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;
}

---

最后希望可以帮助到大家哦！