添加转账页面

src/assets/svg/address.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 24">
+<g id="&#233;&#128;&#154;&#232;&#174;&#175;">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" d="M3 11.6V12.8C3 13.4627 3.61561 14 4.375 14H12.625C13.3844 14 14 13.4627 14 12.8V3.2C14 2.53726 13.3844 2 12.625 2H4.375C3.61561 2 3 2.53726 3 3.2V4.4" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_2" d="M2 10H4" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_3" d="M2 8H4" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_4" d="M2 6H4" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" d="M8.5 7.5C9.32843 7.5 10 6.82843 10 6C10 5.17157 9.32843 4.5 8.5 4.5C7.67157 4.5 7 5.17157 7 6C7 6.82843 7.67157 7.5 8.5 7.5Z" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_5" d="M11 11.5C11 10.3954 9.88072 9.5 8.5 9.5C7.11928 9.5 6 10.3954 6 11.5" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/assets/svg/fs.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_21_1048)">
+<path id="Vector" d="M1 12C1 13.4445 1.28452 14.8749 1.83733 16.2095C2.39013 17.5441 3.20038 18.7567 4.22183 19.7782C5.24327 20.7996 6.4559 21.6099 7.79048 22.1627C9.12506 22.7155 10.5555 23 12 23C13.4445 23 14.8749 22.7155 16.2095 22.1627C17.5441 21.6099 18.7567 20.7996 19.7782 19.7782C20.7996 18.7567 21.6099 17.5441 22.1627 16.2095C22.7155 14.8749 23 13.4445 23 12C23 10.5555 22.7155 9.12506 22.1627 7.79048C21.6099 6.4559 20.7996 5.24327 19.7782 4.22183C18.7567 3.20038 17.5441 2.39013 16.2095 1.83733C14.8749 1.28452 13.4445 1 12 1C10.5555 1 9.12506 1.28452 7.79048 1.83733C6.4559 2.39013 5.24327 3.20038 4.22183 4.22183C3.20038 5.24327 2.39013 6.4559 1.83733 7.79048C1.28452 9.12506 1 10.5555 1 12Z" fill="#FFE5F1"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="#FF037C"/>
+<g id="zz">
+<path id="Stroke-1" d="M14.6421 10.9396L14.2797 9.0705C14.2577 8.95564 14.1465 8.8803 14.0315 8.90243C14.0307 8.90256 14.0299 8.90269 14.0293 8.90282L12.1914 9.27455" stroke="white" stroke-linecap="round"/>
+<path id="Stroke-3" d="M10.6156 9.0907C10.0991 9.35452 9.66009 9.75438 9.34606 10.247C8.38118 11.761 8.81793 13.7713 10.32 14.7286C11.8218 15.6859 13.8287 15.233 14.7936 13.7189C15.1076 13.2262 15.2847 12.6595 15.3056 12.0797" stroke="white" stroke-linecap="round"/>
+<path id="Stroke-5" d="M11.6177 12.6151L14.0656 9.07782" stroke="white" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_21_1048">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/js.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_21_1075)">
+<path id="Vector" d="M1 12C1 13.4445 1.28452 14.8749 1.83733 16.2095C2.39013 17.5441 3.20038 18.7567 4.22183 19.7782C5.24327 20.7996 6.4559 21.6099 7.79048 22.1627C9.12506 22.7155 10.5555 23 12 23C13.4445 23 14.8749 22.7155 16.2095 22.1627C17.5441 21.6099 18.7567 20.7996 19.7782 19.7782C20.7996 18.7567 21.6099 17.5441 22.1627 16.2095C22.7155 14.8749 23 13.4445 23 12C23 10.5555 22.7155 9.12506 22.1627 7.79048C21.6099 6.4559 20.7996 5.24327 19.7782 4.22183C18.7567 3.20038 17.5441 2.39013 16.2095 1.83733C14.8749 1.28452 13.4445 1 12 1C10.5555 1 9.12506 1.28452 7.79048 1.83733C6.4559 2.39013 5.24327 3.20038 4.22183 4.22183C3.20038 5.24327 2.39013 6.4559 1.83733 7.79048C1.28452 9.12506 1 10.5555 1 12Z" fill="#E3E9FF"/>
+<path id="Vector_2" d="M6 12C6 13.5913 6.63214 15.1174 7.75736 16.2426C8.88258 17.3679 10.4087 18 12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6C10.4087 6 8.88258 6.63214 7.75736 7.75736C6.63214 8.88258 6 10.4087 6 12Z" fill="#4765DD"/>
+<path id="Vector 35" d="M14.5 11V10H9.5V15H14.5V13.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 36" d="M13.5 8.5L14 10H9.5L10 8.5H13.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 37" d="M16 11C16 11.5 15.5 12.5 13.5 12.5" stroke="white" stroke-linecap="round"/>
+<path id="Vector 38" d="M13.5 11.5L12.5 12.5L13.5 13.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_21_1075">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/no-address.svg

