添加聊天页面

src/assets/svg/bz.svg

@@ -0,0 +1,16 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1738)">
+<g id="Group 25">
+<path id="Rectangle 13" d="M14 14.375V14.375C14 14.9561 14 15.2467 13.9401 15.486C13.7608 16.2018 13.2018 16.7608 12.486 16.9401C12.2467 17 11.9561 17 11.375 17H6.16C5.07762 17 4.53642 17 4.12012 16.7961C3.72153 16.6008 3.39921 16.2785 3.20394 15.8799C3 15.4636 3 14.9224 3 13.84V6.16C3 5.07762 3 4.53642 3.20394 4.12012C3.39921 3.72153 3.72153 3.39921 4.12012 3.20394C4.53642 3 5.07762 3 6.16 3H10.84C11.9224 3 12.4636 3 12.8799 3.20394C13.2785 3.39921 13.6008 3.72153 13.7961 4.12012C14 4.53642 14 5.07762 14 6.16V6.5" stroke="black" stroke-linecap="round"/>
+<path id="Rectangle 17" d="M15.5267 7.06066L11.1591 11.4283C10.8886 11.6988 10.7534 11.8341 10.6479 11.9886C10.5462 12.1377 10.4651 12.2998 10.4069 12.4707C10.3465 12.6478 10.3194 12.8372 10.2653 13.2159L10.0607 14.648L11.4929 14.4434C11.8716 14.3893 12.0609 14.3622 12.2381 14.3019C12.4089 14.2436 12.571 14.1626 12.7201 14.0609C12.8747 13.9554 13.0099 13.8201 13.2804 13.5496L14.6569 12.1731L17.6481 9.18198C18.2338 8.59619 18.2338 7.64645 17.6481 7.06066C17.0623 6.47487 16.1125 6.47487 15.5267 7.06066Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Rectangle 14" d="M5 6.5C5 6.22386 5.22386 6 5.5 6H10.5C10.7761 6 11 6.22386 11 6.5C11 6.77614 10.7761 7 10.5 7H5.5C5.22386 7 5 6.77614 5 6.5Z" fill="black"/>
+<path id="Rectangle 15" d="M5 9.5C5 9.22386 5.22386 9 5.5 9H8.5C8.77614 9 9 9.22386 9 9.5C9 9.77614 8.77614 10 8.5 10H5.5C5.22386 10 5 9.77614 5 9.5Z" fill="black"/>
+<path id="Rectangle 16" d="M5 12.5C5 12.2239 5.22386 12 5.5 12H6.5C6.77614 12 7 12.2239 7 12.5C7 12.7761 6.77614 13 6.5 13H5.5C5.22386 13 5 12.7761 5 12.5Z" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_20_1738">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/no-more.svg

