用vue实现小米商城登录注册页面

vue课堂作业，记录下

代码有些不规范，大多是html＋css实现的，目前是静态页面的实现

效果展示

html代码

<body><div id="app"><div class="content"><!-- 左边图片 --><div class="contentLeft"></div><!-- 左边图片 end --><!-- 右边内容 --><div class="contentRight"><!-- 头部部分 --><div class="header"><div class="header_title"><img src="    https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png" alt="" srcset=""><p>小米账号</p></div><div class="header_nav"><ul><li>用户协议</li><li>隐私政策</li><li>帮助中心</li><li>中文（简体</li></ul></div></div><!-- 头部部分 end --><!-- 表单部分 --><div class="mi-layout__container"><div class="card"><ul class="tab-tilte"><li  @click="qh(true),cur=0" :class="{active:cur==0}">登录</li><li  @click="qh(false),cur=1" :class="{active:cur==1}">注册</li></ul><!-- 二维码 --><div class="switch icon"><svg t="1681635640798" class="icon" viewBox="0 0 1041 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22400" width="36" height="36"><path d="M948.906667 931.84h92.16V1024h-92.16zM948.906667 559.786667v184.32H853.333333v-184.32H576.853333V1024h92.16V651.946667h92.16v184.32h279.893334v-276.48z" fill="#ffffff" p-id="22401"></path><path d="M761.173333 931.84H853.333333V1024h-92.16zM187.733333 187.733333h92.16v92.16H187.733333z" fill="#ffffff" p-id="22402"></path><path d="M0 464.213333h464.213333V0H0v464.213333zM92.16 92.16h279.893333v279.893333H92.16V92.16zM187.733333 744.106667h92.16v92.16H187.733333z" fill="#ffffff" p-id="22403"></path><path d="M0 1024h464.213333V559.786667H0V1024z m92.16-372.053333h279.893333v279.893333H92.16v-279.893333zM761.173333 187.733333H853.333333v92.16h-92.16z" fill="#ffffff" p-id="22404"></path><path d="M1041.066667 0H576.853333v464.213333h464.213334V0z m-92.16 372.053333h-279.893334V92.16h279.893334v279.893333z" fill="#ffffff" p-id="22405"></path></svg><div class="dialaing"><ul><li>扫码登录</li></ul></div></div><!-- 二维码 end --><div class="tab_input" v-if="temp"><form  method="post" class="tab_form"><p class="phoneNum"><input type="text" placeholder="邮箱/手机号码/小米ID" v-model="username"></p><p class="password"><input type="password" placeholder="密码" v-model="password"><span></span></p><p><input type="checkbox" id="checkbox" v-model="isChecked" @click="log_change"><span>已阅读并同意小米帐号 <a href="#" class="user_agreement">用户协议</a> 和 <a href="#" class="user_agreement">隐私政策</a</span></p><p><input type="submit" value="登录" class="submit" @click="goLogin"></p><p class="forgetPass"><span>忘记密码?</span><span>手机号登录</span></p><p class="otherLogin_title">其他方式登录</p><p class="otherLogin_list"><svg t="1681634506701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14123" width="46" height="46"><path d="M230.404 576.536c-12.087 9.728-25.043 23.93-28.805 41.984-5.12 24.666-1.069 55.541 22.728 79.761 28.828 29.362 72.637 37.398 91.56 38.779 51.4 3.717 106.184-21.772 147.477-50.844 16.184-11.42 43.899-34.349 70.39-69.721-59.37-30.653-133.477-64.557-212.703-61.24-40.47 1.692-69.454 10.084-90.647 21.281z m752.859 135.545C1009.463 650.574 1024 582.968 1024 512 1024 229.688 794.335 0 512 0 229.665 0 0 229.688 0 512c0 282.335 229.665 512 512 512 170.385 0 321.491-83.723 414.631-212.124-87.997-43.742-233.027-115.734-322.36-159.299-42.63 48.596-105.65 97.303-176.84 118.495-44.722 13.29-85.037 18.365-127.199 9.75-41.739-8.548-72.481-28.093-90.401-47.683-9.127-9.995-19.612-22.706-27.203-37.82a71.25 71.25 0 0 0 1.202 3.049s-4.363-7.524-7.702-19.5a85.994 85.994 0 0 1-3.34-18.143 93.517 93.517 0 0 1-0.2-13.045c-0.378-7.702-0.066-15.783 1.67-24.064 4.185-20.235 12.822-43.81 35.172-65.692 49.063-48.039 114.777-50.621 148.814-50.42 50.421 0.289 138.04 22.35 211.812 48.439 20.436-43.52 33.547-90.068 42.007-121.1H305.308v-33.168h157.518v-66.337H272.139v-33.169h190.687v-66.315c0-9.105 1.803-16.584 16.584-16.584h74.619v82.899h207.293v33.169H554.029v66.337h165.82s-16.65 92.828-68.719 184.32c115.557 41.272 278.128 104.849 332.133 126.086z" fill="#1296DB" p-id="14124"></path></svg><svg t="1681634530165" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16186" width="46" height="46"><path d="M512.430011 0.566468c282.785684 0 512.160538 229.067539 512.160538 511.566549 0 282.497863-229.374853 511.565402-512.160538 511.565402C229.664968 1023.698419 0.188058 794.63088 0.188058 512.133017 0.188058 229.634007 229.664968 0.566468 512.428865 0.566468zM635.831758 424.484121c-104.270262 0-186.37488 71.313057-186.37488 158.828936 0 87.648896 82.103471 158.819763 186.37488 158.819763 20.898544 0 41.9668-5.035144 62.969693-10.285868l2.800233-0.699485 60.092632 32.894137-16.49867-54.722652c44.003333-32.925097 76.775919-76.652076 76.77592-126.005895 0-87.515879-87.710817-158.828936-186.139808-158.828936zM421.953362 260.316166c-120.471937 0-219.147467 82.001415-219.147467 186.13866 0 60.082311 32.852856 109.465944 87.68903 147.741528l-21.89961 65.861662 76.611941-38.37764c27.402607 5.400941 49.393953 10.965859 76.755279 10.965859l-0.009173 0.01032c6.829725-0.016054 13.657156-0.302728 20.463946-0.861169-4.282912-14.643315-6.763216-29.984968-6.763216-45.867861 0-95.632197 82.196354-173.208511 186.303785-173.20851 7.052184 0.034401 14.095194 0.463265 21.099216 1.282006-18.977828-88.19243-113.370446-153.684856-221.103731-153.684855z m157.230441 252.252595c14.150235-0.002293 25.622934 11.468112 25.624081 25.618348a25.621787 25.621787 0 0 1-51.243575 0.005733c-0.001147-14.150235 11.468112-25.622934 25.619494-25.624081z m122.971736 0c14.150235-0.002293 25.624081 11.468112 25.625227 25.618348a25.621787 25.621787 0 1 1-51.243575 0.005733c-0.002293-14.150235 11.468112-25.622934 25.618348-25.624081z m-199.830218-163.954669a30.742934 30.742934 0 0 1 30.742934 30.74408v0.057335c-0.016054 16.977989-13.794759 30.728027-30.773894 30.711973-16.977989-0.0172-30.729174-13.794759-30.711974-30.773894a30.732614 30.732614 0 0 1 30.742934-30.738347z m-153.714669-0.004587c16.977989 0 30.742934 13.764945 30.742934 30.742934 0 16.979135-13.764945 30.742934-30.742934 30.742934-16.979135 0-30.742934-13.763798-30.742934-30.742934 0-16.977989 13.763798-30.742934 30.742934-30.742934z" fill="#46BB36" p-id="16187"></path></svg><svg t="1681634599153" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21160" width="46" height="46"><path d="M512.009337 0C229.23422 0 0 229.23422 0 511.990663c0 282.775117 229.23422 512.009337 512.009337 512.009337 282.775117 0 512.009337-229.23422 512.009337-512.009337C1024 229.23422 794.76578 0 512.009337 0zM801.26464 668.859701c-21.737567 18.637536-49.955319-61.346999-54.007769-49.040249-9.879014 29.935842-14.529061 49.936644-43.643208 82.505644-1.550016 1.736764 33.670819 14.473036 43.643208 41.62632 9.542867 26.03279 28.143053 67.285613-93.486477 80.227308-71.375413 7.582004-122.936772-38.022067-128.09104-37.592545-9.524192 0.84037-5.284993 0-15.51883 0-8.366349 0-8.926595 0.616271-16.807397 0-2.166287-0.168074-25.883391 37.592545-131.975416 37.592545-82.225521 0-103.514891-51.748108-86.987617-80.227308 16.545949-28.460526 44.128755-36.752175 40.244378-41.252822-19.141758-22.185764-32.363577-45.921544-40.244378-67.360312-1.942188-5.341017-3.585578-10.532635-4.874145-15.51883-2.987982-11.447705-25.883391 67.229588-50.459541 49.040249-24.576149-18.170664-22.391188-64.40968-6.480185-108.687834 16.060402-44.614302 56.491529-87.585213 56.939726-97.072055 1.624715-35.295534-3.473529-41.159448 0-50.422191 7.750078-20.766473 17.19957-12.792297 17.19957-23.567706 0-135.729068 100.863057-245.761494 225.293819-245.761494 124.412088 0 225.275145 110.032426 225.275145 245.761494 0 5.210293 13.520617 0 19.982128 23.567706 1.325917 4.874145 2.259661 23.66108 0.672296 50.422191-0.746995 12.848321 34.268415 28.497875 52.364379 97.072055C828.436598 628.764722 810.321959 661.109624 801.26464 668.859701z" fill="#1296db" p-id="21161"></path></svg><svg t="1681634569827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20001" width="46" height="46"><path d="M411.270737 607.649684c-17.973895-7.504842-41.189053 0.229053-52.264421 17.542737-11.223579 17.394526-5.955368 38.103579 11.870316 46.201263 18.108632 8.232421 42.132211 0.417684 53.342316-17.421474C435.253895 635.944421 429.446737 615.370105 411.270737 607.649684zM455.545263 589.352421c-6.885053-2.721684-15.508211 0.579368-19.550316 7.329684-3.920842 6.790737-1.751579 14.524632 5.146947 17.367579 7.019789 2.883368 16.006737-0.458105 20.048842-7.370105C465.071158 599.740632 462.551579 591.912421 455.545263 589.352421zM427.52 469.315368c-115.968 11.439158-203.924211 82.216421-196.378947 158.073263 7.531789 75.910737 107.654737 128.161684 223.649684 116.749474 115.994947-11.439158 203.924211-82.216421 196.392421-158.140632C643.664842 510.140632 543.541895 457.889684 427.52 469.315368zM529.300211 648.299789c-23.673263 53.355789-91.769263 81.798737-149.530947 63.232-55.754105-17.933474-79.373474-72.811789-54.945684-122.246737 23.956211-48.464842 86.352842-75.870316 141.541053-61.561263C523.506526 542.437053 552.663579 596.143158 529.300211 648.299789zM512 0C229.241263 0 0 229.227789 0 512c0 282.758737 229.241263 512 512 512 282.772211 0 512-229.241263 512-512C1024 229.227789 794.772211 0 512 0zM455.531789 794.974316c-145.354105 0-293.941895-70.197895-293.941895-185.667368 0-60.362105 38.386526-130.182737 104.474947-196.069053 88.252632-87.929263 191.164632-127.986526 229.874526-89.397895 17.084632 17.003789 18.741895 46.457263 7.760842 81.623579-5.726316 17.690947 16.666947 7.895579 16.666947 7.936 71.343158-29.763368 133.564632-31.514947 156.321684 0.862316 12.139789 17.246316 10.954105 41.472-0.215579 69.510737-5.173895 12.921263 1.589895 14.928842 11.466105 17.879579 40.178526 12.422737 84.924632 42.455579 84.924632 95.380211C772.837053 684.638316 646.090105 794.974316 455.531789 794.974316zM718.672842 427.802947c4.715789-14.457263 1.765053-30.962526-9.202526-43.061895-10.954105-12.072421-27.136-16.666947-42.037895-13.527579l0-0.026947c-12.463158 2.694737-24.724211-5.268211-27.392-17.664-2.667789-12.463158 5.281684-24.697263 17.744842-27.338105 30.531368-6.467368 63.595789 2.937263 85.989053 27.715368 22.447158 24.764632 28.456421 58.489263 18.849684 88.064-3.907368 12.099368-16.936421 18.728421-29.062737 14.848-12.139789-3.920842-18.782316-16.922947-14.874947-28.995368L718.672842 427.816421zM853.261474 471.134316c-0.013474 0.013474-0.013474 0.080842-0.013474 0.107789-4.567579 14.026105-19.712 21.706105-33.778526 17.165474-14.133895-4.554105-21.854316-19.590737-17.300211-33.670737l0-0.013474c13.999158-43.169684 5.12-92.429474-27.567158-128.565895-32.714105-36.122947-80.949895-49.92-125.507368-40.488421-14.484211 3.085474-28.752842-6.130526-31.838316-20.574316-3.098947-14.403368 6.144-28.631579 20.641684-31.717053l0.026947 0c62.625684-13.271579 130.519579 6.117053 176.545684 56.966737C860.483368 341.113263 872.892632 410.381474 853.261474 471.134316z" fill="#ef8829" p-id="20002"></path></svg></p></form></div><div class="tab_input"  v-if="!temp"><form method="post" class="tab_form2"><p class="signIn_adr"><span>国家/地区</span><select name="" id="" v-model="selected"><option value="">中国</option><option value="">中国</option><option value="">中国</option></select></p><p class="signIn_Num"><span>国家码</span><input type="text" placeholder="手机号" v-model.number="phone"></p><p class="signIn_password"><input type="text" placeholder="请输入验证码" ><span>获取验证码</span></p><p><input type="checkbox" id="checkbox" v-model="checked" v-model="isChecked" @click="reg_change"><span style="color: #bbb;">已阅读并同意小米帐号 <a href="#" class="user_agreement">用户协议</a> 和 <a href="#" class="user_agreement">隐私政策</a</span></p><p><input type="submit" value="注册" class="signIn" @click="goRegister"></p><p class="forgetPass"><span>收不到验证码?</span></p><p class="otherLogin_title">其他方式登录</p><p class="otherLogin_list"><svg t="1681634506701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14123" width="46" height="46"><path d="M230.404 576.536c-12.087 9.728-25.043 23.93-28.805 41.984-5.12 24.666-1.069 55.541 22.728 79.761 28.828 29.362 72.637 37.398 91.56 38.779 51.4 3.717 106.184-21.772 147.477-50.844 16.184-11.42 43.899-34.349 70.39-69.721-59.37-30.653-133.477-64.557-212.703-61.24-40.47 1.692-69.454 10.084-90.647 21.281z m752.859 135.545C1009.463 650.574 1024 582.968 1024 512 1024 229.688 794.335 0 512 0 229.665 0 0 229.688 0 512c0 282.335 229.665 512 512 512 170.385 0 321.491-83.723 414.631-212.124-87.997-43.742-233.027-115.734-322.36-159.299-42.63 48.596-105.65 97.303-176.84 118.495-44.722 13.29-85.037 18.365-127.199 9.75-41.739-8.548-72.481-28.093-90.401-47.683-9.127-9.995-19.612-22.706-27.203-37.82a71.25 71.25 0 0 0 1.202 3.049s-4.363-7.524-7.702-19.5a85.994 85.994 0 0 1-3.34-18.143 93.517 93.517 0 0 1-0.2-13.045c-0.378-7.702-0.066-15.783 1.67-24.064 4.185-20.235 12.822-43.81 35.172-65.692 49.063-48.039 114.777-50.621 148.814-50.42 50.421 0.289 138.04 22.35 211.812 48.439 20.436-43.52 33.547-90.068 42.007-121.1H305.308v-33.168h157.518v-66.337H272.139v-33.169h190.687v-66.315c0-9.105 1.803-16.584 16.584-16.584h74.619v82.899h207.293v33.169H554.029v66.337h165.82s-16.65 92.828-68.719 184.32c115.557 41.272 278.128 104.849 332.133 126.086z" fill="#1296DB" p-id="14124"></path></svg><svg t="1681634530165" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16186" width="46" height="46"><path d="M512.430011 0.566468c282.785684 0 512.160538 229.067539 512.160538 511.566549 0 282.497863-229.374853 511.565402-512.160538 511.565402C229.664968 1023.698419 0.188058 794.63088 0.188058 512.133017 0.188058 229.634007 229.664968 0.566468 512.428865 0.566468zM635.831758 424.484121c-104.270262 0-186.37488 71.313057-186.37488 158.828936 0 87.648896 82.103471 158.819763 186.37488 158.819763 20.898544 0 41.9668-5.035144 62.969693-10.285868l2.800233-0.699485 60.092632 32.894137-16.49867-54.722652c44.003333-32.925097 76.775919-76.652076 76.77592-126.005895 0-87.515879-87.710817-158.828936-186.139808-158.828936zM421.953362 260.316166c-120.471937 0-219.147467 82.001415-219.147467 186.13866 0 60.082311 32.852856 109.465944 87.68903 147.741528l-21.89961 65.861662 76.611941-38.37764c27.402607 5.400941 49.393953 10.965859 76.755279 10.965859l-0.009173 0.01032c6.829725-0.016054 13.657156-0.302728 20.463946-0.861169-4.282912-14.643315-6.763216-29.984968-6.763216-45.867861 0-95.632197 82.196354-173.208511 186.303785-173.20851 7.052184 0.034401 14.095194 0.463265 21.099216 1.282006-18.977828-88.19243-113.370446-153.684856-221.103731-153.684855z m157.230441 252.252595c14.150235-0.002293 25.622934 11.468112 25.624081 25.618348a25.621787 25.621787 0 0 1-51.243575 0.005733c-0.001147-14.150235 11.468112-25.622934 25.619494-25.624081z m122.971736 0c14.150235-0.002293 25.624081 11.468112 25.625227 25.618348a25.621787 25.621787 0 1 1-51.243575 0.005733c-0.002293-14.150235 11.468112-25.622934 25.618348-25.624081z m-199.830218-163.954669a30.742934 30.742934 0 0 1 30.742934 30.74408v0.057335c-0.016054 16.977989-13.794759 30.728027-30.773894 30.711973-16.977989-0.0172-30.729174-13.794759-30.711974-30.773894a30.732614 30.732614 0 0 1 30.742934-30.738347z m-153.714669-0.004587c16.977989 0 30.742934 13.764945 30.742934 30.742934 0 16.979135-13.764945 30.742934-30.742934 30.742934-16.979135 0-30.742934-13.763798-30.742934-30.742934 0-16.977989 13.763798-30.742934 30.742934-30.742934z" fill="#46BB36" p-id="16187"></path></svg><svg t="1681634599153" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21160" width="46" height="46"><path d="M512.009337 0C229.23422 0 0 229.23422 0 511.990663c0 282.775117 229.23422 512.009337 512.009337 512.009337 282.775117 0 512.009337-229.23422 512.009337-512.009337C1024 229.23422 794.76578 0 512.009337 0zM801.26464 668.859701c-21.737567 18.637536-49.955319-61.346999-54.007769-49.040249-9.879014 29.935842-14.529061 49.936644-43.643208 82.505644-1.550016 1.736764 33.670819 14.473036 43.643208 41.62632 9.542867 26.03279 28.143053 67.285613-93.486477 80.227308-71.375413 7.582004-122.936772-38.022067-128.09104-37.592545-9.524192 0.84037-5.284993 0-15.51883 0-8.366349 0-8.926595 0.616271-16.807397 0-2.166287-0.168074-25.883391 37.592545-131.975416 37.592545-82.225521 0-103.514891-51.748108-86.987617-80.227308 16.545949-28.460526 44.128755-36.752175 40.244378-41.252822-19.141758-22.185764-32.363577-45.921544-40.244378-67.360312-1.942188-5.341017-3.585578-10.532635-4.874145-15.51883-2.987982-11.447705-25.883391 67.229588-50.459541 49.040249-24.576149-18.170664-22.391188-64.40968-6.480185-108.687834 16.060402-44.614302 56.491529-87.585213 56.939726-97.072055 1.624715-35.295534-3.473529-41.159448 0-50.422191 7.750078-20.766473 17.19957-12.792297 17.19957-23.567706 0-135.729068 100.863057-245.761494 225.293819-245.761494 124.412088 0 225.275145 110.032426 225.275145 245.761494 0 5.210293 13.520617 0 19.982128 23.567706 1.325917 4.874145 2.259661 23.66108 0.672296 50.422191-0.746995 12.848321 34.268415 28.497875 52.364379 97.072055C828.436598 628.764722 810.321959 661.109624 801.26464 668.859701z" fill="#1296db" p-id="21161"></path></svg><svg t="1681634569827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20001" width="46" height="46"><path d="M411.270737 607.649684c-17.973895-7.504842-41.189053 0.229053-52.264421 17.542737-11.223579 17.394526-5.955368 38.103579 11.870316 46.201263 18.108632 8.232421 42.132211 0.417684 53.342316-17.421474C435.253895 635.944421 429.446737 615.370105 411.270737 607.649684zM455.545263 589.352421c-6.885053-2.721684-15.508211 0.579368-19.550316 7.329684-3.920842 6.790737-1.751579 14.524632 5.146947 17.367579 7.019789 2.883368 16.006737-0.458105 20.048842-7.370105C465.071158 599.740632 462.551579 591.912421 455.545263 589.352421zM427.52 469.315368c-115.968 11.439158-203.924211 82.216421-196.378947 158.073263 7.531789 75.910737 107.654737 128.161684 223.649684 116.749474 115.994947-11.439158 203.924211-82.216421 196.392421-158.140632C643.664842 510.140632 543.541895 457.889684 427.52 469.315368zM529.300211 648.299789c-23.673263 53.355789-91.769263 81.798737-149.530947 63.232-55.754105-17.933474-79.373474-72.811789-54.945684-122.246737 23.956211-48.464842 86.352842-75.870316 141.541053-61.561263C523.506526 542.437053 552.663579 596.143158 529.300211 648.299789zM512 0C229.241263 0 0 229.227789 0 512c0 282.758737 229.241263 512 512 512 282.772211 0 512-229.241263 512-512C1024 229.227789 794.772211 0 512 0zM455.531789 794.974316c-145.354105 0-293.941895-70.197895-293.941895-185.667368 0-60.362105 38.386526-130.182737 104.474947-196.069053 88.252632-87.929263 191.164632-127.986526 229.874526-89.397895 17.084632 17.003789 18.741895 46.457263 7.760842 81.623579-5.726316 17.690947 16.666947 7.895579 16.666947 7.936 71.343158-29.763368 133.564632-31.514947 156.321684 0.862316 12.139789 17.246316 10.954105 41.472-0.215579 69.510737-5.173895 12.921263 1.589895 14.928842 11.466105 17.879579 40.178526 12.422737 84.924632 42.455579 84.924632 95.380211C772.837053 684.638316 646.090105 794.974316 455.531789 794.974316zM718.672842 427.802947c4.715789-14.457263 1.765053-30.962526-9.202526-43.061895-10.954105-12.072421-27.136-16.666947-42.037895-13.527579l0-0.026947c-12.463158 2.694737-24.724211-5.268211-27.392-17.664-2.667789-12.463158 5.281684-24.697263 17.744842-27.338105 30.531368-6.467368 63.595789 2.937263 85.989053 27.715368 22.447158 24.764632 28.456421 58.489263 18.849684 88.064-3.907368 12.099368-16.936421 18.728421-29.062737 14.848-12.139789-3.920842-18.782316-16.922947-14.874947-28.995368L718.672842 427.816421zM853.261474 471.134316c-0.013474 0.013474-0.013474 0.080842-0.013474 0.107789-4.567579 14.026105-19.712 21.706105-33.778526 17.165474-14.133895-4.554105-21.854316-19.590737-17.300211-33.670737l0-0.013474c13.999158-43.169684 5.12-92.429474-27.567158-128.565895-32.714105-36.122947-80.949895-49.92-125.507368-40.488421-14.484211 3.085474-28.752842-6.130526-31.838316-20.574316-3.098947-14.403368 6.144-28.631579 20.641684-31.717053l0.026947 0c62.625684-13.271579 130.519579 6.117053 176.545684 56.966737C860.483368 341.113263 872.892632 410.381474 853.261474 471.134316z" fill="#ef8829" p-id="20002"></path></svg></p></form></div></div></div><!-- 表单部分 end --></div><!-- 右边内容 end --></div></div></body>