@@ -0,0 +1,97 @@
+<svg width="290" height="213" viewBox="0 0 290 213" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#186;&#231;&#156;&#129;&#233;&#161;&#181;-&#230;&#154;&#130;&#230;&#151;&#160;&#230;&#150;&#176;&#229;&#156;&#176;&#229;&#157;&#128;">
+<g id="Group 3802">
+<g id="Group 3799">
+<path id="Vector 22" d="M219.974 16.8681C209.029 17.2712 208.32 27.1136 209.333 31.9845V34H289.901C290.239 33.3282 289.901 30.3721 285.847 23.9224C281.794 17.4727 276.051 15.5244 273.686 15.3564C272.673 13.1729 269.328 8.40288 264.059 6.79046C258.789 5.17804 254.431 8.13414 252.911 9.81374C252.1 8.60443 250.884 9.30986 250.377 9.81374C248.519 6.28658 242.371 -0.364642 232.642 1.24778C222.913 2.86019 220.143 12.3331 219.974 16.8681Z" fill="url(#paint0_linear_180_1734)"/>
+<path id="Vector 23" d="M56.1741 70.1745C61.9845 70.3821 62.3611 75.4525 61.8231 77.9617V79H19.0526C18.8732 78.6539 19.0526 77.1311 21.2045 73.8085C23.3565 70.4859 26.4051 69.4823 27.6605 69.3957C28.1985 68.2709 29.9738 65.8136 32.7714 64.983C35.569 64.1523 37.8824 65.6752 38.6893 66.5404C39.1197 65.9174 39.7653 66.2808 40.0343 66.5404C41.0206 64.7234 44.2845 61.297 49.4492 62.1276C54.614 62.9583 56.0845 67.8383 56.1741 70.1745Z" fill="url(#paint1_linear_180_1734)"/>
+<path id="Vector 21" d="M199.5 22C195.5 21.2 192.167 28.3333 191 32V37.5C204.333 38 231.4 38.7 233 37.5C235 36 230 32 229.5 30.5C229.1 29.3 226.333 28.6667 225 28.5L221 24.5C219.8 23.3 217.5 24 216.5 24.5C216.167 23.3333 214.6 20.8 211 20C207.4 19.2 205.5 22.6667 205 24.5C204.833 24 203.5 22.8 199.5 22Z" fill="url(#paint2_linear_180_1734)"/>
+</g>
+<path id="Ellipse 16" d="M290 162C290 190.167 225.081 213 145 213C64.9187 213 0 190.167 0 162C0 143.066 29.3354 126.542 72.8921 117.743C73.9202 117.536 75.5 114.5 75.5 114.5C75.5 114.5 77.5527 116.841 78.3354 116.698C83.6196 115.734 89.0939 114.881 94.7332 114.148C95.5966 114.036 98 108.5 98 108.5C98 108.5 100.108 113.602 101 113.5C115.166 111.875 129.291 111 145 111C225.081 111 290 133.833 290 162Z" fill="url(#paint3_linear_180_1734)"/>
+<path id="Vector 27" d="M255.5 141L256 123.5L244.5 136.5L255.5 141Z" fill="#DBEAFF"/>
+<path id="Vector 29" d="M255.5 141L256 123.5L264 136.5L255.5 141Z" fill="#F1F7FD"/>
+<g id="Group 3798">
+<ellipse id="Ellipse 15" cx="207" cy="149" rx="16" ry="5" fill="#DBEBFC"/>
+<path id="Vector 18" d="M199 148.5V144.5V144H201.5V146.5C203.9 146.5 205.833 147.833 206.5 148.5H199Z" fill="#1E59AA"/>
+<path id="Vector 19" d="M209 148.5V144.5V144H211.5V146.5C213.9 146.5 215.833 147.833 216.5 148.5H209Z" fill="#1E59AA"/>
+<path id="Vector 17" d="M198 146V111H209.5C210.167 114.333 211.5 121.5 211.5 123.5C211.5 125.5 213.5 139.333 214.5 146H208.5L206 133.5C206 135.5 204.333 142.667 203.5 146H198Z" fill="#173E82"/>
+<path id="Vector 15" d="M207.5 116.5C207.9 115.7 207 115.167 206.5 115H206L204 115.5C204.167 115.833 203.749 116.471 204 117C204.302 117.636 204.688 118.162 205.5 118C206.042 117.892 206.334 118 206.5 117.5C206.667 117.5 207.1 117.3 207.5 116.5Z" fill="#FBE7C6"/>
+<path id="Vector 12" d="M206.152 83.2594C205.716 82.8992 205.844 81.782 205.962 81.2684L205.867 80.2729L204.777 79.3725L204.231 78.9223L202.738 79.0648L201.79 79.6576C201.656 80.0053 201.317 81.0087 201.032 82.2413C200.677 83.782 201.72 84.1847 201.768 84.6825C201.806 85.0807 201.547 85.8755 201.413 86.2232L204.044 87.4788L203.949 86.4834C203.933 86.3174 204.001 85.9761 204.399 85.9381C204.797 85.9001 205.133 84.8634 205.252 84.3499C205.734 84.1364 206.588 83.6195 206.152 83.2594Z" fill="#FBE7C6"/>
+<path id="Vector 11" d="M200.826 77.5C199.626 77.5 199.993 78.8333 200.326 79.5C200.326 79.5 200.159 81.8333 200.326 82.5L200.826 83L201.5 82C201.5 81.6667 202 81.624 202 81.224C202 80.824 201.993 80 202.326 80C202.66 79.8333 203.326 79.6 203.326 80C203.326 80.5 205.826 81.5 206.326 81.5C206.826 81.5 206.826 81 207.326 81C207.826 81 207.326 79.5 207.326 79C207.326 78.6 206.66 78.5 206.326 78.5C206.326 78.1667 206.226 77.4 205.826 77C205.426 76.6 204.326 76.8333 203.826 77C203.826 76.6667 203.526 76 202.326 76C201.126 76 200.826 77 200.826 77.5Z" fill="#003D8E"/>
+<path id="Vector 13" d="M204.5 87.5L201.5 85.5C200.667 88.3333 198.9 94.9 198.5 98.5C198.1 102.1 198 108.667 198 111.5H210L209 105L211 107L218.5 98.5L216.5 96.5L210.5 102C210 100 208.8 95.7 208 94.5C207.2 93.3 204.667 89.1667 204.5 87.5Z" fill="url(#paint4_linear_180_1734)"/>
+<path id="Vector 14" d="M205.141 108C204.741 106 205.641 101.5 206.141 99.5L202.141 96.5C201.808 98 200.941 101.8 200.141 105C199.341 108.2 202.141 114 203.641 116.5L206.641 115C206.308 113.5 205.541 110 205.141 108Z" fill="url(#paint5_linear_180_1734)"/>
+<path id="Vector 16" d="M219 94.5C218.6 94.5 216.833 96.1667 216 97L218 99C218 99 218.637 98.7422 219 98.5C220.31 97.6268 220.841 96.5662 221 95C221.039 94.6115 221 94 221 94L220.5 94.5L218.5 97L218 96.5L219.5 94.5H219Z" fill="#FBE7C6"/>
+<path id="Rectangle 1025" d="M221.771 91.7278L222.525 92.3851L218.5 97L217.746 96.3427L221.771 91.7278Z" fill="black"/>
+</g>
+<path id="Vector 24" d="M41 27L46.32 36.0909L73.68 29.2727L50.12 39.1212L45.56 46.697L54.68 43.6667L60.76 52L79 27H41Z" fill="url(#paint6_linear_180_1734)"/>
+<path id="Vector 30" d="M237 60L233.5 66L215.5 61.5L231 68L234 73L228 71L224 76.5L212 60H237Z" fill="url(#paint7_linear_180_1734)"/>
+<g id="Group 3800">
+<path id="Vector 26" d="M27.5 132.5L23 123V134.5L40.5 141L50 133L37 111.5L27.5 132.5Z" fill="#F2F8FF"/>
+<path id="Vector 25" d="M14 139L23 123L24 132L37 111L40.5 141L25 137.5L25.5 140L14 139Z" fill="#E2EDFF"/>
+</g>
+<g id="Group 3801">
+<path id="Vector 26_2" d="M49.375 123.375L48.25 121V123.875L52.625 125.5L55 123.5L51.75 118.125L49.375 123.375Z" fill="#F2F8FF"/>
+<path id="Vector 25_2" d="M46 125L48.25 121L48.5 123.25L51.75 118L52.625 125.5L48.75 124.625L48.875 125.25L46 125Z" fill="#E2EDFF"/>
+</g>
+</g>
+<g id="Group 3805">
+<path id="Rectangle 1028" d="M92 77.7268C92 53.5772 111.577 34 135.727 34H138.31C161.335 34 180 52.6651 180 75.6897V75.6897C180 85.6132 176.695 95.2541 170.608 103.091L138.201 144.811C137.548 145.651 137.221 146.071 136.813 146.385C136.508 146.619 136.171 146.808 135.812 146.945C135.331 147.13 134.802 147.189 133.745 147.306L128.63 147.874C128.459 147.893 128.374 147.903 128.292 147.905C127.798 147.919 127.317 147.751 126.941 147.431C126.878 147.378 126.818 147.318 126.696 147.196V147.196C126.666 147.166 126.651 147.151 126.636 147.135C126.548 147.043 126.469 146.943 126.4 146.837C126.388 146.819 126.377 146.8 126.355 146.764L98.9621 102.301C94.4103 94.9123 92 86.4048 92 77.7268V77.7268Z" fill="url(#paint8_linear_180_1734)"/>
+<path id="Rectangle 1027" d="M84 76.7451C84 53.6899 102.69 35 125.745 35H130.255C153.31 35 172 53.6899 172 76.7451V76.7451C172 86.6353 168.722 96.2466 162.678 104.076L130.596 145.636C129.676 146.829 129.215 147.425 128.646 147.62C128.227 147.763 127.773 147.763 127.354 147.62C126.785 147.425 126.324 146.829 125.404 145.636L93.3215 104.076C87.2781 96.2466 84 86.6353 84 76.7451V76.7451Z" fill="url(#paint9_linear_180_1734)"/>
+<circle id="Ellipse 17" cx="128" cy="79" r="15" fill="white"/>
+</g>
+<g id="Group 3806">
+<path id="Rectangle 1028_2" d="M149.199 108.953C149.199 96.2763 159.476 86 172.152 86H173.508C185.594 86 195.392 95.7976 195.392 107.884V107.884C195.392 113.093 193.657 118.153 190.462 122.267L174.259 143.126C173.606 143.966 173.279 144.387 172.871 144.7C172.566 144.934 172.229 145.123 171.87 145.261C171.389 145.445 170.86 145.504 169.802 145.622L168.427 145.774C168.052 145.816 167.678 145.685 167.412 145.418V145.418C167.343 145.35 167.283 145.274 167.232 145.192L152.854 121.852C150.464 117.974 149.199 113.508 149.199 108.953V108.953Z" fill="url(#paint10_linear_180_1734)"/>
+<path id="Rectangle 1027_2" d="M145 108.438C145 96.3355 154.811 86.5249 166.913 86.5249H169.28C181.382 86.5249 191.193 96.3355 191.193 108.438V108.438C191.193 113.629 189.472 118.674 186.3 122.784L170.692 143.003C169.772 144.194 169.312 144.79 168.743 144.985C168.324 145.128 167.869 145.128 167.449 144.985C166.88 144.79 166.421 144.194 165.501 143.003L149.893 122.784C146.721 118.674 145 113.629 145 108.438V108.438Z" fill="url(#paint11_linear_180_1734)"/>
+<circle id="Ellipse 17_2" cx="168.096" cy="109.621" r="7.87372" fill="white"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_180_1734" x1="249.5" y1="1" x2="249.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEDFF"/>
+<stop offset="1" stop-color="#DBEDFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_180_1734" x1="40.5" y1="62" x2="40.5" y2="79" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEDFF"/>
+<stop offset="1" stop-color="#DBEDFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_180_1734" x1="212.235" y1="19.8821" x2="212.235" y2="38.1626" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEDFF"/>
+<stop offset="1" stop-color="#DBEDFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_180_1734" x1="145" y1="111" x2="145" y2="213" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEAFF"/>
+<stop offset="1" stop-color="#DDE9FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_180_1734" x1="208.25" y1="85.5" x2="208.25" y2="111.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.751639" stop-color="#419BFB"/>
+<stop offset="1" stop-color="#419BFB"/>
+</linearGradient>
+<linearGradient id="paint5_linear_180_1734" x1="203.32" y1="96.5" x2="203.32" y2="116.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.515515" stop-color="#419BFB"/>
+<stop offset="1" stop-color="#75B8FF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_180_1734" x1="74.44" y1="27" x2="60.0692" y2="52.0397" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DCEEFD"/>
+<stop offset="1" stop-color="#6CB5F7"/>
+</linearGradient>
+<linearGradient id="paint7_linear_180_1734" x1="215" y1="60" x2="224.5" y2="76.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DCEEFD"/>
+<stop offset="1" stop-color="#6CB5F7"/>
+</linearGradient>
+<linearGradient id="paint8_linear_180_1734" x1="180" y1="145.808" x2="95.0118" y2="36.3421" gradientUnits="userSpaceOnUse">
+<stop stop-color="#75BEF7"/>
+<stop offset="1" stop-color="#DCEBFD"/>
+</linearGradient>
+<linearGradient id="paint9_linear_180_1734" x1="172" y1="146.808" x2="87.0118" y2="37.3421" gradientUnits="userSpaceOnUse">
+<stop stop-color="#469FF9"/>
+<stop offset="1" stop-color="#C0DBFF"/>
+</linearGradient>
+<linearGradient id="paint10_linear_180_1734" x1="195.392" y1="144.69" x2="150.78" y2="87.2294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#75BEF7"/>
+<stop offset="1" stop-color="#DCEBFD"/>
+</linearGradient>
+<linearGradient id="paint11_linear_180_1734" x1="191.193" y1="145.214" x2="146.581" y2="87.7543" gradientUnits="userSpaceOnUse">
+<stop stop-color="#469FF9"/>
+<stop offset="1" stop-color="#C0DBFF"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/svg/right1.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 19" clip-path="url(#clip0_20_1031)">
+<path id="Rectangle 2" d="M8.24259 4.00004L12.4852 8.24268L8.24259 12.4853" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1031">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/sm.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_18_1134)">
+<path id="Union" d="M2.00049 10.5C2.27641 10.5003 2.50049 10.724 2.50049 11V13C2.50049 13.2761 2.72435 13.5 3.00049 13.5H6.00049C6.27641 13.5003 6.50049 13.724 6.50049 14C6.50049 14.276 6.27641 14.4997 6.00049 14.5H3.00049C2.17206 14.5 1.49951 13.8284 1.49951 13V11C1.49951 10.7239 1.72435 10.5 2.00049 10.5ZM14.0005 10.5C14.2764 10.5003 14.5005 10.724 14.5005 11V13C14.5005 13.8283 13.8287 14.4997 13.0005 14.5H10.0005C9.72435 14.5 9.50049 14.2761 9.50049 14C9.50049 13.7239 9.72435 13.5 10.0005 13.5H13.0005C13.2764 13.4997 13.5005 13.276 13.5005 13V11C13.5005 10.7239 13.7243 10.5 14.0005 10.5ZM14.1001 7.50977C14.3281 7.55629 14.5005 7.75829 14.5005 8C14.5005 8.24155 14.3288 8.44353 14.1011 8.49023L14.0005 8.5H2.00049C1.72435 8.5 1.49951 8.27614 1.49951 8C1.49951 7.72402 1.72359 7.50026 1.99951 7.5H13.9995L14.1001 7.50977ZM6.00049 1.5C6.27641 1.50026 6.50049 1.72402 6.50049 2C6.50049 2.27598 6.27641 2.49974 6.00049 2.5H3.00049C2.72435 2.5 2.50049 2.72386 2.50049 3V5C2.50049 5.27598 2.27641 5.49974 2.00049 5.5C1.72435 5.5 1.49951 5.27614 1.49951 5V3C1.49951 2.17157 2.17206 1.5 3.00049 1.5H6.00049ZM13.0005 1.5C13.8287 1.50026 14.5005 2.17174 14.5005 3V5C14.5005 5.27598 14.2764 5.49974 14.0005 5.5C13.7243 5.5 13.5005 5.27614 13.5005 5V3C13.5005 2.72402 13.2764 2.50026 13.0005 2.5H10.0005C9.72435 2.5 9.50049 2.27614 9.50049 2C9.50049 1.72386 9.72435 1.5 10.0005 1.5H13.0005Z" fill="#8D8D8D"/>
+</g>
+<defs>
+<clipPath id="clip0_18_1134">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/i18n/zhHk/router.js

@@ -10,6 +10,10 @@ export default {
   PersonalInformation: "個人資料",
   WalletManagement:"錢包管理",
   receiptOfRecord:"領取記錄",
+  walletDetail:"詳情",
+  transfer:"轉賬",
+  addressBook:"地址簿",
+  addAddress:"添加地址",
 
   BackupMnemonic: "備份助記詞"
 }

src/router/system.js

@@ -55,6 +55,30 @@ export const systemRoutes = [
         meta: { title: "router.receiptOfRecord", keepAlive: false, navbar: true, leftArrow: true }, // 节点分红
         component: () => import("@/views/me/nodeDividend/index.vue"),
       },
+      {
+        path: "walletDetail",
+        name: "walletDetail",
+        meta: { title: "router.walletDetail", keepAlive: false, navbar: true, leftArrow: true }, // 钱包详情
+        component: () => import("@/views/wallet/walletDetail/index.vue"),
+      },
+      {
+        path: "transferDetail",
+        name: "transferDetail",
+        meta: { title: "router.transfer", keepAlive: false, navbar: true, leftArrow: true }, // 转账详情
+        component: () => import("@/views/wallet/transferDetail/index.vue"),
+      },
+      {
+        path: "addressManagement",
+        name: "addressManagement",
+        meta: { title: "router.addressBook", keepAlive: false, navbar: true, leftArrow: true }, // 地址管理
+        component: () => import("@/views/me/addressManagement/index.vue"),
+      },
+      {
+        path: "addAddress",
+        name: "addAddress",
+        meta: { title: "router.addAddress", keepAlive: false, navbar: true, leftArrow: true }, // 添加地址
+        component: () => import("@/views/me/addAddress/index.vue"),
+      },
     ],
   },
 ];

