@pisell/materials 2.2.47 → 2.2.49

package/es/components/walletCard/index.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import './index.less';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            [elemName: string]: any;
+        }
+    }
+}
+export interface WalletCardItem {
+    key: string;
+    label?: string;
+    hidden?: boolean;
+    value?: number;
+}
+export interface WalletCardProps {
+    /** 二维码弹窗适配平台 */
+    platform?: 'pc' | 'h5' | 'ipad';
+    /** 卡片主题 */
+    mode?: 'dark' | 'light';
+    /** 默认还是完整显示code */
+    cardStyle?: 'normal' | 'full';
+    /** 条形码还是二维码 */
+    codeType?: 'barCode' | 'orCode';
+    /** 二维码方向 */
+    codeDirection?: 'bottom' | 'top';
+    /** 自定义背景图 */
+    customBackgroundImage?: string;
+    /** 图标：可以是React组件或图片URL */
+    showIcon?: boolean;
+    showWalletName?: boolean;
+    iconImg?: string;
+    /** 钱包名称 */
+    walletName?: string;
+    /** 店铺名称 */
+    shopName?: string;
+    /** 是否显示店铺名称 */
+    showShopName?: boolean;
+    /** 卡号 */
+    cardNo?: string;
+    /** 是否显示卡号 */
+    showCardNo?: boolean;
+    /** 是否显示二维码 */
+    showCode?: boolean;
+    /** 点击二维码/条形码的回调 */
+    onCodeClick?: () => void;
+    /** 货币符号 */
+    symbol: string;
+    /** 点击卡片的回调 */
+    onClick?: () => void;
+    /** 自定义类名 */
+    className?: string;
+    items: WalletCardItem[];
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    title?: string;
+    subTitle?: string;
+    align?: 'left' | 'center';
+    buttonText?: string;
+    [key: string]: any;
+    /** 是否已登录 */
+    isLogin?: boolean;
+}
+declare const WalletCard: React.FC<WalletCardProps>;
+export default WalletCard;

package/es/components/walletCard/index.js

