diff --git a/src/assets/images/login.svg b/src/assets/images/login.svg
new file mode 100644
index 0000000..ddc779c
--- /dev/null
+++ b/src/assets/images/login.svg
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="540px" height="540px" viewBox="0 0 540 540" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Illustration - Login</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="59.6295332%" y1="41.734617%" x2="0%" y2="-2.52931411%" id="linearGradient-1">
+            <stop stop-color="#6B9CFF" offset="0%"></stop>
+            <stop stop-color="#6A75FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="72.7429222%" y1="30.1227183%" x2="13.6425987%" y2="72.7225671%" id="linearGradient-2">
+            <stop stop-color="#6B9CFF" offset="0%"></stop>
+            <stop stop-color="#6A75FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="81.2864882%" y1="12.5013309%" x2="17.0959063%" y2="86.407992%" id="linearGradient-3">
+            <stop stop-color="#42D6EB" offset="0%"></stop>
+            <stop stop-color="#10BDD5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Login---Register" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Login-" transform="translate(-94.000000, -128.000000)">
+            <g id="Illustration---Login" transform="translate(94.000000, 128.000000)">
+                <rect x="0" y="1" width="540" height="540"></rect>
+                <g transform="translate(31.500000, 70.000000)">
+                    <rect id="Rectangle-11" x="36.9600014" y="0.465760316" width="403.200015" height="401.593641"></rect>
+                    <g id="Group-45" transform="translate(0.134400, 45.291731)">
+                        <g id="Group-7-Copy" transform="translate(65.196456, 76.720034)" fill="url(#linearGradient-1)" opacity="0.100000001">
+                            <g id="Group-8" transform="translate(0.009535, 0.154651)">
+                                <g id="Group-12" transform="translate(0.000000, 0.000000)">
+                                    <polygon id="Path-60-Copy-6" points="6.72000025 73.3937377 156.992399 0 333.312013 87.2790394 181.035982 164.640006"></polygon>
+                                    <polygon id="Path-60-Copy-7" points="0 90.8657384 150.272398 17.4720007 326.592012 104.75104 174.315982 182.112007"></polygon>
+                                </g>
+                            </g>
+                        </g>
+                        <g id="Group-11" transform="translate(133.624753, 0.012512)">
+                            <g id="Group-16">
+                                <polygon id="Path-58-Copy" fill="url(#linearGradient-1)" opacity="0.300000012" points="0.320218394 191.125207 0.320218394 72.6835451 146.106863 0.374521993 146.106863 118.557011"></polygon>
+                                <polygon id="Path-58" fill="url(#linearGradient-2)" points="13.2151413 197.71478 13.2151413 79.2731181 159.001785 6.96409499 159.001785 125.146584"></polygon>
+                                <polygon id="Path-58-Copy-4" fill="#F2F8FF" opacity="0.100000001" points="31.2280317 167.721208 31.2280317 112.397173 71.1008924 92.7336684 71.1008924 147.936645"></polygon>
+                            </g>
+                            <g id="Group-10" transform="translate(12.894923, 6.589573)">
+                                <g id="Group-9">
+                                    <polygon id="Path-58-Copy-2" fill="#F2F8FF" points="0.320218394 89.4178343 0.320218394 72.6835451 146.294307 0 146.294307 16.7518025"></polygon>
+                                    <g id="Group" transform="translate(7.224410, 68.203767)" fill="#D2DAE5">
+                                        <ellipse id="Oval-2" cx="1.76407828" cy="9.03536866" rx="1.76407828" ry="2.4543034"></ellipse>
+                                        <ellipse id="Oval-2-Copy" cx="8.98848851" cy="5.4456967" rx="1.76407828" ry="2.4543034"></ellipse>
+                                        <ellipse id="Oval-2-Copy-2" cx="15.6108645" cy="2.4543034" rx="1.76407828" ry="2.4543034"></ellipse>
+                                    </g>
+                                </g>
+                                <g id="Group-7" transform="translate(77.281877, 57.259519)" stroke-linecap="round">
+                                    <path d="M0.560009909,16.4526632 L33.4128973,1.42108547e-13" id="Path-61" stroke="#FFFFFF" stroke-width="4.70400018"></path>
+                                    <path d="M0.560009909,34.401023 L23.4202489,22.7345891" id="Path-61-Copy" stroke="#FDFFFF" stroke-width="3.36000013" opacity="0.5"></path>
+                                    <path d="M0.560009909,58.3321694 L23.4202489,46.6657355" id="Path-61-Copy-3" stroke="#FDFFFF" stroke-width="3.36000013" opacity="0.200000003"></path>
+                                    <path d="M0.560009909,76.2805292 L11.9901294,70.4473122" id="Path-61-Copy-4" stroke="#42D6EB" stroke-width="3.36000013"></path>
+                                    <path d="M0.560009909,46.3665962 L11.5876737,40.7387674" id="Path-61-Copy-2" stroke="#FDFFFF" stroke-width="3.36000013" opacity="0.400000006"></path>
+                                </g>
+                                <g id="Group-3-Copy" opacity="0.305310236" style="mix-blend-mode: multiply;" transform="translate(36.762851, 129.652826) rotate(2.000000) translate(-36.762851, -129.652826) translate(24.330851, 106.804825)" fill="#6B94FF">
+                                    <ellipse id="Oval-8" transform="translate(10.158023, 10.420503) rotate(13.000000) translate(-10.158023, -10.420503) " cx="10.1580233" cy="10.4205034" rx="7.05600027" ry="8.40000032"></ellipse>
+                                    <path d="M21.9180237,28.7238133 C20.6875348,23.4745312 18.2515287,20.8454382 14.6100056,20.8365342 C7.88320297,20.8200865 2.43002301,27.4668892 2.43002301,35.6458465 C2.43002301,37.6214602 3.07963544,40.3010129 4.37886031,43.6845046 L21.9180237,28.7238133 Z" id="Oval-8-Copy" transform="translate(12.174023, 32.260504) rotate(13.000000) translate(-12.174023, -32.260504) "></path>
+                                </g>
+                                <g id="Group-3" transform="translate(40.763710, 128.760264) rotate(2.000000) translate(-40.763710, -128.760264) translate(28.331709, 106.248263)" fill="#A6B7FA">
+                                    <ellipse id="Oval-8" transform="translate(10.436715, 9.895302) rotate(13.000000) translate(-10.436715, -9.895302) " cx="10.4367152" cy="9.89530214" rx="6.98248387" ry="8.54082379"></ellipse>
+                                    <path d="M22.37067,27.9458962 C21.1427874,22.6762601 18.7119412,20.0369729 15.0781314,20.0280344 C8.3655773,20.0115229 2.9239481,26.6840985 2.9239481,34.8947695 C2.9239481,36.8780436 3.57218454,39.5679862 4.86865743,42.9645974 L22.37067,27.9458962 Z" id="Oval-8-Copy" transform="translate(12.647309, 31.496301) rotate(13.000000) translate(-12.647309, -31.496301) "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g id="Group-4" transform="translate(120.960005, 124.992005)">
+                            <path d="M1.19600851,22.7440752 C0.251591744,38.2354621 0.912683481,49.9018152 3.17928372,57.7431345 C5.44588396,65.5844538 6.4629899,76.5184603 6.23060153,90.5451541 L51.6278638,70.9395011 C51.4389805,56.9781277 49.9279137,46.4592848 47.0946634,39.3829723 C44.2614131,32.3066597 43.411438,19.3971707 44.5447381,0.654505079 L1.19600851,22.7440752 Z" id="Path-59-Copy" fill="#D2D8F3" opacity="0.300000012"></path>
+                            <path d="M6.97520873,24.6760753 C6.03079196,40.1674622 6.6918837,51.8338153 8.95848394,59.6751345 C11.2250842,67.5164538 12.2421901,78.4504604 12.0098017,92.4771542 L57.4070641,72.8715011 C57.2181807,58.9101278 55.7071139,48.3912848 52.8738636,41.3149723 C50.0406133,34.2386598 49.1906382,21.3291707 50.3239383,2.58650515 L6.97520873,24.6760753 Z" id="Path-59" fill="#FFFFFF"></path>
+                            <g id="Group-3" transform="translate(16.878777, 18.248400)" stroke-linecap="round" stroke-width="3.3183832">
+                                <path d="M0.504583782,9.81527913 L20.3373359,0.0614429565" id="Path-2" stroke="#FFA646"></path>
+                                <path d="M4.526324,21.1825901 L20.9591757,12.8631416" id="Path-2-Copy" stroke="#E0E8F1"></path>
+                                <path d="M4.526324,26.9201408 L20.9591757,18.6006923" id="Path-2-Copy-2" stroke="#E0E8F1"></path>
+                                <path d="M4.526324,32.6576915 L20.9591757,24.338243" id="Path-2-Copy-3" stroke="#E0E8F1"></path>
+                                <path d="M12.1760998,43.4798312 L20.9591757,39.1766682" id="Path-2-Copy-4" stroke="#42D6EB"></path>
+                            </g>
+                            <path d="M25.9195727,71.5265249 L43.9296959,62.8137955 C45.226583,62.1864024 46.7865204,62.7291345 47.4139135,64.0260217 C47.5852572,64.380207 47.6742606,64.7685637 47.6742606,65.1620174 L47.6742606,65.1620174 C47.6742606,67.705768 46.2195685,70.0254758 43.9296959,71.133244 L25.9195727,79.8459734 C24.6226855,80.4733665 23.0627481,79.9306343 22.435355,78.6337471 C22.2640114,78.2795619 22.1750079,77.8912051 22.1750079,77.4977514 L22.1750079,77.4977514 C22.1750079,74.9540008 23.6297001,72.634293 25.9195727,71.5265249 Z" id="Path-3" fill="#F0F4F9"></path>
+                        </g>
+                        <g id="Group-13" transform="translate(0.000000, 57.051080)" fill="url(#linearGradient-1)">
+                            <polygon id="Path-60-Copy-12" opacity="0.400000006" points="0 47.6634235 17.933743 38.9760015 38.9760015 49.3069898 20.8031419 58.4640022"></polygon>
+                            <polygon id="Path-60-Copy-10" opacity="0.400000006" points="426.720016 123.526559 445.890569 114.240004 468.384018 125.283475 448.957857 135.072005"></polygon>
+                            <polygon id="Path-60-Copy-9" opacity="0.300000012" points="369.421633 40.5526164 383.800272 33.503404 400.671208 41.8862512 386.100854 49.3165021"></polygon>
+                            <polygon id="Path-60-Copy-11" opacity="0.300000012" points="300.384011 7.04921239 314.76265 0 331.633586 8.38284716 317.063232 15.8130981"></polygon>
+                            <polygon id="Path-60-Copy-8" opacity="0.100000001" points="42.300385 168.002346 69.0194579 154.903163 100.369837 170.48057 73.2945096 184.287817"></polygon>
+                            <polygon id="Path-60-Copy-13" opacity="0.400000006" points="190.744755 223.790281 210.222767 214.241071 233.076967 225.596888 213.339249 235.662272"></polygon>
+                            <polygon id="Path-60-Copy-16" opacity="0.100000001" points="316.055409 125.358611 333.139177 116.983193 353.184131 126.943149 335.87258 135.771293"></polygon>
+                            <polygon id="Path-60-Copy-15" opacity="0.400000006" points="218.268257 130.756466 233.20795 123.432194 250.737188 132.142139 235.5983 139.862317"></polygon>
+                        </g>
+                        <g id="Group-6" transform="translate(328.608012, 129.024005) scale(-1, 1) translate(-328.608012, -129.024005) translate(305.088011, 93.408004)">
+                            <path d="M0.301456398,63.4017502 L0.301456398,33.842404 C0.301456398,31.7279484 1.43041312,29.7743854 3.26245039,28.7186572 L34.1001585,10.9481465 C36.9913515,9.28207016 40.5607592,9.32416262 43.4118591,11.0579553 L45.5791713,12.3759274 L39.9809751,50.1143004 L13.6626975,70.2491395 C12.4966085,71.1412577 10.9181532,71.273739 9.61967291,70.5884746 L2.30823979,66.729914 C1.07389697,66.0784978 0.301456398,64.7974383 0.301456398,63.4017502 Z" id="Path-58-Copy-3" fill="#2BB9CD"></path>
+                            <path d="M7.56965546,67.1977375 L7.56965546,37.3921201 C7.56965546,34.4935014 9.12535117,31.8178882 11.6444463,30.3839602 L42.9922047,12.540081 C44.2823713,11.8056879 45.9236012,12.2562314 46.6579943,13.546398 C46.8886542,13.9516165 47.0099409,14.4098661 47.0099409,14.8761343 L47.0099409,48.3822425 C47.0099409,50.1204059 46.0775956,51.7250053 44.5675155,52.5857434 L13.1963911,70.4671271 C11.390757,71.4963294 9.09266811,70.8669072 8.06346577,69.0612732 C7.7398435,68.4935098 7.56965546,67.8512561 7.56965546,67.1977375 Z" id="Path-58" fill="url(#linearGradient-3)"></path>
+                            <path d="M12.184828,59.2470069 L12.184828,41.9028799 C12.184828,39.104043 13.636082,36.5053645 16.0189814,35.0372778 L38.9688196,20.8980531 C40.2327421,20.1193599 41.8886092,20.5127159 42.6673025,21.7766383 C42.9284732,22.2005531 43.0667684,22.6886777 43.0667684,23.1865871 L43.0667684,44.2416698 C43.0667684,45.9201139 42.1968988,47.4786522 40.7683285,48.359766 L17.9235524,62.4499707 C16.1546044,63.5410227 13.8361163,62.9914794 12.7450642,61.2225314 C12.3787951,60.6286908 12.184828,59.9447173 12.184828,59.2470069 Z" id="Path-58-Copy-5" stroke="#6BEAFC" stroke-width="0.672000025"></path>
+                            <g id="Group-2" transform="translate(24.192001, 36.288001)" fill="#078DA0">
+                                <ellipse id="Oval-8" transform="translate(3.714207, 3.956865) rotate(15.000000) translate(-3.714207, -3.956865) " cx="3.71420704" cy="3.95686535" rx="2.54896561" ry="2.99591234"></ellipse>
+                                <polygon id="Rectangle" points="2.68248286 5.02683404 5.01919595 4.81301092 6.95613262 12.2935939 2.01489663 15.0845398"></polygon>
+                            </g>
+                            <path d="M13.5172419,24.7668222 L13.5172419,18.2818879 C13.5172419,11.290127 17.0829009,4.77914308 22.9793112,1.00390892 C25.8355565,-0.824829972 29.6363802,0.00361796504 31.4686886,2.85429918 C32.1037835,3.84237157 32.4413805,4.99161468 32.4413805,6.16552385 L32.4413805,14.4793432" id="Rectangle-2" stroke="#3ED4E9" stroke-width="5.91359987" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </g>
+                        <g id="Group-20-Copy-15" transform="translate(151.536006, 82.992003) scale(-1, 1) rotate(-3.000000) translate(-151.536006, -82.992003) translate(128.352005, 55.776002)">
+                            <ellipse id="Oval-9-Copy-4" fill="#2CB8CC" transform="translate(25.379715, 26.372484) rotate(-8.000000) translate(-25.379715, -26.372484) " cx="25.3797146" cy="26.3724841" rx="17.7614469" ry="23.5250369"></ellipse>
+                            <ellipse id="Oval-9-Copy-2" fill="#42D6EB" transform="translate(20.968020, 27.950980) rotate(-8.000000) translate(-20.968020, -27.950980) " cx="20.96802" cy="27.9509802" rx="17.7614469" ry="23.5250369"></ellipse>
+                            <polyline id="Path-63-Copy" stroke="#FFFFFF" stroke-width="3.57504007" stroke-linecap="round" stroke-linejoin="round" transform="translate(21.240257, 28.044301) scale(-1, 1) rotate(-6.000000) translate(-21.240257, -28.044301) " points="13.7814797 31.6505444 20.7779913 37.3028814 28.6990346 18.7857213"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/mediate.svg b/src/assets/images/mediate.svg
new file mode 100644
index 0000000..5969a8b
--- /dev/null
+++ b/src/assets/images/mediate.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1707017042991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1492" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M213 240.3m-58.2 0a58.2 58.2 0 1 0 116.4 0 58.2 58.2 0 1 0-116.4 0Z" fill="#1296db" p-id="1493"></path><path d="M885.3 238.3m-58.2 0a58.2 58.2 0 1 0 116.4 0 58.2 58.2 0 1 0-116.4 0Z" fill="#1296db" p-id="1494"></path><path d="M172.6 456.7v261.8c0 11 8.9 20 20 20h9.7l23.3 40.5v147h106.5V704l-48-24-30-4.5V432.1h-56.8c-13.7 0-24.7 11-24.7 24.6zM926.4 432.1v306.5h-48.7l-63.3 40.5v147H711.9V711c0-10.5 8.4-11 18.9-11.1l58-0.8c20.5-0.2 37.1-27 37.1-47.5v-200c0-10.8 8.7-19.5 19.5-19.5h81z" fill="#1296db" p-id="1495"></path><path d="M510.9 236.3c21.5 0 42.5-9.1 57.7-24.8 15.2-15.8 23.9-37.6 23.9-60-0.1-22.6-8.6-43.9-23.9-60-15.4-16-35.9-24.8-57.7-24.9-21.5 0-42.5 9.1-57.7 24.8-15.2 15.8-24 37.8-24 60.1 0 22.4 8.7 44.2 23.9 60 15.3 15.7 36.3 24.8 57.8 24.8zM175.9 337.7c25.6-0.1 49.5-10.4 67.5-29l0.1-0.1c17.5-18.2 27.6-43.5 27.6-69.3s-10.1-51-27.7-69.2c-18-18.6-42-28.8-67.5-29-25.2 0-49.8 10.6-67.6 29l-0.1 0.1c-17.6 18.5-27.4 43.1-27.5 69v0.1c0 25.7 10.1 51 27.6 69.2 17.8 18.6 42.4 29.2 67.6 29.2z m-38.7-139.8c10.1-10.5 24.6-16.7 38.6-16.7 14.6 0.1 28.4 6 38.9 16.8 10.3 10.7 16.4 26.1 16.4 41.4s-6.1 30.8-16.4 41.5c-10.5 10.8-24.2 16.7-38.8 16.8-14.1 0-28.6-6.3-38.7-16.8-10.3-10.7-16.4-26.2-16.4-41.4 0-15.7 5.8-30.5 16.4-41.6zM891 355.2h-88c-28.2 0-51.2 23.5-51.2 52.5v234.5c0 5.5-1.9 10.8-5.4 14.8-1.5 1.8-3.9 2.8-6.4 2.8h-18.4c-27.1 0-49.3 20.9-50.6 47.5 0 0.9-0.1 1.8-0.1 2.6v203h-56.8v-210c0-11.7-3.5-22.9-9.8-31.2s-14.9-12.9-23.8-12.9h-19.9c-8.9 0-17.5 4.6-23.8 12.9-6.3 8.3-9.8 19.5-9.8 31.2v210h-32v-210c0-11.7-3.5-22.9-9.9-31.2-6.3-8.3-14.9-12.9-23.8-12.9h-19.9c-8.9 0-17.5 4.6-23.8 12.9-6.3 8.3-9.8 19.5-9.8 31.2v210h-55.7v-203c0-0.9 0-1.8-0.1-2.6-1.3-26.6-23.5-47.5-50.6-47.5H283c-2.5 0-4.9-1-6.4-2.8-3.5-4-5.4-9.3-5.4-14.8V407.6c0-28.9-23-52.5-51.2-52.5h-88c-28.2 0-51.2 23.5-51.2 52.5V724c0 23.1 14.5 43.3 36.1 50.2l2.9 0.9 67.7 0.1c4.8 0 8.6 3.9 8.6 8.7v129h-76.4c-11.3 0-20.5 9.2-20.5 20.5v8.6c0 11.3 9.2 20.5 20.5 20.5h782.1c11.3 0 20.5-9.2 20.5-20.5v-8.6c0-11.3-9.2-20.5-20.5-20.5h-75.1v-129c0-4.8 3.9-8.6 8.7-8.7l67.7-0.1 2.9-0.9c21.6-6.9 36.1-27 36.1-50.2V407.6c0.1-28.9-22.9-52.4-51.1-52.4zM187.6 735.3l-60.7-0.1c-3.7-2.1-6.1-6.4-6.1-11.1V407.6c0-6.9 5-12.5 11.2-12.5h88c6.2 0 11.2 5.6 11.2 12.5v234.5c0 15.1 5.3 29.6 15 40.9 9.1 10.6 22.5 16.8 36.7 16.8h18.4c5.6 0 10.4 4.3 10.7 9.5v200.5h-75.8V783.9c0-26.8-21.8-48.6-48.6-48.6z m714.6-11.2c0 4.7-2.4 9-6.1 11.1l-60.7 0.1c-26.8 0-48.6 21.8-48.6 48.7v125.8H711V709.9v-0.7c0.3-5.2 5-9.5 10.7-9.5h18.4c14.2 0 27.6-6.1 36.7-16.8 9.7-11.3 15-25.8 15-40.9V407.6c0-6.9 5-12.5 11.2-12.5h88c6.2 0 11.2 5.6 11.2 12.5v316.5zM914.7 170.3l-0.1-0.1c-17.8-18.4-42.4-29-67.7-29-25.5 0.1-49.4 10.4-67.5 29-17.5 18.2-27.6 43.4-27.6 69.2s10.1 51 27.6 69.3l0.1 0.1c18 18.6 42 28.8 67.4 29h0.1c25.2 0 49.8-10.6 67.6-29 17.5-18.2 27.6-43.5 27.6-69.2v-0.1c-0.1-26.1-9.9-50.6-27.5-69.2z m-28.9 110.6c-10.1 10.5-24.6 16.8-38.7 16.8-14.6-0.1-28.4-6-38.8-16.8-10.3-10.7-16.4-26.2-16.4-41.5s6.1-30.8 16.3-41.4c10.5-10.8 24.3-16.8 38.8-16.8 14.1 0 28.6 6.2 38.7 16.7 10.5 11.1 16.4 25.9 16.5 41.6 0 15.2-6.2 30.7-16.4 41.4z" fill="#1296db" p-id="1496"></path><path d="M331 605.7h359.5c11.3 0 20.5-9.2 20.5-20.5v-10.6c0-11.3-9.2-20.5-20.5-20.5h-78.2c3.1-4 4.9-9 4.9-14.5V298.3c0-13.2-10.8-24-24-24H426.3c-13.2 0-24 10.8-24 24v241.4c0 5.4 1.8 10.4 4.9 14.5H331c-11.3 0-20.5 9.2-20.5 20.5v10.6c0 11.2 9.2 20.4 20.5 20.4z m144.2-281.8c0-8.6 8.2-15.6 18.1-15.6h35.2c10 0 18.1 7 18.1 15.6l-15.1 37.4 15.1 119.9c0 8.6-23.3 54.8-33.2 54.8h-5c-10 0-33.2-46.2-33.2-54.8l15.1-120.6-15.1-36.7z" fill="#1296db" p-id="1497"></path></svg>
\ No newline at end of file
diff --git a/src/views/login.vue b/src/views/login.vue
index ae474c5..72e02f6 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="login">
+    <!-- 左侧 -->
+    <div class="leftBox">
+      <div class="leftIcon">
+        <div class="Icon"></div>
+        <div>智慧调解系统</div>
+      </div>
+      <div class="leftImage"></div>
+    </div>
+    <!-- 右侧 -->
+    <div class="rightBox">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">智慧调解系统</h3>
+      <h2 class="title">用户登录</h2>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -54,6 +64,7 @@
         </div>
       </el-form-item>
     </el-form>
+    </div>
     <!--  底部  -->
     <div class="el-login-footer">
       <span>Copyright © 2023 乙巢（上海）企业管理服务有限公司.</span>
@@ -161,13 +172,46 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/loginbg.jpg");
-  background-size: cover;
+  .leftBox {
+    width: 50%;
+    height: 90%;
+    .leftIcon {
+      height: 10%;
+      width: 100%;
+      margin: 5% 10% 1% 15%;
+      .Icon {
+        width: 45px;
+        height: 45px;
+        background-image: url("../assets/images/mediate.svg");
+        background-size: cover;
+      }
+      div {
+        font-size: 17px;
+      }
+    }
+    .leftImage {
+      width: 100%;
+      height: 90%;
+      margin-left: 10%;
+      margin-top: -15%;
+      background-image: url("../assets/images/login.svg");
+      background-size: cover;
+    }
+  }
+  
+  .rightBox {
+    width: 50%;
+    height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #707070;
+  color: #1296db;
+  font-weight: 600;
 }
 
 .login-form {
@@ -202,6 +246,7 @@ export default {
   }
 }
 .el-login-footer {
+  background-color: rgb(126, 131, 135);
   height: 40px;
   line-height: 40px;
   position: fixed;