src/views/me/addAddress/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <div class="card-box">
+                <div class="card-title">选择网络</div>
+                <div class="card-input" style="justify-content: space-between;">
+                    <div class="card-input-lf">
+                        <svg-icon style="width: 30px; height: 30px;" name="acc" />
+                        <div class="card-text">STT</div>
+                    </div>
+                    <svg-icon style="width: 16px; height: 16px;" name="right1" />
+                </div>
+            </div>
+            <div class="card-box">
+                <div class="card-title">地址名称</div>
+                <div class="card-input">
+                    <van-field v-model="addressName" placeholder="请输入地址名称" />
+                </div>
+            </div>
+            <div class="card-box">
+                <div class="card-title">输入地址</div>
+                <div class="card-input" style="height:100%">
+                    <van-field 
+                        type="textarea"
+                        v-model="walletAddress"
+                        placeholder="请输入收货地址"
+                        rows="1"
+                        :autosize="true"
+                    >
+                        <template #right-icon>
+                            <svg-icon style="width: 16px; height: 16px;" name="sm" />
+                        </template>
+                    </van-field>
+                </div>
+            </div>
+        </div>
+        <van-button class="footer-btn" type="primary" size="large">确认</van-button>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter();
+const addressName = ref('')
+const walletAddress = ref('')
+</script>
+
+<style lang="less" scoped>
+.container{
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 44px);
+    padding: 17px 17px 33px;
+    box-sizing: border-box;
+    .content{
+        flex: 1;
+        .card-box{
+            margin-bottom: 25px;
+            .card-title{
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                font-size: 12px;
+                color: #8D8D8D;
+                margin-bottom: 6px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .card-input{
+                background: #F2F2F2;
+                border-radius: 8px;
+                border: 1px solid #D8D8D8;
+                display: flex;
+                align-items: center;
+                padding: 18px 17px;
+                height: 56px;
+                box-sizing: border-box;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #000000;
+                .card-input-lf{
+                    display: flex;
+                    align-items: center;
+                    .card-text{
+                        margin-left: 8px;
+                        font-weight: 500;
+                    }
+                }
+                :deep(.van-cell) {
+                    background:#F2F2F2 !important;
+                    padding: 0 !important;
+                }
+                :deep(.van-field__control) {
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #000000;
+                }
+            }
+        }
+        
+    }
+    .footer-btn{
+        height: 40px !important;
+        line-height: 40px !important;
+        background: linear-gradient( 90deg, #4765DD 0%, #40A4FB 100%) !important;
+        border-radius:51px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        padding: 9px 0;
+        box-sizing: border-box;
+        color: #fff;
+    }
+}
+</style>

src/views/me/addressManagement/index.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <div class="no-more">
+                <svg-icon style="width: 302px; height: 222px;" name="no-address"/>
+                <div class="no-more-text">暂无新地址</div>
+            </div>
+        </div>
+        <van-button class="footer-btn" size="large" @click="goToAdd">添加新地址</van-button>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter();
+const goToAdd = () => {
+    router.push('addAddress')
+}
+</script>
+
+<style lang="less" scoped>
+.container{
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 44px);
+    padding: 17px 17px 33px;
+    box-sizing: border-box;
+    .content{
+        flex: 1;
+        .no-more{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top:209px;
+            .no-more-text{
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #8D8D8D;
+            }
+            
+        }
+    }
+    .footer-btn{
+        height: 40px !important;
+        line-height: 40px !important;
+        background: #D8D8D8;
+        border-radius:51px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        padding: 9px 0;
+        box-sizing: border-box;
+        color: #000000;
+    }
+}
+</style>

