UNPKG

@nutui/nutui-react

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

82 lines (81 loc) 2.05 kB
/* #ifdef harmony */ /* #endif */ /* #ifndef harmony */ /* #endif */ .nut-card { width: 100%; display: flex; background-color: inherit; border-radius: var(--nutui-card-border-radius, 4px); } .nut-card-left { width: scale-px(120px); height: scale-px(120px); flex-shrink: 0; } .nut-card-left > img { display: block; width: 100%; height: 100%; border-radius: var(--nutui-card-border-radius, 4px); } .nut-card-right { flex: 1; padding: 0 scale-px(10px) scale-px(8px); } .nut-card-right-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-all; line-height: var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)); font-size: var(--nutui-font-text); color: var(--nutui-color-title); } .nut-card-right-price { display: flex; align-items: center; height: scale-px(18px); line-height: scale-px(18px); margin-top: scale-px(9px); } .nut-card-right-price-origin.nut-price { margin-left: scale-px(2px); } .nut-card-right-price-origin.nut-price .nut-price-symbol, .nut-card-right-price-origin.nut-price .nut-price-integer, .nut-card-right-price-origin.nut-price .nut-price-decimal { color: #d2a448; } .nut-card-right-other { display: flex; align-items: center; padding: scale-px(5px) 0 scale-px(2px); } .nut-card-right-other .nut-tag { padding: 0 scale-px(2px); margin-right: scale-px(5px); font-size: var(--nutui-font-text-xs); } .nut-card-right-shop { display: flex; justify-content: space-between; align-items: center; } .nut-card-right-shop-name { line-height: var(--nutui-line-height-xl, var(--nutui-font-h2)); color: var(--nutui-color-text); font-size: var(--nutui-font-text-small); padding-top: scale-px(4px); } [dir=rtl] .nut-card-right-price-origin.nut-price, .nut-rtl .nut-card-right-price-origin.nut-price { margin-left: 0; margin-right: scale-px(2px); } [dir=rtl] .nut-card-right-other .nut-tag, .nut-rtl .nut-card-right-other .nut-tag { margin-right: 0; margin-left: scale-px(5px); }