|
@@ -1,36 +1,43 @@
|
|
|
interface IconProps {
|
|
interface IconProps {
|
|
|
className?: string;
|
|
className?: string;
|
|
|
|
|
+ /** 图标类型:'back' - 返回按钮,'float' - 浮动按钮 */
|
|
|
|
|
+ variant?: 'back' | 'float';
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-export default function Icon({ className }: IconProps) {
|
|
|
|
|
|
|
+export default function Icon({ className, variant = 'back' }: IconProps) {
|
|
|
return (
|
|
return (
|
|
|
- <div className={className} data-name="返回icon">
|
|
|
|
|
- <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
|
|
|
|
|
- <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
|
|
|
|
|
- <div className="relative size-full">
|
|
|
|
|
- <div className="absolute inset-[-1.25%]">
|
|
|
|
|
- <img
|
|
|
|
|
- alt=""
|
|
|
|
|
- className="block max-w-none size-full"
|
|
|
|
|
- src="/financial-dashboard/ellipse4119.svg"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <div className={className} data-name={variant === 'float' ? '浮动icon' : '返回icon'}>
|
|
|
|
|
+ {variant === 'float' ? (
|
|
|
|
|
+ // 浮动按钮样式
|
|
|
|
|
+ <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
|
|
|
|
|
+ <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[108px]">
|
|
|
|
|
+ <div className="relative size-full">
|
|
|
|
|
+ <div className="absolute inset-[-1.25%]">
|
|
|
|
|
+ <img
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ className="block max-w-none size-full"
|
|
|
|
|
+ src="/financial-dashboard/ellipse4119.svg"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
|
|
|
|
|
- <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
|
|
|
|
|
- <div className="relative size-full" data-name="路径">
|
|
|
|
|
- <div className="absolute inset-[-50.89%_-28.44%]">
|
|
|
|
|
- <img
|
|
|
|
|
- alt=""
|
|
|
|
|
- className="block max-w-none size-full"
|
|
|
|
|
- src="/financial-dashboard/icon-path.svg"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ // 返回按钮样式
|
|
|
|
|
+ <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
|
|
|
|
|
+ <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
|
|
|
|
|
+ <div className="relative size-full" data-name="路径">
|
|
|
|
|
+ <div className="absolute inset-[-50.89%_-28.44%]">
|
|
|
|
|
+ <img
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ className="block max-w-none size-full"
|
|
|
|
|
+ src="/financial-dashboard/icon-path.svg"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ )}
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|