src/views/me/index.vue

@@ -22,7 +22,7 @@
       <van-row justify="end" class="user-info-row">
         <van-col span="6"  >
           <div class="user-bar-icon-box">
-            <svg-icon class="user-bar-icon"  name="address-book"/> 
+            <svg-icon class="user-bar-icon"  name="address-book" @click="goToaPage('addressManagement')"/> 
             <span class="user-info-text">地址薄</span> 
           </div>
         </van-col>
@@ -33,13 +33,13 @@
           </div>
         </van-col>
         <van-col span="6">
-          <div class="user-bar-icon-box" @click="goToWalletManagement">
+          <div class="user-bar-icon-box" @click="goToaPage('walletManagement')">
             <svg-icon class="user-bar-icon"  name="wallet"/> 
             <span class="user-info-text">钱包管理</span> 
           </div>
         </van-col>
         <van-col span="6">
-          <div class="user-bar-icon-box" @click="goToProfile">
+          <div class="user-bar-icon-box" @click="goToaPage('personalInformation')">
             <svg-icon class="user-bar-icon"  name="id-card"/> 
             <span class="user-info-text">个人资料</span> 
           </div>
@@ -80,11 +80,8 @@ const vanListConfig = [
 const evGoPath = (path)=>{
   router.push(path)
 }
-const goToWalletManagement = () => {
-  router.push('walletManagement')
-}
-const goToProfile = () => {
-  router.push('personalInformation')
+const goToaPage = (url) => {
+  router.push(url)
 }
 </script>
 

src/views/me/nodeDividend/index.vue

@@ -175,7 +175,7 @@
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 500;
                     font-size: 15px;
-                    color: #4F4F4F;
+                    color: @font-color2;
                     margin-bottom: 17px;
                 }
                 .list-ul{
@@ -188,7 +188,7 @@
                         font-family: PingFang SC, PingFang SC;
                         font-weight: 500;
                         font-size: 12px;
-                        color: #4F4F4F;
+                        color: @font-color2;
                         margin-bottom: 8px;
                     }
                 }

