新版

Signed-off-by: zhb <zhb@7stars.com>

src/App.vue

@@ -93,11 +93,14 @@ onMounted(() => {
     font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
 .page {
-    padding: 0 16px 120px 16px;
+    padding: 32px 16px 120px 16px;
     box-sizing: border-box;
     min-height: 100vh;
     background: var(--main-bg);
 }
+.page-shadow{
+    box-shadow: 0px 0px 4px rgba(134, 134, 133, 0.25);
+}
 .request-loading {
     position: fixed;
     top: 50%;

src/api/ucard.ts

@@ -261,7 +261,7 @@ export const ucardApi = {
         return $api.post("/ucard/api/card/recharge", { ...params });
     },
     // 查询充值订单
-    ucardRechargeOrder(params: { orderId: string }): Promise<BaseResponse<TransactionInfo>> {
+    ucardRechargeOrder(params: { orderNo: string }): Promise<BaseResponse<TransactionInfo>> {
         return $api.post("/ucard/api/card/recharge/order", { ...params });
     },
     // 查询卡片余额

src/api/user.ts

@@ -44,5 +44,9 @@ export const userApi = {
     //用户余额
     walletBalance: (params= {}) => {
         return $api.post('/custom/get/balance', params)
+    },
+    //修改密码
+    updateEmailPassword: (params= {}) => {
+        return $api.post('/custom/update/email/password', params)
     }
 }

src/assets/icons/USDT.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="12" cy="12" rx="12" ry="12" fill="#2FAF54"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5252 12.0188V12.0172C13.4397 12.0235 12.9994 12.0499 12.0171 12.0499C11.2328 12.0499 10.6806 12.0266 10.4865 12.0172V12.0196C7.46723 11.8868 5.21366 11.3611 5.21366 10.732C5.21366 10.1038 7.46723 9.57808 10.4865 9.44296V11.4962C10.6837 11.5102 11.2491 11.5435 12.0303 11.5435C12.9676 11.5435 13.4374 11.5047 13.5252 11.497V9.44451C16.5382 9.57885 18.7863 10.1046 18.7863 10.732C18.7863 11.3611 16.5382 11.8852 13.5252 12.0188ZM13.5252 9.23096V7.39362H17.7294V4.5918H6.2822V7.39362H10.4865V9.23018C7.06963 9.38704 4.5 10.0642 4.5 10.8749C4.5 11.6857 7.06963 12.362 10.4865 12.5197V18.4075H13.5252V12.5181C16.9366 12.3613 19.5 11.6849 19.5 10.8749C19.5 10.065 16.9366 9.3886 13.5252 9.23096Z" fill="white"/>
+</svg>

src/assets/icons/cwg-lang.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z" fill="currentColor"/>
+</svg>

src/assets/icons/cwg-order.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 19.75C4.26667 19.3 2.83333 18.3667 1.7 16.95C0.566667 15.5333 0 13.8833 0 12C0 10.1167 0.566667 8.46667 1.7 7.05C2.83333 5.63333 4.26667 4.7 6 4.25V6.35C4.81667 6.75 3.85417 7.46667 3.1125 8.5C2.37083 9.53333 2 10.7 2 12C2 13.3 2.37083 14.4667 3.1125 15.5C3.85417 16.5333 4.81667 17.25 6 17.65V19.75ZM14 20C11.7833 20 9.89583 19.2208 8.3375 17.6625C6.77917 16.1042 6 14.2167 6 12C6 9.78333 6.77917 7.89583 8.3375 6.3375C9.89583 4.77917 11.7833 4 14 4C15.1 4 16.1333 4.20833 17.1 4.625C18.0667 5.04167 18.9167 5.61667 19.65 6.35L18.25 7.75C17.7 7.2 17.0625 6.77083 16.3375 6.4625C15.6125 6.15417 14.8333 6 14 6C12.3333 6 10.9167 6.58333 9.75 7.75C8.58333 8.91667 8 10.3333 8 12C8 13.6667 8.58333 15.0833 9.75 16.25C10.9167 17.4167 12.3333 18 14 18C14.8333 18 15.6125 17.8458 16.3375 17.5375C17.0625 17.2292 17.7 16.8 18.25 16.25L19.65 17.65C18.9167 18.3833 18.0667 18.9583 17.1 19.375C16.1333 19.7917 15.1 20 14 20ZM20 16L18.6 14.6L20.2 13H13V11H20.2L18.6 9.4L20 8L24 12L20 16Z" fill="currentColor"/>
+</svg>

src/assets/icons/cwg-right.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.31002 6.70978C8.92002 7.09978 8.92002 7.72978 9.31002 8.11978L13.19 11.9998L9.31002 15.8798C8.92002 16.2698 8.92002 16.8998 9.31002 17.2898C9.70002 17.6798 10.33 17.6798 10.72 17.2898L15.31 12.6998C15.7 12.3098 15.7 11.6798 15.31 11.2898L10.72 6.69978C10.34 6.31978 9.70002 6.31978 9.31002 6.70978Z" fill="currentColor"/>
+</svg>

src/assets/icons/cwg-search.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L20.3 18.9C20.4833 19.0833 20.575 19.3167 20.575 19.6C20.575 19.8833 20.4833 20.1167 20.3 20.3C20.1167 20.4833 19.8833 20.575 19.6 20.575C19.3167 20.575 19.0833 20.4833 18.9 20.3L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="currentColor"/>
+</svg>

src/assets/icons/cwg_undraw.svg

@@ -0,0 +1,19 @@
+<svg width="100" height="98" viewBox="0 0 100 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_359_5087)">
+<path d="M63.4839 22.0403H36.5383C35.9242 22.0411 35.3356 22.2863 34.9014 22.7222C34.4672 23.1581 34.2229 23.7491 34.2222 24.3656V84.4904L33.9133 84.5849L27.3031 86.6173C26.9899 86.7132 26.6515 86.6804 26.3623 86.526C26.0731 86.3717 25.8567 86.1085 25.7607 85.7941L6.09833 21.3133C6.00265 20.9987 6.03526 20.6589 6.18901 20.3686C6.34275 20.0782 6.60505 19.8609 6.91825 19.7646L17.1046 16.6332L46.635 7.55828L56.8213 4.42686C56.9763 4.37896 57.1392 4.36223 57.3006 4.37761C57.4621 4.39299 57.619 4.44019 57.7623 4.5165C57.9055 4.59281 58.0324 4.69675 58.1356 4.82235C58.2389 4.94795 58.3164 5.09275 58.3638 5.24847L63.3898 21.7303L63.4839 22.0403Z" fill="#F2F2F2"/>
+<path d="M69.3641 21.7296L63.3066 1.86521C63.2059 1.53423 63.0411 1.22643 62.8218 0.959407C62.6025 0.69238 62.3329 0.471357 62.0285 0.308966C61.7241 0.146575 61.3907 0.0459987 61.0476 0.0129873C60.7044 -0.0200242 60.3582 0.0151764 60.0286 0.116574L45.7072 4.51761L16.1784 13.5941L1.85705 17.9967C1.19176 18.2018 0.634703 18.6635 0.308153 19.2805C-0.018398 19.8975 -0.0877619 20.6194 0.115289 21.2877L20.8183 89.1759C20.9832 89.7154 21.3161 90.1876 21.7679 90.5233C22.2198 90.8589 22.7669 91.0403 23.329 91.0408C23.5891 91.041 23.8478 91.0018 24.0964 90.9246L33.9136 87.9079L34.2224 87.8118V87.4878L33.9136 87.5823L24.0053 90.6285C23.418 90.8082 22.7838 90.7467 22.2416 90.4576C21.6994 90.1684 21.2936 89.6752 21.1132 89.086L0.411815 21.1963C0.322427 20.9044 0.291273 20.5976 0.320136 20.2936C0.348998 19.9896 0.437309 19.6943 0.580015 19.4245C0.722722 19.1548 0.917022 18.916 1.15178 18.7218C1.38654 18.5276 1.65716 18.3818 1.94813 18.2927L16.2694 13.8902L45.7984 4.81525L60.1197 0.412666C60.3404 0.345046 60.5699 0.310568 60.8006 0.310352C61.2958 0.311469 61.7776 0.471753 62.1755 0.767729C62.5734 1.0637 62.8665 1.47982 63.0118 1.95512L69.0414 21.7296L69.1371 22.0396H69.4583L69.3641 21.7296Z" fill="#3F3D56"/>
+<path d="M18.9429 19.8146C18.6453 19.8144 18.3556 19.7184 18.1163 19.5408C17.877 19.3632 17.7007 19.1132 17.6132 18.8276L15.6244 12.3056C15.5709 12.1304 15.5524 11.9464 15.5698 11.764C15.5872 11.5816 15.6403 11.4044 15.7259 11.2426C15.8115 11.0808 15.928 10.9375 16.0688 10.821C16.2096 10.7044 16.3719 10.6168 16.5464 10.5631L43.7127 2.21315C44.0651 2.10518 44.4458 2.14201 44.7712 2.31554C45.0966 2.48907 45.3402 2.78512 45.4484 3.13873L47.4372 9.6608C47.5447 10.0146 47.508 10.3968 47.3351 10.7235C47.1623 11.0501 46.8675 11.2946 46.5153 11.4033L19.3489 19.7533C19.2173 19.7939 19.0805 19.8145 18.9429 19.8146Z" fill="#EA002A"/>
+<path d="M29.3611 6.96938C31.0666 6.96938 32.4493 5.58128 32.4493 3.86897C32.4493 2.15666 31.0666 0.768555 29.3611 0.768555C27.6556 0.768555 26.2729 2.15666 26.2729 3.86897C26.2729 5.58128 27.6556 6.96938 29.3611 6.96938Z" fill="#EA002A"/>
+<path d="M29.3613 5.83183C30.4413 5.83183 31.3168 4.95284 31.3168 3.86855C31.3168 2.78426 30.4413 1.90527 29.3613 1.90527C28.2813 1.90527 27.4058 2.78426 27.4058 3.86855C27.4058 4.95284 28.2813 5.83183 29.3613 5.83183Z" fill="white"/>
+<path d="M93.0516 90.2488H40.8618C40.5138 90.2484 40.1802 90.1094 39.9342 89.8624C39.6881 89.6154 39.5497 89.2805 39.5493 88.9311V26.1478C39.5497 25.7984 39.6881 25.4635 39.9342 25.2164C40.1802 24.9694 40.5138 24.8305 40.8618 24.8301H93.0516C93.3995 24.8305 93.7331 24.9694 93.9792 25.2165C94.2252 25.4635 94.3636 25.7984 94.364 26.1478V88.9311C94.3636 89.2805 94.2252 89.6154 93.9792 89.8624C93.7331 90.1094 93.3995 90.2484 93.0516 90.2488Z" fill="#E6E6E6"/>
+<path d="M69.0413 21.7295H36.5385C35.8426 21.7305 35.1755 22.0085 34.6835 22.5025C34.1914 22.9965 33.9146 23.6662 33.9136 24.3648V87.5823L34.2224 87.4877V24.3648C34.2231 23.7484 34.4674 23.1573 34.9016 22.7214C35.3358 22.2855 35.9245 22.0403 36.5385 22.0395H69.1371L69.0413 21.7295ZM97.3751 21.7295H36.5385C35.8426 21.7305 35.1755 22.0085 34.6835 22.5025C34.1914 22.9965 33.9146 23.6662 33.9136 24.3648V95.3643C33.9146 96.0629 34.1914 96.7327 34.6835 97.2267C35.1755 97.7207 35.8426 97.9987 36.5385 97.9997H97.3751C98.071 97.9987 98.7381 97.7207 99.2301 97.2267C99.7222 96.7327 99.9991 96.0629 100 95.3643V24.3648C99.9991 23.6662 99.7222 22.9965 99.2301 22.5025C98.7381 22.0085 98.071 21.7305 97.3751 21.7295ZM99.6912 95.3643C99.6905 95.9808 99.4462 96.5718 99.012 97.0077C98.5778 97.4436 97.9892 97.6889 97.3751 97.6896H36.5385C35.9245 97.6889 35.3358 97.4436 34.9016 97.0077C34.4674 96.5718 34.2231 95.9808 34.2224 95.3643V24.3648C34.2231 23.7484 34.4674 23.1573 34.9016 22.7214C35.3358 22.2855 35.9245 22.0403 36.5385 22.0395H97.3751C97.9892 22.0403 98.5778 22.2855 99.012 22.7214C99.4462 23.1573 99.6905 23.7484 99.6912 24.3648V95.3643Z" fill="#3F3D56"/>
+<path d="M81.1625 28.5507H52.7515C52.383 28.5503 52.0298 28.4032 51.7693 28.1416C51.5088 27.8801 51.3622 27.5254 51.3618 27.1555V20.3346C51.3622 19.9647 51.5088 19.6101 51.7693 19.3486C52.0298 19.087 52.383 18.9399 52.7515 18.9395H81.1625C81.5309 18.9399 81.8842 19.087 82.1447 19.3486C82.4052 19.6101 82.5517 19.9647 82.5522 20.3346V27.1555C82.5517 27.5254 82.4052 27.8801 82.1447 28.1416C81.8842 28.4032 81.5309 28.5503 81.1625 28.5507Z" fill="#EA002A"/>
+<path d="M66.9568 19.4049C68.6623 19.4049 70.045 18.0168 70.045 16.3045C70.045 14.5922 68.6623 13.2041 66.9568 13.2041C65.2513 13.2041 63.8687 14.5922 63.8687 16.3045C63.8687 18.0168 65.2513 19.4049 66.9568 19.4049Z" fill="#EA002A"/>
+<path d="M66.9567 18.1929C67.9955 18.1929 68.8376 17.3474 68.8376 16.3045C68.8376 15.2615 67.9955 14.416 66.9567 14.416C65.9178 14.416 65.0757 15.2615 65.0757 16.3045C65.0757 17.3474 65.9178 18.1929 66.9567 18.1929Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_359_5087">
+<rect width="100" height="98" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/icon-back.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.8248 13L12.7248 17.9C12.9248 18.1 13.0206 18.3334 13.0123 18.6C13.004 18.8667 12.8998 19.1 12.6998 19.3C12.4998 19.4834 12.2665 19.5792 11.9998 19.5875C11.7331 19.5959 11.4998 19.5 11.2998 19.3L4.6998 12.7C4.5998 12.6 4.52897 12.4917 4.4873 12.375C4.44564 12.2584 4.4248 12.1334 4.4248 12C4.4248 11.8667 4.44564 11.7417 4.4873 11.625C4.52897 11.5084 4.5998 11.4 4.6998 11.3L11.2998 4.70005C11.4831 4.51672 11.7123 4.42505 11.9873 4.42505C12.2623 4.42505 12.4998 4.51672 12.6998 4.70005C12.8998 4.90005 12.9998 5.13755 12.9998 5.41255C12.9998 5.68755 12.8998 5.92505 12.6998 6.12505L7.8248 11H18.9998C19.2831 11 19.5206 11.0959 19.7123 11.2875C19.904 11.4792 19.9998 11.7167 19.9998 12C19.9998 12.2834 19.904 12.5209 19.7123 12.7125C19.5206 12.9042 19.2831 13 18.9998 13H7.8248Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_about us.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_add.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V13H4C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H11V4C11 3.71667 11.0958 3.47917 11.2875 3.2875C11.4792 3.09583 11.7167 3 12 3C12.2833 3 12.5208 3.09583 12.7125 3.2875C12.9042 3.47917 13 3.71667 13 4V11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.2833 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H13V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_bank.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 32V22C10 21.4333 10.1917 20.9583 10.575 20.575C10.9583 20.1917 11.4333 20 12 20C12.5667 20 13.0417 20.1917 13.425 20.575C13.8083 20.9583 14 21.4333 14 22V32C14 32.5667 13.8083 33.0417 13.425 33.425C13.0417 33.8083 12.5667 34 12 34C11.4333 34 10.9583 33.8083 10.575 33.425C10.1917 33.0417 10 32.5667 10 32ZM22 32V22C22 21.4333 22.1917 20.9583 22.575 20.575C22.9583 20.1917 23.4333 20 24 20C24.5667 20 25.0417 20.1917 25.425 20.575C25.8083 20.9583 26 21.4333 26 22V32C26 32.5667 25.8083 33.0417 25.425 33.425C25.0417 33.8083 24.5667 34 24 34C23.4333 34 22.9583 33.8083 22.575 33.425C22.1917 33.0417 22 32.5667 22 32ZM6 42C5.43333 42 4.95833 41.8083 4.575 41.425C4.19167 41.0417 4 40.5667 4 40C4 39.4333 4.19167 38.9583 4.575 38.575C4.95833 38.1917 5.43333 38 6 38H42C42.5667 38 43.0417 38.1917 43.425 38.575C43.8083 38.9583 44 39.4333 44 40C44 40.5667 43.8083 41.0417 43.425 41.425C43.0417 41.8083 42.5667 42 42 42H6ZM34 32V22C34 21.4333 34.1917 20.9583 34.575 20.575C34.9583 20.1917 35.4333 20 36 20C36.5667 20 37.0417 20.1917 37.425 20.575C37.8083 20.9583 38 21.4333 38 22V32C38 32.5667 37.8083 33.0417 37.425 33.425C37.0417 33.8083 36.5667 34 36 34C35.4333 34 34.9583 33.8083 34.575 33.425C34.1917 33.0417 34 32.5667 34 32ZM42 16H5.8C5.3 16 4.875 15.825 4.525 15.475C4.175 15.125 4 14.7 4 14.2V13.1C4 12.7333 4.09167 12.4167 4.275 12.15C4.45833 11.8833 4.7 11.6667 5 11.5L22.2 2.9C22.7667 2.63333 23.3667 2.5 24 2.5C24.6333 2.5 25.2333 2.63333 25.8 2.9L42.9 11.45C43.2667 11.6167 43.5417 11.8667 43.725 12.2C43.9083 12.5333 44 12.8833 44 13.25V14C44 14.5667 43.8083 15.0417 43.425 15.425C43.0417 15.8083 42.5667 16 42 16ZM12.9 12H35.1L24 6.5L12.9 12Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_buy.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 11.825V21C11 21.2833 11.0958 21.5208 11.2875 21.7125C11.4792 21.9042 11.7167 22 12 22C12.2833 22 12.5208 21.9042 12.7125 21.7125C12.9042 21.5208 13 21.2833 13 21V11.825L14.9 13.7C15.0833 13.8833 15.3125 13.9792 15.5875 13.9875C15.8625 13.9958 16.1 13.9 16.3 13.7C16.4833 13.5167 16.575 13.2833 16.575 13C16.575 12.7167 16.4833 12.4833 16.3 12.3L12.7 8.7C12.5 8.5 12.2667 8.4 12 8.4C11.7333 8.4 11.5 8.5 11.3 8.7L7.7 12.3C7.51667 12.4833 7.42083 12.7125 7.4125 12.9875C7.40417 13.2625 7.5 13.5 7.7 13.7C7.88333 13.8833 8.11667 13.975 8.4 13.975C8.68333 13.975 8.91667 13.8833 9.1 13.7L11 11.825ZM12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 12.55 4.05417 13.0917 4.1625 13.625C4.27083 14.1583 4.43333 14.675 4.65 15.175C4.76667 15.4583 4.80417 15.7417 4.7625 16.025C4.72083 16.3083 4.59167 16.5583 4.375 16.775C4.175 16.975 3.92917 17.0208 3.6375 16.9125C3.34583 16.8042 3.125 16.5917 2.975 16.275C2.65833 15.5917 2.41667 14.8958 2.25 14.1875C2.08333 13.4792 2 12.75 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 12.75 21.9208 13.4875 21.7625 14.2125C21.6042 14.9375 21.3583 15.6417 21.025 16.325C20.875 16.625 20.6542 16.825 20.3625 16.925C20.0708 17.025 19.825 16.975 19.625 16.775C19.425 16.575 19.2958 16.3333 19.2375 16.05C19.1792 15.7667 19.2083 15.4917 19.325 15.225C19.5583 14.7083 19.7292 14.1792 19.8375 13.6375C19.9458 13.0958 20 12.55 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_card.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6ZM4 8H20V6H4V8ZM4 12V18H20V12H4Z" fill="currentColor"/>
+</svg>

src/assets/icons/icon_delivery.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 20C5.16667 20 4.45833 19.7083 3.875 19.125C3.29167 18.5417 3 17.8333 3 17H2C1.71667 17 1.47917 16.9042 1.2875 16.7125C1.09583 16.5208 1 16.2833 1 16V6C1 5.45 1.19583 4.97917 1.5875 4.5875C1.97917 4.19583 2.45 4 3 4H15C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6V8H19C19.3167 8 19.6167 8.07083 19.9 8.2125C20.1833 8.35417 20.4167 8.55 20.6 8.8L22.8 11.725C22.8667 11.8083 22.9167 11.9 22.95 12C22.9833 12.1 23 12.2083 23 12.325V16C23 16.2833 22.9042 16.5208 22.7125 16.7125C22.5208 16.9042 22.2833 17 22 17H21C21 17.8333 20.7083 18.5417 20.125 19.125C19.5417 19.7083 18.8333 20 18 20C17.1667 20 16.4583 19.7083 15.875 19.125C15.2917 18.5417 15 17.8333 15 17H9C9 17.8333 8.70833 18.5417 8.125 19.125C7.54167 19.7083 6.83333 20 6 20ZM6 18C6.28333 18 6.52083 17.9042 6.7125 17.7125C6.90417 17.5208 7 17.2833 7 17C7 16.7167 6.90417 16.4792 6.7125 16.2875C6.52083 16.0958 6.28333 16 6 16C5.71667 16 5.47917 16.0958 5.2875 16.2875C5.09583 16.4792 5 16.7167 5 17C5 17.2833 5.09583 17.5208 5.2875 17.7125C5.47917 17.9042 5.71667 18 6 18ZM3 15H3.8C4.08333 14.7 4.40833 14.4583 4.775 14.275C5.14167 14.0917 5.55 14 6 14C6.45 14 6.85833 14.0917 7.225 14.275C7.59167 14.4583 7.91667 14.7 8.2 15H15V6H3V15ZM18 18C18.2833 18 18.5208 17.9042 18.7125 17.7125C18.9042 17.5208 19 17.2833 19 17C19 16.7167 18.9042 16.4792 18.7125 16.2875C18.5208 16.0958 18.2833 16 18 16C17.7167 16 17.4792 16.0958 17.2875 16.2875C17.0958 16.4792 17 16.7167 17 17C17 17.2833 17.0958 17.5208 17.2875 17.7125C17.4792 17.9042 17.7167 18 18 18ZM17 13H21.25L19 10H17V13Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_dropdown.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 14.975C11.8665 14.975 11.7415 14.9542 11.6248 14.9125C11.5081 14.8709 11.3998 14.8 11.2998 14.7L6.6998 10.1C6.51647 9.91672 6.4248 9.68338 6.4248 9.40005C6.4248 9.11672 6.51647 8.88338 6.6998 8.70005C6.88314 8.51672 7.11647 8.42505 7.3998 8.42505C7.68314 8.42505 7.91647 8.51672 8.0998 8.70005L11.9998 12.6L15.8998 8.70005C16.0831 8.51672 16.3165 8.42505 16.5998 8.42505C16.8831 8.42505 17.1165 8.51672 17.2998 8.70005C17.4831 8.88338 17.5748 9.11672 17.5748 9.40005C17.5748 9.68338 17.4831 9.91672 17.2998 10.1L12.6998 14.7C12.5998 14.8 12.4915 14.8709 12.3748 14.9125C12.2581 14.9542 12.1331 14.975 11.9998 14.975Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_history.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C9.9 21 8.04167 20.3625 6.425 19.0875C4.80833 17.8125 3.75833 16.1833 3.275 14.2C3.20833 13.95 3.25833 13.7208 3.425 13.5125C3.59167 13.3042 3.81667 13.1833 4.1 13.15C4.36667 13.1167 4.60833 13.1667 4.825 13.3C5.04167 13.4333 5.19167 13.6333 5.275 13.9C5.675 15.4 6.5 16.625 7.75 17.575C9 18.525 10.4167 19 12 19C13.95 19 15.6042 18.3208 16.9625 16.9625C18.3208 15.6042 19 13.95 19 12C19 10.05 18.3208 8.39583 16.9625 7.0375C15.6042 5.67917 13.95 5 12 5C10.85 5 9.775 5.26667 8.775 5.8C7.775 6.33333 6.93333 7.06667 6.25 8H8C8.28333 8 8.52083 8.09583 8.7125 8.2875C8.90417 8.47917 9 8.71667 9 9C9 9.28333 8.90417 9.52083 8.7125 9.7125C8.52083 9.90417 8.28333 10 8 10H4C3.71667 10 3.47917 9.90417 3.2875 9.7125C3.09583 9.52083 3 9.28333 3 9V5C3 4.71667 3.09583 4.47917 3.2875 4.2875C3.47917 4.09583 3.71667 4 4 4C4.28333 4 4.52083 4.09583 4.7125 4.2875C4.90417 4.47917 5 4.71667 5 5V6.35C5.85 5.28333 6.8875 4.45833 8.1125 3.875C9.3375 3.29167 10.6333 3 12 3C13.25 3 14.4208 3.2375 15.5125 3.7125C16.6042 4.1875 17.5542 4.82917 18.3625 5.6375C19.1708 6.44583 19.8125 7.39583 20.2875 8.4875C20.7625 9.57917 21 10.75 21 12C21 13.25 20.7625 14.4208 20.2875 15.5125C19.8125 16.6042 19.1708 17.5542 18.3625 18.3625C17.5542 19.1708 16.6042 19.8125 15.5125 20.2875C14.4208 20.7625 13.25 21 12 21ZM13 11.6L15.5 14.1C15.6833 14.2833 15.775 14.5167 15.775 14.8C15.775 15.0833 15.6833 15.3167 15.5 15.5C15.3167 15.6833 15.0833 15.775 14.8 15.775C14.5167 15.775 14.2833 15.6833 14.1 15.5L11.3 12.7C11.2 12.6 11.125 12.4875 11.075 12.3625C11.025 12.2375 11 12.1083 11 11.975V8C11 7.71667 11.0958 7.47917 11.2875 7.2875C11.4792 7.09583 11.7167 7 12 7C12.2833 7 12.5208 7.09583 12.7125 7.2875C12.9042 7.47917 13 7.71667 13 8V11.6Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_language.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z" fill="black"/>
+</svg>

src/assets/icons/icon_logout.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H11C11.2833 3 11.5208 3.09583 11.7125 3.2875C11.9042 3.47917 12 3.71667 12 4C12 4.28333 11.9042 4.52083 11.7125 4.7125C11.5208 4.90417 11.2833 5 11 5H5V19H11C11.2833 19 11.5208 19.0958 11.7125 19.2875C11.9042 19.4792 12 19.7167 12 20C12 20.2833 11.9042 20.5208 11.7125 20.7125C11.5208 20.9042 11.2833 21 11 21H5ZM17.175 13H10C9.71667 13 9.47917 12.9042 9.2875 12.7125C9.09583 12.5208 9 12.2833 9 12C9 11.7167 9.09583 11.4792 9.2875 11.2875C9.47917 11.0958 9.71667 11 10 11H17.175L15.3 9.125C15.1167 8.94167 15.025 8.71667 15.025 8.45C15.025 8.18333 15.1167 7.95 15.3 7.75C15.4833 7.55 15.7167 7.44583 16 7.4375C16.2833 7.42917 16.525 7.525 16.725 7.725L20.3 11.3C20.5 11.5 20.6 11.7333 20.6 12C20.6 12.2667 20.5 12.5 20.3 12.7L16.725 16.275C16.525 16.475 16.2875 16.5708 16.0125 16.5625C15.7375 16.5542 15.5 16.45 15.3 16.25C15.1167 16.05 15.0292 15.8125 15.0375 15.5375C15.0458 15.2625 15.1417 15.0333 15.325 14.85L17.175 13Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_more.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5998 12L8.6998 8.10005C8.51647 7.91672 8.4248 7.68338 8.4248 7.40005C8.4248 7.11672 8.51647 6.88338 8.6998 6.70005C8.88314 6.51672 9.11647 6.42505 9.3998 6.42505C9.68314 6.42505 9.91647 6.51672 10.0998 6.70005L14.6998 11.3C14.7998 11.4 14.8706 11.5084 14.9123 11.625C14.954 11.7417 14.9748 11.8667 14.9748 12C14.9748 12.1334 14.954 12.2584 14.9123 12.375C14.8706 12.4917 14.7998 12.6 14.6998 12.7L10.0998 17.3C9.91647 17.4834 9.68314 17.575 9.3998 17.575C9.11647 17.575 8.88314 17.4834 8.6998 17.3C8.51647 17.1167 8.4248 16.8834 8.4248 16.6C8.4248 16.3167 8.51647 16.0834 8.6998 15.9L12.5998 12Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_next.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.175 13.0001H5C4.71667 13.0001 4.47917 12.9043 4.2875 12.7126C4.09583 12.5209 4 12.2834 4 12.0001C4 11.7168 4.09583 11.4793 4.2875 11.2876C4.47917 11.0959 4.71667 11.0001 5 11.0001H16.175L11.275 6.10011C11.075 5.90011 10.9792 5.66678 10.9875 5.40011C10.9958 5.13344 11.1 4.90011 11.3 4.70011C11.5 4.51678 11.7333 4.42094 12 4.41261C12.2667 4.40428 12.5 4.50011 12.7 4.70011L19.3 11.3001C19.4 11.4001 19.4708 11.5084 19.5125 11.6251C19.5542 11.7418 19.575 11.8668 19.575 12.0001C19.575 12.1334 19.5542 12.2584 19.5125 12.3751C19.4708 12.4918 19.4 12.6001 19.3 12.7001L12.7 19.3001C12.5167 19.4834 12.2875 19.5751 12.0125 19.5751C11.7375 19.5751 11.5 19.4834 11.3 19.3001C11.1 19.1001 11 18.8626 11 18.5876C11 18.3126 11.1 18.0751 11.3 17.8751L16.175 13.0001Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_ok.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M9.55021 15.15L18.0252 6.675C18.2252 6.475 18.4585 6.375 18.7252 6.375C18.9919 6.375 19.2252 6.475 19.4252 6.675C19.6252 6.875 19.7252 7.1125 19.7252 7.3875C19.7252 7.6625 19.6252 7.9 19.4252 8.1L10.2502 17.3C10.0502 17.5 9.81687 17.6 9.55021 17.6C9.28354 17.6 9.05021 17.5 8.85021 17.3L4.55021 13C4.35021 12.8 4.25437 12.5625 4.26271 12.2875C4.27104 12.0125 4.37521 11.775 4.57521 11.575C4.77521 11.375 5.01271 11.275 5.28771 11.275C5.56271 11.275 5.80021 11.375 6.00021 11.575L9.55021 15.15Z" fill="#4CAF50"/>
+</svg>

src/assets/icons/icon_receive.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 19C5.71667 19 5.47917 18.9042 5.2875 18.7125C5.09583 18.5209 5 18.2834 5 18V10C5 9.71672 5.09583 9.47922 5.2875 9.28755C5.47917 9.09588 5.71667 9.00005 6 9.00005C6.28333 9.00005 6.52083 9.09588 6.7125 9.28755C6.90417 9.47922 7 9.71672 7 10V15.6L17.9 4.70005C18.0833 4.51672 18.3167 4.42505 18.6 4.42505C18.8833 4.42505 19.1167 4.51672 19.3 4.70005C19.4833 4.88338 19.575 5.11672 19.575 5.40005C19.575 5.68338 19.4833 5.91672 19.3 6.10005L8.4 17H14C14.2833 17 14.5208 17.0959 14.7125 17.2875C14.9042 17.4792 15 17.7167 15 18C15 18.2834 14.9042 18.5209 14.7125 18.7125C14.5208 18.9042 14.2833 19 14 19H6Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_search.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L20.3 18.9C20.4833 19.0833 20.575 19.3167 20.575 19.6C20.575 19.8833 20.4833 20.1167 20.3 20.3C20.1167 20.4833 19.8833 20.575 19.6 20.575C19.3167 20.575 19.0833 20.4833 18.9 20.3L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_sell.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 18.175L14.9 16.3C15.0833 16.1167 15.3167 16.025 15.6 16.025C15.8833 16.025 16.1167 16.1167 16.3 16.3C16.4833 16.4833 16.575 16.7167 16.575 17C16.575 17.2833 16.4833 17.5167 16.3 17.7L12.7 21.3C12.5167 21.4833 12.2833 21.575 12 21.575C11.7167 21.575 11.4833 21.4833 11.3 21.3L7.7 17.7C7.51667 17.5167 7.425 17.2833 7.425 17C7.425 16.7167 7.51667 16.4833 7.7 16.3C7.88333 16.1167 8.11667 16.025 8.4 16.025C8.68333 16.025 8.91667 16.1167 9.1 16.3L11 18.175V9C11 8.71667 11.0958 8.47917 11.2875 8.2875C11.4792 8.09583 11.7167 8 12 8C12.2833 8 12.5208 8.09583 12.7125 8.2875C12.9042 8.47917 13 8.71667 13 9V18.175ZM12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 12.55 4.05417 13.0917 4.1625 13.625C4.27083 14.1583 4.43333 14.675 4.65 15.175C4.76667 15.4583 4.80417 15.7417 4.7625 16.025C4.72083 16.3083 4.59167 16.5583 4.375 16.775C4.175 16.975 3.92917 17.0208 3.6375 16.9125C3.34583 16.8042 3.125 16.5917 2.975 16.275C2.65833 15.5917 2.41667 14.8958 2.25 14.1875C2.08333 13.4792 2 12.75 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 12.75 21.9208 13.4875 21.7625 14.2125C21.6042 14.9375 21.3583 15.6417 21.025 16.325C20.875 16.625 20.6542 16.825 20.3625 16.925C20.0708 17.025 19.825 16.975 19.625 16.775C19.425 16.575 19.2958 16.3333 19.2375 16.05C19.1792 15.7667 19.2083 15.4917 19.325 15.225C19.5583 14.7083 19.7292 14.1792 19.8375 13.6375C19.9458 13.0958 20 12.55 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_send-1.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9998 8.4L6.0998 19.3C5.91647 19.4833 5.68314 19.575 5.3998 19.575C5.11647 19.575 4.88314 19.4833 4.6998 19.3C4.51647 19.1167 4.4248 18.8833 4.4248 18.6C4.4248 18.3167 4.51647 18.0833 4.6998 17.9L15.5998 7H9.9998C9.71647 7 9.47897 6.90417 9.2873 6.7125C9.09564 6.52083 8.9998 6.28333 8.9998 6C8.9998 5.71667 9.09564 5.47917 9.2873 5.2875C9.47897 5.09583 9.71647 5 9.9998 5H17.9998C18.2831 5 18.5206 5.09583 18.7123 5.2875C18.904 5.47917 18.9998 5.71667 18.9998 6V14C18.9998 14.2833 18.904 14.5208 18.7123 14.7125C18.5206 14.9042 18.2831 15 17.9998 15C17.7165 15 17.479 14.9042 17.2873 14.7125C17.0956 14.5208 16.9998 14.2833 16.9998 14V8.4Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_send.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 19.75C4.26667 19.3 2.83333 18.3667 1.7 16.95C0.566667 15.5333 0 13.8833 0 12C0 10.1167 0.566667 8.46667 1.7 7.05C2.83333 5.63333 4.26667 4.7 6 4.25V6.35C4.81667 6.75 3.85417 7.46667 3.1125 8.5C2.37083 9.53333 2 10.7 2 12C2 13.3 2.37083 14.4667 3.1125 15.5C3.85417 16.5333 4.81667 17.25 6 17.65V19.75ZM14 20C11.7833 20 9.89583 19.2208 8.3375 17.6625C6.77917 16.1042 6 14.2167 6 12C6 9.78333 6.77917 7.89583 8.3375 6.3375C9.89583 4.77917 11.7833 4 14 4C15.1 4 16.1333 4.20833 17.1 4.625C18.0667 5.04167 18.9167 5.61667 19.65 6.35L18.25 7.75C17.7 7.2 17.0625 6.77083 16.3375 6.4625C15.6125 6.15417 14.8333 6 14 6C12.3333 6 10.9167 6.58333 9.75 7.75C8.58333 8.91667 8 10.3333 8 12C8 13.6667 8.58333 15.0833 9.75 16.25C10.9167 17.4167 12.3333 18 14 18C14.8333 18 15.6125 17.8458 16.3375 17.5375C17.0625 17.2292 17.7 16.8 18.25 16.25L19.65 17.65C18.9167 18.3833 18.0667 18.9583 17.1 19.375C16.1333 19.7917 15.1 20 14 20ZM20 16L18.6 14.6L20.2 13H13V11H20.2L18.6 9.4L20 8L24 12L20 16Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_set card password.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 15.9999H14C14.2833 15.9999 14.5208 15.9041 14.7125 15.7124C14.9042 15.5207 15 15.2832 15 14.9999V11.9999C15 11.7166 14.9042 11.4791 14.7125 11.2874C14.5208 11.0957 14.2833 10.9999 14 10.9999V9.9999C14 9.4499 13.8042 8.97907 13.4125 8.5874C13.0208 8.19574 12.55 7.9999 12 7.9999C11.45 7.9999 10.9792 8.19574 10.5875 8.5874C10.1958 8.97907 10 9.4499 10 9.9999V10.9999C9.71667 10.9999 9.47917 11.0957 9.2875 11.2874C9.09583 11.4791 9 11.7166 9 11.9999V14.9999C9 15.2832 9.09583 15.5207 9.2875 15.7124C9.47917 15.9041 9.71667 15.9999 10 15.9999ZM11 10.9999V9.9999C11 9.71657 11.0958 9.47907 11.2875 9.2874C11.4792 9.09574 11.7167 8.9999 12 8.9999C12.2833 8.9999 12.5208 9.09574 12.7125 9.2874C12.9042 9.47907 13 9.71657 13 9.9999V10.9999H11ZM12 21.8999C11.8833 21.8999 11.775 21.8916 11.675 21.8749C11.575 21.8582 11.475 21.8332 11.375 21.7999C9.125 21.0499 7.33333 19.6624 6 17.6374C4.66667 15.6124 4 13.4332 4 11.0999V6.3749C4 5.95824 4.12083 5.58324 4.3625 5.2499C4.60417 4.91657 4.91667 4.6749 5.3 4.5249L11.3 2.2749C11.5333 2.19157 11.7667 2.1499 12 2.1499C12.2333 2.1499 12.4667 2.19157 12.7 2.2749L18.7 4.5249C19.0833 4.6749 19.3958 4.91657 19.6375 5.2499C19.8792 5.58324 20 5.95824 20 6.3749V11.0999C20 13.4332 19.3333 15.6124 18 17.6374C16.6667 19.6624 14.875 21.0499 12.625 21.7999C12.525 21.8332 12.425 21.8582 12.325 21.8749C12.225 21.8916 12.1167 21.8999 12 21.8999ZM12 19.8999C13.7333 19.3499 15.1667 18.2499 16.3 16.5999C17.4333 14.9499 18 13.1166 18 11.0999V6.3749L12 4.1249L6 6.3749V11.0999C6 13.1166 6.56667 14.9499 7.7 16.5999C8.83333 18.2499 10.2667 19.3499 12 19.8999Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_transfer.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.8248 17.0001L7.7248 18.9001C7.9248 19.1001 8.02064 19.3334 8.0123 19.6001C8.00397 19.8668 7.8998 20.1001 7.6998 20.3001C7.4998 20.4834 7.26647 20.5793 6.9998 20.5876C6.73314 20.5959 6.4998 20.5001 6.2998 20.3001L2.6998 16.7001C2.5998 16.6001 2.52897 16.4918 2.4873 16.3751C2.44564 16.2584 2.4248 16.1334 2.4248 16.0001C2.4248 15.8668 2.44564 15.7418 2.4873 15.6251C2.52897 15.5084 2.5998 15.4001 2.6998 15.3001L6.2998 11.7001C6.48314 11.5168 6.7123 11.4251 6.9873 11.4251C7.2623 11.4251 7.4998 11.5168 7.6998 11.7001C7.8998 11.9001 7.9998 12.1376 7.9998 12.4126C7.9998 12.6876 7.8998 12.9251 7.6998 13.1251L5.8248 15.0001H19.9998C20.2831 15.0001 20.5206 15.0959 20.7123 15.2876C20.904 15.4793 20.9998 15.7168 20.9998 16.0001C20.9998 16.2834 20.904 16.5209 20.7123 16.7126C20.5206 16.9043 20.2831 17.0001 19.9998 17.0001H5.8248ZM18.1748 9.00011H3.9998C3.71647 9.00011 3.47897 8.90428 3.2873 8.71261C3.09564 8.52094 2.9998 8.28344 2.9998 8.00011C2.9998 7.71678 3.09564 7.47928 3.2873 7.28761C3.47897 7.09594 3.71647 7.00011 3.9998 7.00011H18.1748L16.2748 5.10011C16.0748 4.90011 15.979 4.66678 15.9873 4.40011C15.9956 4.13344 16.0998 3.90011 16.2998 3.70011C16.4998 3.51678 16.7331 3.42094 16.9998 3.41261C17.2665 3.40428 17.4998 3.50011 17.6998 3.70011L21.2998 7.30011C21.3998 7.40011 21.4706 7.50844 21.5123 7.62511C21.554 7.74178 21.5748 7.86678 21.5748 8.00011C21.5748 8.13344 21.554 8.25844 21.5123 8.37511C21.4706 8.49178 21.3998 8.60011 21.2998 8.70011L17.6998 12.3001C17.5165 12.4834 17.2873 12.5751 17.0123 12.5751C16.7373 12.5751 16.4998 12.4834 16.2998 12.3001C16.0998 12.1001 15.9998 11.8626 15.9998 11.5876C15.9998 11.3126 16.0998 11.0751 16.2998 10.8751L18.1748 9.00011Z" fill="#1A1A1A"/>
+</svg>

src/assets/icons/icon_upload.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0209 4 18.55 4 18V16C4 15.7167 4.09583 15.4792 4.2875 15.2875C4.47917 15.0959 4.71667 15 5 15C5.28333 15 5.52083 15.0959 5.7125 15.2875C5.90417 15.4792 6 15.7167 6 16V18H18V16C18 15.7167 18.0958 15.4792 18.2875 15.2875C18.4792 15.0959 18.7167 15 19 15C19.2833 15 19.5208 15.0959 19.7125 15.2875C19.9042 15.4792 20 15.7167 20 16V18C20 18.55 19.8042 19.0209 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6ZM11 7.85005L9.125 9.72505C8.925 9.92505 8.6875 10.0209 8.4125 10.0125C8.1375 10.0042 7.9 9.90005 7.7 9.70005C7.51667 9.50005 7.42083 9.26672 7.4125 9.00005C7.40417 8.73338 7.5 8.50005 7.7 8.30005L11.3 4.70005C11.4 4.60005 11.5083 4.52922 11.625 4.48755C11.7417 4.44588 11.8667 4.42505 12 4.42505C12.1333 4.42505 12.2583 4.44588 12.375 4.48755C12.4917 4.52922 12.6 4.60005 12.7 4.70005L16.3 8.30005C16.5 8.50005 16.5958 8.73338 16.5875 9.00005C16.5792 9.26672 16.4833 9.50005 16.3 9.70005C16.1 9.90005 15.8625 10.0042 15.5875 10.0125C15.3125 10.0209 15.075 9.92505 14.875 9.72505L13 7.85005V15C13 15.2834 12.9042 15.5209 12.7125 15.7125C12.5208 15.9042 12.2833 16 12 16C11.7167 16 11.4792 15.9042 11.2875 15.7125C11.0958 15.5209 11 15.2834 11 15V7.85005Z" fill="#1F1F1F"/>
+</svg>

src/assets/icons/icon_wallet.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 20C4.9 20 3.95833 19.6083 3.175 18.825C2.39167 18.0417 2 17.1 2 16V8C2 6.9 2.39167 5.95833 3.175 5.175C3.95833 4.39167 4.9 4 6 4H18C19.1 4 20.0417 4.39167 20.825 5.175C21.6083 5.95833 22 6.9 22 8V16C22 17.1 21.6083 18.0417 20.825 18.825C20.0417 19.6083 19.1 20 18 20H6ZM6 8H18C18.3667 8 18.7167 8.04167 19.05 8.125C19.3833 8.20833 19.7 8.34167 20 8.525V8C20 7.45 19.8042 6.97917 19.4125 6.5875C19.0208 6.19583 18.55 6 18 6H6C5.45 6 4.97917 6.19583 4.5875 6.5875C4.19583 6.97917 4 7.45 4 8V8.525C4.3 8.34167 4.61667 8.20833 4.95 8.125C5.28333 8.04167 5.63333 8 6 8ZM4.15 11.25L15.275 13.95C15.425 13.9833 15.575 13.9833 15.725 13.95C15.875 13.9167 16.0167 13.85 16.15 13.75L19.625 10.85C19.4417 10.6 19.2083 10.3958 18.925 10.2375C18.6417 10.0792 18.3333 10 18 10H6C5.56667 10 5.1875 10.1125 4.8625 10.3375C4.5375 10.5625 4.3 10.8667 4.15 11.25Z" fill="#474747"/>
+</svg>

src/assets/icons/icon_withdraw.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 11C11.1667 11 10.4583 10.7083 9.875 10.125C9.29167 9.54167 9 8.83333 9 8C9 7.16667 9.29167 6.45833 9.875 5.875C10.4583 5.29167 11.1667 5 12 5C12.8333 5 13.5417 5.29167 14.125 5.875C14.7083 6.45833 15 7.16667 15 8C15 8.83333 14.7083 9.54167 14.125 10.125C13.5417 10.7083 12.8333 11 12 11ZM5 14C4.45 14 3.97917 13.8042 3.5875 13.4125C3.19583 13.0208 3 12.55 3 12V4C3 3.45 3.19583 2.97917 3.5875 2.5875C3.97917 2.19583 4.45 2 5 2H19C19.55 2 20.0208 2.19583 20.4125 2.5875C20.8042 2.97917 21 3.45 21 4V12C21 12.55 20.8042 13.0208 20.4125 13.4125C20.0208 13.8042 19.55 14 19 14H5ZM7 12H17C17 11.45 17.1958 10.9792 17.5875 10.5875C17.9792 10.1958 18.45 10 19 10V6C18.45 6 17.9792 5.80417 17.5875 5.4125C17.1958 5.02083 17 4.55 17 4H7C7 4.55 6.80417 5.02083 6.4125 5.4125C6.02083 5.80417 5.55 6 5 6V10C5.55 10 6.02083 10.1958 6.4125 10.5875C6.80417 10.9792 7 11.45 7 12ZM11 18.2L10.1 17.3C9.91667 17.1167 9.68333 17.025 9.4 17.025C9.11667 17.025 8.88333 17.1167 8.7 17.3C8.51667 17.4833 8.425 17.7167 8.425 18C8.425 18.2833 8.51667 18.5167 8.7 18.7L11.3 21.3C11.4 21.4 11.5083 21.4708 11.625 21.5125C11.7417 21.5542 11.8667 21.575 12 21.575C12.1333 21.575 12.2583 21.5542 12.375 21.5125C12.4917 21.4708 12.6 21.4 12.7 21.3L15.3 18.7C15.4833 18.5167 15.575 18.2833 15.575 18C15.575 17.7167 15.4833 17.4833 15.3 17.3C15.1167 17.1167 14.8833 17.025 14.6 17.025C14.3167 17.025 14.0833 17.1167 13.9 17.3L13 18.2V16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16V18.2Z" fill="#1F1F1F"/>
+</svg>

src/assets/scss/global/global.scss

@@ -13,8 +13,8 @@
     --main-bg: #fff;
     --card-bg: #222;
     --action-bg: #fff;
-    --main-yellow:  #EA002A;
-    --lable:  #454745;
+    --main-yellow: #EA002A;
+    --lable: #454745;
     --main-yellow-dark: rgb(15 120 71);
     --white: #000;
     --gray: #aaa;
@@ -37,14 +37,15 @@
     --font-size-36: 36px;
     --font-size-40: 40px;
 }
-.dark{
+
+.dark {
     --main-bg: #181a1b;
     --card-bg: #222;
     --action-bg: #232323;
-    --main-yellow:  rgb(6 255 139);
+    --main-yellow: rgb(6 255 139);
     --main-yellow-dark: rgb(15 120 71);
     --white: #fff;
-    --lable:  #aaa;
+    --lable: #aaa;
     --gray: #aaa;
     --border: #333;
     --black: #000;
@@ -76,6 +77,7 @@ html {
     @media screen and (max-width: $vmMinWindow) {
         font-size: math.div($vmFontSize, $vmDesignWidth) * $vmMinWindow;
     }
+
     @media screen and (min-width: $vmMaxWindow) {
         --body-width: $vmMaxWindow;
 
@@ -112,7 +114,6 @@ body {
     max-width: var(--max-window);
     min-width: var(--min-window);
     overflow-y: scroll;
-    background: #f8f8f8;
     box-sizing: border-box;
     transition: all 0.4s;
     -webkit-overflow-scrolling: touch;
@@ -209,6 +210,7 @@ body {
         z-index: -1;
     }
 }
+
 .full-screen-loading {
     width: 100vw;
     height: 100vh;
@@ -219,6 +221,7 @@ body {
         opacity: 0;
         transform: translate(-50%, -48%);
     }
+
     to {
         opacity: 1;
         transform: translate(-50%, -50%);
@@ -347,3 +350,210 @@ body {
 }
 
 /* end--Retina 屏幕下的 1px 边框--end */
+
+
+
+.cwg-button {
+    width: 100%;
+
+    .van-button {
+        height: 44px;
+        border-radius: 24px;
+        background: var(--main-yellow);
+        border: none;
+        color: var(--black);
+        font-size: var(--font-size-16);
+        font-weight: bold;
+
+        &:active {
+            opacity: 0.9;
+        }
+    }
+}
+
+.fixed-btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 12px 16px;
+    color: var(--black);
+    background-color: var(--black);
+    box-shadow: 0px -1px 4px rgba(134, 134, 133, 0.25);
+    // z-index: 9999;
+}
+
+.cwg-upload {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    width: 100%;
+    height: 160px;
+    border: 1px dashed #beb6b6;
+    border-radius: 24px;
+
+    .name {
+        line-height: 44px;
+        font-weight: 600;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #1a1a1a;
+    }
+
+    .back {
+        font-size: 16px;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        letter-spacing: 0.005em;
+        color: #474747;
+    }
+}
+
+// .status-success {
+//     color: #4CAF50 !important;
+// }
+
+// .status-warning {
+//     color: #faad14 !important;
+// }
+
+// .status-error {
+//     color: #D32F2F !important;
+// }
+
+// .status-default {
+//     color: #1a1a1a !important;
+// }
+
+.g {
+    display: flex;
+
+    img {
+        height: 50px;
+    }
+
+    .g-l {
+        margin-left: 16px;
+        flex: 1;
+
+        .g-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 16px;
+        }
+
+        .label {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: left;
+            color: #1a1a1a;
+        }
+
+        .v {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+            color: #1a1a1a;
+        }
+    }
+}
+
+.fixed-right {
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    top: 4px;
+    right: 10px;
+    cursor: pointer;
+    color: var(--main-yellow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+
+    i {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        font-size: 14px;
+        color: var(--main-yellow);
+    }
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.status-default {
+    display: flex;
+    padding: 4px 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 9999px;
+    border: 0px solid #F4F4F4;
+    background: rgba(0, 157, 235, 0.20);
+    color: #009DEB;
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.06px;
+}
+
+.status-success {
+    background: rgba(76, 175, 80, 0.20);
+    color: #4CAF50;
+}
+
+.status-error {
+    background: rgba(211, 47, 47, 0.21);
+    color: #D32F2F;
+}
+
+.status-views {
+    display: flex;
+    width: 65.063px;
+    // height: 36px;
+    padding: 8px 16px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    background: #EA002A;
+    color: #FFF;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: 0.07px;
+}
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+}

src/components.d.ts

@@ -8,29 +8,34 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ApplyCard: typeof import('./components/ApplyCard.vue')['default']
+    ApplyRecord: typeof import('./components/ApplyRecord.vue')['default']
     CurrencySelect: typeof import('./components/CurrencySelect.vue')['default']
     CustomTabbar: typeof import('./components/CustomTabbar.vue')['default']
     EmptyComponents: typeof import('./components/empty-components.vue')['default']
     EmptyState: typeof import('./components/EmptyState.vue')['default']
+    FirstApply: typeof import('./components/FirstApply.vue')['default']
+    Icon: typeof import('./components/Icon.vue')['default']
     JsxComponents: typeof import('./components/jsx-components.tsx')['default']
+    Logout: typeof import('./components/Logout.vue')['default']
+    MoreSelect: typeof import('./components/MoreSelect.vue')['default']
     PageHeader: typeof import('./components/PageHeader.vue')['default']
     RemitInput: typeof import('./components/RemitInput.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StepList: typeof import('./components/StepList.vue')['default']
+    SuccessPrompt: typeof import('./components/SuccessPrompt.vue')['default']
     ULoadmore: typeof import('./components/u-loadmore.vue')['default']
+    VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanButton: typeof import('vant/es')['Button']
     VanCalendar: typeof import('vant/es')['Calendar']
-    VanCell: typeof import('vant/es')['Cell']
-    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
-    VanDatePicker: typeof import('vant/es')['DatePicker']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanDropdownItem: typeof import('vant/es')['DropdownItem']
+    VanDropdownMenu: typeof import('vant/es')['DropdownMenu']
     VanField: typeof import('vant/es')['Field']
+    'VanField=': typeof import('vant/es')['Field=']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
-    VanImage: typeof import('vant/es')['Image']
-    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanLoading: typeof import('vant/es')['Loading']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']

src/components/ApplyCard.vue

@@ -1,227 +0,0 @@
-<template>
-    <div class="apply-card-content">
-        <div class="apply-card-steps">
-            <div class="steps-top">
-                <div class="step">
-                    <div class="step-circle">1</div>
-                    <div class="step-label">申请购买卡片</div>
-                </div>
-                <div class="step-dash"></div>
-                <div class="step">
-                    <div class="step-circle">2</div>
-                    <div class="step-label">卡片邮寄到家</div>
-                </div>
-                <div class="step-dash"></div>
-                <div class="step">
-                    <div class="step-circle">3</div>
-                    <div class="step-label">激活收到的卡片</div>
-                </div>
-            </div>
-        </div>
-        <button class="apply-btn" @click="handleApply">申请银行卡</button>
-        <button class="activate-btn" @click="handleActivate">已收到卡片？ 立即激活</button>
-        <div class="apply-card-footer">
-            <EmptyState v-if="cardList.length === 0" icon="i-mdi-receipt-text-outline" text="暂无卡片" />
-            <!-- <div class="apply-card-empty">
-                <svg
-                    t="1749207046076"
-                    class="icon"
-                    viewBox="0 0 1024 1024"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="2492"
-                    width="48"
-                    height="48"
-                >
-                    <path
-                        d="M283.473171 71.180488h283.47317c16.234146 0 28.721951-12.487805 28.721952-28.721951 0-16.234146-12.487805-28.721951-28.721952-28.721952H283.473171c-16.234146 0-28.721951 12.487805-28.721951 28.721952 0 16.234146 12.487805 28.721951 28.721951 28.721951z"
-                        fill="rgb(6 255 139)"
-                        p-id="2493"
-                    ></path>
-                    <path
-                        d="M709.307317 826.692683l-3.746341 3.746341c-6.243902 6.243902-14.985366 9.990244-23.72683 9.990244s-18.731707-3.746341-24.975609-11.239024c-6.243902-7.492683-8.741463-16.234146-8.741464-24.97561V799.219512c8.741463-78.673171 29.970732-154.84878 62.439025-226.029268L849.170732 274.731707V71.180488c0-31.219512-24.97561-57.443902-56.195122-57.443903h-109.892683c-6.243902 0-12.487805 4.995122-13.736586 11.239025l-21.229268 81.170731c-3.746341 12.487805-14.985366 21.229268-27.473171 21.229269H228.526829c-12.487805 0-23.726829-8.741463-27.47317-21.229269L179.82439 24.97561c-1.24878-6.243902-7.492683-11.239024-13.736585-11.239025H56.195122C24.97561 14.985366 0 39.960976 0 71.180488v881.639024c0 31.219512 24.97561 57.443902 56.195122 57.443903h735.531707c31.219512 0 56.195122-24.97561 56.195122-57.443903V613.15122l-8.741463 18.731707c-31.219512 71.180488-74.926829 137.365854-129.873171 194.809756zM196.058537 333.42439h455.804878c14.985366 0 27.473171 12.487805 27.47317 27.473171 0 14.985366-12.487805 27.473171-27.47317 27.473171H196.058537c-14.985366 0-27.473171-12.487805-27.473171-27.473171 1.24878-14.985366 12.487805-27.473171 27.473171-27.473171zM524.487805 847.921951H189.814634c-14.985366 0-27.473171-12.487805-27.473171-27.473171s12.487805-27.473171 27.473171-27.47317H524.487805c14.985366 0 27.473171 12.487805 27.473171 27.47317s-12.487805 27.473171-27.473171 27.473171z m68.682927-229.77561H196.058537c-14.985366 0-27.473171-12.487805-27.473171-27.47317 0-14.985366 12.487805-27.473171 27.473171-27.473171h397.112195c14.985366 0 27.473171 12.487805 27.47317 27.473171 0 14.985366-12.487805 27.473171-27.47317 27.47317z"
-                        fill="rgb(6 255 139)"
-                        p-id="2494"
-                    ></path>
-                    <path
-                        d="M1000.273171 109.892683c-19.980488-9.990244-44.956098 0-53.697561 19.980488L738.029268 584.429268c-31.219512 68.682927-51.2 142.360976-59.941463 217.287805v4.995122c0 2.497561 3.746341 4.995122 4.995122 2.497561l3.746341-3.746341c51.2-54.946341 93.658537-118.634146 124.878049-187.317074l208.546342-454.556097c9.990244-19.980488 0-43.707317-19.980488-53.697561z"
-                        fill="rgb(6 255 139)"
-                        p-id="2495"
-                    ></path>
-                </svg>
-                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect x="8" y="12" width="32" height="24" rx="4" fill="#232323" stroke="rgb(6 255 139)" stroke-width="2" />
-                    <rect x="20" y="20" width="8" height="2" rx="1" fill="rgb(6 255 139)" />
-                    <circle cx="34" cy="34" r="6" fill="rgb(6 255 139)" />
-                    <rect x="32" y="32" width="4" height="2" rx="1" fill="#232323" />
-                </svg>
-
-                <div class="empty-text">暂无卡片</div>
-            </div> -->
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-import EmptyState from '@/components/EmptyState.vue'
-const cardList = ref<any[]>([])
-const router = useRouter()
-
-const handleActivate = () => {
-    return
-    router.push('/activate/card')
-}
-
-const handleApply = () => {
-    return
-    router.push('/select/card')
-}
-</script>
-
-<style scoped>
-.apply-card-header {
-    font-size: 20px;
-    color: #fff;
-    font-weight: 600;
-    margin-bottom: 18px;
-}
-.apply-card-img {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 18px;
-}
-.apply-card-visual {
-    position: relative;
-    width: 90px;
-    height: 60px;
-    background: transparent;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(214, 255, 0, 0.1);
-}
-.chip {
-    position: absolute;
-    right: 12px;
-    top: 22px;
-    width: 22px;
-    height: 16px;
-    background: #eaeaea;
-    border-radius: 4px;
-    border: 1.5px solid #bbb;
-}
-.apply-card-steps {
-    width: 100%;
-    margin-bottom: 52px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.steps-top {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    position: relative;
-    max-width: 600px;
-    margin: 0 auto;
-}
-.step {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    z-index: 2;
-    flex: 0 0 auto;
-}
-.step-circle {
-    width: 28px;
-    height: 28px;
-    background: #232323;
-    color: var(--main-yellow);
-    border-radius: 50%;
-    font-size: 14px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid var(--main-yellow);
-    margin-bottom: 8px;
-    transition: all 0.3s ease;
-}
-.step-circle:hover {
-    transform: scale(1.1);
-    box-shadow: 0 0 10px rgba(73, 247, 166, 0.3);
-}
-.step-dash {
-    flex: 1;
-    height: 2px;
-    background: repeating-linear-gradient(to right, var(--main-yellow), var(--main-yellow) 6px, transparent 6px, transparent 12px);
-    min-width: 18px;
-    position: relative;
-    top: -16px;
-}
-.step-label {
-    color: var(--main-yellow);
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    line-height: 2;
-}
-.apply-btn {
-    width: 90%;
-    max-width: 320px;
-    background: var(--main-yellow);
-    color: #232323;
-    border: none;
-    border-radius: 24px;
-    font-size: 17px;
-    font-weight: 600;
-    padding: 12px 0;
-    margin: 0 auto 14px;
-    display: block;
-    box-shadow: 0 2px 8px rgba(214, 255, 0, 0.15);
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.apply-btn:hover {
-    background: var(--main-yellow-dark);
-}
-.activate-btn {
-    width: 90%;
-    max-width: 320px;
-    background: transparent;
-    color: var(--main-yellow);
-    border: 1.5px solid var(--main-yellow);
-    border-radius: 24px;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 10px 0;
-    margin: 0 auto 18px;
-    display: block;
-    cursor: pointer;
-    transition: background 0.2s, color 0.2s;
-}
-.activate-btn:hover {
-    background: var(--main-yellow);
-    color: #232323;
-}
-.apply-card-footer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 48px;
-}
-.apply-card-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-}
-.empty-text {
-    color: var(--main-yellow);
-    font-size: 15px;
-    margin-top: 2px;
-}
-</style>

src/components/ApplyRecord.vue

@@ -0,0 +1,731 @@
+<template>
+    <div :class="['page', cardInfo.applyStatus == 1 ? 'page' : 'page']">
+        <div class="card-swiper">
+            <div class="swiper-container">
+                <div class="card-wrapper">
+                    <div class="card-info" @click.stop="(e: MouseEvent) => toggleCardNo(card.id, e)" :class="{ flipping: isFlipping[cardInfo.id] }">
+                        <img src="@/assets/images/logo.png" alt="" srcset="" />
+                        <div class="number">
+                            {{ cardInfo?.cardNo?.replace(/(\d{4})\d+(\d{4})/, '$1 **** **** $2') }}
+                        </div>
+                        <div class="card-b">
+                            <div class="valid">
+                                <span class="lable">{{ t('cards.p13') }}</span>
+                                <span>{{ cardInfo.firstName }} {{ cardInfo.lastName }}</span>
+                            </div>
+                            <div class="valid">
+                                <span class="lable">{{ t('cards.p14') }}</span>
+                                <span>{{ cardInfo.expire }}</span>
+                            </div>
+                        </div>
+                        <img
+                            v-if="cardInfo.status != 1"
+                            src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg"
+                            class="flags"
+                            @click.stop="ucardActivate(cardInfo.id)"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="balance-content">{{ t('apply-record-detail.p1') }}</div>
+        <div class="g">
+            <img src="../assets/images/apply-record-1.png" alt="" />
+            <div class="g-l">
+                <div class="g-item">
+                    <div class="label a1">{{ cardInfo.cardName }}</div>
+                </div>
+                <div class="g-item">
+                    <div class="label">{{ t('apply-record-detail.p2') }}</div>
+                    <div :class="statusClass(cardInfo.kycStatus)">{{ statusMap[cardInfo.kycStatus] }}</div>
+                </div>
+                <div class="g-item" v-if="cardInfo.applyStatus === 0 || cardInfo.applyStatus === 1">
+                    <div class="label">{{ t('apply-record-detail.p7') }}</div>
+                    <div :class="statusClass1(cardInfo.applyStatus)">{{ applyStatusMap[cardInfo.applyStatus] }}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card-info1" v-if="cardInfo.cardName && !props.type">
+            <div class="card-title">{{ cardInfo.cardName }}</div>
+            <div class="card-content">{{ cardInfo.cardDesc }}</div>
+            <ul class="card-list">
+                <li>
+                    <span class="label">{{ t(`select-card.kycRequire`) }}</span>
+                    <span>{{ cardInfo.kycRequire ? t('select-card.kycRequiredDesc') : t('select-card.kycRequiredDesc2') }}</span>
+                </li>
+                <li>
+                    <span class="label">{{ t('select-card.currency') }}</span>
+                    <span>{{ cardInfo?.rechargeCurrencyInfoList[0]?.currency }}</span>
+                </li>
+                <li>
+                    <span class="label">{{ t('select-card.needPhotoForActiveCard') }}</span>
+                    <span>{{
+                        cardInfo.needPhotoForActiveCard ? t('select-card.needPhotoForActiveCardDesc') : t('select-card.needPhotoForActiveCardDesc2')
+                    }}</span>
+                </li>
+                <li>
+                    <span class="label">{{ t('select-card.needPhotoForOperateCard') }}</span>
+                    <span>{{ cardInfo.kycRequire ? t('select-card.kycRequiredDesc') : t('select-card.kycRequiredDesc2') }}</span>
+                </li>
+                <li>
+                    <span class="label">{{ t('select-card.status') }}</span>
+                    <span>{{ cardInfo.status ? t('select-card.statusDesc') : t('select-card.statusDesc2') }}</span>
+                </li>
+                <li class="one">
+                    <span class="label">{{ t('select-card.price') }}</span>
+                    <span>{{ t('select-card.free') }}</span>
+                </li>
+            </ul>
+        </div>
+
+        <div class="fixed-btn" v-if="cardInfo.kycStatus === 2 && cardInfo.applyStatus === null">
+            <div class="cwg-button">
+                <van-button type="primary" block @click="handleApply(3, cardInfo)">{{ t('cards.p7') }}</van-button>
+            </div>
+        </div>
+
+        <div class="fixed-btn" v-if="[null, -1, 1, 3].includes(cardInfo.kycStatus)">
+            <div class="cwg-button">
+                <van-button type="primary" block @click="handleApply(3, cardInfo)">{{ t('cards.p7') }}</van-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import useUserStore from '@/stores/use-user-store'
+const userStore = useUserStore()
+const cardList = computed(() => userStore.userCard)
+const { t } = useI18n()
+const cardInfo = ref({})
+const showCardNo = ref<{ [key: string]: boolean }>({})
+const isFlipping = ref<{ [key: string]: boolean }>({})
+const isShowBtn = ref(false)
+const dateRange = ref<[string, string] | undefined>(undefined)
+dateRange.value = ['', '']
+const props = defineProps({
+    cardTypeId: String,
+    type: String,
+})
+async function getKycList() {
+    let b = cardList.value.filter((i) => {
+        return i.kycStatus == null
+    })
+    if (b.length != 0) {
+        isShowBtn.value = true
+    } else {
+        isShowBtn.value = false
+    }
+    let filtered = cardList.value
+    if (props.cardTypeId) {
+        filtered = cardList.value.filter((item) => item.cardTypeId == props.cardTypeId)
+    }
+    cardInfo.value = filtered[0]
+    console.log(cardInfo.value, 12)
+}
+const statusMap: Record<string, string> = {
+    null: t('kyc.statusDesc'),
+    '-1': t('kyc.statusDesc'),
+    '1': t('kyc.statusDesc2'),
+    '2': t('kyc.statusDesc3'),
+    '3': t('kyc.statusDesc4'),
+}
+const applyStatusMap: Record<string, string> = {
+    '0': t('apply-record-detail.p8'),
+    '1': t('apply-record-detail.p6'),
+}
+function statusClass(status: number) {
+    switch (status) {
+        case 2:
+            return 'status-default status-success'
+        case 3:
+            return 'status-default status-error'
+        default:
+            return 'status-default'
+    }
+}
+function statusClass1(status: number) {
+    switch (status) {
+        case 1:
+            return 'status-default status-success'
+        default:
+            return 'status-default'
+    }
+}
+
+const toggleCardNo = (cardId: string, event: MouseEvent) => {
+    event.stopPropagation()
+    isFlipping.value[cardId] = !isFlipping.value[cardId]
+    showCardNo.value[cardId] = !showCardNo.value[cardId]
+}
+
+onMounted(async () => {
+    cardList.value.forEach((card) => {
+        showCardNo.value[card.id] = false
+        isFlipping.value[card.id] = false
+    })
+    getKycList()
+})
+</script>
+
+<style scoped lang="scss">
+.page {
+    padding: 16px 16px 150px 16px;
+    box-sizing: border-box;
+    min-height: 100vh;
+    background: var(--main-bg);
+}
+.page1 {
+    padding: 16px;
+}
+.card-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+}
+
+.card-info {
+    background: url(/src/assets/images/visa.png) no-repeat center center;
+    background-size: cover;
+    border-radius: 0.426667rem;
+    padding: 0.64rem 0.533333rem 0 0.533333rem;
+    color: var(--main-yellow);
+    box-shadow: 0 0.106667rem 0.533333rem rgba(214, 255, 0, 0.1);
+    border: 1px solid rgba(214, 255, 0, 0.2);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    flex-wrap: wrap;
+    transform-style: preserve-3d;
+    transition: transform 0.6s ease;
+    flex-direction: column;
+
+    &.flipping {
+        transform: rotateY(180deg);
+    }
+
+    .card-b {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        span {
+            display: block;
+        }
+        .valid {
+            font-size: var(--font-size-14);
+            font-weight: 500;
+            color: var(--black);
+            text-shadow: 0 0 8px rgba(214, 255, 0, 0.2);
+            gap: 8px;
+            padding-right: 30px;
+            line-height: 20px;
+        }
+        .lable {
+            font-size: var(--font-size-10);
+            font-weight: 400;
+        }
+    }
+}
+
+.card-front,
+.card-back {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 24px 20px 16px 20px;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.card-back {
+    transform: rotateY(180deg);
+}
+
+.owner {
+    font-size: var(--font-size-14);
+    line-height: 2;
+    margin-bottom: 8px;
+    text-shadow: 0 0 10px rgba(214, 255, 0, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    i {
+        font-size: var(--font-size-18);
+        color: var(--main-yellow);
+    }
+}
+
+.number {
+    color: var(--black);
+    font-size: var(--font-size-18);
+    font-weight: 500;
+    line-height: 3;
+    letter-spacing: 2px;
+    margin: 24px 0;
+    text-shadow: 0 0 15px rgba(214, 255, 0, 0.4);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.actions {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0 16px 0;
+}
+
+.action-btn {
+    color: var(--white);
+    border: none;
+    border-radius: 12px;
+    padding: 10px 2px;
+    font-size: var(--font-size-14);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.3s ease;
+    text-align: center;
+    color: #1a1a1a;
+
+    .btn-icon {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+        background: #ff4766;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    i {
+        display: inline-block;
+        line-height: 46px;
+        width: 22px;
+        height: 22px;
+        color: var(--black);
+        margin-bottom: 4px;
+    }
+}
+
+.balance-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 30px 0;
+    font-size: var(--font-size-14);
+}
+
+.balance-content {
+    font-size: var(--font-size-20);
+    color: var(--white);
+    font-weight: bold;
+    margin-bottom: 24px;
+}
+
+.balance-title {
+    font-size: var(--font-size-12);
+    color: var(--white);
+}
+
+.currency {
+    display: flex;
+    align-items: center;
+    font-size: var(--font-size-14);
+    margin-right: 12px;
+    color: var(--white);
+}
+
+.flag {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 6px;
+}
+
+.balance {
+    font-size: var(--font-size-14);
+    font-weight: bold;
+    color: var(--white);
+}
+
+.transactions {
+    border-radius: 16px;
+    margin-bottom: 16px;
+    padding: 16px 0;
+}
+.trans-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    background: var(--main-bg);
+    box-shadow: 0 4px 12px rgba(214, 255, 0, 0.1);
+    border-radius: 8px;
+    margin-right: 12px;
+    align-items: center;
+    justify-content: center;
+    .trans-icon-inner {
+        width: 36px;
+        height: 36px;
+        background: rgba(212, 206, 206, 0.24);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    i {
+        color: #000;
+        width: 18px;
+        height: 18px;
+        font-size: var(--font-size-16);
+        border-radius: 50%;
+    }
+}
+
+.trans-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    color: var(--white);
+    i {
+        font-size: var(--font-size-20);
+        cursor: pointer;
+    }
+}
+::v-deep .van-calendar {
+    background: var(--action-bg);
+}
+::v-deep .van-calendar__month-mark {
+    display: none;
+}
+::v-deep .van-calendar__header-subtitle {
+    color: var(--white);
+}
+::v-deep .van-calendar__header-title {
+    color: var(--white);
+}
+::v-deep .van-calendar__month-title {
+    color: var(--main-yellow);
+}
+
+.trans-title {
+    font-size: var(--font-size-20);
+    color: var(--white);
+    font-weight: bold;
+}
+
+.date-field {
+    width: 200px;
+
+    :deep(.van-field__control) {
+        color: var(--white);
+    }
+
+    :deep(.van-field__placeholder) {
+        color: var(--gray);
+    }
+}
+
+:deep(.van-popup) {
+    background: var(--action-bg);
+}
+
+:deep(.van-picker__toolbar) {
+    background: var(--action-bg);
+    border-bottom: 1px solid var(--border);
+}
+
+:deep(.van-picker__title) {
+    color: var(--white);
+}
+
+:deep(.van-picker__confirm) {
+    color: var(--main-yellow);
+}
+
+:deep(.van-picker__cancel) {
+    color: var(--gray);
+}
+
+:deep(.van-picker-column) {
+    color: var(--white);
+}
+
+:deep(.van-picker-column__item) {
+    color: var(--white);
+}
+
+:deep(.van-picker-column__item--selected) {
+    color: var(--main-yellow);
+}
+
+.transaction {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+    /* border-bottom: 1px solid var(--border); */
+    font-size: var(--font-size-16);
+}
+
+.transaction:last-child {
+    border-bottom: none;
+}
+
+.trans-left {
+    width: 200px;
+}
+
+.trans-right {
+    width: 100px;
+
+    div {
+        text-align: right;
+    }
+}
+
+.trans-type {
+    color: var(--white);
+    font-size: var(--font-size-14);
+    line-height: 2;
+}
+
+.trans-desc {
+    font-size: var(--font-size-12);
+    color: var(--gray);
+}
+
+.trans-amount {
+    font-size: var(--font-size-14);
+    color: var(--white);
+    line-height: 2;
+}
+
+.trans-date {
+    color: var(--gray);
+    font-size: var(--font-size-12);
+}
+
+.card-swiper {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 20px;
+    padding-bottom: 5px;
+}
+
+.swiper-container {
+    position: relative;
+    width: 100%;
+    height: 209px;
+    touch-action: pan-y pinch-zoom;
+    user-select: none;
+}
+
+.card-info {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s ease;
+    will-change: transform;
+}
+
+.swiper-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 16px;
+    gap: 16px;
+}
+
+.swiper-btn {
+    background: var(--action-bg);
+    border: none;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--main-yellow);
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    i {
+        font-size: var(--font-size-20);
+    }
+}
+
+.swiper-dots {
+    display: flex;
+    gap: 8px;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--action-bg);
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &.active {
+        background: var(--main-yellow);
+        transform: scale(1.2);
+    }
+}
+
+.swiper-indicators {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+    gap: 8px;
+}
+
+.indicator-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--action-bg);
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &.active {
+        background: var(--main-yellow);
+        transform: scale(1.2);
+    }
+}
+.flags {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.cwg-btn {
+    margin: 36px 0 80px 0;
+}
+
+.card-info1 {
+    width: 100%;
+}
+
+.card-chip {
+    position: absolute;
+    right: 12px;
+    top: 16px;
+    width: 18px;
+    height: 12px;
+    background: linear-gradient(145deg, #f5f5f5, #eaeaea);
+    border-radius: 3px;
+    border: 1px solid #bbb;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+    margin: 24px 0 12px 0;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 28px;
+    text-align: left;
+    color: #1a1a1a;
+}
+
+.card-list {
+    list-style: none;
+    padding: 12px 0;
+    margin: 0;
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+    box-shadow: 0 4px 20px rgba(140, 145, 143, 0.194);
+    border-radius: 10px;
+}
+
+.card-list li {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-12);
+    color: #1a1a1a;
+    padding: 12px 24px;
+    transition: all 0.3s ease;
+    position: relative;
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.label {
+    width: 200px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #8e8a8a;
+}
+
+.card-list li:hover {
+    background: rgba(73, 247, 166, 0.1);
+    border-radius: 6px;
+}
+
+.card-list li:last-child {
+    margin-bottom: 0;
+}
+
+.card-list li span:first-child {
+    color: #bbb;
+}
+
+.card-content {
+    font-size: var(--font-size-16);
+    color: #474747;
+    margin: 0 0 26px 0;
+    text-align: left;
+    line-height: 24px;
+}
+.a1 {
+    flex: 1;
+}
+.card-list {
+    .one {
+        margin: 12px 24px;
+        padding: 12px 0;
+        border-top: 1px dashed #beb6b6;
+        color: #329644;
+        font-family: Roboto;
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 36px;
+        align-items: flex-end;
+        .label {
+            color: #343434;
+            font-family: Roboto;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 24px;
+        }
+    }
+}
+</style>

src/components/CurrencySelect.vue

@@ -1,80 +1,151 @@
 <template>
-    <van-popup v-model:show="show" round position="bottom" :style="{ background: 'transparent', boxShadow: 'none' }">
-      <div class="currency-mask">
-        <div class="currency-select">
-          <div
-            v-for="item in options"
-            :key="item.value"
-            class="currency-item"
-            @click="select(item)"
-          >
-            {{ item.label }}
-          </div>
-          <div class="cancel-btn" @click="close">取消</div>
+    <van-action-sheet v-model:show="show" class="sheet">
+        <div class="currency-mask">
+            <div class="search" v-if="showSearch">
+                <van-field
+                    class="form-input"
+                    v-model="inputValueDoc"
+                    type="text"
+                    :placeholder="t('common.country')"
+                    :clearable="true"
+                    autocomplete="off"
+                >
+                    <template #left-icon><icon name="cwg-search" :size="23" color="" /> </template>
+                </van-field>
+            </div>
+            <div class="currency-select">
+                <div v-for="item in filteredOptions" :key="item.value" class="currency-item" @click="select(item)">
+                    <img :src="imageSrc(item.value)" alt="" srcset="" />
+                    {{ item.value }}
+                    <span> {{ item.text }} </span>
+                </div>
+            </div>
         </div>
-      </div>
-    </van-popup>
-  </template>
+    </van-action-sheet>
+</template>
 
-  <script setup lang="ts">
-  const props = defineProps<{
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
+const props = defineProps<{
     modelValue: boolean
-    options: Array<{ label: string; value: string }>
-  }>()
-  const emit = defineEmits(['update:modelValue', 'select'])
+    showSearch: boolean
+    options: Array<{ text: string; value: string }>
+}>()
+const inputValueDoc = ref('')
+const emit = defineEmits(['update:modelValue', 'select'])
 
-  const show = ref(props.modelValue)
-  watch(() => props.modelValue, val => (show.value = val))
-  watch(show, val => emit('update:modelValue', val))
+const show = ref(props.modelValue)
 
-  function select(item: { label: string; value: string }) {
+const filteredOptions = computed(() => {
+    if (!inputValueDoc.value) return props.options
+    const keyword = inputValueDoc.value.toLowerCase()
+    return props.options.filter((item) => item.text.toLowerCase().includes(keyword) || item.value.toLowerCase().includes(keyword))
+})
+const images = import.meta.glob('@/assets/images/currency/*.png', { eager: true })
+
+const imageSrc = (currency:string) => {
+  return images[`/src/assets/images/currency/${currency}.png`]?.default || fallbackImg
+}
+
+watch(
+    () => props.modelValue,
+    (val) => (show.value = val),
+)
+watch(show, (val) => emit('update:modelValue', val))
+
+function select(item: { text: string; value: string }) {
     emit('select', item)
     show.value = false
-  }
-  function close() {
-    show.value = false
-  }
-  </script>
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.van-action-sheet){
+    max-height: 80vh;
 
-  <style scoped>
-  .currency-mask {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.45);
+}
+.currency-mask{
+    padding: 24px 16px 0 16px;
+}
+.search {
+    color: #8e8a8a;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.08px;
     display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-  }
-  .currency-select {
-    width: 100vw;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 82px;
+    border-radius: 30px;
+    border: 1px solid #beb6b6;
+    :deep(.van-field) {
+        padding: 0;
+    }
+    :deep(.van-field__left-icon) {
+        display: flex;
+        align-items: center;
+    }
+}
+.currency-select {
+    height: calc(80vh - 98px);
+    overflow-y: auto;
     padding: 0 0 22px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     z-index: 2;
-  }
-  .currency-item {
-    width: 90vw;
-    padding: 20px 0;
-    text-align: center;
-    font-size: 22px;
-    background: var(--main-yellow);
-    color: #111;
-    margin-bottom: 16px;
-    border-radius: 20px;
-    font-weight: 500;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  }
-  .cancel-btn {
+}
+.currency-item {
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 10px;
+    color: #0e0f0c;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+    letter-spacing: -0.08px;
+
+    span {
+        color: #454745;
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        letter-spacing: 0.14px;
+    }
+
+    img {
+        display: flex;
+        width: 48px;
+        height: 48px;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 1/1;
+        border-radius: 100px;
+        border: 1px solid rgba(14, 15, 12, 0.12);
+        box-shadow: 0px 0px 40px 0px rgba(69, 71, 69, 0.2);
+    }
+}
+.cancel-btn {
     width: 90vw;
     padding: 20px 0;
     text-align: center;
     color: #111;
-    background: var(--main-yellow);
     border-radius: 20px;
     font-weight: bold;
     font-size: 22px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  }
-  </style>
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+</style>

src/components/CustomTabbar.vue

@@ -7,7 +7,8 @@
         @click="onTabClick(item.path)"
       >
         <span class="tabbar-icon">
-          <van-icon :name="route.path === item.path ? item.iconActive : item.icon" />
+
+          <icon :name="route.path === item.path ? item.iconActive : item.icon" />
         </span>
         <span class="tabbar-label">{{ item.label }}</span>
       </div>
@@ -17,7 +18,6 @@
   <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
   import { useRouter, useRoute } from 'vue-router'
-  import { Icon as VanIcon } from 'vant'
 
   const { t } = useI18n()
   const router = useRouter()
@@ -27,14 +27,14 @@
     {
       label: t('tabs.wallet'),
       path: '/',
-      icon: 'balance-o',
-      iconActive: 'balance-o',
+      icon: 'icon_wallet',
+      iconActive: 'icon_wallet',
     },
     {
       label: t('tabs.cards'),
       path: '/cards',
-      icon: 'credit-pay',
-      iconActive: 'credit-pay',
+      icon: 'icon_card',
+      iconActive: 'icon_card',
     },
   //   {
   //     label: t('tabs.finance'),
@@ -45,8 +45,8 @@
     {
       label: t('tabs.mine'),
       path: '/mine',
-      icon: 'user-o',
-      iconActive: 'user',
+      icon: 'icon_my',
+      iconActive: 'icon_my',
     },
   ]
 
@@ -72,7 +72,6 @@
     box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
     z-index: 100;
     margin: 0 8px 0px 8px;
-    padding-bottom: 8px;
   }
   .tabbar-item {
     flex: 1;
@@ -82,7 +81,9 @@
     justify-content: center;
     color: var(--white);
     font-size: var(--font-size-12);
+    font-weight: 600;
     border-radius: 12px;
+    line-height: 16px;
     padding: 8px 0;
     cursor: pointer;
   }

src/components/EmptyState.vue

@@ -1,38 +1,59 @@
 <template>
     <div class="empty-state">
-        <i :class="icon"></i>
-        <p>{{ text }}</p>
+        <img src="@/assets/images/undraw.png" alt="" />
+        <div class="r">
+            <p class="title">{{ title }}</p>
+            <p class="text">{{ text }}</p>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
-    icon?: string
-    text?: string
-}>(), {
-    icon: 'i-mdi-receipt-text-outline',
-    text: '暂无数据'
-})
+withDefaults(
+    defineProps<{
+        text?: string
+        title?: string
+    }>(),
+    {
+        title: '暂无数据',
+        text: '暂无数据',
+    },
+)
 </script>
 
 <style scoped lang="scss">
 .empty-state {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    padding: 16px;
     justify-content: center;
-    padding: 40px 0;
-    color: var(--gray);
+    align-items: center;
+    border-radius: 12px;
+    /* background: #fff; */
+    gap: 24px;
+    /* box-shadow: 0px 5px 30px 0px rgba(5, 0, 1, 0.05); */
 
-    i {
-        font-size: 48px;
-        margin-bottom: 16px;
-        opacity: 0.5;
-        color: var(--main-yellow);
+    img {
+        width: 100px !important;
+        height: 98px !important;
     }
 
-    p {
-        font-size: var(--font-size-14);
+    .title {
+        color: #1a1a1a;
+        font-family: Roboto;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        margin-bottom: 8px;
+    }
+    .text {
+        color: #474747;
+        font-family: Roboto;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0.07px;
     }
 }
 </style>

src/components/FirstApply.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="page">
+        <img class="imgs" src="../assets/images/frst-apply-img.png" alt="" srcset="" />
+        <div class="apply-card-steps">
+            <div class="steps-top">
+                <div class="step">
+                    <div class="step-circle">1</div>
+                    <div class="step-label">{{ t('cards.p1') }}</div>
+                </div>
+                <div class="step-dash"></div>
+                <div class="step">
+                    <div class="step-circle">2</div>
+                    <div class="step-label">{{ t('cards.p2') }}</div>
+                </div>
+                <div class="step-dash"></div>
+                <div class="step">
+                    <div class="step-circle">3</div>
+                    <div class="step-label">{{ t('cards.p3') }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="cwg-button">
+            <van-button type="primary" block @click="handleApply">{{ t('cards.p4') }}</van-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const { t } = useI18n()
+const handleApply = () => {
+    router.push('/select/card')
+}
+</script>
+
+<style scoped lang="scss">
+.page{
+    margin: 140px 16px 0 16px;
+}
+.imgs{
+    margin-left: 74px;
+    margin-bottom: 40px;
+}
+.apply-card-steps {
+    width: 100%;
+    margin-bottom: 52px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.steps-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+    max-width: 600px;
+    margin: 0 auto;
+}
+.step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+    flex: 0 0 auto;
+}
+.step-circle {
+    width: 28px;
+    height: 28px;
+    color: var(--main-yellow);
+    border-radius: 50%;
+    font-size: 14px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--main-yellow);
+    margin-bottom: 8px;
+    transition: all 0.3s ease;
+}
+.step-circle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 10px rgba(73, 247, 166, 0.3);
+}
+.step-dash {
+    flex: 1;
+    height: 2px;
+    background: repeating-linear-gradient(to right, var(--main-yellow), var(--main-yellow) 6px, transparent 6px, transparent 12px);
+    min-width: 18px;
+    position: relative;
+    top: -16px;
+}
+.step-label {
+    color: var(--white);
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 2;
+}
+</style>

src/components/Icon.vue

@@ -0,0 +1,45 @@
+<template>
+    <span
+      class="icon"
+      v-html="svgContent"
+      :style="{ width: size + 'px', height: size + 'px', color }"
+    />
+  </template>
+
+  <script setup>
+  import { ref, watchEffect } from 'vue'
+
+  const props = defineProps({
+    name: { type: String, required: true },         // 图标名，如 download → download.svg
+    size: { type: [Number, String], default: 24 },
+    color: { type: String, default: '' }
+  })
+
+  const svgContent = ref('')
+
+  // 使用 Vite 的 glob 导入所有图标
+  const modules = import.meta.glob('@/assets/icons/*.svg', { as: 'raw' })
+
+  watchEffect(async () => {
+    const path = `/src/assets/icons/${props.name}.svg`
+    const loader = modules[path]
+
+    if (loader) {
+      const raw = await loader()
+      // 替换 fill="..." 为 fill="currentColor"，使颜色可控
+      svgContent.value = raw.replace(/fill="[^"]*"/g, 'fill="currentColor"')
+    } else {
+      console.warn(`[Icon] SVG not found: ${props.name}`)
+      svgContent.value = ''
+    }
+  })
+  </script>
+
+  <style scoped>
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+  }
+  </style>

src/components/MoreSelect.vue

@@ -0,0 +1,201 @@
+<template>
+    <div>
+        <van-action-sheet v-model:show="show" :style="actionSheetStyle">
+            <div class="currency-mask">
+                <div class="search" v-if="showSearch && props.options.length > 10">
+                    <van-field
+                        class="form-input"
+                        v-model="inputValueDoc"
+                        type="text"
+                        placeholder="Type a currency / country"
+                        :clearable="true"
+                        autocomplete="off"
+                    >
+                        <template #left-icon><icon name="cwg-search" :size="23" color="" /> </template>
+                    </van-field>
+                </div>
+                <div class="currency-select" :style="actionSheetStyle1">
+                    <template v-if="filteredOptions.length > 0">
+                        <div
+                            v-for="(item, index) in filteredOptions"
+                            class="currency-item"
+                            :class="{ selected: item.text === inputValue }"
+                            @click="select(item)"
+                            :key="item.value + index"
+                            :ref="item.text === inputValue ? 'selectedItem' : null"
+                        >
+                            {{ item.text }}
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </van-action-sheet>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    modelValue: boolean
+    showSearch: Boolean
+    inputValue: string
+    options: Array<{ text: string; value: string }>
+}>()
+const inputValueDoc = ref('')
+const emit = defineEmits(['update:modelValue', 'select'])
+
+const show = ref(props.modelValue)
+const selectedItem = ref()
+const filteredOptions = computed(() => {
+    if (!inputValueDoc.value) return props.options
+    const keyword = inputValueDoc.value.toLowerCase()
+    return props.options.filter((item) => item.text.toLowerCase().includes(keyword))
+})
+
+watch(
+    () => props.modelValue,
+    (val) => (show.value = val),
+)
+watch(show, async (val) => {
+    emit('update:modelValue', val)
+    inputValueDoc.value = ''
+    if (val) {
+        await nextTick()
+        setTimeout(() => {
+            const el = Array.isArray(selectedItem.value) ? selectedItem.value[0] : selectedItem.value
+            if (el && el.scrollIntoView) {
+                el.scrollIntoView({ block: 'center' })
+            }
+        }, 300)
+    }
+})
+const actionSheetStyle = computed(() => {
+    if (props?.options.length > 10) {
+        return {
+            maxHeight: `80vh`,
+            padding: '24px 16px 0 16px',
+        }
+    } else {
+        const itemHeight = 56
+        const baseHeight = 0
+        const maxHeight = Math.min(props?.options.length * itemHeight + baseHeight, window.innerHeight * 0.8)
+        return {
+            maxHeight: `${maxHeight}px`,
+            padding: '24px 16px 0 16px',
+        }
+    }
+})
+const actionSheetStyle1 = computed(() => {
+    if (props?.options.length > 10) {
+        return {
+            maxHeight: `calc(80vh - 98px)`,
+        }
+    } else {
+        const itemHeight = 56
+        const baseHeight = 0
+        const maxHeight = Math.min(props?.options.length * itemHeight + baseHeight, window.innerHeight * 0.8)
+        return {
+            maxHeight: `${maxHeight}px`,
+        }
+    }
+})
+function select(item: { text: string; value: string }) {
+    emit('select', item)
+    show.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.sheet {
+    :deep(.van-action-sheet) {
+        min-height: 20vh;
+        max-height: 80vh;
+    }
+}
+.search {
+    color: #8e8a8a;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.08px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 82px;
+    border-radius: 30px;
+    border: 1px solid #beb6b6;
+    :deep(.van-field) {
+        padding: 0;
+    }
+    :deep(.van-field__left-icon) {
+        display: flex;
+        align-items: center;
+    }
+}
+.payment-form .van-field {
+    margin-bottom: 0 !important;
+}
+.currency-select {
+    height: calc(80vh - 98px);
+    overflow-y: auto;
+    padding: 0 0 22px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 2;
+}
+.currency-item {
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 10px;
+    color: #0e0f0c;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+    letter-spacing: -0.08px;
+
+    span {
+        color: #454745;
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        letter-spacing: 0.14px;
+    }
+
+    img {
+        display: flex;
+        width: 48px;
+        height: 48px;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 1/1;
+        border-radius: 100px;
+        border: 1px solid rgba(14, 15, 12, 0.12);
+        box-shadow: 0px 0px 40px 0px rgba(69, 71, 69, 0.2);
+    }
+}
+.selected {
+    border-radius: 10px;
+    background: rgba(255, 209, 216, 0.85);
+}
+.cancel-btn {
+    width: 90vw;
+    padding: 20px 0;
+    text-align: center;
+    color: #111;
+    border-radius: 20px;
+    font-weight: bold;
+    font-size: 22px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+</style>

src/components/PageHeader.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+// import { useRouter } from 'vue-router'
 import { Icon as VanIcon } from 'vant'
 
 const router = useRouter()

src/components/RemitInput.vue

@@ -8,10 +8,11 @@
                 class="form-input"
                 v-model="inputValueDoc"
                 :type="type"
-                :placeholder="placeholder"
+                :placeholder="placeholder ? placeholder : t('common.input')"
                 :readonly="readonly"
                 :disabled="disabled"
                 :clearable="clearable"
+                :name="fkey"
                 :rules="[...rules]"
                 :maxlength="maxlength"
                 autocomplete="off"
@@ -28,8 +29,9 @@
             <van-field
                 class="form-input"
                 v-model="inputValueDoc"
+                :name="fkey"
                 type="number"
-                :placeholder="placeholder"
+                :placeholder="placeholder ? placeholder : t('common.input')"
                 :readonly="readonly"
                 :disabled="disabled"
                 :clearable="clearable"
@@ -43,11 +45,30 @@
                 ><slot></slot
             ></van-field>
         </template>
+        <template v-if="type === 'dropdown'">
+            <van-field
+                class="form-input"
+                v-model="inputValueDoc"
+                :name="fkey"
+                :placeholder="placeholder ? placeholder : t('common.choose')"
+                :readonly="true"
+                :disabled="disabled"
+                :clearable="clearable"
+                :rules="[...rules]"
+                :error-message="errorMessage"
+                is-link
+                @click="!disabled && (showPicker = true)"
+                @clear="handleClear"
+                ><slot></slot
+            ></van-field>
+            <van-action-sheet v-model:show="showPicker" :actions="filteredColumns" @select="onConfirm" />
+        </template>
         <template v-if="type === 'select'">
             <van-field
                 class="form-input"
                 v-model="inputValueDoc"
-                :placeholder="placeholder"
+                :name="fkey"
+                :placeholder="placeholder ? placeholder : t('common.choose')"
                 :readonly="true"
                 :disabled="disabled"
                 :clearable="clearable"
@@ -58,24 +79,14 @@
                 @clear="handleClear"
                 ><slot></slot
             ></van-field>
-            <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
-                <van-field
-                    v-if="showSearch"
-                    class="form-input search-field"
-                    v-model="searchText"
-                    :clearable="clearable"
-                    autocomplete="off"
-                    :placeholder="t('eur-remit.search')"
-                    clearable
-                />
-                <van-picker :columns="filteredColumns" v-model="selectedValue" :loading="loading" @cancel="showPicker = false" @confirm="onConfirm" />
-            </van-popup>
+            <MoreSelect :showSearch="showSearch" :input-value="inputValueDoc" :options="filteredColumns" v-model="showPicker" @select="onConfirm" />
         </template>
         <template v-if="type === 'date'">
             <van-field
                 class="form-input"
                 v-model="inputValueDoc"
-                :placeholder="placeholder"
+                :name="fkey"
+                :placeholder="placeholder ? placeholder : t('common.choose')"
                 :readonly="true"
                 :disabled="disabled"
                 :rules="[...rules]"
@@ -101,7 +112,10 @@
         <template v-if="type === 'upload'">
             <van-field name="uploader" class="form-input uploader" :rules="[...rules]">
                 <template #input>
-                    <van-uploader v-model="uploader" :max-count="1" :after-read="afterRead" />
+                    <van-uploader :accept="accept" v-model="uploader" :max-count="1" :after-read="afterRead" v-if="!isUploadD"></van-uploader>
+                    <van-uploader v-model="uploader" :max-count="1" :after-read="afterRead" v-if="isUploadD">
+                        <slot></slot>
+                    </van-uploader>
                 </template>
             </van-field>
         </template>
@@ -127,7 +141,9 @@ const afterRead = async (file) => {
         closeToast()
         inputValueDoc.value = result.data
         showToast('上传成功')
-        setTimeout(()=>{isUploading.value = false},100)
+        setTimeout(() => {
+            isUploading.value = false
+        }, 100)
     } catch (error) {
         showToast('上传失败')
     }
@@ -137,9 +153,12 @@ const props = defineProps({
     type: { type: String, default: 'text', validator: (v) => ['text', 'password', 'number', 'select', 'date'].includes(v) },
     label: String,
     fkey: String,
-    showSearch: { type: Boolean, default: false },
+    accept: String,
+    showSearch: Boolean,
+    isUploadD: { type: Boolean, default: false },
     value: { type: [String, Number] },
-    placeholder: { type: String, default: '请输入' },
+    placeholder: String,
+    direction: { type: String, default: 'down' },
     disabled: Boolean,
     readonly: Boolean,
     required: Boolean,
@@ -156,39 +175,40 @@ const props = defineProps({
 const emit = defineEmits(['update:value', 'blur', 'focus', 'clear', 'confirm', 'change'])
 const inputValueDoc = ref('')
 const selectedValue = ref([])
-const inputValue = ref('')
 const showPicker = ref(false)
 const loading = ref(false)
 const searchText = ref('')
 
 const filteredColumns = computed(() => {
-    if (!searchText.value) {
-        return props.columns
+    if (props.type == 'dropdown') {
+        return props.columns.map((item) => {
+            return { ...item, name: item.text }
+        })
     }
-    return props.columns.filter((item) => item.text.toLowerCase().includes(searchText.value.toLowerCase()))
+    return props.columns
 })
 
 watch(
     () => inputValueDoc.value,
     (newVal) => {
         if (!newVal) return
-        if (props.type === 'text' || props.type === 'number') {
-            inputValue.value = newVal
+        if (props.type === 'text' || props.type === 'number' || props.type === 'password') {
             emit('update:value', newVal)
             emit('change', { value: newVal, key: props.fkey })
         } else if (props.type === 'select') {
             const matched = props.columns.find((opt) => opt.text === newVal)
-            inputValue.value = matched?.value || ''
             emit('update:value', matched?.value || '')
             emit('change', { value: matched?.value || '', key: props.fkey })
         } else if (props.type === 'date') {
-            inputValue.value = newVal
             emit('update:value', newVal)
             emit('change', { value: newVal, key: props.fkey })
         } else if (props.type === 'upload') {
-            inputValue.value = newVal
             emit('update:value', newVal)
             emit('change', { value: newVal, key: props.fkey })
+        } else if (props.type === 'dropdown') {
+            const matched = props.columns.find((opt) => opt.text === newVal)
+            emit('update:value', matched?.value || '')
+            emit('change', { value: matched?.value || '', key: props.fkey })
         }
     },
 )
@@ -199,18 +219,19 @@ watch(
         if (!newVal || isUploading.value) return
         if (props.type === 'date') {
             inputValueDoc.value = newVal ? dayjs(newVal).format('YYYY-MM-DD') : ''
-            inputValue.value = newVal
         } else if (props.type === 'select') {
             const matched = props.columns.find((opt) => opt.value === newVal)
             inputValueDoc.value = matched?.text || ''
-            inputValue.value = matched?.value || ''
             selectedValue.value = [matched?.value]
         } else if (props.type === 'upload') {
             uploader.value = [{ url: props.value }]
             inputValueDoc.value = props.value
+        } else if (props.type === 'dropdown') {
+            const matched = props.columns.find((opt) => opt.value === newVal)
+            inputValueDoc.value = matched?.text || ''
+            selectedValue.value = [matched?.value]
         } else {
             inputValueDoc.value = newVal
-            inputValue.value = newVal
         }
     },
     { immediate: true },
@@ -226,19 +247,14 @@ const handleFocus = (event) => {
 
 const handleClear = () => {
     inputValueDoc.value = ''
-    inputValue.value = ''
     emit('update:value', '')
     emit('clear')
 }
 
 const onConfirm = (value) => {
-    const selectedValue = value.selectedValues?.[0]
-    const selectedText = value.selectedOptions?.[0]?.text || ''
+    const selectedText = value.text || ''
     inputValueDoc.value = selectedText
-    searchText.value = ''
     showPicker.value = false
-    emit('update:value', selectedValue)
-    emit('change', selectedValue)
 }
 
 const onDateConfirm = (value) => {
@@ -252,16 +268,16 @@ const onDateConfirm = (value) => {
 <style scoped lang="scss">
 .form-group {
     width: 100%;
-    margin-bottom: 8px;
+    margin-bottom: 24px;
+    transform: none;
 }
 
 .form-label {
-    font-family: 'Inter';
-    font-style: normal;
-    font-size: var(--font-size-14);
-    line-height: 22px;
+    font-size: var(--font-size-16);
+    line-height: 24px;
     letter-spacing: 1px;
-    color: var(--lable);
+    color: #474747;
+
     span {
         color: red;
     }
@@ -280,8 +296,12 @@ const onDateConfirm = (value) => {
         }
     }
 }
+:deep(.van-action-sheet) {
+    min-height: 20vh;
+    max-height: 50vh;
+}
 .search-field {
-    background: #181818 !important;
+    background: var(--black);
     border: none !important;
     padding-left: 20px !important;
 }
@@ -289,12 +309,15 @@ const onDateConfirm = (value) => {
     border: none !important;
     background: transparent !important;
     padding-left: 0;
+    padding-right: 0;
 }
 ::v-deep .van-popup {
-    background: #181818 !important;
+    background: var(--black);
 }
-::v-deep .van-field__right-icon {
+:deep(.van-icon) {
+    height: 22px;
     color: var(--black1) !important;
+    line-height: 22px;
 }
 ::v-deep .van-field {
     background: transparent;
@@ -302,18 +325,16 @@ const onDateConfirm = (value) => {
 }
 ::v-deep .van-field__control {
     color: var(--white);
-}
-::v-deep .van-uploader__upload {
-    /* background: #181818; */
+    line-height: 22px;
 }
 ::v-deep .van-calendar {
-    background: var(--action-bg);
+    background: var(--black);
 }
 ::v-deep .van-picker {
-    background: var(--action-bg);
+    background: var(--black);
 }
 ::v-deep .van-picker__columns {
-    background: var(--action-bg);
+    background: var(--black);
 }
 ::v-deep .van-calendar__month-mark {
     display: none;
@@ -329,10 +350,10 @@ const onDateConfirm = (value) => {
 }
 ::v-deep {
     .van-picker {
-        background: #181818;
+        background: var(--black);
 
         .van-picker__toolbar {
-            background: #181818;
+            background: var(--black);
             border-bottom: 1px solid #333;
             height: 44px;
             padding: 0 16px;
@@ -345,7 +366,7 @@ const onDateConfirm = (value) => {
 
             .van-picker__cancel,
             .van-picker__confirm {
-                color: var(--main-yellow);
+                color: var(--white);
                 font-size: var(--font-size-14);
                 padding: 0 8px;
                 height: 28px;
@@ -361,10 +382,10 @@ const onDateConfirm = (value) => {
         }
 
         .van-picker-column {
-            color: #fff;
+            color: var(--white);
 
             .van-picker-column__item {
-                color: #fff;
+                color: var(--white);
                 font-size: var(--font-size-14);
                 padding: 0 16px;
                 height: 44px;
@@ -389,16 +410,8 @@ const onDateConfirm = (value) => {
             }
         }
 
-        .van-picker__mask {
-            background-image: linear-gradient(180deg, rgba(24, 24, 24, 0.9), rgba(24, 24, 24, 0.4)),
-                linear-gradient(0deg, rgba(24, 24, 24, 0.9), rgba(24, 24, 24, 0.4));
-        }
-
         .van-picker__indicator {
             height: 44px;
-            background: rgba(255, 193, 7, 0.05);
-            border-top: 1px solid rgba(255, 193, 7, 0.1);
-            border-bottom: 1px solid rgba(255, 193, 7, 0.1);
         }
     }
 }

src/components/StepList.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="step">
+        <div class="step-list">
+            <div class="step-item" v-for="i in options.length" :key="i" :style="{ width: 100 / options.length + '%' }">
+                <div :class="['item-li', currentStep <= i ? '' : 'ok', currentStep === i ? 'active' : '']">
+                    <em :class="[i == 1 ? '' : 'step-dash step-dash1']"></em>
+                    <img v-if="currentStep > i" src="@/assets/images/success.png" alt="" />
+                    <span v-else></span>
+                    <em :class="[i == options.length ? '' : 'step-dash step-dash2']"></em>
+                </div>
+            </div>
+        </div>
+        <div class="step-ul">
+            <div class="step-li" v-for="t in options" :key="t" :style="{ width: 100 / options.length + '%' }">{{ t }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    currentStep: number
+    options: Array<string>
+}>()
+</script>
+
+<style scoped lang="scss">
+.step {
+    padding-bottom: 16px;
+
+    .step-list {
+        display: flex;
+        align-items: center;
+
+        .step-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .item-li {
+                display: flex;
+                width: 100%;
+                justify-content: center;
+                align-items: center;
+                span {
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                    aspect-ratio: 1/1;
+                    border-radius: 64px;
+                    border: 2px solid #beb6b6;
+                    position: relative;
+                    &::after {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        content: '';
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 50%;
+                        background: #beb6b6;
+                    }
+                }
+                em {
+                    height: 2px;
+                    flex: 1 0 0;
+                    background: transparent;
+                }
+                .step-dash {
+                    height: 2px;
+                    flex: 1 0 0;
+                    background: #beb6b6;
+                }
+                img {
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+
+            .active {
+                span {
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                    aspect-ratio: 1/1;
+                    border-radius: 64px;
+                    border: 2px solid #ff4766;
+                    position: relative;
+                    &::after {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        content: '';
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 50%;
+                        background: #ff4766;
+                    }
+                }
+                em {
+                    height: 2px;
+                    flex: 1 0 0;
+                    background: transparent;
+                }
+                .step-dash {
+                    height: 2px;
+                    flex: 1 0 0;
+                    background: #beb6b6;
+                }
+                .step-dash1 {
+                    background: #ff4766;
+                }
+            }
+            .ok {
+                span {
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                    aspect-ratio: 1/1;
+                    border-radius: 64px;
+                    border: 2px solid #ff4766;
+                    position: relative;
+                    &::after {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        content: '';
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 50%;
+                        background: #ff4766;
+                    }
+                }
+                em {
+                    height: 2px;
+                    flex: 1 0 0;
+                    background: transparent;
+                }
+                .step-dash {
+                    height: 2px;
+                    flex: 1 0 0;
+                    background: #ff4766;
+                }
+            }
+        }
+    }
+
+    .step-ul {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        color: #474747;
+        text-align: center;
+        font-family: Roboto;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0.014px;
+        .step-li {
+            text-align: center;
+        }
+    }
+}
+</style>

src/components/SuccessPrompt.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="success-prompt-fullscreen">
+        <img class="success-prompt-img" src="@/assets/images/vector.png" alt="success" />
+        <div class="success-prompt-title">{{ props.title }}</div>
+        <div class="success-prompt-desc">{{ props.desc }}</div>
+        <div class="fixed-btn">
+            <div class="cwg-button">
+                <van-button type="primary" block @click="props.btnClick">{{ props.btnTitle }}</van-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        title?: string
+        btnTitle?: string
+        desc?: string
+        btnClick?: () => void
+    }>(),
+    {
+        title: 'Retrive Successfully',
+        btnTitle: 'Done',
+        desc: 'You can now use your new password to make secure transactions.',
+        btnClick: () => {},
+    },
+)
+</script>
+
+<style scoped lang="scss">
+.success-prompt-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+}
+.success-prompt-img {
+    margin-bottom: 32px;
+}
+.success-prompt-title {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #222;
+    line-height: 28px;
+    margin-bottom: 16px;
+}
+.success-prompt-desc {
+    font-size: 16px;
+    color: #666;
+    text-align: center;
+    max-width: 320px;
+    line-height: 24px;
+}
+</style>

src/components/VirtualCard.vue

@@ -1,71 +1,258 @@
 <template>
-    <div class="apply-card-content">
-        <div class="apply-card-steps">
-            <div class="steps-top">
-                <div class="step">
-                    <div class="step-circle">1</div>
-                    <div class="step-label">选择卡片类型</div>
-                </div>
-                <div class="step-dash"></div>
-                <div class="step">
-                    <div class="step-circle">2</div>
-                    <div class="step-label">提交KYC认证</div>
+    <div class="page">
+        <div class="card-swiper">
+            <div class="swiper-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
+                <div
+                    class="card-wrapper"
+                    v-for="(card, index) in cardList"
+                    :key="card.id"
+                    :style="{ transform: `translateX(${(index - currentIndex) * 100 + offsetX}%)` }"
+                >
+                    <div class="card-info" @click.stop="(e: MouseEvent) => toggleCardNo(card.id, e)" :class="{ flipping: isFlipping[card.id] }">
+                        <img src="@/assets/images/logo.png" alt="" srcset="" />
+                        <div class="number" v-if="showCardNo[card.id]">
+                            {{ card?.cardNo}}
+                        </div>
+                        <div class="number" v-else>
+                            {{ card?.cardNo?.replace(/(\d{4})\d+(\d{4})/, '$1 **** **** $2') }}
+                        </div>
+                        <div class="card-b">
+                            <div class="valid">
+                                <span class="lable">{{ t('cards.p13') }}</span>
+                                <span>{{ card.firstName }} {{ card.lastName }}</span>
+                            </div>
+                            <div class="valid">
+                                <span class="lable">{{ t('cards.p14') }}</span>
+                                <span>{{ card.expire }}</span>
+                            </div>
+                        </div>
+                        <img
+                            v-if="card.status != 1"
+                            src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg"
+                            class="flags"
+                            @click.stop="ucardActivate(card.id)"
+                        />
+                    </div>
                 </div>
-                <div class="step-dash"></div>
-                <div class="step">
-                    <div class="step-circle">3</div>
-                    <div class="step-label">申请开卡</div>
+            </div>
+            <div class="swiper-indicators" v-if="cardList.length > 1">
+                <div
+                    v-for="(card, index) in cardList"
+                    :key="card.id"
+                    class="indicator-dot"
+                    :class="{ active: index === currentIndex }"
+                    @click="currentIndex = index"
+                ></div>
+            </div>
+        </div>
+        <div class="actions" v-if="currentCard.isOk">
+            <div class="action-btn" @click="goToCardRecharge">
+                <icon name="icon_recharge" :size="28" color="#EA002A" />
+                <span>{{ t('cards.recharge') }}</span>
+            </div>
+            <div class="action-btn" @click="goToFindPassword">
+                <icon name="icon_card password reset" :size="28" color="#EA002A" />
+                <span>{{ t('cards.findPassword') }}</span>
+            </div>
+
+            <div class="action-btn" @click="goToFreezeCard" v-if="currentCard.freezeStatus === 2">
+                <icon name="icon_unfreeze" :size="28" color="#EA002A" />
+                <span>{{ t('cards.unfreezeCard') }}</span>
+            </div>
+            <div class="action-btn" @click="goToFreezeCard" v-else>
+                <icon name="icon_freeze" :size="28" color="#EA002A" />
+                <span>{{ t('cards.freezeCard') }}</span>
+            </div>
+        </div>
+        <template v-if="!currentCard.isOk">
+            <div class="balance-content">{{ t('apply-record-detail.p1') }}</div>
+            <div class="g">
+                <img src="../assets/images/apply-record-1.png" alt="" />
+                <div class="g-l">
+                    <div class="g-item">
+                        <div class="label a1">{{ currentCard.cardName }}</div>
+                    </div>
+                    <div class="g-item">
+                        <div class="label">{{ t('apply-record-detail.p2') }}</div>
+                        <div :class="statusClass(currentCard.kycStatus)">{{ statusMap[currentCard.kycStatus] }}</div>
+                    </div>
+                    <div class="g-item" v-if="currentCard.applyStatus === 0 || currentCard.applyStatus === 1">
+                        <div class="label">{{ t('apply-record-detail.p7') }}</div>
+                        <div :class="statusClass1(currentCard.applyStatus)">{{ applyStatusMap[currentCard.applyStatus] }}</div>
+                    </div>
                 </div>
             </div>
+
+            <div class="cwg-button cwg-btn">
+            <van-button type="primary" block v-if="currentCard.kycStatus === 2 && currentCard.applyStatus === null" @click="handleApply(2, currentCard)">{{
+                t('cards.p6')
+            }}</van-button>
+            <van-button type="primary" block v-if="[null, -1, 1, 3].includes(currentCard.kycStatus)" @click="handleApply(3, currentCard)">{{
+                t('cards.p7')
+            }}</van-button>
         </div>
-        <button class="apply-btn" @click="handleApply(1, {})" v-if="isShowBtn">申请银行卡</button>
-        <div class="apply-card-footer">
-            <div class="kyc-list-title">KYC认证</div>
-            <div v-if="kycList.length > 0">
-                <div class="kyc-list">
-                    <div class="kyc-item" v-for="item in kycList" :key="item.id">
-                        <div class="kyc-icon">
-                            <div class="kyc-icon-inner">
-                                <i class="i-mdi-card-account-details-outline"></i>
-                            </div>
-                        </div>
-                        <div class="kyc-left">
-                            <div class="kyc-type">{{ item.cardName }}</div>
-                            <div class="kyc-desc">{{ statusMap[item.kycStatus] }}</div>
-                        </div>
-                        <div class="kyc-right">
-                            <button class="apply-btn" v-if="item.kycStatus === 2 && item.applyStatus === null" @click="handleApply(2, item)">
-                                开卡
-                            </button>
-                            <button class="apply-btn" v-if="[null,-1, 1, 3].includes(item.kycStatus)" @click="handleApply(3, item)">重新认证</button>
-                            <div v-if="item.applyStatus === 0" class="processing-status">处理中</div>
-                            <div v-if="item.applyStatus === 1" class="success-status">开卡成功</div>
+        </template>
+        <template v-if="currentCard.isOk">
+            <div class="balance-wrap" v-if="balance.length > 0">
+                <div class="balance-content">{{ t('cards.currency') }}</div>
+                <div class="balance-title">{{ t('cards.balance') }}</div>
+            </div>
+            <div class="balance-wrap" v-for="item in balance" :key="item.currency">
+                <div class="currency">
+                    <img :src="imageSrc(item.currency)" class="flag" />
+                    <span>{{ item.currency }}</span>
+                </div>
+                <div class="balance">{{ item.amount }}</div>
+            </div>
+            <div class="trans-header">
+                <div class="trans-title">{{ t('cards.transactions') }}</div>
+                <i class="i-mdi-calendar-month-outline" @click="showDatePicker = true" />
+                <van-calendar
+                    v-model:show="showDatePicker"
+                    :min-date="minDate"
+                    :title="t('cards.selectDateRange')"
+                    :subtitle="t('cards.selectDate')"
+                    :max-date="maxDate"
+                    :show-mark="false"
+                    color="var(--main-yellow)"
+                    type="range"
+                    :show-confirm="false"
+                    @cancel="showDatePicker = false"
+                    :formatter="formatter"
+                    @confirm="onConfirmStart"
+                />
+            </div>
+            <div class="transactions" v-if="transactions.length > 0">
+                <div v-for="t in transactions" :key="t.id" class="transaction" @click="goToTransactionDetail(t)">
+                    <div class="trans-icon">
+                        <div class="trans-icon-inner">
+                            <i class="i-mdi-cart-outline"></i>
                         </div>
                     </div>
+                    <div class="trans-left">
+                        <div class="trans-type">{{ t.tradeTypeStr }}</div>
+                        <div class="trans-desc">{{ t.remark }}</div>
+                    </div>
+                    <div class="trans-right">
+                        <div class="trans-amount">{{ t.amount }} {{ t.currencyTxn }}</div>
+                        <div class="trans-date">{{ t.businessDate }}</div>
+                    </div>
                 </div>
             </div>
-            <EmptyState v-if="kycList.length === 0" icon="i-mdi-receipt-text-outline" text="暂无卡片" />
-        </div>
+            <EmptyState :title="t('empty-state.t1')" :text="t('empty-state.c1')"
+        /></template>
     </div>
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
 import EmptyState from '@/components/EmptyState.vue'
-import { ucardApi } from '@/api/ucard'
 import { useI18n } from 'vue-i18n'
+import { ucardApi } from '@/api/ucard'
+import { useRouter } from 'vue-router'
+import type { CardInfo, TransactionInfo } from '@/api/ucard'
+import { showToast } from 'vant'
+import dayjs from 'dayjs'
+const router = useRouter()
 import useUserStore from '@/stores/use-user-store'
 const userStore = useUserStore()
-const userInfo = computed(() => userStore.userInfo)
-const router = useRouter()
+const cardList = computed(() => userStore.userCard)
 const { t } = useI18n()
-interface KycItem {
-    id: number
-    cardName: string
-    kycStatus: number | null
-    applyStatus: number | null
-    cardTypeId: number
-    uniqueId: string
+const currentCard = ref<CardInfo | null>({})
+const balance = ref<{ balance: number; currency: string }[]>([])
+const globalStore = useGlobalStore()
+const transactions = ref<TransactionInfo[]>([])
+const showCardNo = ref<{ [key: string]: boolean }>({})
+const isFlipping = ref<{ [key: string]: boolean }>({})
+const currentIndex = ref(0)
+const startX = ref(0)
+const offsetX = ref(0)
+const isDragging = ref(false)
+const images = import.meta.glob('@/assets/images/currency/*.png', { eager: true })
+
+const imageSrc = (currency:string) => {
+  return images[`/src/assets/images/currency/${currency}.png`]?.default || fallbackImg
+}
+const showDatePicker = ref(false)
+const dateRange = ref<[string, string] | undefined>(undefined)
+dateRange.value = ['', '']
+const minDate = new Date(new Date().getFullYear() - 10, 0, 1)
+const maxDate = new Date(new Date().getFullYear() + 10, 0, 1)
+const onConfirmStart = (value: [string, string]) => {
+    dateRange.value = ['', '']
+    if (value && value.length === 2) {
+        dateRange.value = value
+    }
+    showDatePicker.value = false
+    handleDateRangeChange()
+}
+
+const formatter = (day: any) => {
+    if (day.type === 'start') {
+        day.bottomInfo = t('cards.start')
+    } else if (day.type === 'end') {
+        day.bottomInfo = t('cards.end')
+    } else {
+        day.bottomInfo = ''
+    }
+    return day
+}
+
+const ucardActivate = async (id: string) => {
+    router.push({
+        path: '/card/activation',
+        query: {
+            id,
+        },
+    })
+}
+
+// 获取交易记录
+const getTransactions = async () => {
+    try {
+        transactions.value = []
+        if (!currentCard.value?.cardNo) return
+        const res = await ucardApi.transactionsList({
+            beginDate: dateRange.value?.[0] ? dayjs(dateRange.value?.[0]).format('YYYY-MM-DD') : undefined,
+            endDate: dateRange.value?.[1] ? dayjs(dateRange.value?.[1]).format('YYYY-MM-DD') : undefined,
+            cardNo: currentCard.value?.cardNo,
+            page: {
+                current: 1,
+                row: 10,
+            },
+        })
+        transactions.value = res.data && Array.isArray(res.data) ? res.data : []
+    } catch (error: any) {
+        showToast(error?.message || String(error))
+        transactions.value = []
+    }
+}
+
+const getBalance = async () => {
+    globalStore.setFullScreenLoading(true)
+    try {
+        balance.value = []
+        if (!currentCard.value?.cardNo) return
+        const res = await ucardApi.ucardBalance({
+            cardNo: currentCard.value?.cardNo,
+            uniqueId: currentCard.value?.uniqueId,
+        })
+        if (res.code == 200) {
+            balance.value = res.data
+        } else {
+            balance.value = []
+        }
+    } catch (error: any) {
+        showToast(error?.message || String(error))
+        balance.value = []
+    } finally {
+        globalStore.setFullScreenLoading(false)
+    }
+}
+
+const handleDateRangeChange = () => {
+    if (currentCard.value) {
+        getTransactions()
+    }
 }
 
 const statusMap: Record<string, string> = {
@@ -75,41 +262,36 @@ const statusMap: Record<string, string> = {
     '2': t('kyc.statusDesc3'),
     '3': t('kyc.statusDesc4'),
 }
-const kycList = ref<KycItem[]>([])
-const isShowBtn = ref(false)
-async function getKycList() {
-    const res = await ucardApi.cardKycTypesList({ page: { current: 1, row: 10 } })
-    if (res.code === 200) {
-       let a =  res.data.filter((i)=> {
-            return i.kycStatus !== null
-        })
-       let b =  res.data.filter((i)=> {
-            return i.kycStatus == null
-        })
-        if(b.length != 0){
-            isShowBtn.value = true
-        }else {
-            isShowBtn.value = false
-        }
-        kycList.value = a
+const applyStatusMap: Record<string, string> = {
+    '0': t('apply-record-detail.p8'),
+    '1': t('apply-record-detail.p6'),
+}
+function statusClass(status: number) {
+    switch (status) {
+        case 2:
+            return 'status-default status-success'
+        case 3:
+            return 'status-default status-error'
+        default:
+            return 'status-default'
     }
 }
-
-const ucardApply = async (item: any) => {
-    console.log(1111,item);
-
-    const res = await ucardApi.ucardApply({
-        cardTypeId: item.cardTypeId,
-        uniqueId: userInfo.value.customInfo.uniqueId,
-    })
-    if (res.code === 200) {
-        showToast(t('improve-info.kycSuccess'))
-        // router.push('/select/card')
+function statusClass1(status: number) {
+    switch (status) {
+        case 1:
+            return 'status-default status-success'
+        default:
+            return 'status-default'
     }
 }
 const handleApply = (type: number, item: any) => {
     if (type == 1) {
-        router.push('/select/card')
+        router.push({
+            path: '/apply/record/detail',
+            query: {
+                cardTypeId: item.cardTypeId,
+            },
+        })
     } else if (type == 2) {
         ucardApply(item)
     } else if (type == 3) {
@@ -123,148 +305,317 @@ const handleApply = (type: number, item: any) => {
     }
 }
 
+watch(
+    currentIndex,
+    (newIndex) => {
+        if (cardList.value[newIndex]) {
+            currentCard.value = cardList.value[newIndex]
+            if (cardList.value[newIndex].isOk) {
+                getTransactions()
+                getBalance()
+            }
+        }
+    },
+    { immediate: true },
+)
+
+const toggleCardNo = (cardId: string, event: MouseEvent) => {
+    event.stopPropagation()
+    isFlipping.value[cardId] = !isFlipping.value[cardId]
+    showCardNo.value[cardId] = !showCardNo.value[cardId]
+}
+
+const handleTouchStart = (e: TouchEvent) => {
+    startX.value = e.touches[0].clientX
+    isDragging.value = true
+}
 
-onMounted(() => {
-    getKycList()
+const handleTouchMove = (e: TouchEvent) => {
+    if (!isDragging.value) return
+    const currentX = e.touches[0].clientX
+    const diff = currentX - startX.value
+    const containerWidth = document.querySelector('.swiper-container')?.clientWidth || 0
+    if (currentIndex.value === 0 && diff > 0) {
+        offsetX.value = (diff / containerWidth) * 30
+    } else if (currentIndex.value === cardList.value.length - 1 && diff < 0) {
+        offsetX.value = (diff / containerWidth) * 30
+    } else {
+        offsetX.value = (diff / containerWidth) * 100
+    }
+}
+
+const handleTouchEnd = () => {
+    isDragging.value = false
+    if (Math.abs(offsetX.value) > 0.2) {
+        if (offsetX.value > 0 && currentIndex.value > 0) {
+            currentIndex.value--
+        } else if (offsetX.value < 0 && currentIndex.value < cardList.value.length - 1) {
+            currentIndex.value++
+        }
+        cardList.value.forEach((card) => {
+            showCardNo.value[card.id] = false
+        })
+    }
+    offsetX.value = 0
+}
+
+function goToCardRecharge() {
+    if (currentCard.value?.status != 1) {
+        showToast('请先激活银行卡')
+        return
+    }
+    router.push({
+        path: '/card/recharge',
+        query: {
+            id: currentCard.value?.id,
+        },
+    })
+}
+
+function goToFindPassword() {
+    if (currentCard.value?.status != 1) {
+        showToast('请先激活银行卡')
+        return
+    }
+    router.push({
+        path: '/find/password',
+        query: {
+            cardNo: currentCard.value?.cardNo,
+            cardTypeId: currentCard.value?.cardTypeId,
+        },
+    })
+}
+// 冻结卡片/解冻卡片
+async function goToFreezeCard() {
+    if (currentCard.value?.status != 1) {
+        showToast('请先激活银行卡')
+        return
+    }
+    try {
+        switch (currentCard.value?.freezeStatus) {
+            case 1:
+                let res = await ucardApi.ucardFreeze({ cardNo: currentCard.value?.cardNo, uniqueId: currentCard.value?.uniqueId })
+                if (res.code === 200) {
+                    showToast('冻结成功')
+                    getCardList()
+                } else {
+                    showToast(res.msg)
+                }
+                break
+            case 2:
+                let res1 = await ucardApi.ucardUnfreeze({ cardNo: currentCard.value?.cardNo, uniqueId: currentCard.value?.uniqueId })
+                if (res1.code === 200) {
+                    showToast('解冻成功')
+                    getCardList()
+                } else {
+                    showToast(res1.msg)
+                }
+                break
+        }
+    } catch (error) {
+        showToast(error || String(error))
+    }
+}
+
+function goToTransactionDetail(transaction: TransactionInfo) {
+    router.push({
+        path: '/card/transaction/detail',
+        query: {
+            id: transaction.id,
+        },
+    })
+}
+onMounted(async () => {
+    cardList.value.forEach((card) => {
+        showCardNo.value[card.id] = false
+        isFlipping.value[card.id] = false
+    })
 })
 </script>
 
 <style scoped lang="scss">
+.page {
+    padding: 0 16px;
+}
+.card-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+}
 
-.apply-card-steps {
+.card-info {
+    background: url(/src/assets/images/visa.png) no-repeat center center;
+    background-size: cover;
+    border-radius: 0.426667rem;
+    padding: 0.64rem 0.533333rem 0 0.533333rem;
+    color: var(--main-yellow);
+    box-shadow: 0 0.106667rem 0.533333rem rgba(214, 255, 0, 0.1);
+    border: 1px solid rgba(214, 255, 0, 0.2);
     width: 100%;
-    margin-bottom: 52px;
+    height: 100%;
     display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    flex-wrap: wrap;
+    transform-style: preserve-3d;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     flex-direction: column;
-    align-items: center;
+
+    &.flipping {
+        transform: rotateX(360deg);
+    }
+
+    .card-b {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        span {
+            display: block;
+        }
+        .valid {
+            font-size: var(--font-size-14);
+            font-weight: 500;
+            color: var(--black);
+            text-shadow: 0 0 8px rgba(214, 255, 0, 0.2);
+            gap: 8px;
+            padding-right: 30px;
+            line-height: 20px;
+        }
+        .lable {
+            font-size: var(--font-size-10);
+            font-weight: 400;
+        }
+    }
 }
-.steps-top {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+.card-front,
+.card-back {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    position: relative;
-    max-width: 600px;
-    margin: 0 auto;
+    height: 100%;
+    padding: 24px 20px 16px 20px;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.card-back {
+    transform: rotateY(180deg);
 }
-.step {
+
+.owner {
+    font-size: var(--font-size-14);
+    line-height: 2;
+    margin-bottom: 8px;
+    text-shadow: 0 0 10px rgba(214, 255, 0, 0.3);
     display: flex;
-    flex-direction: column;
     align-items: center;
-    position: relative;
-    z-index: 2;
-    flex: 0 0 auto;
+    gap: 8px;
+
+    i {
+        font-size: var(--font-size-18);
+        color: var(--main-yellow);
+    }
 }
-.step-circle {
-    width: 28px;
-    height: 28px;
-    color: var(--main-yellow);
-    border-radius: 50%;
-    font-size: 14px;
-    font-weight: bold;
+
+.number {
+    color: var(--black);
+    font-size: var(--font-size-18);
+    font-weight: 500;
+    line-height: 3;
+    letter-spacing: 2px;
+    margin: 24px 0;
+    text-shadow: 0 0 15px rgba(214, 255, 0, 0.4);
     display: flex;
     align-items: center;
-    justify-content: center;
-    border: 2px solid var(--main-yellow);
-    margin-bottom: 8px;
-    transition: all 0.3s ease;
-}
-.step-circle:hover {
-    transform: scale(1.1);
-    box-shadow: 0 0 10px rgba(73, 247, 166, 0.3);
+    gap: 8px;
 }
-.step-dash {
-    flex: 1;
-    height: 2px;
-    background: repeating-linear-gradient(to right, var(--main-yellow), var(--main-yellow) 6px, transparent 6px, transparent 12px);
-    min-width: 18px;
-    position: relative;
-    top: -16px;
+
+.actions {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0 16px 0;
 }
-.step-label {
+
+.action-btn {
     color: var(--white);
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    line-height: 2;
-}
-.apply-btn {
-    width: 90%;
-    max-width: 320px;
-    background: var(--main-yellow);
-    color: var(--black);
     border: none;
-    border-radius: 24px;
-    font-size: 17px;
-    font-weight: 600;
-    padding: 12px 0;
-    margin: 0 auto 14px;
-    display: block;
-    box-shadow: 0 2px 8px rgba(214, 255, 0, 0.15);
+    border-radius: 12px;
+    padding: 0 12px;
+    font-size: var(--font-size-14);
     cursor: pointer;
-    transition: background 0.2s;
-}
-.apply-btn:hover {
-    background: var(--main-yellow-dark);
-}
-.activate-btn {
-    width: 90%;
-    max-width: 320px;
-    background: transparent;
-    color: var(--main-yellow);
-    border: 1.5px solid var(--main-yellow);
-    border-radius: 24px;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 10px 0;
-    margin: 0 auto 18px;
-    display: block;
-    cursor: pointer;
-    transition: background 0.2s, color 0.2s;
-}
-.activate-btn:hover {
-    background: var(--main-yellow);
-    color: #232323;
-}
-.apply-card-footer {
-    width: 100%;
-    margin-top: 34px;
-}
-.apply-card-empty {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 6px;
+    gap: 4px;
+    transition: all 0.3s ease;
+    text-align: center;
+    color: #1a1a1a;
+    width: 100px;
+    height: 100px;
+    flex-shrink: 0;
+    border-radius: 15px;
+    box-shadow: 0px 5px 30px 0px rgba(5, 0, 1, 0.05);
+    .icon {
+        margin: 16px 0 4px 0;
+    }
+    span {
+        line-height: 20px;
+    }
 }
-.empty-text {
-    color: var(--main-yellow);
-    font-size: 15px;
-    margin-top: 2px;
+
+.balance-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 24px 0;
+    font-size: var(--font-size-14);
 }
-.kyc-list {
-    background: var(--action-bg);
-    border-radius: 16px;
-    margin-bottom: 16px;
-    padding: 16px 12px;
-    width: 100%;
-    max-width: 340px;
+
+.balance-content {
+    font-size: var(--font-size-20);
+    color: var(--white);
+    font-weight: bold;
+}
+
+.balance-title {
+    font-size: var(--font-size-12);
+    color: var(--white);
 }
 
-.kyc-item {
+.currency {
     display: flex;
     align-items: center;
-    padding: 12px 0;
-    border-bottom: 1px solid var(--border, #333);
-    font-size: 16px;
+    font-size: var(--font-size-14);
+    margin-right: 12px;
+    color: var(--white);
 }
 
-.kyc-item:last-child {
-    border-bottom: none;
+.flag {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 6px;
+}
+
+.balance {
+    font-size: var(--font-size-14);
+    font-weight: bold;
+    color: var(--white);
 }
 
-.kyc-icon {
-    width: 40px;
-    height: 40px;
+.transactions {
+    border-radius: 16px;
+    margin-bottom: 16px;
+    padding: 16px 0;
+}
+.trans-icon {
+    width: 48px;
+    height: 48px;
     display: flex;
     background: var(--main-bg);
     box-shadow: 0 4px 12px rgba(214, 255, 0, 0.1);
@@ -272,92 +623,258 @@ onMounted(() => {
     margin-right: 12px;
     align-items: center;
     justify-content: center;
+    .trans-icon-inner {
+        width: 48px;
+        height: 48px;
+        background: rgba(212, 206, 206, 0.24);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    i {
+        color: #000;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+    }
 }
 
-.kyc-icon-inner {
-    width: 22px;
-    height: 22px;
-    background: var(--white);
-    border-radius: 50%;
+.trans-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
+    margin: 32px 0;
+    color: var(--white);
+    i {
+        font-size: var(--font-size-20);
+        cursor: pointer;
+    }
 }
-
-.kyc-icon-inner i {
-    color: #000;
-    width: 18px;
-    height: 18px;
-    font-size: var(--font-size-16);
-    border-radius: 50%;
+::v-deep .van-calendar {
+    background: var(--action-bg);
+}
+::v-deep .van-calendar__month-mark {
+    display: none;
+}
+::v-deep .van-calendar__header-subtitle {
+    color: var(--white);
+}
+::v-deep .van-calendar__header-title {
+    color: var(--white);
+}
+::v-deep .van-calendar__month-title {
+    color: var(--main-yellow);
 }
 
-.kyc-left {
-    flex: 1;
-    min-width: 0;
+.trans-title {
+    font-size: var(--font-size-20);
+    color: var(--white);
+    font-weight: bold;
 }
 
-.kyc-right {
-    width: 80px;
-    text-align: right;
-    margin-left: 6px;
-    .apply-btn {
-        padding: 10px 0;
-        font-size: var(--font-size-14);
-        font-weight: 500;
+.date-field {
+    width: 200px;
+
+    :deep(.van-field__control) {
+        color: var(--white);
     }
+
+    :deep(.van-field__placeholder) {
+        color: var(--gray);
+    }
+}
+
+:deep(.van-popup) {
+    background: var(--action-bg);
+}
+
+:deep(.van-picker__toolbar) {
+    background: var(--action-bg);
+    border-bottom: 1px solid var(--border);
+}
+
+:deep(.van-picker__title) {
+    color: var(--white);
+}
+
+:deep(.van-picker__confirm) {
+    color: var(--main-yellow);
 }
 
-.kyc-type {
+:deep(.van-picker__cancel) {
+    color: var(--gray);
+}
+
+:deep(.van-picker-column) {
     color: var(--white);
-    font-size: 15px;
-    margin-bottom: 4px;
 }
 
-.kyc-desc {
-    color: #bdbdbd;
-    font-size: 13px;
+:deep(.van-picker-column__item) {
+    color: var(--white);
 }
 
-.kyc-amount {
-    font-size: 15px;
+:deep(.van-picker-column__item--selected) {
     color: var(--main-yellow);
-    margin-bottom: 4px;
 }
 
-.kyc-date {
-    color: #bdbdbd;
-    font-size: 13px;
+.transaction {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+    /* border-bottom: 1px solid var(--border); */
+    font-size: var(--font-size-16);
+}
+
+.transaction:last-child {
+    border-bottom: none;
+}
+
+.trans-left {
+    width: 200px;
 }
 
-.kyc-list-title {
+.trans-right {
+    width: 100px;
+
+    div {
+        text-align: right;
+    }
+}
+
+.trans-type {
+    color: var(--white);
     font-size: var(--font-size-16);
-    color: var(--main-yellow);
-    margin-bottom: 12px;
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 2;
+}
+
+.trans-desc {
+    font-size: var(--font-size-12);
+    color: var(--gray);
+}
+
+.trans-amount {
+    font-size: var(--font-size-16);
+    font-weight: 600;
+    color: var(--white);
+    line-height: 2;
+}
+
+.trans-date {
+    color: var(--gray);
+    font-size: var(--font-size-12);
+}
+
+.card-swiper {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 20px;
+    padding-bottom: 5px;
+}
+
+.swiper-container {
+    position: relative;
+    width: 100%;
+    height: 209px;
+    touch-action: pan-y pinch-zoom;
+    user-select: none;
+}
+
+.card-info {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s ease;
+    will-change: transform;
+}
+
+.swiper-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 16px;
+    gap: 16px;
+}
+
+.swiper-btn {
+    background: var(--action-bg);
+    border: none;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
     display: flex;
     align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--main-yellow);
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    i {
+        font-size: var(--font-size-20);
+    }
+}
+
+.swiper-dots {
+    display: flex;
     gap: 8px;
+}
 
-    &::before {
-        content: '';
-        display: inline-block;
-        width: 4px;
-        height: 16px;
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--action-bg);
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &.active {
         background: var(--main-yellow);
-        border-radius: 2px;
+        transform: scale(1.2);
     }
 }
 
-.processing-status {
-    color: var(--main-yellow);
-    font-size: 14px;
-    text-align: center;
+.swiper-indicators {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+    gap: 8px;
 }
 
-.success-status {
-    color: #4caf50;
-    font-size: 14px;
-    text-align: center;
+.indicator-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--action-bg);
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &.active {
+        background: var(--main-yellow);
+        transform: scale(1.2);
+    }
+}
+.flags {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
 }
+
+.balance-content {
+    font-size: var(--font-size-20);
+    color: var(--white);
+    font-weight: bold;
+}
+.cwg-btn {
+    margin-top: 36px;
+}
+
 </style>

src/design.config.ts

@@ -1,7 +1,7 @@
 /** 设计稿宽度 */
-export const designWidth = 375
+export const designWidth = 412
 /** 设计稿高度 */
-export const designHeight = 667
+export const designHeight = 812
 export const designMultiple = designWidth / 750
 /** 兼容最小宽度 */
 export const minWidth = 320

src/i18n/index.ts

@@ -36,7 +36,7 @@ watch(lang, (newLang) => {
   localStorage.setItem('lang', newLang)
 })
 
-const localesList = ['cn', 'en', 'zh', 'de'] as const
+const localesList = ['cn', 'en'] as const
 // const localesList = ['en','cn','zh', 'de','es','ar','id','ms','th','vi','ko','pt','fa','tr']
 
 export { i18n, localesList }

src/i18n/locales/cn.ts

@@ -6,7 +6,8 @@ export default {
         success: '成功',
         fail: '失败',
         input: '请输入',
-        choose: '请选择'
+        choose: '请选择',
+        country: '输入货币/国家'
     },
     tabs: {
         wallet: '钱包',
@@ -18,6 +19,9 @@ export default {
         title: '我的钱包',
         balance: '余额',
         transactions: '交易记录',
+        p1: '货币余额',
+        p2: '币种',
+        p3: '全球速汇',
     },
     cards: {
         title: '我的卡片',
@@ -34,17 +38,34 @@ export default {
         selectDateRange: '选择日期',
         selectDate: '选择日期1',
         start: '开始',
-        end: '结束'
+        end: '结束',
+        p1: '在线申请卡',
+        p2: 'KYC识别',
+        p3: '激活卡',
+        p4: '申请银行卡',
+        p5: 'KYC认证',
+        p6: '开卡申请',
+        p7: '重新认证',
+        p8: '处理中',
+        p9: '开卡成功',
+        p10: '申请银行卡',
+        p11: '查看',
+        p12: '银行卡进度详细信息',
+        p13: '持卡人姓名',
+        p14: '到期日',
     },
     finance: {
         title: '金融',
     },
     mine: {
         title: '我的',
-        logout: '确认退出登录吗？',
+        logout: '退出登录',
+        p: '您确定要退出登录吗？',
+        b1: '退出登录',
+        b2: '取消',
     },
     language: {
-        title: 'Sell USDT',
+        title: '语言设置',
         selectLang: '选择语言',
         cn: '中文简体',
         zh: '中文繁体',
@@ -56,8 +77,9 @@ export default {
         ms: 'Malay',
         th: 'Thai',
         vi: 'Vietnamese',
+        i0: '已认证',
         i1: '语言设置',
-        i2: '设置支付密码',
+        i2: '修改密码',
         i3: '个人信息',
         i4: '购卡记录',
         i5: '关于PayouCard',
@@ -65,10 +87,23 @@ export default {
     },
     login: {
         title: '登录',
-        username: '用户名',
-        password: '密码',
-        rememberPassword: '记住密码',
-        forgotPassword: '忘记密码？',
+        p1: '邮箱',
+        p2: '密码',
+        p3: '旧密码',
+        p4: '新密码',
+        p5: '记住密码',
+        p6: '忘记密码？',
+        p7: '登录即表示您接受我们的',
+        p8: '隐私政策和服务条款',
+        p9: '请先登录',
+        msg0:'登录失败',
+        msg0_2:'重置失败',
+        msg0_1:'登录成功',
+        msg1:'请输入邮箱',
+        msg2:'请输入正确的邮箱',
+        msg3:'请输入密码',
+        msg4:'请输入正确的密码',
+        msg5:'旧密码与新密码不能相同',
     },
     'card-transaction-detail': {
         title: '交易详情',
@@ -81,40 +116,17 @@ export default {
         time: '时间',
     },
     'pay-password': {
-        title: '支付密码',
-        change: '修改支付密码',
-        forget: '忘记支付密码',
-    },
-    'change-pay-password': {
-        title: '修改支付密码',
-        desc: '向您手机157***1673发送验证码',
-        input: '请输入验证码',
-        getCode: '获取验证码',
-        nextStep: '下一步',
-    },
-    'forget-pay-password': {
-        title: '忘记支付密码',
-        desc: '向您手机157***1673发送验证码',
-        input: '请输入验证码',
-        getCode: '获取验证码',
-        nextStep: '下一步',
+        title: '修改密码',
     },
     'find-password': {
         title: '找回密码',
         desc: '签名照片',
         nextStep: '提交',
         success: '设置成功',
-        error: '设置失败'
-    },
-    'freeze-card': {
-        title: '冻结卡片',
-        desc: '请上传签名照片',
-        tip: '支持PNG、JPG格式。',
-        nextStep: '确定',
-        formatError: '仅支持PNG、JPG格式',
-        needUpload: '请上传签名照片',
-        submitted: '已提交'
+        error: '设置失败',
+        p1: '它不能大于2M，支持.png、.jpeg和.jpg格式。'
     },
+
     'card-recharge': {
         title: '卡片充值',
         currency: '币种',
@@ -131,6 +143,9 @@ export default {
         rechargeSuccess: '充值成功',
         rechargePending: '充值中',
         rechargeFailed: '充值失败',
+        tips1: '您的充值订单已提交',
+        tips2: '到账后，系统将自动处理您的充值。',
+        tips3: '关闭',
     },
     'activate-card': {
         title: '卡片激活',
@@ -146,24 +161,24 @@ export default {
         activate: '立即激活',
     },
     'select-card': {
-        title: '提交',
+        title: '选择一张银行卡',
         selectCard: '选择你的卡片',
         desc: '我们为全球各地用户提供不同的卡片选择，包括实体卡和虚拟卡。',
         physicalCard: '实体卡',
-        price: '价格：',
-        kycRequire: 'KYC认证：',
+        price: '价格',
+        kycRequire: 'KYC认证',
         kycRequiredDesc: '需要',
         kycRequiredDesc2: '不需要',
-        rechargeFee: '充值费用：',
-        atmFee: 'ATM取现：',
+        rechargeFee: '充值费用',
+        atmFee: 'ATM取现',
         atmFeeDesc: 'Free in Europe (other 2%)',
         atmFeeDesc2: 'Free in Europe (other 2%)',
-        spendFee: '消费手续费：',
-        annualFee: '年费：',
+        spendFee: '消费手续费',
+        annualFee: '年费',
         annualFeeDesc: 'Free',
-        usageArea: '使用地区：',
+        usageArea: '使用地区',
         free: '免费',
-        submit: '提交',
+        submit: '下一步',
         masterCard: 'MasterCard 实体卡',
         visaVirtualCard: 'Visa 虚拟卡(至珍卡)',
         visaPhysicalCard: 'Visa 实体卡',
@@ -225,11 +240,12 @@ export default {
         statusDesc2: '审核中',
         statusDesc3: '认证成功',
         statusDesc4: '拒绝',
+        statusDesc5: '请填写完整信息',
 
     },
     'eur-remit': {
         title: '全球速汇',
-        available: '可速汇余额：',
+        available: '可速汇余额',
         country: '国家和地区',
         currency: '币种',
         amount: '金额',
@@ -238,135 +254,135 @@ export default {
         notePlaceholder: '请输入Note（附言码）',
         select: '请选择',
         next: '下一步',
-        "item1":"收款银行：",
-        "item2":"交易货币：",
-        "item3":"目标货币代码：",
-        "item4":"目标国家代码：",
-        "item5":"汇率：",
-        "item6":"基本信息",
-        "item7":"收款银行ID：",
-        "item8":"用户唯一ID：",
-        "item9":"速汇金额：",
-        "item10":"附言：",
-        "item11":"收付款人关系：",
-        "item12":"兄弟",
-        "item13":"姐夫/妹夫",
-        "item14":"堂/表兄弟姐妹",
-        "item15":"女儿",
-        "item16":"父亲",
-        "item17":"岳父/公公",
-        "item18":"朋友",
-        "item19":"祖父",
-        "item20":"祖母",
-        "item21":"丈夫",
-        "item22":"母亲",
-        "item23":"岳母/婆婆",
-        "item24":"侄子/外甥",
-        "item25":"侄女/外甥女",
-        "item26":"本人",
-        "item27":"姐妹",
-        "item28":"兄嫂/弟妹",
-        "item29":"儿子",
-        "item30":"叔伯/舅姑",
-        "item31":"妻子",
-        "item32":"其他",
-        "item33":"资金来源：",
-        "item34":"现金",
-        "item35":"商业",
-        "item36":"礼物",
-        "item37":"工资",
-        "item38":"彩票",
-        "item39":"储蓄",
-        "item40":"其他",
-        "item41":"付款目的：",
-        "item42":"购买货物或服务",
-        "item43":"运费和运输成本",
-        "item44":"教育费用",
-        "item45":"移民投资",
-        "item46":"慈善捐赠",
-        "item47":"家庭支持",
-        "item48":"股息或利息支付",
-        "item49":"国际贸易",
-        "item50":"付款人信息",
-        "item51":"付款人类型：",
-        "item52":"个人",
-        "item53":"付款人姓：",
-        "item54":"付款人名：",
-        "item55":"付款人证件号码：",
-        "item56":"付款人证件类型：",
-        "item57":"护照",
-        "item58":"身份证",
-        "item59":"证件颁发国家：",
-        "item60":"请选择证件颁发国家",
-        "item61":"出生日期：",
-        "item62":"国籍：",
-        "item63":"请选择国籍",
-        "item64":"手机号码：",
-        "item65":"居住国家：",
-        "item66":"请选择居住国家",
-        "item67":"居住城市代码：",
-        "item68":"请选择居住城市",
-        "item69":"地址：",
-        "item70":"邮编：",
-        "item71":"职业：",
-        "item72":"校验付款人",
-        "item73":"收款人信息",
-        "item74":"收款人银行ID：",
-        "item75":"收款人账号：",
-        "item76":"收款人户名：",
-        "item77":"收款人居住国家：",
-        "item78":"请选择收款人居住国家",
-        "item79":"收款人居住城市：",
-        "item80":"请选择收款人居住城市",
-        "item81":"收款人地址：",
-        "item82":"收款人邮编：",
-        "item83":"收款人姓：",
-        "item84":"收款人名：",
-        "item85":"收款人银行编码：",
-        "item86":"收款人国籍：",
-        "item87":"请选择收款人国籍",
-        "item88":"收款人证件类型：",
-        "item89":"护照",
-        "item90":"身份证",
-        "item91":"收款人证件号码：",
-        "item92":"证件有效期：",
-        "item93":"出生日期：",
-        "item94":"手机区号：",
-        "item95":"请选择区号",
-        "item96":"手机号码：",
-        "item97":"银行账户类型：",
-        "item98":"支票账户",
-        "item99":"储蓄账户",
-        "item100":"定期存款账户",
-        "item101":"其它账户",
-        "item102":"校验收款人",
-        "item103":"校验付款人",
-        "item104":"确认信息",
-        "item105":"提交代付",
-        "item106":"订单号：",
-        "item107":"商户原始订单号：",
-        "item108":"支付状态：",
+        "item1": "收款银行",
+        "item2": "交易货币",
+        "item3": "目标货币代码",
+        "item4": "目标国家代码",
+        "item5": "汇率",
+        "item6": "基本信息",
+        "item7": "收款银行ID",
+        "item8": "用户唯一ID",
+        "item9": "速汇金额",
+        "item10": "附言 (英文)",
+        "item11": "收付款人关系",
+        "item12": "兄弟",
+        "item13": "姐夫/妹夫",
+        "item14": "堂/表兄弟姐妹",
+        "item15": "女儿",
+        "item16": "父亲",
+        "item17": "岳父/公公",
+        "item18": "朋友",
+        "item19": "祖父",
+        "item20": "祖母",
+        "item21": "丈夫",
+        "item22": "母亲",
+        "item23": "岳母/婆婆",
+        "item24": "侄子/外甥",
+        "item25": "侄女/外甥女",
+        "item26": "本人",
+        "item27": "姐妹",
+        "item28": "兄嫂/弟妹",
+        "item29": "儿子",
+        "item30": "叔伯/舅姑",
+        "item31": "妻子",
+        "item32": "其他",
+        "item33": "资金来源",
+        "item34": "现金",
+        "item35": "商业",
+        "item36": "礼物",
+        "item37": "工资",
+        "item38": "彩票",
+        "item39": "储蓄",
+        "item40": "其他",
+        "item41": "付款目的",
+        "item42": "购买货物或服务",
+        "item43": "运费和运输成本",
+        "item44": "教育费用",
+        "item45": "移民投资",
+        "item46": "慈善捐赠",
+        "item47": "家庭支持",
+        "item48": "股息或利息支付",
+        "item49": "国际贸易",
+        "item50": "付款人信息",
+        "item51": "付款人类型",
+        "item52": "个人",
+        "item53": "付款人姓 (英文)",
+        "item54": "付款人名 (英文)",
+        "item55": "付款人证件号码",
+        "item56": "付款人证件类型",
+        "item57": "护照",
+        "item58": "身份证",
+        "item59": "证件颁发国家",
+        "item60": "请选择证件颁发国家",
+        "item61": "出生日期",
+        "item62": "国籍",
+        "item63": "请选择国籍",
+        "item64": "手机号码",
+        "item65": "居住国家",
+        "item66": "请选择居住国家",
+        "item67": "居住城市代码",
+        "item68": "请选择居住城市",
+        "item69": "地址",
+        "item70": "邮编",
+        "item71": "职业",
+        "item72": "校验付款人",
+        "item73": "收款人信息",
+        "item74": "收款人银行ID",
+        "item75": "收款人账号",
+        "item76": "收款人户名",
+        "item77": "收款人居住国家",
+        "item78": "请选择收款人居住国家",
+        "item79": "收款人居住城市",
+        "item80": "请选择收款人居住城市",
+        "item81": "收款人地址",
+        "item82": "收款人邮编",
+        "item83": "收款人姓",
+        "item84": "收款人名",
+        "item85": "收款人银行编码",
+        "item86": "收款人国籍",
+        "item87": "请选择收款人国籍",
+        "item88": "收款人证件类型",
+        "item89": "护照",
+        "item90": "身份证",
+        "item91": "收款人证件号码",
+        "item92": "证件有效期",
+        "item93": "出生日期",
+        "item94": "手机区号",
+        "item95": "请选择区号",
+        "item96": "手机号码",
+        "item97": "银行账户类型",
+        "item98": "支票账户",
+        "item99": "储蓄账户",
+        "item100": "定期存款账户",
+        "item101": "其它账户",
+        "item102": "校验收款人",
+        "item103": "校验付款人",
+        "item104": "确认信息",
+        "item105": "提交代付",
+        "item106": "订单号",
+        "item107": "商户原始订单号",
+        "item108": "支付状态",
         text1: '提交调单信息或文件',
-        text2: '订单号：',
+        text2: '订单号',
         text3: '请输入PayouCard订单号',
         text4: '(PayouCard订单号，必填)',
         text5: '订单信息',
         text6: '请提供订单相关信息',
         text7: '请选择信息类型',
-        text8: '信息类型：',
+        text8: '信息类型',
         text9: '请选择信息类型',
         text10: '请输入信息内容',
-        text11: '信息内容：',
+        text11: '信息内容',
         text12: '请输入信息内容',
         text13: '(不支持中文字符，最多200个字符)',
         text14: '添加订单信息',
         text15: '订单文件',
         text16: '请提供订单相关文件',
         text17: '请选择文件类型',
-        text18: '文件类型：',
+        text18: '文件类型',
         text19: '请选择文件类型',
         text20: '请上传文件',
-        text21: '文件：',
+        text21: '文件',
         text22: '选择文件',
         text23: '删除',
         text24: '(每个文件不能超过2M，只支持图片格式',
@@ -376,12 +392,12 @@ export default {
         ms5: '请输入商户订单号',
         ms6: '请输入速汇金额',
         ms7: '请输入附言',
-        ms8: '长度在5到64个字符之间',
+        ms8: '仅支持英文,长度在5到64个字符之间',
         ms9: '请输入付款人姓',
-        ms10: '长度在2到50个字符之间',
+        ms10: '不支持中文字符,长度在2到50个字符之间',
         ms10_1: '请输入付款人名',
         ms11: '请输入付款人证件号码',
-        ms12: '长度在6到18个字符之间',
+        ms12: '不支持中文字符,长度在6到18个字符之间',
         ms13: '请选择付款人证件类型',
         ms14: '请输入证件颁发国家',
         ms15: '2位国家代码',
@@ -393,33 +409,34 @@ export default {
         ms21: '2位国家代码',
         ms22: '请输入居住城市代码',
         ms23: '请输入地址',
-        ms24: '长度在10到100个字符之间',
+        ms24: '不支持中文字符,长度在10到100个字符之间',
         ms25: '请输入邮编',
         ms26: '长度在3到9个字符之间',
         ms27: '请输入职业',
-        ms28: '长度在3到20个字符之间',
+        ms28: '仅支持英文,长度在3到20个字符之间',
         ms29: '请输入收款人账号',
-        ms30: '长度在2到48个字符之间',
+        ms30: '不支持中文字符,长度在2到48个字符之间',
         ms31: '请输入收款人户名',
         ms32: '长度在1到100个字符之间',
-        ms33: '长度在2到60个字符之间',
-        ms34: '长度在2到60个字符之间',
-        ms35: '请输入银行ID',
-        ms36: '请输入收款人账号',
-        ms37: '长度在2到48个字符之间',
-        ms38: '请输入收款人户名',
-        ms39: '长度在1到100个字符之间',
-        ms40: '请输入订单号',
-        ms41: '收款人ID',
-        ms42: '收款人电话',
-        ms43: '收款人银行',
-        ms44: '收款人开户行',
-        ms45: '收款人开户行',
-        ms46: '收款人地址',
-        ms47: '收款人出生日期',
-        ms48: '支付证明',
-        ms49: '银行流水',
-        ms50: '交易合同',
+
+        ms33: '请输入收款人邮编',
+        ms34: '长度在3到9个字符之间',
+        ms35: '请输入收款人姓',
+        ms36: '请输入收款人名',
+        ms37: '不支持中文字符,长度在2到50个字符之间',
+        ms38: '长度在1到50个字符之间',
+        ms39: '请选择收款人证件类型',
+        ms40: '请输入收款人证件号码',
+        ms41: '长度在6到18个字符之间',
+        ms42: '请选择收款人证件有效期',
+        ms43: '请选择收款人出生日期',
+        ms44: '请选择收款人手机区号',
+        ms45: '请选择收款人手机号',
+        ms46: '长度在5到15个字符之间',
+        ms47: '请选择收款人银行账户类型',
+        ms48: '请输入收款人银行编码',
+        ms49: '长度在6到12个字符之间',
+        ms50: '请填写汉字',
         ms51: '交易发票',
         ms52: '订单截图',
         ms53: '身份证明',
@@ -435,7 +452,7 @@ export default {
         ms63: '上传失败',
         ms64: '查询法币汇率失败',
         ms65: '查询失败',
-        ms66: '支持银行：',
+        ms66: '支持银行',
         ms67: '最低金额100EUR',
         ms68: '不支持中文字符',
         ms69: '字符长度为',
@@ -456,38 +473,43 @@ export default {
         amountError: '请输入正确的金额',
         currencyError: '请选择正确的币种',
         shippingAddressError: '请输入正确的邮寄地址',
-        required:'',
-        requiredFieldsMissing:'请填写完整信息',
-        item95_1:'',
-        item95_2:'',
-        orderNo:'订单号',
-        paymentSuccess:'支付成功',
-        paymentFailed:'支付失败',
-        paymentError:'支付失败',
-        validateError:'校验失败',
-        validateFailed:'校验失败',
-        validateSuccess:'校验成功',
-        search:'搜索选项',
+        required: '',
+        requiredFieldsMissing: '请填写完整信息',
+        item95_1: '',
+        item95_2: '',
+        orderNo: '订单号',
+        paymentSuccess: '支付成功',
+        paymentFailed: '支付失败',
+        paymentError: '支付失败',
+        validateError: '校验失败',
+        validateFailed: '校验失败',
+        validateSuccess: '校验成功',
+        search: '搜索选项',
     },
     eur: {
         title: 'EUR',
         globalRemit: '全球速汇',
         transactionRecord: '速汇记录',
-        eurTopup: 'eur充值'
+        eurTopup: 'eur充值',
+        p1: '速汇详情', p2: '付款人信息', p3: '收款人信息', p4: '确认信息',
+        p5: '支持 ',
+        p6: ' 银行',
+        p7: '等',
+        p8: '。',
 
     },
-    'remit-success':{
-        title:'支付成功',
-        orderNo:'订单号',
-        paymentSuccess:'支付成功',
-        paymentFailed:'支付失败',
-        paymentError:'支付失败',
-        validateError:'校验失败',
-        validateFailed:'校验失败',
-        validateSuccess:'校验成功',
-        successTitle:'支付成功',
-        viewDetail:'查看详情',
-        backToHome:'返回首页',
+    'remit-success': {
+        title: '支付成功',
+        orderNo: '订单号',
+        paymentSuccess: '支付成功',
+        paymentFailed: '支付失败',
+        paymentError: '支付失败',
+        validateError: '校验失败',
+        validateFailed: '校验失败',
+        validateSuccess: '校验成功',
+        successTitle: '支付成功',
+        viewDetail: '查看详情',
+        backToHome: '返回首页',
     },
     'transfer-detail': {
         title: '交易详情',
@@ -564,18 +586,23 @@ export default {
         reset: '重置密码',
         resetSuccess: '',
     },
-    "card-activation":{
-        title:'卡片激活',
+    "card-activation": {
+        title: '卡片激活',
         cardNo: '银行卡号',
         activePhoto: '手持护照和银行卡照图片',
         activePhotoRequired: '请上传手持护照和银行卡照图片',
-        submit:'激活',
-        submitRequired:'激活成功',
+        submit: '激活',
+        submitRequired: '激活成功',
 
     },
-    "improve-info":{
+    "improve-info": {
         title: '完善信息',
         "p3": "请输入信息",
+        "p3_1": "请输入姓",
+        "p3_2": "请输入名",
+        "p3_3": "请输入手机号",
+        "p3_4": "请输入详细地址",
+        "p3_5": "请输入邮箱",
         "p4": "区号",
         "p5": "请选择区号",
         "p6": "手机号",
@@ -601,11 +628,42 @@ export default {
         "p26": "护照",
         "p27": "证件号",
         "p28": "证件到期",
+        "p28_1": "上传你的",
+        "p28_2": "单击以选择文件",
         "p29": "证件照片",
         "p30": "人脸照片",
         "p31": "扩展字段",
         "p32": "取消",
         "p33": "提交",
-        'kycSuccess':'完善成功'
+        'kycSuccess': '完善成功',
+        'errer': '请填写完整信息',
+
+    },
+    'apply-record': {
+        title: '银行卡申请记录'
+    },
+    'apply-record-detail': {
+        title: '开卡详情',
+        p1: 'KYC认证',
+        p2: 'KYC认证状态',
+        p3: '不存在',
+        p4: '拒绝',
+        p5: 'Visa Virture Card (Platinum)',
+        p6: '开卡成功',
+        p7: '开卡申请状态',
+        p8: '处理中',
+    },
+    'recharge-record-list': {
+        title: '充值记录'
+    },
+    'empty-state': {
+        t1: '暂无交易',
+        c1: '使用钱包完成交易。',
+        t2: '暂无充值',
+        c2: '使用余额充值到银行卡。',
+        t3: '暂无卡片',
+        c3: '请先申请银行卡。',
+        t4: '',
+        c4: '',
     }
 }