@@ -0,0 +1,122 @@
+<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;&#149;&#176;&#230;&#141;&#174;">
+<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_181_2273)"/>
+<path id="Vector 23" d="M40.8 44.2511C44.9888 44.4099 45.2603 48.2872 44.8725 50.206V51H14.0379C13.9086 50.7353 14.0379 49.5708 15.5893 47.03C17.1407 44.4893 19.3386 43.7217 20.2436 43.6556C20.6315 42.7954 21.9114 40.9163 23.9282 40.2811C25.9451 39.6459 27.6129 40.8104 28.1946 41.4721C28.5049 40.9957 28.9704 41.2736 29.1643 41.4721C29.8754 40.0826 32.2283 37.4624 35.9518 38.0976C39.6752 38.7328 40.7353 42.4646 40.8 44.2511Z" fill="url(#paint1_linear_181_2273)"/>
+<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_181_2273)"/>
+</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_181_2273)"/>
+<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"/>
+<path id="Vector 24" d="M52 26L57.32 35.0909L84.68 28.2727L61.12 38.1212L56.56 45.697L65.68 42.6667L71.76 51L90 26H52Z" fill="url(#paint4_linear_181_2273)"/>
+<path id="Vector 31" d="M26 88.7984V139H75V64H48.8667V88.7984H26Z" fill="url(#paint5_linear_181_2273)"/>
+<path id="Vector 33" d="M153 88.7984V139H202V64H175.867V88.7984H153Z" fill="url(#paint6_linear_181_2273)"/>
+<path id="Vector 34" d="M269 48.7984V139H220V35H246.133V48.7984H269Z" fill="url(#paint7_linear_181_2273)"/>
+<path id="Vector 32" d="M100 74.0887V135H83V44H92.0667V74.0887H100Z" fill="url(#paint8_linear_181_2273)"/>
+<path id="Vector 30" d="M237 96L233.5 102L215.5 97.5L231 104L234 109L228 107L224 112.5L212 96H237Z" fill="url(#paint9_linear_181_2273)"/>
+<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>
+<rect id="Rectangle 1031" x="100" y="44" width="90" height="89" rx="4" fill="url(#paint10_linear_181_2273)"/>
+<path id="Rectangle 1032" d="M106 52C106 50.8954 106.895 50 108 50H182C183.105 50 184 50.8954 184 52V137C184 138.105 183.105 139 182 139H108C106.895 139 106 138.105 106 137V52Z" fill="url(#paint11_linear_181_2273)"/>
+<rect id="Rectangle 1030" x="83" y="116" width="123" height="33" rx="4" fill="url(#paint12_linear_181_2273)"/>
+<rect id="Rectangle 1017" x="119" y="64" width="52" height="4" rx="1" fill="url(#paint13_linear_181_2273)"/>
+<rect id="Rectangle 1033" x="119" y="80" width="52" height="4" rx="1" fill="url(#paint14_linear_181_2273)"/>
+<rect id="Rectangle 1034" x="119" y="96" width="52" height="4" rx="1" fill="url(#paint15_linear_181_2273)"/>
+<rect id="Rectangle 1035" x="121" y="130" width="48" height="4" rx="1" fill="#ECF3FE"/>
+<g id="Group 3798">
+<ellipse id="Ellipse 15" cx="16" cy="5" rx="16" ry="5" transform="matrix(-1 0 0 1 106 157)" fill="#DBEBFC"/>
+<path id="Vector 18" d="M98 161.5V157.5V157H95.5V159.5C93.1 159.5 91.1667 160.833 90.5 161.5H98Z" fill="#1E59AA"/>
+<path id="Vector 19" d="M88 161.5V157.5V157H85.5V159.5C83.1 159.5 81.1667 160.833 80.5 161.5H88Z" fill="#1E59AA"/>
+<path id="Vector 17" d="M99 159V124H87.5C86.8333 127.333 85.5 134.5 85.5 136.5C85.5 138.5 83.5 152.333 82.5 159H88.5L91 146.5C91 148.5 92.6667 155.667 93.5 159H99Z" fill="#173E82"/>
+<path id="Vector 15" d="M89.4998 129.5C89.0998 128.7 89.9998 128.167 90.4998 128H90.9998L92.9998 128.5C92.8331 128.833 93.2505 129.471 92.9998 130C92.6984 130.636 92.3121 131.162 91.4998 131C90.9582 130.892 90.6664 131 90.4998 130.5C90.3331 130.5 89.8998 130.3 89.4998 129.5Z" fill="#FBE7C6"/>
+<path id="Vector 12" d="M90.8483 96.2594C91.2845 95.8992 91.1567 94.782 91.0383 94.2684L91.1334 93.2729L92.2238 92.3725L92.7692 91.9223L94.2624 92.0648L95.2103 92.6576C95.3445 93.0053 95.684 94.0087 95.9681 95.2413C96.3233 96.782 95.2803 97.1847 95.2328 97.6825C95.1948 98.0807 95.4537 98.8755 95.588 99.2232L92.9567 100.479L93.0518 99.4834C93.0676 99.3174 92.9997 98.9761 92.6016 98.9381C92.2034 98.9001 91.867 97.8634 91.7486 97.3499C91.2668 97.1364 90.4121 96.6195 90.8483 96.2594Z" fill="#FBE7C6"/>
+<path id="Vector 11" d="M96.1739 90.5C97.3739 90.5 97.0072 91.8333 96.6738 92.5C96.6738 92.5 96.8405 94.8333 96.6738 95.5L96.1738 96L95.5 95C95.5 94.6667 95 94.624 95 94.224C95 93.824 95.0072 93 94.6738 93C94.3405 92.8333 93.6738 92.6 93.6738 93C93.6738 93.5 91.1738 94.5 90.6738 94.5C90.1738 94.5 90.1738 94 89.6738 94C89.1738 94 89.6738 92.5 89.6738 92C89.6738 91.6 90.3405 91.5 90.6738 91.5C90.6738 91.1667 90.7738 90.4 91.1738 90C91.5738 89.6 92.6738 89.8333 93.1738 90C93.1738 89.6667 93.4738 89 94.6738 89C95.8738 89 96.1739 90 96.1739 90.5Z" fill="#003D8E"/>
+<path id="Vector 13" d="M92.5 100.5L95.5 98.5C96.3333 101.333 98.1 107.9 98.5 111.5C98.9 115.1 99 121.667 99 124.5H87L88 118L86 120L78.5 111.5L80.5 109.5L86.5 115C87 113 88.2 108.7 89 107.5C89.8 106.3 92.3333 102.167 92.5 100.5Z" fill="url(#paint16_linear_181_2273)"/>
+<path id="Vector 14" d="M91.859 121C92.259 119 91.359 114.5 90.859 112.5L94.8589 109.5C95.1923 111 96.059 114.8 96.859 118C97.659 121.2 94.859 127 93.359 129.5L90.359 128C90.6924 126.5 91.459 123 91.859 121Z" fill="url(#paint17_linear_181_2273)"/>
+<path id="Vector 16" d="M78 107.5C78.4 107.5 80.1667 109.167 81 110L79 112C79 112 78.3633 111.742 78 111.5C76.6901 110.627 76.1586 109.566 76 108C75.9607 107.611 76 107 76 107L76.5 107.5L78.5 110L79 109.5L77.5 107.5H78Z" fill="#FBE7C6"/>
+<path id="Rectangle 1025" d="M75.2285 104.728L74.4749 105.385L78.5 110L79.2536 109.343L75.2285 104.728Z" fill="black"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_181_2273" 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_181_2273" x1="29.5" y1="38" x2="29.5" y2="51" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEDFF"/>
+<stop offset="1" stop-color="#DBEDFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_181_2273" 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_181_2273" 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_181_2273" x1="85.44" y1="26" x2="71.0692" y2="51.0397" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DCEEFD"/>
+<stop offset="1" stop-color="#6CB5F7"/>
+</linearGradient>
+<linearGradient id="paint5_linear_181_2273" x1="50.5" y1="65.7943" x2="50.5" y2="128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEAFF"/>
+<stop offset="1" stop-color="#DDE9FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_181_2273" x1="177.5" y1="65.7943" x2="177.5" y2="128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEAFF"/>
+<stop offset="1" stop-color="#DDE9FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_181_2273" x1="244.5" y1="65.7942" x2="244.5" y2="128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEAFF"/>
+<stop offset="1" stop-color="#DDE9FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_181_2273" x1="91.5" y1="46.177" x2="91.5" y2="121.653" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DBEAFF"/>
+<stop offset="1" stop-color="#DDE9FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_181_2273" x1="215" y1="96" x2="224.5" y2="112.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DCEEFD"/>
+<stop offset="1" stop-color="#6CB5F7"/>
+</linearGradient>
+<linearGradient id="paint10_linear_181_2273" x1="190" y1="131.288" x2="129.923" y2="29.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#469FF9"/>
+<stop offset="1" stop-color="#C0DBFF"/>
+</linearGradient>
+<linearGradient id="paint11_linear_181_2273" x1="145" y1="50" x2="145" y2="139" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#E3EDFD"/>
+</linearGradient>
+<linearGradient id="paint12_linear_181_2273" x1="206" y1="148.365" x2="198.039" y2="98.8573" gradientUnits="userSpaceOnUse">
+<stop stop-color="#469FF9"/>
+<stop offset="1" stop-color="#C0DBFF"/>
+</linearGradient>
+<linearGradient id="paint13_linear_181_2273" x1="119" y1="66" x2="171" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFD2FB"/>
+<stop offset="1" stop-color="#5EABF1"/>
+</linearGradient>
+<linearGradient id="paint14_linear_181_2273" x1="119" y1="82" x2="171" y2="82" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFD2FB"/>
+<stop offset="1" stop-color="#5EABF1"/>
+</linearGradient>
+<linearGradient id="paint15_linear_181_2273" x1="119" y1="98" x2="171" y2="98" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFD2FB"/>
+<stop offset="1" stop-color="#5EABF1"/>
+</linearGradient>
+<linearGradient id="paint16_linear_181_2273" x1="88.75" y1="98.5" x2="88.75" y2="124.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.751639" stop-color="#419BFB"/>
+<stop offset="1" stop-color="#419BFB"/>
+</linearGradient>
+<linearGradient id="paint17_linear_181_2273" x1="93.6795" y1="109.5" x2="93.6795" y2="129.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.515515" stop-color="#419BFB"/>
+<stop offset="1" stop-color="#75B8FF"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/svg/sz.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1746)">
+<g id="Group 25">
+<path id="Union" d="M15.3745 3.76778C16.3508 4.74409 16.3508 6.327 15.3745 7.30331L9.4925 13.1853C9.2962 13.3816 9.14848 13.5315 9.00015 13.6528L8.84892 13.7653C8.70656 13.8618 8.55473 13.9432 8.39593 14.0084L8.23503 14.0685C8.11706 14.1077 7.99609 14.1354 7.85869 14.1589L7.3843 14.2259L5.18702 14.5159C5.03282 14.5363 4.87785 14.4844 4.76786 14.3744C4.65788 14.2644 4.60592 14.1094 4.6263 13.9552L4.91633 11.7579C4.9527 11.4829 4.97869 11.2745 5.02267 11.0881L5.07377 10.9072C5.12807 10.744 5.19936 10.5868 5.28576 10.4383L5.37691 10.2933C5.51649 10.0874 5.69506 9.91165 5.95696 9.64974L11.8389 3.76778C12.8152 2.79147 14.3982 2.79147 15.3745 3.76778ZM11.4854 5.53554L6.66407 10.3569C6.37574 10.6452 6.27876 10.7457 6.20486 10.8547L6.10059 11.0322C6.07027 11.0937 6.04494 11.1576 6.02325 11.2228L5.99494 11.3229C5.96923 11.4332 5.94797 11.5864 5.90793 11.8891L5.70285 13.4394L7.25309 13.2343L7.69089 13.1722C7.79142 13.1552 7.857 13.1398 7.91946 13.119L8.11005 13.0416C8.17158 13.0113 8.23059 12.976 8.28751 12.9374L8.37038 12.8752C8.45801 12.8033 8.56883 12.6947 8.78539 12.4782L13.6067 7.65686L11.4854 5.53554ZM14.6674 4.47488C14.0816 3.8891 13.1318 3.8891 12.546 4.47488L12.1925 4.82844L14.3138 6.94976L14.6674 6.5962C15.2531 6.01042 15.2531 5.06067 14.6674 4.47488Z" fill="#8D8D8D"/>
+<path id="Vector 6" d="M4 17H16" stroke="#8D8D8D" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_20_1746">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/xb.svg

