手🦌一个原生支持响应式小而美的通用登录注册页面

事情是这样的，我的好兄弟刚刚入职了一家公司，项目经理就给他安排了一个从0到1的项目，前后端都要写，这家公司的传统美德就是全栈开发。公司感觉都2024年了，是个人都可以写前端，不会前端的程序员早就应该被淘汰了，前后端分离，人不分离。说到这里我只能呵呵了。。。。。。

1.先开发个登录注册

第一天，他的领导就让他先把登录注册搞完。最大的问题是前端，比如前端页面，而且是响应式。网上cv的代码，也很难满足公司要求。然后他就找我帮忙，我刚开始做全栈的时候，也很难受，每天睁眼闭眼就是各种css和vue组件通信。很是可以理解他的心情，刚好今天分享一个我自己以前公司项目写的一个响应式通用的登录注册页面。

2.手🦌一个原生支持响应式小而美的登录注册页面

2.1 效果图

pc端 移动端

支持响应式，过渡动画，flex布局，grid布局，盒子阴影渐变等等

当时写这个，样式前前后后，翻找资料，对于后端而言，说多了都是泪😭

2.2 技术实现

项目框架：vue3+vite+sass+css+html

目录文件

2.3 coding...

<script setup>

</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="form">
        <h2>用户登录</h2>
        <div class="content">
          <input class="input" type="text" placeholder="请输入账号">
          <input class="input" type="password" placeholder="请输入密码">
          <button class="button">登录</button>
          <div class="link">
            <a href="#">新手注册</a>
            <a href="#">忘记密码</a>
            <a href="#">游客访问</a>
          </div>
        </div>
      </div>
      <div class="img">
        <img src="./images/login.jpg" alt="#"/>
      </div>
    </div>

  </div>

</template>

<style lang="scss" scoped>
* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.login-container {

  background-color: #2c2e39;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  .login-box {
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 720px;
    overflow: hidden;
    margin: auto 8%;

    //background-color: white;
    //transform: translateY(-64px);
    border-radius: 6px;
    //box-shadow 水平x轴正 垂直y轴负方向 模糊 阴影外延  颜色 透明度   水平x轴负方向 垂直y轴正方向
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    .form {
      padding: 24px;
      text-align: center;
      color: rgb(55 65 81);
      line-height: 1.75rem;

      h2 {
        font-size: 1.125rem;
        margin: 25px 0
      }

      .content {
        display: flex;
        flex-wrap: wrap;

        .link {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          padding: 2px 6px;
          font-size: small;
          color: #2a1c1c;
          transition-property: color;
        }

        .link a:hover {
          color: #9a919a;
          transition-duration: 300ms;

        }

        .button {
          font-size: medium;
          color: white;
          width: 100%;
          margin: 6px;
          background-color: #394150;
          outline: none;
          border: none;
          border-radius: 6px; 
          padding: 10px 6px; 
          transition-property: background-color;

        }

        .button:hover {
          background-color: #6c727f;
          transition-duration: 500ms;
          cursor: pointer;
        }

        .input {
          background-color: #f9f9f8;
          border: 1px solid rgb(229 231 235);
          width: 100%;
          font-size: medium;
          border-radius: 3px; /* 2px */
          padding: 10px 6px; 
          margin: 8px;
          outline: none;
          transition-property: box-shadow;
        }

        input:focus {
          border-color: #f9f9f8;
          box-shadow: 0 0 0 3px #6c727f, 0 0 0 3px #6c727f;
          transition-duration: 500ms;
        }


        input::placeholder {
          color: gray;
          font-family: 'Graphik', Merriweather, Arial, sans-serif;
          font-size: 0.8rem; /* 12px */
          line-height: 16px; /* 16px */
        }
      }


    }


    img {
      display: block;
      height: 352px;
      width: 100%;
      background-size: cover;

    }

  }


  /* 响应式布局 */
  //>=640px
  @media screen and (min-width: 640px) {


  }
  //<=640px
  @media screen and (max-width: 640px) {
    .img {
      display: none
    }
    .login-box {
      display: block;
      margin: auto 8%;
    }
    .input {
      outline: none;

    }
  }


}

</style>

3.在线预览

www.codingfox.icu/#/dashboard

网址可能随时会跑路😜，可以在线看看效果，如果网址更新，会尽量迁移