src/views/me/personalInformation/index.vue

@@ -149,7 +149,7 @@ const afterRead = () => {
         }
     }
 }
-::v-deep .van-popup--center{
+:deep(.van-popup--center) {
     margin: 0 40px !important;
     width: auto !important;
 }

src/views/wallet/index.vue

@@ -36,7 +36,7 @@
             <svg-icon style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
           </div>
         </div>
-        <svg-icon style="width: 24px; height: 24px;" name="right" />
+        <svg-icon style="width: 24px; height: 24px;" name="right" @click="goDetail"/>
       </div>
       <div class="card-box">
         <div class="box-cont">
@@ -47,7 +47,7 @@
           <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="2" />
           <div>收款</div>
         </div>
-        <div class="box-cont">
+        <div class="box-cont" @click="goToPage('transferDetail')">
           <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="3" />
           <div>转账</div>
         </div>
@@ -66,7 +66,7 @@
           <svg-icon style="width: 24px; height: 24px;" name="add" />
         </div>
         <div class="list-ul">
-          <div class="list-li" v-for="item in 10">
+          <div class="list-li" v-for="item in 10" @click="showHistory = true">
             <div class="list-li-lf">
               <svg-icon style="width: 30px; height: 30px;margin-right: 8px;" name="acc" />
               <div>ACC</div>
@@ -81,7 +81,7 @@
       <van-popup v-model:show="showWallet" position="bottom" round>
         <div class="pop-content">
           <div class="pop-title">
-            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" />
+            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
             <div class="title">选择钱包</div>
           </div>
           <div class="tree">
@@ -118,12 +118,60 @@
           </div>
         </div>
       </van-popup>
+      <van-popup v-model:show="showHistory" position="bottom" round style="height:500px">
+        <div class="pop-content" style="height:500px">
+          <div class="pop-title">
+            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showHistory = false"/>
+            <div class="title">历史记录</div>
+          </div>
+          <div class="pop-list">
+            <div class="pop-list-box" v-for="(item,i) in 10">
+              <svg-icon style="width: 24px; height: 24px;color: #fff;" :name="i == 0?'fs':'js'" />
+              <div class="pop-list-ul">
+                <div class="pop-list-li">
+                  <div class="pop-list-li-title">{{i == 0?'发送':'接收'}}</div>
+                  <div class="pop-list-li-status">成功</div>
+                </div>
+                <div class="pop-list-li">
+                  <div>转账金额</div>
+                  <div>0ACC</div>
+                </div>
+                <div class="pop-list-li">
+                  <div>发送时间</div>
+                  <div>2025-06-06 19:08:17</div>
+                </div>
+                <div class="pop-list-li">
+                  <div>收款地址</div>
+                  <div>0x712f...7b27<svg-icon style="width: 16px; height: 16px;" name="copy" /></div>
+                </div>
+                <div class="pop-list-li">
+                  <div>hash</div>
+                  <div>0x712f...7b27<svg-icon style="width: 16px; height: 16px;" name="copy" /></div>
+                </div>
+                <div class="pop-list-li">
+                  <div>矿工费</div>
+                  <div>0.000378636ACC</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </van-popup>
     </div>
   </template>
   
   <script setup>
+  import { useRouter } from 'vue-router'
+  const router = useRouter();
   const isShow = ref(true);
   const showWallet = ref(false);
+  const showHistory = ref(false);
+  const goDetail = () => {
+    router.push('walletDetail')
+  }
+  const goToPage = (url) => {
+    router.push(url)
+  }
   </script>
   
   <style lang="less" scoped>
@@ -283,7 +331,7 @@
           }
           .list-li-ri{
             font-size: 12px;
-            color: #4F4F4F;
+            color: @font-color2;
             text-align: right;
             .list-li-ri-num{
               font-weight: 400;
@@ -301,7 +349,8 @@
       }
     }
     .pop-content{
-      background-color: #fff;
+      display: flex;
+      flex-direction: column;
       .pop-title{
         padding: 17px;
         border-bottom: 1px solid #F2F2F2;
@@ -399,11 +448,54 @@
           font-size: 15px;
           color: #FFFFFF;
         }
-        ::v-deep .van-button__text{
+        :deep(.van-button__text) {
           display: flex;
           align-items: center;
         }
       }
+      .pop-list{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        .pop-list-box{
+          display: flex;
+          padding: 17px 17px 0;
+          .pop-list-ul{
+            padding-bottom: 12px;
+            flex: 1;
+            margin-left: 8px;
+            border-bottom: 1px solid #F2F2F2;
+            box-sizing: border-box;
+            .pop-list-li{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-family: PingFang SC, PingFang SC;
+              margin-bottom: 4px;
+              font-weight: 400;
+              font-size: 12px;
+              color: @font-color2;
+              .pop-list-li-title{
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+              }
+              .pop-list-li-status{
+                font-weight: 500;
+                font-size: 15px;
+                color: @theme-color1 !important;
+              }
+            }
+            .pop-list-li div:last-child{
+              color: #8D8D8D;
+            }
+          }
+        }
+      }
+      .pop-list::-webkit-scrollbar{
+        width: 0;
+      }
     }
   }
   </style>