@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1757)">
+<circle id="Ellipse 1" cx="6.5" cy="6.5" r="3.5" stroke="black"/>
+<circle id="Ellipse 2" cx="3.5" cy="3.5" r="3.5" transform="matrix(1 0 0 -1 10 17)" stroke="black"/>
+<path id="Vector 1 (Stroke)" d="M9.61111 13C9.82589 13 10 13.2239 10 13.5C10 13.7761 9.82589 14 9.61111 14H3.38889C3.17411 14 3 13.7761 3 13.5C3 13.2239 3.17411 13 3.38889 13H9.61111Z" fill="black"/>
+<path id="Vector 2 (Stroke)" d="M7 16.5C7 16.7761 6.77614 17 6.5 17C6.22386 17 6 16.7761 6 16.5L6 10.5C6 10.2239 6.22386 10 6.5 10C6.77614 10 7 10.2239 7 10.5L7 16.5Z" fill="black"/>
+<path id="Vector 4 (Stroke)" d="M13 3.5C13 3.22386 13.2239 3 13.5 3C13.7761 3 14 3.22386 14 3.5L14 9.5C14 9.77614 13.7761 10 13.5 10C13.2239 10 13 9.77614 13 9.5L13 3.5Z" fill="black"/>
+<path id="Rectangle 18" d="M17.0356 6.53552L13.5001 2.99999L9.96458 6.53552" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1757">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/yx.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1753)">
+<path id="Vector" d="M3 11.8C3 12.9201 3 13.4802 3.21799 13.908C3.40973 14.2843 3.71569 14.5903 4.09202 14.782C4.51984 15 5.07989 15 6.2 15H13.8C14.9201 15 15.4802 15 15.908 14.782C16.2843 14.5903 16.5903 14.2843 16.782 13.908C17 13.4802 17 12.9201 17 11.8V10V8.2C17 7.07989 17 6.51984 16.782 6.09202C16.5903 5.71569 16.2843 5.40973 15.908 5.21799C15.4802 5 14.9201 5 13.8 5H10H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V10V11.8Z" stroke="black" stroke-linejoin="round"/>
+<path id="Vector_2" d="M4 6L9.35982 10.4665C9.73066 10.7756 10.2693 10.7756 10.6402 10.4665L16 6" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1753">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/i18n/zhHk/router.js