css代码

*{padding:0;margin:0;
}
li{list-style:none;
}
.content{display: flex;width: 100%;
}
.contentLeft{/* float: left; */width: 25%;height: 100vh;background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);background-size: 100%;}
.contentRight{overflow: hidden;flex: 1;
}
/* 头部部分 */
.header{padding: 20px;height: 40px;
}
.header_title{float: left;}
.header_title>img{width: 40px;height: 40px;display: inline-block;vertical-align: middle;
}
.header_title>p{color: #333;font-size: 26px;height: 40px;line-height: 40px;display: inline-block;margin-left: 20px;
}
.header_nav{float: right;
}
.header_nav>ul>li{display: inline;padding: 0 10px;color: #838383;height: 40px;line-height: 40px;font-size: 14px;}
.header_nav>ul>li:nth-child(4){border-left:1px solid #838383; ;}
/* 二维码 */
.switch{position: absolute;top: 0;right: 0;opacity: .4;width: 0;height: 0;border-top: 64px solid #ff5c00;border-left: 64px solid transparent;
}
.switch:hover{opacity: 1;
}
.switch>svg{position: absolute;right: 10px;top: -55px;}.icon:hover .dialaing{display: block;}
.dialaing{display: none;margin-top: -45px;font-size: 12px;margin-left: -170px;position: fixed;background-color: #ff5c00;box-shadow: 5px 5px 15px 2px #c4c4c4;}
.dialaing ul{/* padding: 10px; */}
.dialaing li{color: #fff;text-align: center;width: 80px;cursor: pointer;padding: 5px 10px;}.dialaing::before{width: 0px;height: 0px;content: "";border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid #ff5c00;position: absolute;top: 6px;;right: -10px;}/* 表单部分 */
.mi-layout__container{/* text-align: center; */padding-top: 20px;
}
.card{width: 360px;border-radius: 4px;box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);margin: 0 auto 80px;padding: 40px 45px;position: relative;background-color: #fff;
}
/* tab切换 */
.tab-tilte{text-align: left;
}
.tab-tilte>li{display: inline;font-size: 22px;color: #bbb;margin-right: 20px;
}
.tab-tilte .active{font-weight:bold;color: #333;border-bottom: 3px solid #ff5c00;text-shadow: 0 0 .25px currentColor;
}
.tab_input{padding: 20px 2px 0;margin: 0 auto;}
.tab_form>p>span{color: #bbb;
}
.user_agreement{text-decoration: none;color: #333;
}
.tab_form>p>input{border: 0px;padding: 20px 10px;background: #f9f9f9;
}
.tab_form>p{margin-top: 20px;
}
.phoneNum>input,
.password>input{padding:20px 10px;width: 334px;outline: none;
}.phoneNum>input::-webkit-input-placeholder,
.password>input::-webkit-input-placeholder{color: rgba(0,0,0,.4);font-size: 17px;height: 20px;line-height: 20px;top: 20px;
}
.submit{background-color: #ff5c00;border: none;color: #fff;border-radius: 4px;padding: 0 20px;opacity: .4;margin-top: 20px;margin-bottom: 10px;width: 374px;font-size: 18px;height: 60px;line-height: 60px;
}
/* 注册 */
.tab_form2>p input{border: none;
}
.signIn_adr,
.signIn_Num,
.signIn_password{background: #f9f9f9;margin-top: 20px;padding: 20px 10px;width: 334px;height: 20px;line-height: 20px;
}
.signIn_adr select{border: none;background-color: #f9f9f9;outline:none;
}
.signIn_Num input{background-color: #f9f9f9;font-size: 17px;margin-left: 40px;outline:none;color: rgba(0,0,0,.4);border: none;
}
.signIn_password input{font-size: 17px;outline: none;/*点击后无边框*/background-color: #f9f9f9;color: rgba(0,0,0,.4);border: none;
}
.signIn_password span{margin-right: 0;color: #ff5c00;margin-left: 50px;
}
.signIn{background-color: #ff5c00;border: none;color: #fff;border-radius: 4px;padding: 0 20px;opacity: .4;margin-top: 20px;margin-bottom: 10px;width: 374px;font-size: 18px;height: 60px;line-height: 60px;
}
/* 忘记密码 */
.forgetPass{width: 374px;display: flex;justify-content: space-between;color: #ff5c00;
}
.otherLogin_title{width: 374px;color: #aaa;font-size: 17px;display: block;text-align: center;line-height: 40px;
}
.otherLogin_list{width: 374px;text-align: center;
}
.otherLogin_list svg{margin: 0 12px;
}

js代码

<script>const app = Vue.createApp({data(){return{// tabTitle: ['登录', '注册'],// tabMain: ['内容一', '内容二'],cur: 0 ,//默认选中第一个tabtemp:true,isChecked:false,username:'',phone:'',password:''}},methods:{//登录注册切换qh:function(t){console.log(t);this.temp=t},//多选框勾选log_change() {this.isChecked = !this.isChecked},// 登录goLogin() {if (this.username == '' || this.password == '') {alert('账号密码不能为空')} else {if (!this.isChecked) {alert('请同意用户条款')} else {this.userList.forEach(item => {if (item.phone == this.username && item.password == this.password) {alert('登录成功')} else {alert('登录失败')}})}}},},});const vm = app.mount("#app");
</script>

用vue实现小米商城登录注册页面相关推荐

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...
Vue+MySQL实现登录注册案例
Vue+MySQL实现登录注册案例 1.新建vue项目并连接数据库具体步骤见vue连接mysql数据库 2.新建登录页面.注册页面和首页在src/views文件夹下,新建 login.vue(登录 ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...

用vue实现小米商城登录注册页面

用vue实现小米商城登录注册页面相关推荐

最新文章

热门文章