src/views/wallet/transferDetail/index.vue

@@ -0,0 +1,232 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <div class="card-box">
+                <div class="card-title">选择币种</div>
+                <div class="card-input" @click="showWallet = true">
+                    <svg-icon style="width: 30px; height: 30px;" name="acc" />
+                    <div class="card-text">STT</div>
+                    <svg-icon style="width: 16px; height: 16px;" name="down" />
+                </div>
+            </div>
+            <div class="card-box">
+                <div class="card-title">收货地址
+                    <svg-icon style="width: 16px; height: 16px;" name="address" @click="goToAddress"/>
+                </div>
+                <div class="card-input" style="height:100%">
+                    <van-field 
+                        type="textarea"
+                        v-model="walletAddress"
+                        placeholder="请输入收货地址"
+                        rows="1"
+                        :autosize="true"
+                    >
+                        <template #right-icon>
+                            <svg-icon style="width: 16px; height: 16px;" name="sm" />
+                        </template>
+                    </van-field>
+                </div>
+            </div>
+            <div class="card-box">
+                <div class="card-title">
+                    <div>转账数量</div>
+                    <div>可用：18.34543534534</div>
+                </div>
+                <div class="card-input">
+                    <van-field v-model="unitNum" placeholder="0.00" />
+                    <div class="card-input-right">
+                        <div>STT</div>
+                        <div class="line"></div>
+                        <div class="all">全部</div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-box">
+                <div class="card-title">网络费用</div>
+                <div class="card-input" style="flex-direction: column;align-items: self-start;padding: 8px 17px;">
+                    <div>18.34344398867676764566000ACC</div>
+                    <div class="price">STT0.01</div>
+                </div>
+            </div>
+        </div>
+        <van-button class="footer-btn" type="primary" size="large">确认</van-button>
+        <van-popup v-model:show="showWallet" position="bottom" round style="height:368px">
+            <div class="pop-content" style="height:368px">
+                <div class="pop-title">
+                    <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
+                    <div class="title">选择币种</div>
+                </div>
+                <div class="list-ul">
+                    <div class="list-li" v-for="item in 10" @click="showHistory = true">
+                        <div class="list-li-lf">
+                            <svg-icon style="width: 42px; height: 42px;margin-right: 12px;" name="acc" />
+                            <div>ACC</div>
+                        </div>
+                        <div class="list-li-ri">
+                            <div>6.6476474848</div>
+                            <div class="list-li-ri-num">$6.6476474848</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter();
+const walletAddress = ref('')
+const unitNum = ref('')
+const showWallet = ref(false)
+const goToAddress = () => {
+    router.push('addressManagement')
+}
+</script>
+
+<style lang="less" scoped>
+.container{
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 44px);
+    padding: 17px 17px 33px;
+    box-sizing: border-box;
+    .content{
+        flex: 1;
+        .card-box{
+            margin-bottom: 25px;
+            .card-title{
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #8D8D8D;
+                margin-bottom: 6px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .card-input{
+                background: #F2F2F2;
+                border-radius: 8px;
+                border: 1px solid #D8D8D8;
+                display: flex;
+                align-items: center;
+                padding: 18px 17px;
+                height: 56px;
+                box-sizing: border-box;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #000000;
+                .card-text{
+                    margin: 0 5px 0 8px;
+                }
+                .card-input-right{
+                    display: flex;
+                    align-items: center;
+                    flex-shrink: 0;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #000000;
+                    margin-left: 17px;
+                    .line{
+                        height: 25px;
+                        border: 1px solid #D8D8D8;
+                        width: 0;
+                        margin: 0 17px;
+                    }
+                    .all{
+                        font-weight: 500;
+                        color: #4765DD;
+                    }
+                }
+                .price{
+                    font-size: 12px;
+                    color: #8D8D8D;
+                    margin-top: 1px;
+                }
+            }
+        }
+    }
+    .footer-btn{
+        height: 40px !important;
+        line-height: 40px !important;
+        background: linear-gradient( 90deg, #4765DD 0%, #40A4FB 100%) !important;
+        border-radius:28px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        padding: 9px 0;
+        box-sizing: border-box;
+        color: #FFFFFF;
+    }
+    :deep(.van-cell) {
+        background:#F2F2F2 !important;
+        padding: 0 !important;
+    }
+    :deep(.van-field__control) {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        color: #000000;
+    }
+    .pop-content{
+        display: flex;
+        flex-direction: column;
+        .pop-title{
+            padding: 17px;
+            border-bottom: 1px solid #F2F2F2;
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 17px;
+            color: #000000;
+            .title{
+                flex: 1;
+                display: flex;
+                justify-content: center;
+            }
+        }
+        .list-ul{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            margin: 17px;
+            .list-li{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                margin-bottom: 17px;
+                .list-li-lf{
+                    display: flex;
+                    align-items: center;
+                    font-size: 15px;
+                    color: #000000;
+                }
+                .list-li-ri{
+                    font-size: 15px;
+                    color: @font-color2;
+                    text-align: right;
+                    .list-li-ri-num{
+                        margin-top: 3px;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #8D8D8D;
+                    }
+                }
+            }
+            .list-li:last-child{
+                margin-bottom: 0;
+            }
+        }
+        .list-ul::-webkit-scrollbar{
+            width: 0;
+        }
+    }
+}
+</style>

src/views/wallet/walletDetail/index.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="container">
+        <div class="userimg">
+            <van-image 
+                round 
+                width="60" 
+                height="60" 
+                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            />
+        </div>
+        <div class="username">Wallet</div>
+        <div class="useraddress">
+            <span>0xF3fefE…EcaB</span>
+            <svg-icon style="width: 18px; height: 18px;" name="copy" />
+        </div>
+        <van-list class="user-bar-list">
+            <van-cell title="錢包名稱" value="Wallet" is-link @click="changePop(1)"></van-cell>
+            <van-cell title="查看私鑰" value="" is-link @click="changePop(2)"></van-cell> 
+        </van-list>
+        <van-button class="footer-btn" size="large" @click="changePop(3)">删除钱包</van-button>
+        <van-popup v-model:show="show" :style="{ borderRadius:'25px' }">
+            <div class="pop-content">
+                <div class="pop-title">{{type == 1?'請輸入錢包名稱':'請輸入密碼'}}</div>
+                <van-field v-model="text" class="pop-input" :type="type == 1?'text':'password'"/>
+                <div class="pop-btn">
+                    <van-button type="default" class="btn cancel" @click="cancel">取消</van-button>
+                    <van-button type="default" class="btn confirm" @click="confirm">確定</van-button>
+                </div>
+            </div>
+        </van-popup>
+        <van-popup v-model:show="showkey" position="bottom" round>
+            <div>
+                <div class="pop-title-key">
+                    <svg-icon style="width: 24px; height: 24px;" name="left-arrow" />
+                    <div class="title">查看私钥</div>
+                </div>
+                <div class="pop-text">0x4d8d38c6433c9552a11181b64a234814cd83f5b0d2c7306545ee097da9c0e4b2</div>
+                <div class="qrcode">
+                    <qrcode-vue :value="qrtext" :size="156" :margin="1" background="transparent"/>
+                </div>
+                <div class="pop-btn-key">
+                    <van-button class="btn-key" type="primary" size="large" color="#4765DD" @click="showkey = false">复制</van-button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+import QrcodeVue from 'qrcode.vue'
+const show = ref(false);
+const showkey = ref(false);
+const text = ref('');
+const type = ref('');
+const qrtext = ref('123');
+const changePop = (v) => {
+    show.value = true;
+    type.value = v;
+}
+const cancel = () => {
+    text.value = ''
+    show.value = false;
+}
+const confirm = () => {
+    text.value = ''
+    show.value = false;
+    if(type.value == 2) showkey.value = true;
+}
+</script>
+
+<style lang="less" scoped>
+.container{
+    padding: 25px 17px 33px;
+    height: calc(100vh - 44px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .userimg{
+        display: flex;
+        justify-content: center;
+    }
+    .username{
+        text-align: center;
+        margin: 10px 0 4px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 17px;
+        color: @theme-color1;
+    }
+    .useraddress{
+        text-align: center;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        color: #8D8D8D;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .van-cell{
+        height: 42px;
+        background: @bg-color1;
+        border-bottom: 1px solid @bg-color1;
+        font-size: 15px ;
+        &::after{
+            border-bottom: 1px solid #F2F2F2;
+        }
+    }
+    .user-bar-list-last::after{
+        border-bottom: 0;
+    }
+
+    .user-bar-list{
+        margin: 25px 0 37px;
+        border-radius: 12px;
+        overflow: hidden;
+        flex: 1;
+    }
+    .footer-btn{
+        border-radius: 28px !important;
+        height: 40px !important;
+        line-height: 40px !important;
+        border: 1px solid @theme-color1 !important;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: @theme-color1;
+        background: transparent !important;
+        padding: 9px 0 !important;
+        box-sizing: border-box;
+    }
+    .pop-content{
+        padding: 27px 35px 25px 34px;
+        .pop-title{
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 17px;
+            color: #000000;
+            text-align: center;
+        }
+        .pop-input{
+            background: #F2F2F2;
+            border-radius: 8px;
+            height: 40px;
+            margin: 21px 0 31px;
+        }
+        .pop-btn{
+            display: flex;
+            justify-content: center;
+            .btn{
+                width: 83px;
+                height: 29px;
+                line-height: 29px;
+                padding: 5px 0 3px !important;
+                border-radius: 6px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                box-sizing:border-box;
+            }
+            .cancel{
+                margin-right: 17px !important;
+                border: 1px solid #D8D8D8;
+                color: #000 !important;
+            }
+            .confirm{
+                background: @theme-color1;
+                color: #FFF;
+                font-weight: 500;
+            }
+        }
+    }
+    .pop-title-key{
+        padding: 17px;
+        border-bottom: 1px solid #F2F2F2;
+        display: flex;
+        align-items: center;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        .title{
+            flex: 1;
+            display: flex;
+            justify-content: center;
+        }
+    }
+    .pop-text{
+        margin: 17px;
+        box-sizing: border-box;
+        background: #F2F2F2;
+        border-radius: 8px;
+        border: 1px solid #D8D8D8;
+        padding: 9px 17px;
+        word-break: break-word;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 17px;
+        color: @font-color2;
+    }
+    .qrcode{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .pop-btn-key{
+        margin: 17px;
+        .btn-key{
+          height: 40px;
+          line-height: 40px;
+          border-radius: 50px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 15px;
+          color: #FFFFFF;
+        }
+      }
+}
+:deep(.van-popup--center) {
+    margin: 0 40px !important;
+    width: auto !important;
+}
+</style>