做了一个登陆界面！

code/web/car_dealer/.hintrc

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/forms": [
+      "default",
+      {
+        "label": "off"
+      }
+    ]
+  }
+}

code/web/car_dealer/css/login.css

@@ -18,8 +18,15 @@ html {
 }
 
 body {
+    font-family: "Poppins", sans-serif;
     padding: 0px;
     overflow-x: hidden;
+    min-width: 1280px;
+    /* -ms-overflow-style: none; */
+}
+
+::-webkit-scrollbar {
+    width: 0 !important;
 }
 
 .login_box {
@@ -29,10 +36,92 @@ body {
     height: 100vh;
     width: 400px;
     top: 0vh;
-    /* bottom: 0vh; */
     right: 50px;
-    background-color: #ffffffaf;
+    background-color: #ffffffcf;
     z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.login_box img {
+    height: 100px;
+}
+
+.login_box h2 {
+    margin: 15px 0px;
+    font-size: 2.9rem;
+    color: #333;
+}
+
+.input-div {
+    position: relative;
+    display: grid;
+    grid-template-columns: 7% 93%;
+    grid-gap: 5px;
+    margin: 0px 0px 5px 0;
+    padding: 5px 0;
+}
+
+.user {
+    margin-top: 0;
+}
+
+.i {
+    color: #b9b9b9;
+    font-family: "Font Awesome 5 Free";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.input-div > div {
+    /* 相对定位 */
+    /* position: relative; */
+    /* height: 45px; */
+}
+
+/* .input-div > div > h5 {
+
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+    font-size: 18px;
+    transition: 0.3s;
+} */
+
+.fa-user::before {
+    content: "\f007";
+}
+
+.input-div > div > input {
+    border: none;
+    outline: none;
+    height: 2rem;
+    padding: 0px 5px;
+    border-radius: 5px;
+}
+
+.btn_login {
+    display: block;
+    width: 60%;
+    height: 50px;
+    border-radius: 25px;
+    outline: none;
+    border: none;
+    background-image: linear-gradient(to right, #32be8f, #32b39f, #32be8f);
+    background-size: 200%;
+    font-size: 1.2rem;
+    color: #fff;
+    font-family: "Poppins", sans-serif;
+    text-transform: uppercase;
+    margin: 1rem auto;
+    /* 鼠标放上变小手 */
+    cursor: pointer;
+    /* transition: 0.5s; */
 }
 
 .title_box {
@@ -49,8 +138,12 @@ body {
 
 .dash_box {
     position: relative;
-    height: 200vh;
+    min-height: 120vh;
     width: 100vw;
     background-color: #ddd;
     z-index: 0;
+    background-image: url("../img/login/login_bg_06.jpg");
+    background-position: right;
+    background-size: cover;
+    background-repeat: no-repeat;
 }

code/web/car_dealer/img/login/avatar.svg

@@ -0,0 +1 @@
+<svg id="457bf273-24a3-4fd8-a857-e9b918267d6a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="698" height="698" viewBox="0 0 698 698"><defs><linearGradient id="b247946c-c62f-4d08-994a-4c3d64e1e98f" x1="349" y1="698" x2="349" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>profile pic</title><g opacity="0.5"><circle cx="349" cy="349" r="349" fill="url(#b247946c-c62f-4d08-994a-4c3d64e1e98f)"/></g><circle cx="349.68" cy="346.77" r="341.64" fill="#f5f5f5"/><path d="M601,790.76a340,340,0,0,0,187.79-56.2c-12.59-68.8-60.5-72.72-60.5-72.72H464.09s-45.21,3.71-59.33,67A340.07,340.07,0,0,0,601,790.76Z" transform="translate(-251 -101)" fill="#38d39f"/><circle cx="346.37" cy="339.57" r="164.9" fill="#333"/><path d="M293.15,476.92H398.81a0,0,0,0,1,0,0v84.53A52.83,52.83,0,0,1,346,614.28h0a52.83,52.83,0,0,1-52.83-52.83V476.92a0,0,0,0,1,0,0Z" opacity="0.1"/><path d="M296.5,473h99a3.35,3.35,0,0,1,3.35,3.35v81.18A52.83,52.83,0,0,1,346,610.37h0a52.83,52.83,0,0,1-52.83-52.83V476.35A3.35,3.35,0,0,1,296.5,473Z" fill="#fdb797"/><path d="M544.34,617.82a152.07,152.07,0,0,0,105.66.29v-13H544.34Z" transform="translate(-251 -101)" opacity="0.1"/><circle cx="346.37" cy="372.44" r="151.45" fill="#fdb797"/><path d="M489.49,335.68S553.32,465.24,733.37,390l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" opacity="0.1"/><path d="M489.49,333.78s63.83,129.56,243.88,54.3l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" fill="#333"/><path d="M488.93,325a87.49,87.49,0,0,1,21.69-35.27c29.79-29.45,78.63-35.66,103.68-69.24,6,9.32,1.36,23.65-9,27.65,24-.16,51.81-2.26,65.38-22a44.89,44.89,0,0,1-7.57,47.4c21.27,1,44,15.4,45.34,36.65.92,14.16-8,27.56-19.59,35.68s-25.71,11.85-39.56,14.9C608.86,369.7,462.54,407.07,488.93,325Z" transform="translate(-251 -101)" fill="#333"/><ellipse cx="194.86" cy="372.3" rx="14.09" ry="26.42" fill="#fdb797"/><ellipse cx="497.8" cy="372.3" rx="14.09" ry="26.42" fill="#fdb797"/></svg>

code/web/car_dealer/login.html

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-10-11 23:19:28
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-12 00:22:29
+ * @LastEditTime: 2022-10-12 15:06:58
  * @FilePath: \car_dealer\login.html
  * @Description: 
  * 
@@ -18,13 +18,47 @@
         <link rel="stylesheet" href="css/root.css" />
         <link rel="stylesheet" href="css/normalize.css" />
         <link rel="stylesheet" href="css/login.css" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap"
+            rel="stylesheet"
+        />
+        <script src="https://kit.fontawesome.com/a81368914c.js"></script>
     </head>
     <body>
         <div class="dash_box">
             <div class="title_box">
-                <h1>车商渠道</h1>
+                <!-- <h1>车商渠道</h1> -->
             </div>
         </div>
-        <div class="login_box"></div>
+        <div class="login_box">
+            <form action="">
+                <img src="img/login/avatar.svg" alt="" />
+                <h2>欢迎</h2>
+                <div class="input-div user">
+                    <div class="i">
+                        <i class="fas fa-user"></i>
+                    </div>
+                    <div>
+                        <!-- <h5>用户名</h5> -->
+                        <input type="text" placeholder="用户名" />
+                    </div>
+                </div>
+                <div class="input-div user">
+                    <div class="i">
+                        <i class="fa fa-lock"></i>
+                    </div>
+                    <div>
+                        <!-- <h5>密码</h5> -->
+                        <input
+                            type="password"
+                            name=""
+                            id=""
+                            placeholder="密码"
+                        />
+                    </div>
+                </div>
+                <button class="btn_login">登录</button>
+            </form>
+        </div>
     </body>
 </html>