diff --git a/migrate-from-v2.md b/migrate-from-v2.md index de7987c625..cb1ec0b797 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -729,9 +729,8 @@ plugins: [ #### Price -- `decimalDigits` 重命名为 `digits` -- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号 -- 新增 `line`，是否展示划线价 +- 修改 `size`，增加 'xlarge' 尺寸 +- 新增 `color`, 价格类型 #### Progress diff --git a/src/config.json b/src/config.json index 3b5b447e8b..9767d8cab4 100644 --- a/src/config.json +++ b/src/config.json @@ -1084,6 +1084,7 @@ "sort": 4, "show": true, "taro": true, + "v15": true, "author": "songsong" }, { diff --git a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap index 393ccf15cd..8617abeeef 100644 --- a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap +++ b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`description slot test 1`] = ` class="nut-card-right-price" >
| ITouchEvent ) => void @@ -32,12 +26,12 @@ const defaultProps = { onClick: ( event: React.MouseEvent | ITouchEvent ) => {}, -} as CellProps +} as CellTaroProps const classPrefix = 'nut-cell' export const Cell: FunctionComponent< - Partial & Omit, 'title'> + Partial & Omit, 'title'> > & { Group: typeof CellGroup } = (props) => { const ctx = useContext(CellGroupContext) const { diff --git a/src/packages/cell/cell.tsx b/src/packages/cell/cell.tsx index 9281ee7a42..e63023173a 100644 --- a/src/packages/cell/cell.tsx +++ b/src/packages/cell/cell.tsx @@ -1,20 +1,10 @@ -import React, { FunctionComponent, ReactNode, useContext } from 'react' +import React, { FunctionComponent, useContext } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import CellGroup from '@/packages/cellgroup' import CellGroupContext from '@/packages/cellgroup/context' import { useRtl } from '@/packages/configprovider' - -export interface CellProps extends BasicComponent { - title: ReactNode - description: ReactNode - extra: ReactNode - radius: string | number - align: 'flex-start' | 'center' | 'flex-end' - clickable: boolean - isLast: boolean - onClick: (event: React.MouseEvent) => void -} +import { CellProps } from './types' const defaultProps = { ...ComponentDefaults, diff --git a/src/packages/cell/index.taro.ts b/src/packages/cell/index.taro.ts index 81c3a8f8db..0fd6bf07a4 100644 --- a/src/packages/cell/index.taro.ts +++ b/src/packages/cell/index.taro.ts @@ -1,4 +1,4 @@ import { Cell } from './cell.taro' -export type { CellProps } from './cell.taro' +export type { CellProps, CellAlign } from './types' export default Cell diff --git a/src/packages/cell/index.ts b/src/packages/cell/index.ts index 99f19d22a0..9f302af797 100644 --- a/src/packages/cell/index.ts +++ b/src/packages/cell/index.ts @@ -1,4 +1,4 @@ import { Cell } from './cell' -export type { CellProps } from './cell' +export type { CellProps, CellAlign } from './types' export default Cell diff --git a/src/packages/cell/types.ts b/src/packages/cell/types.ts new file mode 100644 index 0000000000..5c098df2a8 --- /dev/null +++ b/src/packages/cell/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type CellAlign = 'flex-start' | 'center' | 'flex-end' | 'baseline' + +export interface CellProps extends BasicComponent { + title: React.ReactNode + description: React.ReactNode + extra: React.ReactNode + radius: string | number + align: CellAlign + clickable: boolean + isLast: boolean + onClick: (event: React.MouseEvent) => void +} diff --git a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap index 7b7e51561f..05f4ca4e8f 100644 --- a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap +++ b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap @@ -3,25 +3,25 @@ exports[`props digits test 1`] = `
¥
15213
.
122
@@ -32,25 +32,25 @@ exports[`props digits test 1`] = ` exports[`props symbol test 1`] = `
$
10010
.
00
@@ -61,20 +61,68 @@ exports[`props symbol test 1`] = ` exports[`props test 1`] = `
1,010
.
+ 00 +
+
+
+`; + +exports[`props test 2`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; + +exports[`props test 3`] = ` +
+
+
+ 1,010 +
+
+ . +
+
00
@@ -85,28 +133,52 @@ exports[`props test 1`] = ` exports[`props thousands test 1`] = `
$
10010
.
01
`; + +exports[`props type 1`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; diff --git a/src/packages/price/__test__/price.spec.tsx b/src/packages/price/__test__/price.spec.tsx index 9b16a75cc8..2eaed3259a 100644 --- a/src/packages/price/__test__/price.spec.tsx +++ b/src/packages/price/__test__/price.spec.tsx @@ -39,3 +39,15 @@ test('props digits test', () => { ) expect(container).toMatchSnapshot() }) + +test('props size', () => { + const { container } = render() + expect(container.querySelector('.nut-price-integer')).toHaveClass( + 'nut-price-integer-large' + ) +}) + +test('props color', () => { + const { container } = render() + expect(container.querySelector('.nut-price')).toHaveClass('nut-price-primary') +}) diff --git a/src/packages/price/demo.taro.tsx b/src/packages/price/demo.taro.tsx index 6a3eec9f03..e3e92ebfcd 100644 --- a/src/packages/price/demo.taro.tsx +++ b/src/packages/price/demo.taro.tsx @@ -11,11 +11,12 @@ import Demo5 from './demos/taro/demo5' import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' +import Demo9 from './demos/taro/demo9' const PriceDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title1: '支持三种尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小数', title3: '有人民币符号，无千位分隔', title4: '有人民币符号，有千位分隔，保留小数点后三位', @@ -23,9 +24,10 @@ const PriceDemo = () => { title6: '异步随机变更', title7: '不展示 symbol 符号', title8: '划线价', + title9: '场域分类：原子级、模块级、列表级、页面级', }, 'zh-TW': { - title1: '支持三種尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小數', title3: '有人民幣符號，無千位分隔', title4: '有人民幣符號，有千位分隔，保留小數點後三位', @@ -33,9 +35,10 @@ const PriceDemo = () => { title6: '異步隨機變更', title7: '不展示 symbol 符號', title8: '劃線價', + title9: '場域分類：原子級、模塊級、列表級、頁面級', }, 'en-US': { - title1: 'Support three sizes：small、normal、large', + title1: 'Support sizes：small、normal、large、xlarge', title2: 'No decimals', title3: 'With RMB symbol, no thousands separator', title4: @@ -44,6 +47,7 @@ const PriceDemo = () => { title6: 'Asynchronous random changes', title7: 'Do not display symbol', title8: 'Line-through price', + title9: 'Field classification: atomic, module, list, page', }, }) return ( @@ -52,6 +56,8 @@ const PriceDemo = () => { {translated.title1} + {translated.title9} + {translated.title2} {translated.title3} diff --git a/src/packages/price/demo.tsx b/src/packages/price/demo.tsx index 28db3583b3..4b4f672e29 100644 --- a/src/packages/price/demo.tsx +++ b/src/packages/price/demo.tsx @@ -8,11 +8,12 @@ import Demo5 from './demos/h5/demo5' import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' +import Demo9 from './demos/h5/demo9' const PriceDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title1: '支持三种尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小数', title3: '有人民币符号，无千位分隔', title4: '有人民币符号，有千位分隔，保留小数点后三位', @@ -20,9 +21,10 @@ const PriceDemo = () => { title6: '异步随机变更', title7: '不展示 symbol 符号', title8: '划线价', + title9: '场域分类：原子级、模块级、列表级、页面级', }, 'zh-TW': { - title1: '支持三種尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小數', title3: '有人民幣符號，無千位分隔', title4: '有人民幣符號，有千位分隔，保留小數點後三位', @@ -30,9 +32,10 @@ const PriceDemo = () => { title6: '異步隨機變更', title7: '不展示 symbol 符號', title8: '劃線價', + title9: '場域分類：原子級、模塊級、列表級、頁面級', }, 'en-US': { - title1: 'Support three sizes：small、normal、large', + title1: 'Support sizes：small、normal、large、xlarge', title2: 'No decimals', title3: 'With RMB symbol, no thousands separator', title4: @@ -41,6 +44,7 @@ const PriceDemo = () => { title6: 'Asynchronous random changes', title7: 'Do not display symbol', title8: 'Line-through price', + title9: 'Field classification: atomic, module, list, page', }, }) @@ -48,6 +52,8 @@ const PriceDemo = () => {

{translated.title1}

+

{translated.title9}

+

{translated.title2}

{translated.title3}

diff --git a/src/packages/price/demos/h5/demo1.tsx b/src/packages/price/demos/h5/demo1.tsx index c6f8175387..2c1df37ef5 100644 --- a/src/packages/price/demos/h5/demo1.tsx +++ b/src/packages/price/demos/h5/demo1.tsx @@ -1,19 +1,22 @@ import React from 'react' -import { Price, Cell } from '@nutui/nutui-react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' const Demo1 = () => { return ( - <> + - + - + - + - + + + + ) } export default Demo1 diff --git a/src/packages/price/demos/h5/demo2.tsx b/src/packages/price/demos/h5/demo2.tsx index fa16698314..77782262ee 100644 --- a/src/packages/price/demos/h5/demo2.tsx +++ b/src/packages/price/demos/h5/demo2.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo2 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo3.tsx b/src/packages/price/demos/h5/demo3.tsx index 60b46ccf9f..492739b3ea 100644 --- a/src/packages/price/demos/h5/demo3.tsx +++ b/src/packages/price/demos/h5/demo3.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo3 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo4.tsx b/src/packages/price/demos/h5/demo4.tsx index 34904db1d3..84f6c4c721 100644 --- a/src/packages/price/demos/h5/demo4.tsx +++ b/src/packages/price/demos/h5/demo4.tsx @@ -4,7 +4,7 @@ import { Price, Cell } from '@nutui/nutui-react' const Demo4 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo5.tsx b/src/packages/price/demos/h5/demo5.tsx index efda097104..0e267ca7b6 100644 --- a/src/packages/price/demos/h5/demo5.tsx +++ b/src/packages/price/demos/h5/demo5.tsx @@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo5 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo6.tsx b/src/packages/price/demos/h5/demo6.tsx index 914071c963..bf0e9441be 100644 --- a/src/packages/price/demos/h5/demo6.tsx +++ b/src/packages/price/demos/h5/demo6.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo6 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo7.tsx b/src/packages/price/demos/h5/demo7.tsx index 8c6bca6e44..3f1bd0c639 100644 --- a/src/packages/price/demos/h5/demo7.tsx +++ b/src/packages/price/demos/h5/demo7.tsx @@ -14,7 +14,7 @@ const Demo7 = () => { }, []) return ( - + ) } diff --git a/src/packages/price/demos/h5/demo8.tsx b/src/packages/price/demos/h5/demo8.tsx index b7f0c82e8d..73b8a33812 100644 --- a/src/packages/price/demos/h5/demo8.tsx +++ b/src/packages/price/demos/h5/demo8.tsx @@ -3,10 +3,10 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo8 = () => { return ( - - + +   - + ) } diff --git a/src/packages/price/demos/h5/demo9.tsx b/src/packages/price/demos/h5/demo9.tsx new file mode 100644 index 0000000000..c2e60a009b --- /dev/null +++ b/src/packages/price/demos/h5/demo9.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { Cell, CellGroup, Price } from '@nutui/nutui-react' + +const Demo9 = () => { + const colorStyles = { + color: 'var(--nutui-color-primary)', + fontSize: '12px', + lineHeight: 1, + } + const exclusivePriceStyles = { + margin: '0 8px 0 4px', + } + const priceStyles = { + margin: '0 4px 0 2px', + } + + return ( + + + + 专享价 + + + + + 粉丝到手价 + + + + + 秒杀价 + + + + + 专享价 + + + + ) +} +export default Demo9 diff --git a/src/packages/price/demos/taro/demo1.tsx b/src/packages/price/demos/taro/demo1.tsx index 8ad987499a..1ac546bffb 100644 --- a/src/packages/price/demos/taro/demo1.tsx +++ b/src/packages/price/demos/taro/demo1.tsx @@ -1,19 +1,22 @@ import React from 'react' -import { Price, Cell } from '@nutui/nutui-react-taro' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' const Demo1 = () => { return ( - <> + - + - + - + - + + + + ) } export default Demo1 diff --git a/src/packages/price/demos/taro/demo2.tsx b/src/packages/price/demos/taro/demo2.tsx index ad47a89ec3..03fdf3def3 100644 --- a/src/packages/price/demos/taro/demo2.tsx +++ b/src/packages/price/demos/taro/demo2.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo2 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo3.tsx b/src/packages/price/demos/taro/demo3.tsx index 7a60184001..9505f09abe 100644 --- a/src/packages/price/demos/taro/demo3.tsx +++ b/src/packages/price/demos/taro/demo3.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo3 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo4.tsx b/src/packages/price/demos/taro/demo4.tsx index 12bba9ecdf..658567849a 100644 --- a/src/packages/price/demos/taro/demo4.tsx +++ b/src/packages/price/demos/taro/demo4.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo4 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo5.tsx b/src/packages/price/demos/taro/demo5.tsx index 99d7d22d9a..cc23abd5f8 100644 --- a/src/packages/price/demos/taro/demo5.tsx +++ b/src/packages/price/demos/taro/demo5.tsx @@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo5 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo6.tsx b/src/packages/price/demos/taro/demo6.tsx index 00fa1639c6..d1755c9480 100644 --- a/src/packages/price/demos/taro/demo6.tsx +++ b/src/packages/price/demos/taro/demo6.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo6 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo7.tsx b/src/packages/price/demos/taro/demo7.tsx index eb423cc18f..99fbf41da6 100644 --- a/src/packages/price/demos/taro/demo7.tsx +++ b/src/packages/price/demos/taro/demo7.tsx @@ -14,7 +14,7 @@ const Demo7 = () => { }, []) return ( - + ) } diff --git a/src/packages/price/demos/taro/demo8.tsx b/src/packages/price/demos/taro/demo8.tsx index 706db12db0..212a776e4c 100644 --- a/src/packages/price/demos/taro/demo8.tsx +++ b/src/packages/price/demos/taro/demo8.tsx @@ -4,10 +4,10 @@ import { Text } from '@tarojs/components' const Demo8 = () => { return ( - - + +   - + ) } diff --git a/src/packages/price/demos/taro/demo9.tsx b/src/packages/price/demos/taro/demo9.tsx new file mode 100644 index 0000000000..cd7b102f31 --- /dev/null +++ b/src/packages/price/demos/taro/demo9.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { Cell, CellGroup, Price } from '@nutui/nutui-react-taro' +import { Text } from '@tarojs/components' +import { harmony } from '@/utils/platform-taro' + +const Demo9 = () => { + const colorStyles = { + color: harmony() ? '#ff0f23' : 'var(--nutui-color-primary)', + fontSize: 12, + lineHeight: 1, + } + const exclusivePriceStyles = { + marginLeft: 4, + marginRight: 8, + } + const priceStyles = { + marginLeft: 2, + marginRight: 4, + } + + return ( + + + + 专享价 + + + + + 粉丝到手价 + + + + + 秒杀价 + + + + + 专享价 + + + + ) +} +export default Demo9 diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index ce88f8f5f3..6efc166c41 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## Demo -### Support three sizes：small、normal、large +### Support sizes：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### Field classification: atomic, module, list, page + +:::demo + + + +::: + ### No decimals :::demo @@ -80,12 +88,13 @@ import { Price } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | +| color | Price type | `primary` \| `gray` \| `darkgray` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | | digits | Decimal digits | `number` | `2` | | thousands | Thousands separation | `boolean` | `false` | | position | The symbol appear before or after the price，`before`、`after` | `string` | `before` | -| size | Size，`large`、`normal`、`small` | `string` | `large` | +| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` | | line | Line-through price | `boolean` | `false` | ## Theming @@ -96,15 +105,20 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large Size Symbol font size | `18px` | -| \--nutui-price-integer-big-size | large Size Integer partial font size | `24px` | -| \--nutui-price-decimal-big-size | large Size Size of the decimal part of the font | `18px` | -| \--nutui-price-symbol-medium-size | normal Size Symbol font size | `14px` | -| \--nutui-price-integer-medium-size | normal Size Integer partial font size | `16px` | -| \--nutui-price-decimal-medium-size | normal Size Size of the decimal part of the font | `14px` | -| \--nutui-price-symbol-small-size | small Size Symbol font size | `10px` | -| \--nutui-price-integer-small-size | small Size Integer partial font size | `12px` | -| \--nutui-price-decimal-small-size | small Size Size of the decimal part of the font | `10px` | -| \--nutui-price-line-font-size | Line-through price Font size | `10px` | -| \--nutui-price-line-color | Line through price color | `#757575` | -| \--nutui-price-symbol-padding-right | Symbol padding right | `1px` | +| \--nutui-price-primary-color | Text color when type is primary | `#ff0f23` | +| \--nutui-price-color | Text color when type is gray | `#888b94` | +| \--nutui-price-darkgray-color | Text color when type is darkgray | `#1a1a1a` | +| \--nutui-price-line-color | Underline price color | `#888b94` | +| \--nutui-price-symbol-padding-right | Right padding of symbol | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge size symbol font size | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge size integer part font size | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge size decimal part font size | `12px` | +| \--nutui-price-symbol-large-size | large size symbol font size | `12px` | +| \--nutui-price-integer-large-size | large size integer part font size | `18px` | +| \--nutui-price-decimal-large-size | large size decimal part font size | `12px` | +| \--nutui-price-symbol-normal-size | normal size symbol font size | `12px` | +| \--nutui-price-integer-normal-size | normal size integer part font size | `16px` | +| \--nutui-price-decimal-normal-size | normal size decimal part font size | `12px` | +| \--nutui-price-symbol-small-size | small size symbol font size | `12px` | +| \--nutui-price-integer-small-size | small Size integer part font size | `12px` | +| \--nutui-price-decimal-small-size | small Size decimal part font size | `12px` | diff --git a/src/packages/price/doc.md b/src/packages/price/doc.md index 5ba4f1f1b9..f19ad0b34f 100644 --- a/src/packages/price/doc.md +++ b/src/packages/price/doc.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## 示例代码 -### 基础用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### 场域分类：原子级、模块级、列表级、页面级 + +:::demo + + + +::: + ### 不保留小数 :::demo @@ -80,12 +88,13 @@ import { Price } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| color | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | -| size | 价格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否划线价 | `boolean` | `false` | ## 主题定制 @@ -96,15 +105,20 @@ import { Price } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符号字体大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整数部分字体大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小数部分字体大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符号字体大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整数部分字体大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小数部分字体大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `10px` | +| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-line-color | 划线价颜色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整数部分字体大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整数部分字体大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整数部分字体大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整数部分字体大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `10px` | -| \--nutui-price-line-font-size | 划线价字体大小 | `10px` | -| \--nutui-price-line-color | 划线价颜色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符号的右内边距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `12px` | diff --git a/src/packages/price/doc.taro.md b/src/packages/price/doc.taro.md index c80ccdccef..2ca6dc6736 100644 --- a/src/packages/price/doc.taro.md +++ b/src/packages/price/doc.taro.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react-taro' ## 示例代码 -### 基础用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react-taro' ::: +### 场域分类：原子级、模块级、列表级、页面级 + +:::demo + + + +::: + ### 不保留小数 :::demo @@ -80,12 +88,12 @@ import { Price } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| price | 价格数量 | `number` | `0` | +| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | -| size | 价格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否划线价 | `boolean` | `false` | ## 主题定制 @@ -96,15 +104,20 @@ import { Price } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符号字体大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整数部分字体大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小数部分字体大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符号字体大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整数部分字体大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小数部分字体大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `10px` | +| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-line-color | 划线价颜色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整数部分字体大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整数部分字体大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整数部分字体大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整数部分字体大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `10px` | -| \--nutui-price-line-font-size | 划线价字体大小 | `10px` | -| \--nutui-price-line-color | 划线价颜色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符号的右内边距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `12px` | diff --git a/src/packages/price/doc.zh-TW.md b/src/packages/price/doc.zh-TW.md index a795260050..6d27fe12a8 100644 --- a/src/packages/price/doc.zh-TW.md +++ b/src/packages/price/doc.zh-TW.md @@ -1,6 +1,6 @@ # Price 價格 -用來對商品價格數值的小數點前後部分應用不同樣式，還支持人民幣符號、仟位分隔符、設置小數點位數等功能。 +用來對商品價格數值的小數點前後部分應用不同樣式，還支持人民幣符號、千位分隔符、設置小數點位數等功能。 ## 引入 @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## 示例代碼 -### 基礎用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### 場域分類：原子級、模塊級、列表級、頁面級 + +:::demo + + + +::: + ### 不保留小數 :::demo @@ -26,7 +34,7 @@ import { Price } from '@nutui/nutui-react' ::: -### 有人民幣符號，無仟位分隔 +### 有人民幣符號，無千位分隔 :::demo @@ -34,7 +42,7 @@ import { Price } from '@nutui/nutui-react' ::: -### 帶人民幣符號，有仟位分隔，保留小數點後三位 +### 帶人民幣符號，有千位分隔，保留小數點後三位 :::demo @@ -80,15 +88,16 @@ import { Price } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | +| color | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 價格數量 | `number` | `0` | | symbol | 符號類型 | `string` | `¥` | | digits | 小數位位數 | `number` | `2` | -| thousands | 是否按照仟分號形式顯示 | `boolean` | `false` | +| thousands | 是否按照千分號形式顯示 | `boolean` | `false` | | position | 符號顯示在價格前或者後，`before`、`after` | `string` | `before` | -| size | 價格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 價格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否劃線價 | `boolean` | `false` | -## 主題定制 +## 主題定製 ### 樣式變量 @@ -96,15 +105,20 @@ import { Price } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符號字體大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整數部分字體大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小數部分字體大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符號字體大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整數部分字體大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小數部分字體大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符號字體大小 | `10px` | +| \--nutui-price-primary-color | type為primary時文字顏色 | `#ff0f23` | +| \--nutui-price-color | type為gray時文字顏色 | `#888b94` | +| \--nutui-price-darkgray-color | type為darkgray時文字顏色 | `#1a1a1a` | +| \--nutui-price-line-color | 劃線價顏色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整數部分字體大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整數部分字體大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整數部分字體大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符號字體大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整數部分字體大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小數部分字體大小 | `10px` | -| \--nutui-price-line-font-size | 劃線價字體大小 | `10px` | -| \--nutui-price-line-color | 劃線價顏色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小數部分字體大小 | `12px` | diff --git a/src/packages/price/index.taro.ts b/src/packages/price/index.taro.ts index 647e5ce6ad..379abb8c0a 100644 --- a/src/packages/price/index.taro.ts +++ b/src/packages/price/index.taro.ts @@ -1,4 +1,4 @@ import { Price } from './price.taro' -export type { PriceProps } from './price.taro' +export type { PriceProps, PriceSize, PriceColor } from './types' export default Price diff --git a/src/packages/price/index.ts b/src/packages/price/index.ts index c9b2829a34..3a4847c6df 100644 --- a/src/packages/price/index.ts +++ b/src/packages/price/index.ts @@ -1,4 +1,4 @@ import { Price } from './price' -export type { PriceProps } from './price' +export type { PriceProps, PriceSize, PriceColor } from './types' export default Price diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index 8d600e0312..cdfa63ba19 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -8,15 +8,45 @@ &-symbol, &-integer, &-decimal { - color: $color-primary; + color: $price-color; + font-family: 'JD'; + line-height: 1; + } + + &-darkgray { + .nut-price { + &-symbol, + &-integer, + &-decimal { + font-family: 'JD-Bold'; + color: $price-darkgray-color; + } + } + } + + &-primary { + .nut-price { + &-symbol, + &-integer, + &-decimal { + font-family: 'JD-Bold'; + color: $price-primary-color; + } + } } &-symbol { - font-size: $price-symbol-medium-size; padding-right: $price-symbol-padding-right; + &-xlarge { + font-size: $price-symbol-xlarge-size; + } &-large { - font-size: $price-symbol-big-size; + font-size: $price-symbol-large-size; + } + + &-normal { + font-size: $price-symbol-normal-size; } &-small { @@ -30,10 +60,16 @@ } &-integer { - font-size: $price-integer-medium-size; + &-xlarge { + font-size: $price-integer-xlarge-size; + } &-large { - font-size: $price-integer-big-size; + font-size: $price-integer-large-size; + } + + &-normal { + font-size: $price-integer-normal-size; } &-small { @@ -42,10 +78,16 @@ } &-decimal { - font-size: $price-decimal-medium-size; + &-xlarge { + font-size: $price-decimal-xlarge-size; + } &-large { - font-size: $price-decimal-big-size; + font-size: $price-decimal-large-size; + } + + &-normal { + font-size: $price-decimal-normal-size; } &-small { @@ -55,7 +97,5 @@ &-line { text-decoration: line-through $price-line-color; - font-size: $price-line-font-size; - color: $price-line-color; } } diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index 91484281ce..3585c83782 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -1,30 +1,25 @@ import React, { FunctionComponent } from 'react' -import { Text } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' +import { PriceProps } from './types' +import { harmony } from '@/utils/platform-taro' -export interface PriceProps extends BasicComponent { - price: number | string - symbol: string - digits: number - thousands: boolean - position: string - size: string - line: boolean -} const defaultProps = { ...ComponentDefaults, + color: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', - size: 'large', + size: 'normal', line: false, } as PriceProps export const Price: FunctionComponent> = (props) => { const { + color, price, symbol, digits, @@ -61,12 +56,11 @@ export const Price: FunctionComponent> = (props) => { if (Number(num) === 0) { num = 0 } + num = num.toString() + if (checkPoint(num)) { - num = Number(num).toFixed(digits) num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] - } else { - num = num.toString() } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') @@ -109,40 +103,59 @@ export const Price: FunctionComponent> = (props) => { ) } - - return ( - - {symbol && position === 'before' ? renderSymbol() : null} - - {formatThousands(price)} - - {digits !== 0 ? ( + const renderInner = () => { + return ( + <> + {symbol && position === 'before' ? renderSymbol() : null} - . + {formatThousands(price)} - ) : null} - - {formatDecimal(price)} - - {symbol && position === 'after' ? renderSymbol() : null} - + {digits ? ( + <> + + . + + + {formatDecimal(price)} + + + ) : null} + + {symbol && position === 'after' ? renderSymbol() : null} + + ) + } + + return ( + <> + {harmony() ? ( + + {renderInner()} + + ) : ( + + {renderInner()} + + )} + ) } diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index a6bbdabd6b..fbc68af7bb 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -1,29 +1,23 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index' +import { PriceProps } from './types' -export interface PriceProps extends BasicComponent { - price: number | string - symbol: string - digits: number - thousands: boolean - position: string - size: string - line: boolean -} const defaultProps = { ...ComponentDefaults, + color: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', - size: 'large', + size: 'normal', line: false, } as PriceProps export const Price: FunctionComponent> = (props) => { const { + color, price, symbol, digits, @@ -52,11 +46,9 @@ export const Price: FunctionComponent> = (props) => { num = 0 } if (checkPoint(num)) { - num = Number(num).toFixed(digits) + num = num.toString() num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] - } else { - num = num.toString() } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') @@ -101,9 +93,7 @@ export const Price: FunctionComponent> = (props) => { return (
@@ -115,22 +105,25 @@ export const Price: FunctionComponent> = (props) => { > {formatThousands(price)}
- {digits !== 0 ? ( -
- . -
+ {digits ? ( + <> +
+ . +
+
+ {formatDecimal(price)} +
+ ) : null} -
- {formatDecimal(price)} -
+ {symbol && position === 'after' ? renderSymbol() : null}
) diff --git a/src/packages/price/types.ts b/src/packages/price/types.ts new file mode 100644 index 0000000000..4d8eea1a7c --- /dev/null +++ b/src/packages/price/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small' +export type PriceColor = 'primary' | 'gray' | 'darkgray' +export interface PriceProps extends BasicComponent { + color: PriceColor + price: number | string + symbol: string + digits: number + thousands: boolean + position: string + size: PriceSize + line: boolean +} diff --git a/src/styles/jd-font.scss b/src/styles/jd-font.scss index bb20c0c72a..616644161b 100644 --- a/src/styles/jd-font.scss +++ b/src/styles/jd-font.scss @@ -1,8 +1,16 @@ @font-face { font-family: 'JD'; - src: url('data:font/ttf;charset=utf-8;base64,AAEAAAAMAIAAAwBAR0RFRgATAA4AAAtkAAAAFk9TLzJvL3A9AAAGLAAAAGBjbWFwAF0AbwAABowAAAA8Z2FzcP//AAMAAAtcAAAACGdseWarNFnTAAAAzAAABJhoZWFkLNdRDQAABaQAAAA2aGhlYQ47BogAAAYIAAAAJGhtdHgX6gLYAAAF3AAAACpsb2NhCEsHiQAABYQAAAAebWF4cABaAEwAAAVkAAAAIG5hbWVqIjVqAAAGyAAABFFwb3N0/8AA2wAACxwAAAA+AAoAvv5mA0gGZgADAA4AEgAeACQALgA0AEAARABIAAABESEREyE1IzczNSEVMwc1ITUhNSE1IxUzNTMVIzUjNSE1IxUhNTM1MzUhFTMVIzUhNSM1IzUhNSM1MzUhFTMVIxM1MxUDNTMVA0j9dpgBVNGPQv6sj48BVP6sAVTNRkPMRAFURP7wzYf+rIeHAVSHzQFUh4f+roWHRMzMQwZm+AAIAPiOQ2FDQ2HT6Hvncy9gpC3Nhy+PRERMx0aPNURMQ0NM+wBgYAP4SUkAAAIAWP9CBLoGPwAXADUAAAEyHgMQDgMiLgM1ND4FARQSHgQyPgQSNTQCLgQiDgQCAok2XmNFLS1FY15sXmFFLAgWIjlIZ/4NKUNfYnNfZGBzYl9CKSlCX2J0X2Rfc2JfQykFdyFelf3+tv2VXSEhXZX9pUmEjndtSyz9SqH+9raLUDIRETJQi7YBCqGiAQq2ilAyEBAyUIq2/vYAAAEANf9YApMGKQAGAAAFIxEFNSUzApPX/nkBc+uoBfD07ucAAAEAhf9YBI8GPwAfAAAFITUBPgM1NCYjIgYHBgcnNiQzMh4BFRQOAgcBIQSP+/YCVhk8RS2yfVuWJBMMuCgBErKJ6YhDZjwX/j0C4aiaAsIbUHCCN3yzY08rSmqp3IboiVrBm08Y/ewAAQCJ/z8EqgYnAB0AAAEeAhUUDgIjIiQnNx4BMzI2ECYjIgcnASE1IRUCno/xjFiWz3Kg/vNFsCquapTQ0JR2YZACIf2eA3MDmAiY+pFxz5VZrIxkXnPPASjOSo8CVr29AAACAET/WASyBikAAgANAAABEQEHNQEzETMVIxEjEQMX/ij7ArL2xsbVAaADLfzTv6AEqPt3v/53AYkAAQCF/z8EpgYnAB8AAAEyHgIUDgIjIiQnNx4BMzI2ECYjIgYHJxMhFSEDNgJ3cc+WWVmWz3Gg/vRGsCuvaJTQ0JRRjjCyYwND/XM1bgO2W5jU6NSZW6uNZF5z2QEw2UU9ZwNWvf4dLwACAGr/PwSoBicACQAfAAAlMjYQJiMiBhAWATQ3Njc2ADczBgE2MzIeARAOASAuAQKJjcnJjYzIyP5tDRtJGQFtXeRr/ttEM5P6kpL6/tr6kgrHARrHx/7mxwFULUaGiC4CcqjB/gkOkvr+2vqSkvoAAQCR/1YEgwYnAAYAAAUjASE1IRUCP9cCNvzzA/KqBhS9lgAAAwBa/zcExwZIAAkAJAAwAAAlMjYQJiMiBhAWATQ2Ny4BNTQAMzIeARUUBgceARUUBgQjIiQmARQWMzI2NTQmIyIGAo+X1NSXldXV/mCGdFNdASHKheOEXVFzh5j++pqZ/vyYAReodninqHd2qATEARTExP7sxAFOiOtLQbpqwAETftd+abpCS+yHkviRkfgDtW2bm21smpoAAAIAav9YBKgGPwALACIAAAEUFjMyNjU0JiMiBgc0PgEgHgEVFAcGBwYAByM2AQYjIi4BATXJi43JyY2MyMuS+gEm+pIMGEsZ/pNd5QcBiEE2k/qSBCGLyciMjcnJjZT6kJD6lDU+hIgu/YyoDQKrDpL6AAEAAAAOAEkACgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAABmAGYAZgBmALQAxgD6ASsBSAF8AbQBxgITAkwAAAABAAAAAgAANkPQ7F8PPPUACwgAAAAAAOJ97a8AAAAA42oZlQA1/mYHmgZmAAAACAACAAAAAAAABAAAvgAAAAACqgAAAZkAAAUUAFgDdgA1BRQAhQCJAEQAhQBqAJEAWgBqAAAAAQAABmb+ZgA5CBoAAAAAB5oAAQAAAAAAAAAAAAAAAAAAAAcABATBAZAABQAABTMEzQAAAJoFMwTNAAACzQA9Ao8AAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAVUtXTgDAACAAOf5mAAAAOQZmAZoAAAABAAAAAAQpBkIAAAAgAAEAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACAAOf//AAAAIAAw////4//UAAEAAAAAAAAAAAAdAWIAAQAAAAAAAAAyAAAAAQAAAAAAAQAfADIAAQAAAAAAAgAHAFEAAQAAAAAAAwAhAFgAAQAAAAAABAAXAHkAAQAAAAAABQAhAJAAAQAAAAAABgAWALEAAQAAAAAACAAJAMcAAQAAAAAACQAAANAAAQAAAAAAEAAPANAAAQAAAAAAEQAHAFEAAwABBAkAAABkAN8AAwABBAkAAQA+AUMAAwABBAkAAgAOAYEAAwABBAkAAwBCAY8AAwABBAkABAAuAdEAAwABBAkABQBCAf8AAwABBAkABgAsAkEAAwABBAkACAASAm0AAwABBAkACQAEAn8AAwABBAkAEAAeAoMAAwABBAkAEQAOAYEAAwABCAQAAABkAN8AAwABCAQAAQA+AUMAAwABCAQAAgAOAYEAAwABCAQABAAuAdEAAwABCAQABwBOAqEAAwABCAQAEAAeAoMAAwABCAQAEQAOAYFDb3B5cmlnaHQoYykgIEJFSUpJTkcgSklOR0RPTkcgVEVDSE5PTE9HWSBDTy4sIExUREpEWmhlbmdIZWkgVjIuMCBKRFpoZW5nSGVpIFYyLjBSZWd1bGFyMi4wMDA7VUtXTjtKRFpoZW5nSGVpVjIuMC1SZWd1bGFySkRaaGVuZ0hlaSBWMi4wIFJlZ3VsYXJWZXJzaW9uIDIuMDAwO0dseXBocyAzLjEuMSAoMzEzNSlKRFpoZW5nSGVpVjIuMC1SZWd1bGFyTmV3IFZhbHVlSkRaaGVuZ0hlaSBWMi4wAEMAbwBwAHkAcgBpAGcAaAB0ACgAYwApACAAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARABKAEQAWgBoAGUAbgBnAEgAZQBpACAAVgAyAC4AMAAgAEoARABaAGgAZQBuAGcASABlAGkAIABWADIALgAwAFIAZQBnAHUAbABhAHIAMgAuADAAMAAwADsAVQBLAFcATgA7AEoARABaAGgAZQBuAGcASABlAGkAVgAyAC4AMAAtAFIAZQBnAHUAbABhAHIASgBEAFoAaABlAG4AZwBIAGUAaQAgAFYAMgAuADAAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADAAOwBHAGwAeQBwAGgAcwAgADMALgAxAC4AMQAgACgAMwAxADMANQApAEoARABaAGgAZQBuAGcASABlAGkAVgAyAC4AMAAtAFIAZQBnAHUAbABhAHIATgBlAHcAIABWAGEAbAB1AGWWdnQ8AEoARABaAGgAZQBuAGcASABlAGkAIABWADIALgAwAEIAeQAgAEIARQBJAEoASQBOAEcAIABKAEkATgBHAEQATwBOAEcAIABUAEUAQwBIAE4ATwBMAE8ARwBZACAAQwBPAC4ALAAgAEwAVABEAAAAAAIAAAAAAAD/NABmAAAAAAAAAAAAAAAAAAAAAAAAAAAADgAAAAEAAgADABMAFAAVABYAFwAYABkAGgAbABwAAAAAAAH//wACAAEAAAAMAAAAAAAAAAIAAQADAA0AAQAA') + src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } +@font-face { + font-family: 'JD-Bold'; + src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTamiRLQAAA6cAAAAHEdERUYAKQAYAAAOfAAAAB5PUy8ye615eQAAAVgAAABgY21hcGtpMjEAAAIAAAABcmdhc3D//wADAAAOdAAAAAhnbHlmaUqojwAAA5wAAAYAaGVhZC4LY8YAAADcAAAANmhoZWER0QaTAAABFAAAACRobXR4UVAG5wAAAbgAAABIbG9jYQ1+DAwAAAN0AAAAJm1heHAAXgBMAAABOAAAACBuYW1ld67D0QAACZwAAASAcG9zdFeSjFQAAA4cAAAAVgABAAAAAgAA375yEF8PPPUACwgAAAAAAONzNLcAAAAA44/ktgBC/mYHpgb2AAAACAACAAAAAAAAAAEAAAb2/mYDMwgaAAAAAAemAAEAAAAAAAAAAAAAAAAAAAASAAEAAAASAEkACgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAABAT1ArwABQAABTMEzQAAAJoFMwTNAAACzQBmAo8AAAAAAAAAAAAAAAAAAAADCAAAAAAAABAAAAAAVUtXTgDAACD/5Qb2/mYDMwiPAZoAAAABAAAAAATNBfYAAAAgAAEERwDNAAAAAAKqAAABmQAAAc4AQgU3AFgDhQBCBTcAiwU3AIMFNwBGBTcAgwU3AGoFNwCRBTcAWgU3AGoGNQCmCBoAXAY1AKYAAAADAAAAAwAAABwAAQAAAAAAbAADAAEAAAAcAAQAUAAAABAAEAADAAAAIAAuADkAoAClUUP/5f//AAAAIAAuADAAoAClUUP/5f///+P/1v/V/2P/aq7NACwAAQAAAAAAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAMAAAAAAAAAAAAAAAAABAAFBgcICQoLDA0OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAGYAZgBmAIAAxgDaAQgBOgFaAZABzAHeAigCagKWAtQDAAAAAAoAzf5mA4MG9gADAA4AEgAeACQALgA0AEAARABIAAABIREhASE1IzczNSEVMwc1ITUhNSE1IxUzNTMVIzUjNSE1IxUhNTM1MzUhFTMVIzUhNSM1IzUhNSM1MzUhFTMVIxM1MxUDNTMVA4P9SgK2/ewBat+ZRv6WmZkBav6WAWrbTEfbRwFqSP7e24/+lo+PAWqP2wFqj4/+mI2PR9vbSP5mCJD4CEhmSkpm4fiD+HszZq4x25I0mUhIUtVKmjlIUkdHUvqoZmYEPVBQAAEAQv97AY8AxwAPAAAFMjY9ATQmKwEiBh0BFBYzAS0oOjooiSk5OSmFOCiJKTo6KYkoOAACAFj/ZATfBgoAFQAxAAABMh4DEA4DIyIuAxA+AwAUHgUyPgU0LgUiDgQCnC9SVDwmJjxVUS8uUlU8Jyc8VVL96gkeMVp1sdixdVkxHgkJHjFZdbHYsXVaMR4FABxPftT+6tV+TxwcT37VARbUfk8c/fiAga+Xm21FRW2bl6+BgICvl5tsRUVtmpeuAAEAQv97ArQF9gAGAAAFEQURJSERAar+mAFiARCFBVbhASff+YUAAAABAIv/ewS6BgoAGAAABSE1AT4BNzYmIyIGByc2JDMyHgEXBgcBIQS6+9ECYy1iCA2adWmVBvQ0ARWvkPGOAQTd/pgCcIWRAr0vn0phqntljqLOkv+a4uv+YwAAAAEAg/9mBMkF9gAdAAABFgAVFAYEIyIkJzceATMyNjU0JiMiBy8BASE1IRUC6c4BEpz+9J6k/u1J5SeYXIO4uINnVW1UAbT+FwOJA6ok/s7Jlf2TooWHSVqldXanO2xWAc36xQACAEb/ewTdBfYAAgANAAAJASUFNQEhETMVIxEhEQMG/okBd/1AAn8BXLy8/uUEWP2JAvfXBDP77/n+jwFxAAAAAQCD/2QEywX2ACAAAAEyBBIVFA4CIyIkJzceATMyNjQmIyIGBy8BEyEVIQM2AoWeAQycXJzYdqT+7UvnJ5hcg7m5g0R5LAbiXgNr/YMnXQPLl/79mXLQmFqmiYZMXKz2rjYvBIMDE/z+thsAAgBq/2QEzQX2AAwAJAAAJDI2NTQmIyIGBwYVFiU0NzY3NgEhATI2MzIEFhUUBgQjIi4CAiL0q6x5YZwcDgH+9BkfN0QBcAE0/q4HHgiYAQOWl/7+mHHPlltxoXNyo21UOh5ybltPa2R7AoX9rAKS+pOU+5JVkcYAAQCR/3sEqAX2AAYAAAUhASE1IRUCif7mAgD9IgQXhQV//JIAAwBa/2QE3wYKAAsAIwAuAAAlMjY1NCYjIgYVFBYBNDY3JjU0ADMyABUUBx4BFRQGBCMiJCYBFBYzMjY0JiMiBgKcgre3goG3t/4/cGOLASnR0wEpjGNwm/71nZz+9pwBUo5iZI2NZGONUKBycaCgcXKgASF500mFtL4BDf7zvrSFSdN5jvKNjfIDcVh9fbB7fAAAAAIAav95BNIGCgANACUAAAEUFjMyNjc2NS4BIyIGABA2JDMyHgIHBgcGBwYBITYANwYjIiQBda16YZkeDQGseHqt/vWXAQOYddWYVAcHEhs7gf7N/s0MAQZCDh+Y/v0D7HOia1YyJHKgov77ASb6kVuZ1nVOM2do5v3kFgHLdQKSAAAAAAEApv97BYsF4wAWAAABFSEVIRUhESERITUhNSE1IQEhCQEhAQVc/kIBvv5C/vX+QgG+/kIBRv6LATMBQAE9ATX+iQNe/IX8/poBZvyF/AKF/dkCJ/17AAACAFz/HQemBicAAwAlAAABFSE1AxckNzYTNSERFDMhMjc2EycGBwYrASI1ESE1IRUhFQIHBgbT+mjfaQFZmJwMAUbRAT1rOTsVsgYdFS/hTAIn+RcCBAx1ewYnvb35mqR72fIBhiX9Ddc/RAFWOfw5L1ICyr29Jf7JxLYAAQCm/3sFiwXjABYAAAEVIRUhFSERIREhNSE1ITUhASEJASEBBVz+QgG+/kL+9f5CAb7+QgFG/osBMwFAAT0BNf6JA178hfz+mgFm/IX8AoX92QIn/XsAAAAAGwFKAAEAAAAAAAAAMgBmAAEAAAAAAAEACgC3AAEAAAAAAAIABwDSAAEAAAAAAAMAHQEWAAEAAAAAAAQABAFKAAEAAAAAAAUAIQGTAAEAAAAAAAYAEgHbAAEAAAAAAAkAAAH0AAEAAAAAABAABQIJAAEAAAAAABEABAIZAAMAAQQJAAAAZAAAAAMAAQQJAAEAHACZAAMAAQQJAAIADgDCAAMAAQQJAAMAOgDaAAMAAQQJAAQAFAE0AAMAAQQJAAUAQgFPAAMAAQQJAAYAJAG1AAMAAQQJAAkABAHuAAMAAQQJABAAEgH1AAMAAQQJABEACAIPAAMAAQgEAAAAZAIeAAMAAQgEAAEAHAKEAAMAAQgEAAIADgKiAAMAAQgEAAQAFAKyAAMAAQgEAAcATgLIAAMAAQgEABAAEgMYAAMAAQgEABEACAMsAEMAbwBwAHkAcgBpAGcAaAB0ACgAYwApACAAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARAAAQ29weXJpZ2h0KGMpICBCRUlKSU5HIEpJTkdET05HIFRFQ0hOT0xPR1kgQ08uLCBMVEQATqxOHGtjntEAIABWADIALgAxACAAQgBvAGwAZAAAIFYyLjEgQm9sZAAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAMgAuADAAMAAwADsAVQBLAFcATgA7AEoARABaAGgAZQBuAGcASABlAGkAMgAuADEALQBCAG8AbABkAAAyLjAwMDtVS1dOO0pEWmhlbmdIZWkyLjEtQm9sZABOrE4ca2Oe0QBWADIALgAxfJdPUwAAVjIuMQAAVgBlAHIAcwBpAG8AbgAgADIALgAwADAAMAA7AEcAbAB5AHAAaABzACAAMwAuADEALgAxACAAKAAzADEAMwA1ACkAAFZlcnNpb24gMi4wMDA7R2x5cGhzIDMuMS4xICgzMTM1KQAASgBEAFoAaABlAG4AZwBIAGUAaQAyAC4AMQAtAEIAbwBsAGQAAEpEWmhlbmdIZWkyLjEtQm9sZACWdnQ8AAAATqxOHGtjntEAIABWADIALgAxAAAgVjIuMQAAQgBvAGwAZAAAQm9sZAAAQwBvAHAAeQByAGkAZwBoAHQAKABjACkAIAAgAEIARQBJAEoASQBOAEcAIABKAEkATgBHAEQATwBOAEcAIABUAEUAQwBIAE4ATwBMAE8ARwBZACAAQwBPAC4ALAAgAEwAVABEAABOrE4ca2Oe0QAgAFYAMgAuADEAIABCAG8AbABkAAAAUgBlAGcAdQBsAGEAcgAATqxOHGtjntEAVgAyAC4AMXyXT1MAAABCAHkAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARAAATqxOHGtjntEAIABWADIALgAxAAAAQgBvAGwAZAAAAAIAAAAAAAD/NABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgAAAAEAAgADABEAEwAUABUAFgAXABgAGQAaABsAHACWAQIBAwd1bmk1MTQzB3VuaUZGRTUAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADABEAAQAEAAAAAgAAAAAAAAABAAAAAOKfK0YAAAAA43M0twAAAADjj+S2') + format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index cb41db5bed..2050922e65 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -773,32 +773,53 @@ $countdown-number-primary-border-color: var( $color-primary ) !default; -//large price（✅） +//price（✅） +$price-primary-color: var(--nutui-price-color, $color-primary) !default; +$price-color: var(--nutui-price-color, var(--nutui-color-text-help)) !default; +$price-darkgray-color: var( + --nutui-price-darkgray-color, + var(--nutui-gray-7) +) !default; +$price-line-color: var( + --nutui-price-line-color, + var(--nutui-color-text-help) +) !default; $price-symbol-padding-right: var( --nutui-price-symbol-padding-right, - 1px + 0px +) !default; + +//xlarge price（✅） +$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default; +$price-integer-xlarge-size: var( + --nutui-price-integer-xlarge-size, + 24px +) !default; +$price-decimal-xlarge-size: var( + --nutui-price-decimal-xlarge-size, + 12px ) !default; -$price-symbol-big-size: var(--nutui-price-symbol-big-size, 18px) !default; -$price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default; -$price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default; + +//large price（✅） +$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default; +$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default; +$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default; //normal price（✅） -$price-line-color: var(--nutui-price-line-color, $color-border) !default; -$price-line-font-size: var(--nutui-price-line-font-size, 12px) !default; -$price-symbol-medium-size: var(--nutui-price-symbol-medium-size, 14px) !default; -$price-integer-medium-size: var( - --nutui-price-integer-medium-size, +$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default; +$price-integer-normal-size: var( + --nutui-price-integer-normal-size, 16px ) !default; -$price-decimal-medium-size: var( - --nutui-price-decimal-medium-size, - 14px +$price-decimal-normal-size: var( + --nutui-price-decimal-normal-size, + 12px ) !default; // small price（✅） -$price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; +$price-symbol-small-size: var(--nutui-price-symbol-small-size, 12px) !default; $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; -$price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default; +$price-decimal-small-size: var(--nutui-price-decimal-small-size, 12px) !default; //avatar（✅） $avatar-square: var(--nutui-avatar-square, 5px) !default;