做了一个登陆界面！
This commit is contained in:
parent
e3fbd6e0f3
commit
67a7935728
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"extends": [
|
||||
"development"
|
||||
],
|
||||
"hints": {
|
||||
"axe/forms": [
|
||||
"default",
|
||||
{
|
||||
"label": "off"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue