@anker-in/headless-ui 0.0.27-alpha.23 → 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/stories/MemberEquity.stories.js +3 -3
- package/dist/cjs/stories/MemberEquity.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/stories/MemberEquity.stories.js +3 -3
- package/dist/esm/stories/MemberEquity.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,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,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,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
|
}
|
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
|
},
|