@@ -0,0 +1,367 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Card, QRCode } from 'antd';
+import classNames from 'classnames';
+import React, { useMemo, useState } from 'react';
+import Barcode from 'react-barcode';
+import { getText } from "../../locales/index";
+import Iconfont from "./../iconfont";
+import PisellModal from "./../pisellModal";
+import Amount from "./../pisellText/components/Amount";
+import Guest from "./Guest";
+import "./index.less";
+
+// 添加JSX类型声明
+
+// 类型定义
+
+// 默认值
+var DEFAULT_PROPS = {
+  symbol: '$',
+  mode: 'light',
+  iconImg: '',
+  showIcon: true,
+  showWalletName: true,
+  shopName: 'Store name',
+  showShopName: true,
+  cardNo: 'Wallet number',
+  cardStyle: 'normal',
+  codeType: 'barCode',
+  platform: 'pc',
+  codeDirection: 'bottom',
+  showCardNo: true,
+  showCode: true,
+  walletName: 'Level',
+  isLogin: true,
+  items: [{
+    key: 'rechargeable',
+    label: 'rechargeable',
+    value: 0
+  }, {
+    key: 'piont',
+    label: 'piont',
+    value: 10
+  }, {
+    key: 'voucher',
+    label: 'Discount cardvoucher',
+    value: 0
+  }, {
+    key: 'discount',
+    label: 'discount',
+    value: 0
+  }]
+};
+
+// 工具函数：将可能的数字0/1转为布尔值
+var toBooleanValue = function toBooleanValue(value) {
+  if (value === undefined) return false;
+  if (value === 0 || value === '0') return false;
+  if (value === 1 || value === '1') return true;
+  return !!value;
+};
+
+// 自定义钩子：处理二维码/条形码模态框
+var useCodeModal = function useCodeModal(cardNo, onCodeClick) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalOpen = _useState2[0],
+    setIsModalOpen = _useState2[1];
+  var handleCodeClick = function handleCodeClick(e) {
+    e.stopPropagation();
+    if (onCodeClick) {
+      onCodeClick();
+    } else {
+      setIsModalOpen(true);
+    }
+  };
+  var closeModal = function closeModal(e) {
+    e === null || e === void 0 || e.stopPropagation();
+    setIsModalOpen(false);
+  };
+  return {
+    isModalOpen: isModalOpen,
+    handleCodeClick: handleCodeClick,
+    closeModal: closeModal
+  };
+};
+
+// 子组件：卡片头部
+var CardHeader = function CardHeader(_ref) {
+  var _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$showWalletName = _ref.showWalletName,
+    showWalletName = _ref$showWalletName === void 0 ? true : _ref$showWalletName,
+    _ref$showShopName = _ref.showShopName,
+    showShopName = _ref$showShopName === void 0 ? true : _ref$showShopName,
+    _ref$showCardNo = _ref.showCardNo,
+    showCardNo = _ref$showCardNo === void 0 ? true : _ref$showCardNo,
+    _ref$showCode = _ref.showCode,
+    showCode = _ref$showCode === void 0 ? true : _ref$showCode,
+    iconImg = _ref.iconImg,
+    mode = _ref.mode,
+    _ref$walletName = _ref.walletName,
+    walletName = _ref$walletName === void 0 ? 'Level' : _ref$walletName,
+    _ref$shopName = _ref.shopName,
+    shopName = _ref$shopName === void 0 ? 'Store name' : _ref$shopName,
+    _ref$cardNo = _ref.cardNo,
+    cardNo = _ref$cardNo === void 0 ? 'Wallet number' : _ref$cardNo,
+    _ref$cardStyle = _ref.cardStyle,
+    cardStyle = _ref$cardStyle === void 0 ? 'normal' : _ref$cardStyle,
+    _ref$codeType = _ref.codeType,
+    codeType = _ref$codeType === void 0 ? 'barCode' : _ref$codeType,
+    onCodeClick = _ref.onCodeClick,
+    _ref$isLogin = _ref.isLogin,
+    isLogin = _ref$isLogin === void 0 ? false : _ref$isLogin;
+  // 处理可能为0/1的布尔值
+  var processedShowIcon = toBooleanValue(showIcon);
+  var processedShowWalletName = toBooleanValue(showWalletName);
+  var processedShowShopName = toBooleanValue(showShopName);
+  var processedShowCardNo = toBooleanValue(showCardNo);
+  var processedShowCode = toBooleanValue(showCode);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-level"
+  }, processedShowIcon && iconImg ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: iconImg,
+    alt: "wallet icon",
+    style: {
+      width: '20px',
+      height: '20px'
+    }
+  })) : null, processedShowWalletName && walletName && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-level-text"
+  }, walletName)), processedShowShopName && shopName && /*#__PURE__*/React.createElement("div", null, shopName), processedShowCardNo && cardNo && /*#__PURE__*/React.createElement("div", null, cardNo)), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-right"
+  }, processedShowCode && cardStyle === 'normal' && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-icon-wrapper",
+    onClick: onCodeClick
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    style: {
+      color: mode === 'dark' ? '#fff' : '#101828'
+    },
+    type: codeType === 'barCode' ? 'pisell2-Barcode' : 'pisell2-a-qr-code-02',
+    className: "pisell-wallet-card-icon"
+  }))));
+};
+
+// 子组件：卡片内容项
+var CardItem = function CardItem(_ref2) {
+  var item = _ref2.item,
+    symbol = _ref2.symbol;
+  var key = item.key,
+    label = item.label,
+    value = item.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-item-label"
+  }, getText("walletCard-".concat(label)) || ''), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-item-value"
+  }, key === 'rechargeable' || key === 'piont' ? /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    platform: "h5",
+    symbol: symbol,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true,
+    value: value
+  }) : value));
+};
+
+// 子组件：卡片内容
+var CardContent = function CardContent(_ref3) {
+  var items = _ref3.items,
+    symbol = _ref3.symbol;
+  // if (!items.length) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-list"
+  }, (items || []).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(CardItem, {
+      key: index,
+      item: item,
+      symbol: symbol
+    });
+  }));
+};
+
+// 子组件：二维码/条形码显示
+var CodeDisplay = function CodeDisplay(_ref4) {
+  var codeType = _ref4.codeType,
+    cardNo = _ref4.cardNo;
+  if (!cardNo) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-code"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-code-qrcode"
+  }, codeType === 'barCode' ? /*#__PURE__*/React.createElement(Barcode, {
+    value: cardNo,
+    displayValue: false,
+    height: 114,
+    width: 3
+  }) : /*#__PURE__*/React.createElement(QRCode, {
+    size: 250,
+    value: cardNo,
+    bordered: false
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-code-qrcode-value"
+  }, cardNo)));
+};
+var blockEvent = function blockEvent(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  if (e.nativeEvent) {
+    e.nativeEvent.stopImmediatePropagation();
+    e.nativeEvent.preventDefault();
+  }
+  return false;
+};
+
+// 子组件：二维码/条形码模态框
+var CodeModal = function CodeModal(_ref5) {
+  var isOpen = _ref5.isOpen,
+    onClose = _ref5.onClose,
+    codeType = _ref5.codeType,
+    cardNo = _ref5.cardNo,
+    platform = _ref5.platform;
+  return /*#__PURE__*/React.createElement(PisellModal, {
+    title: getText(codeType === 'barCode' ? 'walletCard-barcode' : 'walletCard-qrcode'),
+    platform: platform,
+    onCancel: onClose,
+    open: isOpen,
+    footer: null,
+    mobileModalHeight: "auto",
+    className: "pisell-qrcode-modal",
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-qrcode-modal-content",
+    onClick: blockEvent,
+    onTouchStart: blockEvent,
+    onTouchMove: blockEvent,
+    onTouchEnd: blockEvent,
+    onTouchCancel: blockEvent,
+    onMouseDown: blockEvent,
+    onMouseMove: blockEvent,
+    onMouseUp: blockEvent,
+    onWheel: blockEvent,
+    onScroll: blockEvent,
+    onDragStart: blockEvent,
+    onDrag: blockEvent,
+    onDragEnd: blockEvent
+  }, /*#__PURE__*/React.createElement(CodeDisplay, {
+    codeType: codeType,
+    cardNo: cardNo
+  })));
+};
+
+// 主组件
+var WalletCard = function WalletCard(props) {
+  var mergedProps = _objectSpread(_objectSpread({}, DEFAULT_PROPS), props);
+  var symbol = mergedProps.symbol,
+    mode = mergedProps.mode,
+    iconImg = mergedProps.iconImg,
+    shopName = mergedProps.shopName,
+    cardNo = mergedProps.cardNo,
+    cardStyle = mergedProps.cardStyle,
+    codeType = mergedProps.codeType,
+    platform = mergedProps.platform,
+    codeDirection = mergedProps.codeDirection,
+    walletName = mergedProps.walletName,
+    _mergedProps$items = mergedProps.items,
+    items = _mergedProps$items === void 0 ? [] : _mergedProps$items,
+    onCodeClick = mergedProps.onCodeClick,
+    onClick = mergedProps.onClick,
+    className = mergedProps.className,
+    style = mergedProps.style;
+
+  // 处理可能为0/1的布尔值props
+  var showIcon = toBooleanValue(mergedProps.showIcon);
+  var showWalletName = toBooleanValue(mergedProps.showWalletName);
+  var showShopName = toBooleanValue(mergedProps.showShopName);
+  var showCardNo = toBooleanValue(mergedProps.showCardNo);
+  var showCode = toBooleanValue(mergedProps.showCode);
+  var isLogin = toBooleanValue(mergedProps.isLogin);
+
+  // 使用自定义钩子处理模态框逻辑
+  var _useCodeModal = useCodeModal(cardNo, onCodeClick),
+    isModalOpen = _useCodeModal.isModalOpen,
+    handleCodeClick = _useCodeModal.handleCodeClick,
+    closeModal = _useCodeModal.closeModal;
+
+  // 计算背景样式
+  var backgroundStyle = useMemo(function () {
+    if (props.customBackgroundImage) {
+      return {
+        backgroundImage: "url(".concat(props.customBackgroundImage, ")")
+      };
+    } else {
+      return {
+        backgroundImage: "url(https://file.mypisell-dev.com/pisel/image/9/".concat(mode === 'dark' ? '3d039c83ff5b84fadafb8a23c33d6cc42025_02_26_00_42_53_288_08413160975__720_456__' : '61dcbe950c9451164a6bb1d17d5bc5f02025_02_26_00_43_42_741_04853453608__720_456__', ".png)")
+      };
+    }
+  }, [props.customBackgroundImage, mode]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-wrapper', className),
+    style: style,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Card, {
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-container",
+    style: {
+      flexDirection: codeDirection === 'top' ? 'column-reverse' : 'column'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-content', mode, !isLogin && 'pisell-wallet-card-guest-content'),
+    style: backgroundStyle
+  }, isLogin ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardHeader, {
+    mode: mode,
+    showWalletName: showWalletName,
+    showIcon: showIcon,
+    iconImg: iconImg,
+    walletName: walletName,
+    shopName: shopName,
+    showShopName: showShopName,
+    cardNo: cardNo,
+    showCardNo: showCardNo,
+    showCode: showCode,
+    cardStyle: cardStyle,
+    codeType: codeType,
+    onCodeClick: handleCodeClick,
+    isLogin: isLogin
+  }), /*#__PURE__*/React.createElement(CardContent, {
+    items: items,
+    symbol: symbol
+  })) : /*#__PURE__*/React.createElement(Guest, {
+    setting: props
+  })), cardStyle === 'full' && isLogin && /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-showCode', codeDirection === 'top' ? 'code-top' : 'code-bottom')
+  }, /*#__PURE__*/React.createElement(CodeDisplay, {
+    codeType: codeType,
+    cardNo: cardNo
+  })))), /*#__PURE__*/React.createElement(CodeModal, {
+    isOpen: isModalOpen,
+    onClose: closeModal,
+    codeType: codeType,
+    cardNo: cardNo,
+    platform: platform
+  }));
+};
+export default WalletCard;

