diff --git a/src/config.json b/src/config.json index 1ba789e265..55055784a4 100644 --- a/src/config.json +++ b/src/config.json @@ -1176,7 +1176,7 @@ "author": "swag~jun" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Card", "type": "component", "cName": "商品卡片", diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index a33f6577b5..ba888dd854 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -39,28 +39,13 @@ line-height: 18px; margin-top: 9px; - .nut-price { - .nut-price-big { - font-size: 18px; - } - - .nut-price-symbol, - .nut-price-point, - .nut-price-small { - font-size: 12px; - } - } - &-origin { &.nut-price { margin-left: 2px; - color: #d2a448; - - .nut-price-big, .nut-price-symbol, - .nut-price-point, - .nut-price-small { - font-size: 12px; + .nut-price-integer, + .nut-price-decimal { + color: #d2a448; } } } diff --git a/src/packages/card/card.taro.tsx b/src/packages/card/card.taro.tsx index 9da9ff27b7..c0e34ffb84 100644 --- a/src/packages/card/card.taro.tsx +++ b/src/packages/card/card.taro.tsx @@ -3,6 +3,7 @@ import { View } from '@tarojs/components' import classNames from 'classnames' import Price from '@/packages/price/index.taro' import Tag from '@/packages/tag/index.taro' +import Image from '@/packages/image/index.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' export interface CardProps extends BasicComponent { @@ -58,7 +59,7 @@ export const Card: FunctionComponent< return (
- + {title} diff --git a/src/packages/card/demos/h5/demo2.tsx b/src/packages/card/demos/h5/demo2.tsx index ab46bfec10..ce6c9fabaa 100644 --- a/src/packages/card/demos/h5/demo2.tsx +++ b/src/packages/card/demos/h5/demo2.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Card } from '@nutui/nutui-react' +import { Card, Tag } from '@nutui/nutui-react' const Demo2 = () => { const state = { @@ -13,13 +13,6 @@ const Demo2 = () => { shopName: '阳澄湖大闸蟹自营店>', } const wordStyles = { - padding: '0 5px', - borderRadius: '1px', - fontSize: '10px', - height: '15px', - lineHeight: '15px', - color: '#999', - backgroundColor: '#f2f2f7', marginRight: '5px', } return ( @@ -33,18 +26,21 @@ const Demo2 = () => { shopName={state.shopName} description={
{['鲜活', '礼盒', '国产'].map((item) => { return ( - + {item} - + ) })}
diff --git a/src/packages/card/demos/taro/demo1.tsx b/src/packages/card/demos/taro/demo1.tsx index 0fde2a1b75..679270fdc2 100644 --- a/src/packages/card/demos/taro/demo1.tsx +++ b/src/packages/card/demos/taro/demo1.tsx @@ -3,7 +3,7 @@ import { Card } from '@nutui/nutui-react-taro' const Demo1 = () => { const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + src: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', price: '388', diff --git a/src/packages/card/demos/taro/demo2.tsx b/src/packages/card/demos/taro/demo2.tsx index 8e7752d888..9499fb5903 100644 --- a/src/packages/card/demos/taro/demo2.tsx +++ b/src/packages/card/demos/taro/demo2.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { Card, Tag } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components' -import { Card } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo2 = () => { const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + src: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', price: '388', @@ -14,14 +15,7 @@ const Demo2 = () => { shopName: '阳澄湖大闸蟹自营店>', } const wordStyles = { - padding: '0 5px', - borderRadius: '1px', - fontSize: '10px', - height: '15px', - lineHeight: '15px', - color: '#999', - backgroundColor: '#f2f2f7', - marginRight: '5px', + marginRight: pxTransform(5), } return ( { shopName={state.shopName} description={ {['鲜活', '礼盒', '国产'].map((item) => { return ( - + {item} - + ) })} diff --git a/src/packages/card/demos/taro/demo3.tsx b/src/packages/card/demos/taro/demo3.tsx index cf9d2987c5..fec72569bb 100644 --- a/src/packages/card/demos/taro/demo3.tsx +++ b/src/packages/card/demos/taro/demo3.tsx @@ -1,9 +1,10 @@ import React from 'react' -import { Card } from '@nutui/nutui-react-taro' +import { Card, Image } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo3 = () => { const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + src: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', price: '388', @@ -13,11 +14,9 @@ const Demo3 = () => { shopName: '阳澄湖大闸蟹自营店>', } const tagStyles = { - display: 'inline-block', - verticalAlign: 'middle', - marginRight: '5px', - marginLeft: '2px', - height: '14px', + display: 'inline-flex', + marginRight: pxTransform(5), + marginLeft: pxTransform(2), } return ( { delivery={state.delivery} shopName={state.shopName} priceTag={ - } /> diff --git a/src/packages/card/demos/taro/demo4.tsx b/src/packages/card/demos/taro/demo4.tsx index 06d74d4b24..9aba8dedaf 100644 --- a/src/packages/card/demos/taro/demo4.tsx +++ b/src/packages/card/demos/taro/demo4.tsx @@ -4,7 +4,7 @@ import { Card } from '@nutui/nutui-react-taro' const Demo4 = () => { const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + src: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', price: '388', diff --git a/src/packages/card/demos/taro/demo5.tsx b/src/packages/card/demos/taro/demo5.tsx index 6ee9205827..0d334624ab 100644 --- a/src/packages/card/demos/taro/demo5.tsx +++ b/src/packages/card/demos/taro/demo5.tsx @@ -1,10 +1,11 @@ import React from 'react' import { View } from '@tarojs/components' import { Card } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo5 = () => { const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + src: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', price: '388', @@ -23,7 +24,7 @@ const Demo5 = () => { shopDescription={state.shopDescription} delivery={state.delivery} shopName={state.shopName} - extra={自定义} + extra={自定义} /> ) } diff --git a/src/packages/card/demos/taro/demo6.tsx b/src/packages/card/demos/taro/demo6.tsx index 79db464b8a..9d49c84533 100644 --- a/src/packages/card/demos/taro/demo6.tsx +++ b/src/packages/card/demos/taro/demo6.tsx @@ -1,9 +1,11 @@ import React from 'react' import { Card } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' const Demo6 = () => { const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + src: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公 4.5 两 母 3.5 两 4 对 8 只 鲜活生鲜螃蟹现货水产礼盒海鲜水', } @@ -13,9 +15,15 @@ const Demo6 = () => { src={state.src} title={state.title} description={ -
+ 阳澄湖大闸蟹鲜活生鲜螃蟹现货水产礼盒海鲜水 -
+
} /> )