@anker-in/headless-ui 0.0.27-alpha.22 → 0.0.27-alpha.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/MemberEquity/index.js +8 -8
- package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/types.d.ts +21 -19
- package/dist/cjs/biz-components/MemberEquity/types.js +1 -1
- package/dist/cjs/biz-components/MemberEquity/types.js.map +1 -1
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/types.d.ts +10 -12
- package/dist/cjs/biz-components/Slogan/types.js +1 -1
- package/dist/cjs/biz-components/Slogan/types.js.map +1 -1
- package/dist/cjs/stories/MemberEquity.stories.js +3 -3
- package/dist/cjs/stories/MemberEquity.stories.js.map +2 -2
- package/dist/cjs/stories/slogan.stories.js +1 -1
- package/dist/cjs/stories/slogan.stories.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +8 -8
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/types.d.ts +21 -19
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/types.d.ts +10 -12
- package/dist/esm/stories/MemberEquity.stories.js +3 -3
- package/dist/esm/stories/MemberEquity.stories.js.map +2 -2
- package/dist/esm/stories/slogan.stories.js +2 -2
- package/dist/esm/stories/slogan.stories.js.map +2 -2
- package/package.json +1 -1
- package/style.css +2 -2
- package/tailwind.config.ts +2 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
2
|
-
${
|
|
1
|
+
"use strict";"use client";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var y=(p,e)=>{for(var o in e)s(p,o,{get:e[o],enumerable:!0})},f=(p,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of b(e))!k.call(p,a)&&a!==o&&s(p,a,{get:()=>e[a],enumerable:!(l=u(e,a))||l.enumerable});return p};var w=p=>f(s({},"__esModule",{value:!0}),p);var N={};y(N,{default:()=>h});module.exports=w(N);var t=require("react/jsx-runtime"),B=require("react"),x=require("../../components/index.js"),r=require("../../shared/Styles.js");const v=({data:p,className:e=""})=>{const{title:o,description:l,backgroundImage:a,primaryButton:n,secondaryButton:i,theme:m,shape:d}=p,g=()=>{},c=()=>{};return(0,t.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
|
+
${m==="dark"?"aiui-dark":""}
|
|
3
3
|
relative w-full overflow-hidden bg-[#242426]
|
|
4
4
|
${d==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
|
|
5
|
-
${
|
|
5
|
+
${e}
|
|
6
6
|
`,children:[(0,t.jsx)("div",{className:"absolute inset-0 size-full",style:{backgroundImage:`
|
|
7
7
|
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
8
|
-
url(${
|
|
8
|
+
url(${a})
|
|
9
9
|
`,backgroundSize:"cover",backgroundPosition:"center"}}),(0,t.jsx)("div",{className:`
|
|
10
10
|
xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
|
|
11
11
|
desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]
|
|
23
23
|
max-w-[280px]
|
|
24
24
|
text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white
|
|
25
|
-
`,children:
|
|
25
|
+
`,children:o}),(0,t.jsx)("p",{className:`
|
|
26
26
|
member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg
|
|
27
27
|
lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
28
28
|
max-w-[260px]
|
|
29
29
|
text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
|
|
30
|
-
`,children:
|
|
30
|
+
`,children:l})]}),(0,t.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,t.jsx)(x.Button,{variant:"primary",onClick:g,className:`
|
|
31
31
|
member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
|
|
32
32
|
laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
|
|
33
33
|
py-2 text-xs text-white hover:bg-white hover:text-black
|
|
34
34
|
${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
35
|
-
`,children:
|
|
35
|
+
`,children:n.text}),(0,t.jsx)(x.Button,{variant:"secondary",onClick:c,className:`
|
|
36
36
|
member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
|
|
37
37
|
laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
|
|
38
38
|
desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
|
|
39
39
|
${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
40
|
-
`,children:
|
|
40
|
+
`,children:i.text})]})]})})]})};var h=(0,r.withStyles)(v);
|
|
41
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n title
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, primaryButton, secondaryButton, theme, shape } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <div\n className=\"absolute inset-0 size-full\"\n style={{\n backgroundImage: `\n radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),\n url(${backgroundImage})\n `,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div\n className={`\n xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n relative \n mx-auto\n flex\n aspect-[343/200]\n w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <h2\n className={`\n member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl\n lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]\n max-w-[280px]\n text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white\n `}\n >\n {title}\n </h2>\n <p\n className={`\n member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg\n lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]\n max-w-[260px]\n text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white\n `}\n >\n {description}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={`\n member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]\n laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4\n py-2 text-xs text-white hover:bg-white hover:text-black\n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {primaryButton.text}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={`\n member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5\n laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]\n desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs\n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {secondaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0BM,IAAAI,EAAA,6BAzBNC,EAAkB,iBAClBC,EAAuB,qCACvBC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAAIR,EACxFS,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPH,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGP,CAAS;AAAA,QAGb,oBAAC,OACC,UAAU,6BACV,MAAO,CACL,gBAAiB;AAAA;AAAA,kBAETG,CAAe;AAAA,YAEvB,eAAgB,QAChB,mBAAoB,QACtB,EACF,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,MACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAF,EACH,KACA,OAAC,KACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAC,EACH,GACF,KAGA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,UACR,QAASM,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,KACA,OAAC,UACC,QAAQ,YACR,QAASK,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWM,CAAY",
|
|
6
|
+
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
7
7
|
}
|
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js';
|
|
2
2
|
export interface MemberEquityProps extends ComponentCommonProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
data: {
|
|
4
|
+
/** 标题 */
|
|
5
|
+
title: string;
|
|
6
|
+
/** 描述文本 */
|
|
7
|
+
description: string;
|
|
8
|
+
/** 背景图片 URL */
|
|
9
|
+
backgroundImage: string;
|
|
10
|
+
/** 主按钮配置 */
|
|
11
|
+
primaryButton: {
|
|
12
|
+
text: string;
|
|
13
|
+
href: string;
|
|
14
|
+
};
|
|
15
|
+
/** 副按钮配置 */
|
|
16
|
+
secondaryButton: {
|
|
17
|
+
text: string;
|
|
18
|
+
href: string;
|
|
19
|
+
};
|
|
20
|
+
/** 形状 */
|
|
21
|
+
shape?: Shape;
|
|
22
|
+
/** 主题 */
|
|
23
|
+
theme?: Theme;
|
|
13
24
|
};
|
|
14
|
-
/** 副按钮配置 */
|
|
15
|
-
secondaryButton: {
|
|
16
|
-
text: string;
|
|
17
|
-
href: string;
|
|
18
|
-
};
|
|
19
|
-
/** 形状 */
|
|
20
|
-
shape?: Shape;
|
|
21
|
-
/** 主题 */
|
|
22
|
-
theme?: Theme;
|
|
23
25
|
/** 自定义类名 */
|
|
24
26
|
className?: string;
|
|
25
27
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(t,
|
|
1
|
+
"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(e,t,s,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of i(t))!m.call(e,r)&&r!==s&&o(e,r,{get:()=>t[r],enumerable:!(n=p(t,r))||n.enumerable});return e};var g=e=>a(o({},"__esModule",{value:!0}),e);var h={};module.exports=g(h);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n /** \u6807\u9898 */\n
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n data: {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247 URL */\n backgroundImage: string\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton: {\n text: string\n href: string\n }\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton: {\n text: string\n href: string\n }\n /** \u5F62\u72B6 */\n shape?: Shape\n /** \u4E3B\u9898 */\n theme?: Theme\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var c=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},n=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of w(e))!v.call(t,p)&&p!==l&&s(t,p,{get:()=>e[p],enumerable:!(o=y(e,p))||o.enumerable});return t};var k=(t,e,l)=>(l=t!=null?c(u(t)):{},n(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),N=t=>n(s({},"__esModule",{value:!0}),t);var h={};D(h,{default:()=>b});module.exports=N(h);var a=require("react/jsx-runtime"),x=k(require("react")),f=require("../../helpers/utils.js"),i=require("../../components/index.js"),d=require("../../shared/Styles.js");const r=x.default.forwardRef(({data:t,className:e},l)=>{const{title:o,features:p}=t;return(0,a.jsxs)("div",{ref:l,className:(0,f.cn)("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",e),children:[(0,a.jsx)(i.Heading,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:o}),p&&p.length>0&&(0,a.jsx)("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:p.slice(0,3).map((g,m)=>(0,a.jsxs)(x.default.Fragment,{children:[m>0&&(0,a.jsx)("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)(i.Text,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:g.title})})]},m))})]})});r.displayName="Slogan";var b=(0,d.withStyles)(r);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className }, ref) => {\n const { title, features } = data\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center',\n 'tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4',\n 'tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8',\n className\n )}\n >\n <Heading\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className=\"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]\"\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"flex w-full max-w-[423px] flex-row items-center gap-3\">\n {features.slice(0, 3).map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"w-px self-stretch bg-[#D9D9D9]\" />}\n <div className=\"flex-1\">\n <Text\n align=\"left\"\n className=\"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAlBNC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAAIJ,EAC5B,SACE,QAAC,OACC,IAAKE,EACL,aAAW,MACT,sHACA,8DACA,sEACAD,CACF,EAEA,oBAAC,WACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAE,EACH,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,UAAU,wDACZ,SAAAA,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACC,EAASC,OAClC,QAAC,EAAAP,QAAM,SAAN,CACE,UAAAO,EAAQ,MAAK,OAAC,OAAI,UAAU,iCAAiC,KAC9D,OAAC,OAAI,UAAU,SACb,mBAAC,QACC,MAAM,OACN,UAAU,kJACV,KAAMD,EAAQ,MAChB,EACF,IARmBC,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDR,EAAO,YAAc,SAErB,IAAOP,KAAQ,cAAWO,CAAM",
|
|
6
|
+
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "data", "className", "ref", "title", "features", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -3,20 +3,18 @@ export interface Feature {
|
|
|
3
3
|
* 特性标题
|
|
4
4
|
*/
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
* 特性描述
|
|
8
|
-
*/
|
|
9
|
-
description: string;
|
|
10
6
|
}
|
|
11
7
|
export interface SloganProps {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
data: {
|
|
9
|
+
/**
|
|
10
|
+
* 主标题
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* 特性列表，最多支持3个
|
|
15
|
+
*/
|
|
16
|
+
features?: Feature[];
|
|
17
|
+
};
|
|
20
18
|
/**
|
|
21
19
|
* 自定义类名
|
|
22
20
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var o=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!l.call(t,r)&&r!==s&&i(t,r,{get:()=>e[r],enumerable:!(a=n(e,r))||a.enumerable});return t};var c=t=>o(i({},"__esModule",{value:!0}),t);var f={};module.exports=c(f);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/types.ts"],
|
|
4
|
-
"sourcesContent": ["export interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n
|
|
4
|
+
"sourcesContent": ["export interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface SloganProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var l=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},n=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!y.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var b=(e,t,o)=>(o=e!=null?p(d(e)):{},n(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>n(a({},"__esModule",{value:!0}),e);var M={};l(M,{CustomButtons:()=>B,CustomStyles:()=>q,Default:()=>c,Round:()=>x,default:()=>f});module.exports=h(M);var i=b(require("../biz-components/MemberEquity/index.js"));const g={title:"Biz-Components/MemberEquity",component:i.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002
|
|
3
3
|
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
7
7
|
.member-equity-description
|
|
8
8
|
.member-equity-button-primary
|
|
9
9
|
.member-equity-button-secondary
|
|
10
|
-
`}}},tags:["autodocs"]};var f=
|
|
10
|
+
`}}},tags:["autodocs"]};var f=g;const c={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"}}},x={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"rounded"}}},B={args:{data:{...c.args?.data,title:"Premium Experience",description:"Join our community to get early access to new products and exclusive member benefits.",backgroundImage:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",primaryButton:{text:"Join Now",href:"/join"},secondaryButton:{text:"Explore Benefits",href:"/benefits"}}}},q={args:{data:{title:"Become a Member Today and opportunities",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"},style:`
|
|
11
11
|
.member-equity-title {
|
|
12
12
|
background: linear-gradient(
|
|
13
13
|
90deg,
|
|
@@ -27,5 +27,5 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
27
27
|
.member-equity-button-primary {
|
|
28
28
|
color: green;
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
`}};
|
|
31
31
|
//# sourceMappingURL=MemberEquity.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/MemberEquity.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n title: 'Become a Member Today',\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,iBAAAC,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GACA,IAAAQ,EAAyB,sDAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIR,MAAML,EAAiB,CAC5B,KAAM,CACJ,MAAO,wBACP,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n },\n}\n\n// \u5706\u89D2\u98CE\u683C\nexport const Round: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'rounded',\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6309\u94AE\nexport const CustomButtons: Story = {\n args: {\n data: {\n ...Default.args?.data,\n title: 'Premium Experience',\n description: 'Join our community to get early access to new products and exclusive member benefits.',\n backgroundImage: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n primaryButton: {\n text: 'Join Now',\n href: '/join',\n },\n secondaryButton: {\n text: 'Explore Benefits',\n href: '/benefits',\n },\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\nexport const CustomStyles: Story = {\n args: {\n data: {\n title: 'Become a Member Today and opportunities',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n style: `\n .member-equity-title {\n background: linear-gradient(\n 90deg,\n #FFD700, /* \u91D1\u8272 (Gold) */\n #FFC000, /* \u4EAE\u91D1\u8272 (Light Gold) */\n #FFA500, /* \u6A59\u8272 (Orange) */\n #FF8C00, /* \u6DF1\u6A59\u8272 (Dark Orange) */\n #FF6B00 /* \u6A59\u7EA2\u8272 (Red-Orange) */\n );\n -webkit-background-clip: text; /* \u517C\u5BB9 WebKit \u6D4F\u89C8\u5668 */\n background-clip: text;\n color: transparent; /* \u9690\u85CF\u539F\u59CB\u6587\u5B57\u989C\u8272 */\n }\n .member-equity-description {\n color: blue;\n }\n .member-equity-button-primary {\n color: green;\n }\n `,\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,iBAAAC,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GACA,IAAAQ,EAAyB,sDAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIR,MAAML,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,CACF,CACF,EAGaC,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,SACT,CACF,CACF,EAGaH,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGE,EAAQ,MAAM,KACjB,MAAO,qBACP,YAAa,wFACb,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,mBACN,KAAM,WACR,CACF,CACF,CACF,EAGaD,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,YACE,sGACF,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,EACA,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAqBT,CACF",
|
|
6
6
|
"names": ["MemberEquity_stories_exports", "__export", "CustomButtons", "CustomStyles", "Default", "Round", "MemberEquity_stories_default", "__toCommonJS", "import_MemberEquity", "meta", "MemberEquity"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var a=Object.defineProperty;var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var f=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},b=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of g(e))!d.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=s(e,o))||i.enumerable});return t};var p=t=>b(a({},"__esModule",{value:!0}),t);var x={};f(x,{CustomClassName:()=>S,CustomStyle:()=>M,Default:()=>c,SingleFeature:()=>h,TitleOnly:()=>u,TwoFeatures:()=>C,default:()=>m});module.exports=p(x);var n=require("react/jsx-runtime"),N=require("react"),l=require("../biz-components/index.js");const y={title:"Biz Components/Slogan",component:l.Slogan,parameters:{layout:"fullscreen"},tags:["autodocs"]};var m=y;const c={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]}}},u={args:{data:{title:"The World's No.1 Mobile Charging Brand*"}}},h={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"}]}}},C={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"}]}}},S={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100"}},M=()=>(0,n.jsx)(l.Slogan,{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100",style:`
|
|
2
2
|
|
|
3
3
|
.slogan-title{
|
|
4
4
|
background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/slogan.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n },\n}\n\nexport const TitleOnly: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n },\n },\n}\n\nexport const SingleFeature: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n ],\n },\n },\n}\n\nexport const TwoFeatures: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n ],\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n className: 'bg-gray-100',\n },\n}\n\nexport const CustomStyle = () => {\n return (\n <Slogan\n data={{\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n }}\n className=\"bg-gray-100\"\n style={`\n \n .slogan-title{\n background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: fadeIn 1s ease-in forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .slogan-feature-text {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 10px;\n animation: fadeIn 1s ease-in forwards;\n }\n `}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GA+FI,IAAAU,EAAA,6BA/FJC,EAAkB,iBAElBC,EAAuB,sCAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAW,SACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,CACF,CACF,EAEaE,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,yCACT,CACF,CACF,EAEaD,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,CACF,CACF,CACF,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,CACF,CACF,CACF,CACF,EAEaL,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,OAEvB,OAAC,UACC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
|
|
6
6
|
"names": ["slogan_stories_exports", "__export", "CustomClassName", "CustomStyle", "Default", "SingleFeature", "TitleOnly", "TwoFeatures", "slogan_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_biz_components", "meta"]
|
|
7
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{Button as a}from"../../components/index.js";import{withStyles as
|
|
2
|
-
${
|
|
1
|
+
"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{Button as a}from"../../components/index.js";import{withStyles as c}from"../../shared/Styles.js";const u=({data:o,className:l=""})=>{const{title:d,description:s,backgroundImage:x,primaryButton:r,secondaryButton:n,theme:i,shape:p}=o,m=()=>{},g=()=>{};return e("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
|
+
${i==="dark"?"aiui-dark":""}
|
|
3
3
|
relative w-full overflow-hidden bg-[#242426]
|
|
4
4
|
${p==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
|
|
5
|
-
${
|
|
5
|
+
${l}
|
|
6
6
|
`,children:[t("div",{className:"absolute inset-0 size-full",style:{backgroundImage:`
|
|
7
7
|
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
8
|
-
url(${
|
|
8
|
+
url(${x})
|
|
9
9
|
`,backgroundSize:"cover",backgroundPosition:"center"}}),t("div",{className:`
|
|
10
10
|
xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
|
|
11
11
|
desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]
|
|
23
23
|
max-w-[280px]
|
|
24
24
|
text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white
|
|
25
|
-
`,children:
|
|
25
|
+
`,children:d}),t("p",{className:`
|
|
26
26
|
member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg
|
|
27
27
|
lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
28
28
|
max-w-[260px]
|
|
29
29
|
text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
|
|
30
|
-
`,children:
|
|
30
|
+
`,children:s})]}),e("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[t(a,{variant:"primary",onClick:m,className:`
|
|
31
31
|
member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
|
|
32
32
|
laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
|
|
33
33
|
py-2 text-xs text-white hover:bg-white hover:text-black
|
|
34
34
|
${p==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
35
|
-
`,children:
|
|
35
|
+
`,children:r.text}),t(a,{variant:"secondary",onClick:g,className:`
|
|
36
36
|
member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
|
|
37
37
|
laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
|
|
38
38
|
desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
|
|
39
39
|
${p==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
40
|
-
`,children:
|
|
40
|
+
`,children:n.text})]})]})})]})};var w=c(u);export{w as default};
|
|
41
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n title
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Button", "withStyles", "MemberEquity", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, primaryButton, secondaryButton, theme, shape } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <div\n className=\"absolute inset-0 size-full\"\n style={{\n backgroundImage: `\n radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),\n url(${backgroundImage})\n `,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div\n className={`\n xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n relative \n mx-auto\n flex\n aspect-[343/200]\n w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <h2\n className={`\n member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl\n lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]\n max-w-[280px]\n text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white\n `}\n >\n {title}\n </h2>\n <p\n className={`\n member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg\n lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]\n max-w-[260px]\n text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white\n `}\n >\n {description}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={`\n member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]\n laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4\n py-2 text-xs text-white hover:bg-white hover:text-black\n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {primaryButton.text}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={`\n member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5\n laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]\n desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs\n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {secondaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "aA0BM,cAAAA,EA4BI,QAAAC,MA5BJ,oBAzBN,MAAkB,QAClB,OAAS,UAAAC,MAAc,4BACvB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAAIR,EACxFS,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,OACEd,EAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPW,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGP,CAAS;AAAA,QAGb,UAAAN,EAAC,OACC,UAAU,6BACV,MAAO,CACL,gBAAiB;AAAA;AAAA,kBAETS,CAAe;AAAA,YAEvB,eAAgB,QAChB,mBAAoB,QACtB,EACF,EACAT,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAAC,MACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAO,EACH,EACAP,EAAC,KACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAQ,EACH,GACF,EAGAP,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,QAAQ,UACR,QAASY,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,EACAV,EAACE,EAAA,CACC,QAAQ,YACR,QAASa,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOK,EAAQb,EAAWC,CAAY",
|
|
6
|
+
"names": ["jsx", "jsxs", "Button", "withStyles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js';
|
|
2
2
|
export interface MemberEquityProps extends ComponentCommonProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
data: {
|
|
4
|
+
/** 标题 */
|
|
5
|
+
title: string;
|
|
6
|
+
/** 描述文本 */
|
|
7
|
+
description: string;
|
|
8
|
+
/** 背景图片 URL */
|
|
9
|
+
backgroundImage: string;
|
|
10
|
+
/** 主按钮配置 */
|
|
11
|
+
primaryButton: {
|
|
12
|
+
text: string;
|
|
13
|
+
href: string;
|
|
14
|
+
};
|
|
15
|
+
/** 副按钮配置 */
|
|
16
|
+
secondaryButton: {
|
|
17
|
+
text: string;
|
|
18
|
+
href: string;
|
|
19
|
+
};
|
|
20
|
+
/** 形状 */
|
|
21
|
+
shape?: Shape;
|
|
22
|
+
/** 主题 */
|
|
23
|
+
theme?: Theme;
|
|
13
24
|
};
|
|
14
|
-
/** 副按钮配置 */
|
|
15
|
-
secondaryButton: {
|
|
16
|
-
text: string;
|
|
17
|
-
href: string;
|
|
18
|
-
};
|
|
19
|
-
/** 形状 */
|
|
20
|
-
shape?: Shape;
|
|
21
|
-
/** 主题 */
|
|
22
|
-
theme?: Theme;
|
|
23
25
|
/** 自定义类名 */
|
|
24
26
|
className?: string;
|
|
25
27
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as f,Text as d}from"../../components/index.js";import{withStyles as g}from"../../shared/Styles.js";const a=p.forwardRef(({data:s,className:i},x)=>{const{title:m,features:e}=s;return o("div",{ref:x,className:r("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",i),children:[t(f,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:m}),e&&e.length>0&&t("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:e.slice(0,3).map((n,l)=>o(p.Fragment,{children:[l>0&&t("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),t("div",{className:"flex-1",children:t(d,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:n.title})})]},l))})]})});a.displayName="Slogan";var v=g(a);export{v as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "withStyles", "Slogan", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className }, ref) => {\n const { title, features } = data\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center',\n 'tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4',\n 'tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8',\n className\n )}\n >\n <Heading\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className=\"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]\"\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"flex w-full max-w-[423px] flex-row items-center gap-3\">\n {features.slice(0, 3).map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"w-px self-stretch bg-[#D9D9D9]\" />}\n <div className=\"flex-1\">\n <Text\n align=\"left\"\n className=\"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "aAmBM,cAAAA,EAYM,QAAAC,MAZN,oBAlBN,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAASL,EAAM,WAAwC,CAAC,CAAE,KAAAM,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAAIJ,EAC5B,OACEP,EAAC,OACC,IAAKS,EACL,UAAWP,EACT,sHACA,8DACA,sEACAM,CACF,EAEA,UAAAT,EAACI,EAAA,CACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAO,EACH,EACCC,GAAYA,EAAS,OAAS,GAC7BZ,EAAC,OAAI,UAAU,wDACZ,SAAAY,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACC,EAASC,IAClCb,EAACC,EAAM,SAAN,CACE,UAAAY,EAAQ,GAAKd,EAAC,OAAI,UAAU,iCAAiC,EAC9DA,EAAC,OAAI,UAAU,SACb,SAAAA,EAACK,EAAA,CACC,MAAM,OACN,UAAU,kJACV,KAAMQ,EAAQ,MAChB,EACF,IARmBC,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDP,EAAO,YAAc,SAErB,IAAOQ,EAAQT,EAAWC,CAAM",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "withStyles", "Slogan", "data", "className", "ref", "title", "features", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -3,20 +3,18 @@ export interface Feature {
|
|
|
3
3
|
* 特性标题
|
|
4
4
|
*/
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
* 特性描述
|
|
8
|
-
*/
|
|
9
|
-
description: string;
|
|
10
6
|
}
|
|
11
7
|
export interface SloganProps {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
data: {
|
|
9
|
+
/**
|
|
10
|
+
* 主标题
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* 特性列表，最多支持3个
|
|
15
|
+
*/
|
|
16
|
+
features?: Feature[];
|
|
17
|
+
};
|
|
20
18
|
/**
|
|
21
19
|
* 自定义类名
|
|
22
20
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"../biz-components/MemberEquity/index.js";const t={title:"Biz-Components/MemberEquity",component:e,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002
|
|
3
3
|
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
7
7
|
.member-equity-description
|
|
8
8
|
.member-equity-button-primary
|
|
9
9
|
.member-equity-button-secondary
|
|
10
|
-
`}}},tags:["autodocs"]};var
|
|
10
|
+
`}}},tags:["autodocs"]};var a=t;const o={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"}}},s={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"rounded"}}},n={args:{data:{...o.args?.data,title:"Premium Experience",description:"Join our community to get early access to new products and exclusive member benefits.",backgroundImage:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",primaryButton:{text:"Join Now",href:"/join"},secondaryButton:{text:"Explore Benefits",href:"/benefits"}}}},i={args:{data:{title:"Become a Member Today and opportunities",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"},style:`
|
|
11
11
|
.member-equity-title {
|
|
12
12
|
background: linear-gradient(
|
|
13
13
|
90deg,
|
|
@@ -27,5 +27,5 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
27
27
|
.member-equity-button-primary {
|
|
28
28
|
color: green;
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
`}};export{n as CustomButtons,i as CustomStyles,o as Default,s as Round,a as default};
|
|
31
31
|
//# sourceMappingURL=MemberEquity.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/MemberEquity.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n title: 'Become a Member Today',\n
|
|
5
|
-
"mappings": "AACA,OAAOA,MAAkB,0CAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,MAAO,wBACP,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n },\n}\n\n// \u5706\u89D2\u98CE\u683C\nexport const Round: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'rounded',\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6309\u94AE\nexport const CustomButtons: Story = {\n args: {\n data: {\n ...Default.args?.data,\n title: 'Premium Experience',\n description: 'Join our community to get early access to new products and exclusive member benefits.',\n backgroundImage: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n primaryButton: {\n text: 'Join Now',\n href: '/join',\n },\n secondaryButton: {\n text: 'Explore Benefits',\n href: '/benefits',\n },\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\nexport const CustomStyles: Story = {\n args: {\n data: {\n title: 'Become a Member Today and opportunities',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n style: `\n .member-equity-title {\n background: linear-gradient(\n 90deg,\n #FFD700, /* \u91D1\u8272 (Gold) */\n #FFC000, /* \u4EAE\u91D1\u8272 (Light Gold) */\n #FFA500, /* \u6A59\u8272 (Orange) */\n #FF8C00, /* \u6DF1\u6A59\u8272 (Dark Orange) */\n #FF6B00 /* \u6A59\u7EA2\u8272 (Red-Orange) */\n );\n -webkit-background-clip: text; /* \u517C\u5BB9 WebKit \u6D4F\u89C8\u5668 */\n background-clip: text;\n color: transparent; /* \u9690\u85CF\u539F\u59CB\u6587\u5B57\u989C\u8272 */\n }\n .member-equity-description {\n color: blue;\n }\n .member-equity-button-primary {\n color: green;\n }\n `,\n },\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAOA,MAAkB,0CAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,CACF,CACF,EAGaC,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,SACT,CACF,CACF,EAGaC,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGF,EAAQ,MAAM,KACjB,MAAO,qBACP,YAAa,wFACb,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,mBACN,KAAM,WACR,CACF,CACF,CACF,EAGaG,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,YACE,sGACF,gBAAiB,+DACjB,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,EACA,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAqBT,CACF",
|
|
6
6
|
"names": ["MemberEquity", "meta", "MemberEquity_stories_default", "Default", "Round", "CustomButtons", "CustomStyles"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{Slogan as e}from"../biz-components/index.js";const t={title:"Biz Components/Slogan",component:e,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=t;const n={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]}}},s={args:{data:{title:"The World's No.1 Mobile Charging Brand*"}}},g={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"}]}}},d={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"}]}}},f={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100"}},b=()=>o(e,{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100",style:`
|
|
2
2
|
|
|
3
3
|
.slogan-title{
|
|
4
4
|
background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
|
|
@@ -22,5 +22,5 @@ import{jsx as r}from"react/jsx-runtime";import"react";import{Slogan as e}from"..
|
|
|
22
22
|
border-radius: 10px;
|
|
23
23
|
animation: fadeIn 1s ease-in forwards;
|
|
24
24
|
}
|
|
25
|
-
`});export{
|
|
25
|
+
`});export{f as CustomClassName,b as CustomStyle,n as Default,g as SingleFeature,s as TitleOnly,d as TwoFeatures,i as default};
|
|
26
26
|
//# sourceMappingURL=slogan.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/slogan.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n },\n}\n\nexport const TitleOnly: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n },\n },\n}\n\nexport const SingleFeature: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n ],\n },\n },\n}\n\nexport const TwoFeatures: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n ],\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n className: 'bg-gray-100',\n },\n}\n\nexport const CustomStyle = () => {\n return (\n <Slogan\n data={{\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n }}\n className=\"bg-gray-100\"\n style={`\n \n .slogan-title{\n background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: fadeIn 1s ease-in forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .slogan-feature-text {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 10px;\n animation: fadeIn 1s ease-in forwards;\n }\n `}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "AA+FI,cAAAA,MAAA,oBA/FJ,MAAkB,QAElB,OAAS,UAAAC,MAAc,6BAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,yCACT,CACF,CACF,EAEaC,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,CACF,CACF,CACF,CACF,EAEaC,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,CACF,CACF,CACF,CACF,EAEaC,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,IAEvBT,EAACC,EAAA,CACC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
|
|
6
6
|
"names": ["jsx", "Slogan", "meta", "slogan_stories_default", "Default", "TitleOnly", "SingleFeature", "TwoFeatures", "CustomClassName", "CustomStyle"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1285,10 +1285,10 @@ video {
|
|
|
1285
1285
|
text-align: right;
|
|
1286
1286
|
}
|
|
1287
1287
|
.font-body {
|
|
1288
|
-
font-family: var(--font-
|
|
1288
|
+
font-family: var(--font-inter), sans-serif;
|
|
1289
1289
|
}
|
|
1290
1290
|
.font-heading {
|
|
1291
|
-
font-family: var(--font-
|
|
1291
|
+
font-family: var(--font-montForAnker), sans-serif;
|
|
1292
1292
|
}
|
|
1293
1293
|
.text-2xl {
|
|
1294
1294
|
font-size: 1.5rem;
|
package/tailwind.config.ts
CHANGED
|
@@ -216,8 +216,8 @@ export default {
|
|
|
216
216
|
],
|
|
217
217
|
},
|
|
218
218
|
fontFamily: {
|
|
219
|
-
heading: ['var(--font-
|
|
220
|
-
body: ['var(--font-
|
|
219
|
+
heading: ['var(--font-montForAnker)', 'sans-serif'], // 标题字体
|
|
220
|
+
body: ['var(--font-inter)', 'sans-serif'], // 正文字体
|
|
221
221
|
},
|
|
222
222
|
},
|
|
223
223
|
},
|