@@ -34,5 +34,8 @@ export default {
   ContactList:"通訊錄",
   ReleaseRecord:"發佈記錄",
   NewInvitation:"新邀請",
-  GroupChatList:"羣聊列表"
+  GroupChatList:"羣聊列表",
+  PersonalInformation:"個人信息",
+  Search:"搜索",
+  CreateGroupChat:"創建羣聊"
 };

src/router/system.js

@@ -165,6 +165,12 @@ export const systemRoutes = [
         meta: { title: "router.AddMember", keepAlive: false, navbar: true, leftArrow: true }, //  添加成员
         component: () => import("@/views/im/detail/addMember/index.vue"),
       },
+      {
+        path: "createGroupChat",
+        name: "createGroupChat",
+        meta: { title: "router.CreateGroupChat", keepAlive: false, navbar: true, leftArrow: true }, //  创建群聊
+        component: () => import("@/views/im/detail/addMember/index.vue"),
+      },
       {
         path: "checkMember",
         name: "checkMember",
@@ -195,6 +201,18 @@ export const systemRoutes = [
         meta: { title: "router.ReleaseRecord", keepAlive: false, navbar: true, leftArrow: true }, //  发布记录
         component: () => import("@/views/im/releaseRecord/index.vue"),
       },
+      {
+        path: "personal",
+        name: "personal",
+        meta: { title: "router.PersonalInformation", keepAlive: false, navbar: true, leftArrow: true }, //  个人信息
+        component: () => import("@/views/im/personal/index.vue"),
+      },
+      {
+        path: "search",
+        name: "search",
+        meta: { title: "router.Search", keepAlive: false, navbar: true, leftArrow: true }, //  搜索页面
+        component: () => import("@/views/im/search/index.vue"),
+      },
     ],
   },
 ]