package/es/components/walletCard/index.less

@@ -0,0 +1,268 @@
+.pisell-wallet-card-wrapper {
+  border: none;
+  overflow: hidden;
+  border-radius: 12px;
+  width: 100%;
+
+  // 卡片容器
+  .pisell-wallet-card-container {
+    width: 100%;
+    display: flex;
+    cursor: pointer;
+  }
+
+  // 卡片内容区域
+  .pisell-wallet-card-content {
+    padding: 16px 18px;
+    background-position: top center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    // 暗色主题
+    &.dark {
+      background-color: #000;
+
+      .pisell-wallet-card-header-left {
+        color: #fff;
+      }
+
+      .pisell-wallet-card-item {
+        .pisell-wallet-card-item-label {
+          color: #eaecf0;
+        }
+
+        .pisell-wallet-card-item-value {
+          color: #fff;
+        }
+      }
+    }
+
+    // 亮色主题
+    &.light {
+      background-color: #fff;
+
+      .pisell-wallet-card-header-left {
+        color: #101828;
+      }
+
+      .pisell-wallet-card-item {
+        .pisell-wallet-card-item-label {
+          color: #667085;
+        }
+
+        .pisell-wallet-card-item-value {
+          color: #101828;
+        }
+      }
+    }
+  }
+
+  .pisell-wallet-card-guest-content {
+    padding: 0;
+  }
+
+  // 卡片头部
+  .pisell-wallet-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    // 头部左侧
+    .pisell-wallet-card-header-left {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+
+      // 卡片等级/名称区域
+      .pisell-wallet-card-header-level {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+
+        // 卡片名称文本
+        .pisell-wallet-card-header-level-text {
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 20px;
+        }
+
+        // 卡片图标
+        .pisell-wallet-card-header-icon {
+          width: 20px;
+          height: 20px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      // 头部左侧其他信息
+      > div {
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    // 头部右侧
+    .pisell-wallet-card-header-right {
+      // 图标包装器
+      .pisell-wallet-card-icon-wrapper {
+        cursor: pointer;
+      }
+
+      // 图标
+      .pisell-wallet-card-icon {
+        font-size: 40px;
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  // 卡片内容列表
+  .pisell-wallet-card-list {
+    margin-top: 30px;
+    height: 50px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    gap: 16px;
+
+    // 列表项
+    .pisell-wallet-card-item {
+      text-align: center;
+      flex: 1;
+      min-width: 0;
+
+      // 标签
+      .pisell-wallet-card-item-label {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // 值
+      .pisell-wallet-card-item-value {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 30px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  // 显示二维码/条形码区域
+  .pisell-wallet-card-showCode {
+    padding: 20px;
+    background-color: #fff;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #d0d5de;
+
+    // 当二维码/条形码在底部显示时
+    &.code-bottom {
+      border-top: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+
+    // 当二维码/条形码在顶部显示时
+    &.code-top {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+    }
+
+    .pisell-wallet-card-code {
+      display: flex;
+      justify-content: center;
+    }
+    // 条形码样式
+    .pisell-wallet-card-code {
+      width: 100%;
+
+      // 覆盖react-barcode生成的SVG文本样式
+      svg {
+        width: 100%;
+
+        text {
+          fill: #000;
+          font-family: Inter;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          transform: translateY(12px);
+        }
+      }
+    }
+
+    // 二维码下方文本样式
+    .pisell-wallet-card-code-qrcode-value {
+      color: #000;
+      font-family: Inter;
+      font-size: 12px;
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+  }
+
+  // 卡片内容区域
+  .pisell-lowcode-card-body {
+    padding: 0;
+  }
+}
+
+// 二维码模态框
+.pisell-qrcode-modal {
+  .pisell-qrcode-modal-content{
+    pointer-events: auto;
+    touch-action: none;
+    overscroll-behavior: none;
+    position: relative;
+    z-index: 1001;
+    width: 100%;
+
+    .pisell-wallet-card-code {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    // 二维码值
+    .pisell-wallet-card-code-qrcode-value {
+      color: var(--Gray-500, #667085);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      margin: 0 0 24px;
+      text-align: center;
+    }
+  }
+}