123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- @import './var.less';
- :root {
- --van-card-padding: @card-padding;
- --van-card-font-size: @card-font-size;
- --van-card-text-color: @card-text-color;
- --van-card-background-color: @card-background-color;
- --van-card-thumb-size: @card-thumb-size;
- --van-card-thumb-border-radius: @card-thumb-border-radius;
- --van-card-title-line-height: @card-title-line-height;
- --van-card-desc-color: @card-desc-color;
- --van-card-desc-line-height: @card-desc-line-height;
- --van-card-price-color: @card-price-color;
- --van-card-origin-price-color: @card-origin-price-color;
- --van-card-num-color: @card-num-color;
- --van-card-origin-price-font-size: @card-origin-price-font-size;
- --van-card-price-font-size: @card-price-font-size;
- --van-card-price-integer-font-size: @card-price-integer-font-size;
- --van-card-price-font-family: @card-price-font-family;
- }
- .van-card {
- position: relative;
- box-sizing: border-box;
- padding: var(--van-card-padding);
- color: var(--van-card-text-color);
- font-size: var(--van-card-font-size);
- background: var(--van-card-background-color);
- &:not(:first-child) {
- margin-top: var(--van-padding-xs);
- }
- &__header {
- display: flex;
- }
- &__thumb {
- position: relative;
- flex: none;
- width: var(--van-card-thumb-size);
- height: var(--van-card-thumb-size);
- margin-right: var(--van-padding-xs);
- img {
- border-radius: var(--van-card-thumb-border-radius);
- }
- }
- &__content {
- position: relative;
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-between;
- min-width: 0; /* hack for flex box ellipsis */
- min-height: var(--van-card-thumb-size);
- &--centered {
- justify-content: center;
- }
- }
- &__title,
- &__desc {
- word-wrap: break-word;
- }
- &__title {
- max-height: 32px;
- font-weight: var(--van-font-weight-bold);
- line-height: var(--van-card-title-line-height);
- }
- &__desc {
- max-height: var(--van-card-desc-line-height);
- color: var(--van-card-desc-color);
- line-height: var(--van-card-desc-line-height);
- }
- &__bottom {
- line-height: var(--van-line-height-md);
- }
- &__price {
- display: inline-block;
- color: var(--van-card-price-color);
- font-weight: var(--van-font-weight-bold);
- font-size: var(--van-card-price-font-size);
- }
- &__price-integer {
- font-size: var(--van-card-price-integer-font-size);
- font-family: var(--van-card-price-font-family);
- }
- &__price-decimal {
- font-family: var(--van-card-price-font-family);
- }
- &__origin-price {
- display: inline-block;
- margin-left: 5px;
- color: var(--van-card-origin-price-color);
- font-size: var(--van-card-origin-price-font-size);
- text-decoration: line-through;
- }
- &__num {
- float: right;
- color: var(--van-card-num-color);
- }
- &__tag {
- position: absolute;
- top: 2px;
- left: 0;
- }
- &__footer {
- flex: none;
- text-align: right;
- .van-button {
- margin-left: 5px;
- }
- }
- }
|