src/views/im/chat/index.vue

@@ -11,7 +11,11 @@
                 <div class="chat-time">23:{{ 20+index }}</div>
                 <div class="box" v-for="(text,i) in 10">
                     <div class="list-item" :class="i % 2 === 0 ? '' : 'flex-reverse'">
-                        <van-image class="list-img" :class="i % 2 === 0 ? 'mr12' : 'ml12'" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                        <van-image 
+                            class="list-img" 
+                            :class="i % 2 === 0 ? 'mr12' : 'ml12'" 
+                            round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                            @click="router.push('personal')"/>
                         <div class="list-cont">
                             <div :class="i % 2 === 0 ? '' : 'text-right'">苏苏编号</div>
                             <!-- 名片 -->

src/views/im/contactList/groupList/index.vue

@@ -25,7 +25,10 @@
 </template>
 
 <script setup>
-
+const value = ref('');
+const onSearch = () => {
+    
+}
 </script>
 
 <style lang="less" scoped>
@@ -34,6 +37,12 @@
     :deep(.van-search){
         padding: 4px 16px !important;
     }
+    :deep(.van-field__control){
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #95A9ED;
+    }
     .search-item{
         :deep(.van-search__action){
             padding: 0 0 0 12px !important;
@@ -44,6 +53,7 @@
             background: #F7F8FA !important;
             border-radius: 22px !important;
             padding-left: 10px !important;
+            padding-right: 10px;
         }
         :deep(.van-field__left-icon){
             margin-right: 0 !important;

src/views/im/detail/chatLog/index.vue

@@ -1,13 +1,194 @@
 <template>
-    <div>
-        111
+    <div class="container">
+        <div class="content">
+            <div class="tab-box">
+                <div v-for="(item,i) in tabList" :key="i"
+                    class="tab-text" 
+                    :class="type == i?'active-color':''" 
+                    @click="type = i">{{ item }}
+                </div>
+            </div>
+            <div class="list-box">
+                <template v-if="type == 0">
+                    <div class="box-item" v-for="(item,i) in 10">
+                        <van-image class="box-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                        <div>
+                            <div class="box-name">苏苏编号<span class="ml12">15:10</span></div>
+                            <!-- 名片 -->
+                            <div class="business-card" v-if="i % 2 === 0">
+                                <div class="business-card-cont" >
+                                    <van-image class="list-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                                    <div>名字名字</div>
+                                </div>
+                                <div class="line"></div>
+                                <div class="business-card-text">个人名片</div>
+                            </div>
+                            <!-- 文本信息 -->
+                            <div class="box-content" v-if="i % 2 !== 0">文本信息文本信息文本信息文本信息文本信息文本信息文本信息文本信息</div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="no-more">
+                        <svg-icon class="no-more-img" name="no-more" />
+                        <div>暂无数据</div>
+                    </div>
+                </template>
+            </div>
+           <div class="foot-page">
+                <van-button class="foot-btn" size="mini">上一页</van-button>
+                <div class="foot-total">1/1</div>
+                <van-button class="foot-btn" size="mini">下一页</van-button>
+           </div>
+        </div>
     </div>
 </template>
 
 <script setup>
-
+const type = ref(0);
+const tabList = ['全部','文本','图片','视频','文件']
 </script>
 
 <style lang="less" scoped>
-
+.container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .content{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        .tab-box{
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #4F4F4F;
+            height: 42px;
+            line-height: 42px;
+            background-color: #fff;
+            .tab-text{
+                width: 25%;
+                text-align: center;
+            }
+            .active-color{
+                font-weight: 500;
+                color: #4765DD;
+            }
+        }
+        .list-box{
+            margin: 16px;
+            flex: 1;
+            overflow: auto;
+            .box-item{
+                display: flex;
+                margin-bottom: 16px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #8D8D8D;
+                .box-img{
+                    width: 44px;
+                    height: 44px;
+                    margin-right: 12px;
+                    flex-shrink: 0;
+                }
+                .box-name{
+                    margin-bottom: 8px;
+                    .ml12{
+                        margin-left: 12px;
+                    }
+                }
+                .business-card{
+                    width: 199px;
+                    height: 93px;
+                    background: #FFFFFF;
+                    border-radius: 10px;
+                    margin-top: 8px;
+                    padding: 10px;
+                    box-sizing: border-box;
+                    .business-card-cont{
+                        display: flex;
+                        align-items: center;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 15px;
+                        color: #000000;
+                    }
+                    .list-img{
+                        width: 44px;
+                        height: 44px;
+                        flex-shrink: 0;
+                        margin-right: 12px;
+                    }
+                    .line{
+                        height: 1px;
+                        background: #F2F2F2;
+                        margin: 10px 0 6px;
+                    }
+                    .business-card-text{
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 10px;
+                        color: #8D8D8D;
+                    }
+                }
+                .box-content{
+                    max-width: 230px;
+                    background: #FFFFFF;
+                    border-radius: 10px;
+                    margin-top: 8px;
+                    padding: 8px 17px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #000000;
+                }
+            }
+            .no-more{
+                margin-top: 178px;
+                text-align: center;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #8D8D8D;
+                .no-more-img{
+                    width: 302px;
+                    height: 222px;
+                }
+            }
+        }
+        .list-box::-webkit-scrollbar{
+            width: 0;
+        }
+        .foot-page{
+            display: flex;
+            align-items: center;
+            height: 44px;
+            background: #FFFFFF;
+            padding: 10px 16px;
+            box-sizing: border-box;
+            .foot-btn{
+                box-sizing: border-box;
+                width: 50px;
+                border-radius: 4px;
+                padding: 4px 6px;
+                background: #F2F2F2;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #4F4F4F;
+            }
+            .foot-total{
+                flex: 1;
+                text-align: center;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #4F4F4F;
+            }
+        }
+    }
+}
 </style>

src/views/im/detail/checkMember/index.vue

@@ -28,7 +28,10 @@
 </template>
 
 <script setup>
-
+const value = ref('');
+const onSearch = () => {
+    
+}
 </script>
 
 <style lang="less" scoped>
@@ -37,6 +40,12 @@
     :deep(.van-search){
         padding: 4px 16px !important;
     }
+    :deep(.van-field__control){
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #95A9ED;
+    }
     .search-item{
         :deep(.van-search__action){
             padding: 0 0 0 12px !important;
@@ -47,6 +56,7 @@
             background: #F7F8FA !important;
             border-radius: 22px !important;
             padding-left: 10px !important;
+            padding-right: 10px;
         }
         :deep(.van-field__left-icon){
             margin-right: 0 !important;

src/views/im/index.vue

@@ -56,16 +56,16 @@
       @cancel="showSheet = false"
     > 
       <div class="sheet-content">
-        <div class="sheet-li">
-          <svg-icon class="sheet-icon" name="add-friend" @click="goToPage"/>
+        <div class="sheet-li" @click="goToPage('search')">
+          <svg-icon class="sheet-icon" name="add-friend" />
           <div class="sheet-text">添加朋友</div>
         </div>
-        <div class="sheet-li">
-          <svg-icon class="sheet-icon" name="group-chat" @click="goToPage"/>
+        <div class="sheet-li" @click="goToPage('createGroupChat')">
+          <svg-icon class="sheet-icon" name="group-chat" />
           <div class="sheet-text">创建群聊</div>
         </div>
         <div class="sheet-li no-border">
-          <svg-icon class="sheet-icon" name="sm1" @click="goToPage"/>
+          <svg-icon class="sheet-icon" name="sm1"/>
           <div class="sheet-text">扫一扫</div>
         </div>
       </div>

src/views/im/personal/index.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="container">
+        <div class="personal-box">
+            <van-image class="box-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+            <div class="box-text">
+                <div class="box-name">名字名字</div>
+                <div>2545455767</div>
+            </div>
+        </div>
+        <van-cell-group class="user-bar-list">
+            <van-cell title="备注" value="未设置" @click="showNote = true">
+                <template #icon>
+                    <svg-icon class="user-bar-list-icon" name="bz"/>
+                </template>
+                <template #right-icon>
+                    <svg-icon style="width: 20px;height:20px;margin-left: 4px;" name="sz"/>
+                </template>
+            </van-cell>
+            <van-cell title="邮箱">
+                <template #icon>
+                    <svg-icon class="user-bar-list-icon" name="yx"/>
+                </template>
+            </van-cell>
+            <van-cell title="性别" value="未知">
+                <template #icon>
+                    <svg-icon class="user-bar-list-icon" name="xb"/>
+                </template>
+            </van-cell>
+        </van-cell-group>
+        <div class="card-box">
+            <div class="card-box-text green">发消息</div>
+            <div class="card-box-text blue">音视频通话</div>
+            <div class="card-box-text red">删除好友</div>
+        </div>
+        <van-button class="add-btn" type="primary" size="large" color="#4765DD">添加好友</van-button>
+        <van-popup v-model:show="showNote" :style="{ borderRadius:'25px' }">
+            <div class="pop-content-password">
+                <div class="pop-title-password">请修改备注</div>
+                <van-field v-model="note" class="pop-input"/>
+                <div class="pop-btn-password">
+                    <van-button type="default" class="btn-password cancel" @click="showNote = false">{{ $t('wallet.Cancel') }}</van-button>
+                    <van-button type="default" class="btn-password confirm" @click="showNote = false">{{ $t('wallet.Sure') }}</van-button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+const showNote = ref(false);
+const note = ref('')
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: 100%;
+    margin: 16px;
+    .personal-box{
+        background-color: #fff;
+        border-radius: 12px;
+        padding: 0 17px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        .box-img{
+            width: 44px;
+            height: 44px;
+            margin: 17px 8px 17px 0;
+            box-sizing: border-box;
+        }
+        .box-text{
+            margin: 17px 0;
+            box-sizing: border-box;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #8D8D8D;
+            .box-name{
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+                margin-bottom: 4px;
+            }
+        }
+    }
+    .user-bar-list{
+        background-color: #fff;
+        border-radius: 12px;
+        overflow: hidden;
+        margin: 16px 0;
+        .van-cell {
+            height: 44px;
+            line-height: 44px;
+            background: @bg-color1;
+            border-bottom: 1px solid @bg-color1;
+            font-size: 15px;
+            align-items: center;
+            &::after {
+                border-bottom: 1px solid #f2f2f2;
+            }
+        }
+        :deep(.van-cell__title){
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            color: #000000;
+        }
+        :deep(.van-cell__value){
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #8D8D8D;
+        }
+        .user-bar-list-last::after {
+            border-bottom: 0;
+        }
+        .user-bar-list-icon{
+            width: 20px;
+            height: 20px;
+            margin-right: 4px;
+            color: #000000;
+        }
+    }
+    .card-box{
+        background-color: #fff;
+        border-radius: 12px;
+        padding: 0 17px;
+        .card-box-text{
+            padding: 10px 0;
+            text-align: center;
+            border-bottom: 1px solid #F2F2F2;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+        }
+        .card-box-text:last-child{
+            border-bottom:none;
+        }
+        .green{
+            color: #00B42A;
+        }
+        .blue{
+            color: #527BFF;
+        }
+        .red{
+            color: #FF0000;
+        }
+    }
+    .add-btn{
+        background: #4765DD;
+        border-radius: 12px;
+        height: 46px;
+        line-height: 46px;
+        margin-top: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #FFFFFF;
+    }
+}
+.pop-content-password{
+    padding: 27px 35px 25px 34px;
+    .pop-title-password{
+        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-password{
+        display: flex;
+        justify-content: center;
+        .btn-password{
+            width: 83px;
+            height: 29px;
+            line-height: 29px;
+            padding: 5px 0 !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;
+            border: none !important;
+        }
+    }
+}
+:deep(.van-popup--center) {
+    margin: 0 40px !important;
+    width: auto !important;
+}
+</style>b

src/views/im/search/index.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="container">
+        <van-search class="search-item"
+            v-model="value"
+            show-action
+            placeholder="请输入用户账号进行搜索"
+            @search="onSearch"
+        >
+            <template #left-icon>
+                <svg-icon class="search-icon" name="search" />
+            </template>
+            <template #action>
+                <van-button type="default" class="action-btn">搜索</van-button>
+            </template>
+        </van-search>
+        <div class="content">
+            <div class="text-lf">
+                <van-image class="lf-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                <div>哈哈哈哈</div>
+            </div>
+            <div class="rg-color" @click="goToPage">查看</div>
+        </div>
+        <!-- <div class="no-more">
+            <svg-icon class="no-more-img" name="no-more" />
+            <div>暂无数据</div>
+        </div> -->
+    </div>
+</template>
+
+<script setup>
+const router = useRouter()
+
+const value = ref('');
+const onSearch = () => {
+    
+}
+const goToPage = () => {
+    router.push('personal')
+}
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: 100%;
+    :deep(.van-search){
+        padding: 4px 16px !important;
+    }
+    :deep(.van-field__control){
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #95A9ED;
+    }
+    .search-item{
+        :deep(.van-search__action){
+            padding: 0 0 0 12px !important;
+            box-sizing: border-box !important;
+            line-height: initial !important;
+        }
+        :deep(.van-search__content){
+            background: #F7F8FA !important;
+            border-radius: 22px !important;
+            padding-left: 10px !important;
+            padding-right: 10px;
+        }
+        :deep(.van-field__left-icon){
+            margin-right: 0 !important;
+            height: 24px;
+        }
+        :deep(.van-search__field){
+            padding:4px 0 !important;
+            line-height: initial !important;
+            box-sizing: border-box;
+        }
+        :deep(.van-field__value){
+            height: 24px !important;
+            line-height: 26px !important;
+        }
+        .search-icon{
+            height: 24px;
+            width: 24px;
+            margin-right: 10px;
+            color: #95A9ED;
+        }
+        .action-btn{
+            padding:0 22px;
+            height: 34px;
+            box-sizing: border-box;
+            background: #4765DD;
+            border-radius: 22px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            color: #FFFFFF;
+            border:none !important;
+        }
+    }
+    .search-item :deep(input::placeholder) {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #95A9ED;
+    }
+    .content{
+        background: #fff;
+        border-radius: 12px;
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000000;
+        justify-content: space-between;
+        margin: 12px 16px;
+        .text-lf{
+            display: flex;
+            align-items: center;
+            .lf-img{
+                width: 32px;
+                height: 32px;
+                margin-right: 12px;
+            }
+        }
+        .rg-color{
+            color: #4765DD;
+        }
+    }
+    .no-more{
+        margin-top: 178px;
+        text-align: center;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        color: #8D8D8D;
+        .no-more-img{
+            width: 302px;
+            height: 222px;
+        }
+    }
+}
+</style>