diff --git a/Front-end/Login/Login.html b/Front-end/Login/Login.html new file mode 100644 index 0000000..9ba9ad7 --- /dev/null +++ b/Front-end/Login/Login.html @@ -0,0 +1,443 @@ + + + + + + + + + 账号登录 + + + + + +
+
+

登录失败

+
+
+
+
+ 登 + 登 + 录 +
+ +
+

+

+

+ + +
+ 忘记密码 + +
+ +
+ + + + + + + + + + + + + + + + + + +

CLOUD

+
+
+
+ + + + diff --git a/Front-end/Login/NEOTERICc.ttf b/Front-end/Login/NEOTERICc.ttf new file mode 100644 index 0000000..9ec1177 Binary files /dev/null and b/Front-end/Login/NEOTERICc.ttf differ diff --git a/Front-end/Login/main.css b/Front-end/Login/main.css new file mode 100644 index 0000000..81f985b --- /dev/null +++ b/Front-end/Login/main.css @@ -0,0 +1,274 @@ +*{ + margin: 0; + padding: 0; +} + +html, +body { + height: 100%; +} + +@font-face { + font-family: 'neo'; + src: url("NEOTERICc-1.ttf")/*tpa=http://www.17sucai.com/preview/384665/2018-12-28/login/css/font/NEOTERICc.ttf*/; +} +input:focus{ + outline: none; +} +.form input{ + width: 300px; + height: 30px; + font-size: 18px; + background: none; + border: none; + border-bottom: 1px solid #fff; + color: #fff; + margin-bottom: 20px; +} +.form input::placeholder{ + color: rgba(255,255,255,0.8); + font-size: 18px; + font-family: "neo"; +} +.confirm{ + height: 0; + overflow: hidden; + transition: .25s; +} +.btn{ + width:140px; + height: 40px; + border: 1px solid #fff; + background: none; + font-size:20px; + color: #fff; + cursor: pointer; + margin-top: 25px; + font-family: "neo"; + transition: .25s; +} +.btn:hover{ + background: rgba(255,255,255,.25); +} +#login_wrap{ + width: 980px; + min-height: 500px; + border-radius: 10px; + font-family: "neo"; + overflow: hidden; + box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25); + position: fixed; + top: 50%; + right: 50%; + margin-top: -250px; + margin-right: -490px; +} +#login{ + width: 50%; + height: 100%; + min-height: 500px; + background: linear-gradient(45deg, #9a444e, #e06267); + position: relative; + float: right; +} +#login #status{ + width: 90px; + height: 35px; + margin: 40px auto; + color: #fff; + font-size: 30px; + font-weight: 600; + position: relative; + overflow: hidden; +} +#login #status i{ + font-style: normal; + position: absolute; + transition: .5s +} +#login span{ + text-align: center; + position: absolute; + left: 50%; + margin-left: -150px; + top: 52%; + margin-top: -140px; +} +#login span a{ + text-decoration: none; + color: #fff; + display: block; + margin-top: 80px; + font-size: 18px; +} +#bg{ + background: linear-gradient(45deg, #211136, #bf5853); + height: 100%; +} +/*绘图*/ +#login_img{ + width: 50%; + min-height: 500px; + background: linear-gradient(45deg, #221334, #6c3049); + float: left; + position: relative; +} +#login_img span{ + position: absolute; + display: block; +} +#login_img .circle{ + width: 200px; + height: 200px; + border-radius: 50%; + background: linear-gradient(45deg, #df5555, #ef907a); + top: 70px; + left: 50%; + margin-left: -100px; + overflow: hidden; +} +#login_img .circle span{ + width: 150px; + height: 40px; + border-radius: 50px; + position: absolute; +} +#login_img .circle span:nth-child(1){ + top: 30px; + left: -38px; + background: #c55c59; +} +#login_img .circle span:nth-child(2){ + bottom: 20px; + right: -35px; + background: #934555; +} +#login_img .star span{ + background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0)); + border-radius: 50%; + box-shadow: 0 0 7px #fff; +} +#login_img .star span:nth-child(1){ + width: 15px; + height: 15px; + top: 50px; + left: 30px; +} +#login_img .star span:nth-child(2){ + width: 10px; + height: 10px; + left: 360px; + top: 80px; +} +#login_img .star span:nth-child(3){ + width: 5px; + height: 5px; + top: 400px; + left: 80px; +} +#login_img .star span:nth-child(4){ + width: 8px; + height: 8px; + top: 240px; + left: 60px; +} +#login_img .star span:nth-child(5){ + width: 4px; + height: 4px; + top: 20px; + left: 200px; +} +#login_img .star span:nth-child(6){ + width: 4px; + height: 4px; + top: 460px; + left: 410px; +} +#login_img .star span:nth-child(7){ + width: 6px; + height: 6px; + top: 250px; + left: 350px; +} +#login_img .fly_star span{ + width: 90px; + height: 3px; + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); + background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); + background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); + transform: rotate(-45deg); +} +#login_img .fly_star span:nth-child(1){ + top:60px; + left: 80px; +} +#login_img .fly_star span:nth-child(2){ + top: 210px; + left: 332px; + opacity: 0.6; +} +#login_img p{ + text-align: center; + color: #af4b55; + font-weight: 600; + margin-top: 365px; + font-size: 25px; +} +#login_img p i{ + font-style: normal; + margin-right: 45px; +} +#login_img p i:nth-last-child(1){ + margin-right: 0; +} +/*提示*/ +#hint{ + width: 100%; + line-height: 70px; + background: linear-gradient(-90deg, #9b494d, #bf5853); + text-align: center; + font-size: 25px; + color: #fff; + box-shadow: 0 0 20px #733544; + display: none; + opacity: 0; + transition: .5s; + position: absolute; + top: 0; + z-index: 999; +} +/* 响应式 */ +@media screen and (max-width:1000px ) { + #login_img{ + display: none; + } + #login_wrap{ + width: 490px; + margin-right: -245px; + } + #login{ + width: 100%; + + } +} +@media screen and (max-width:560px ) { + #login_wrap{ + width: 330px; + margin-right: -165px; + } + #login span{ + margin-left: -125px; + } + .form input{ + width: 250px; + } + .btn{ + width: 113px; + } +} +@media screen and (max-width:345px ) { + #login_wrap { + width: 290px; + margin-right: -145px; + } +} \ No newline at end of file diff --git a/Front-end/PhoneLogin/NEOTERICc.ttf b/Front-end/PhoneLogin/NEOTERICc.ttf new file mode 100644 index 0000000..9ec1177 Binary files /dev/null and b/Front-end/PhoneLogin/NEOTERICc.ttf differ diff --git a/Front-end/PhoneLogin/PhoneLogin.html b/Front-end/PhoneLogin/PhoneLogin.html new file mode 100644 index 0000000..9ffbfd0 --- /dev/null +++ b/Front-end/PhoneLogin/PhoneLogin.html @@ -0,0 +1,442 @@ + + + + + + + + + 手机登录 + + + + + +
+
+

登录失败

+
+
+
+
+ 登 + 登 + 录 +
+ +
+

+

+

+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + +

CLOUD

+
+
+
+ + + + diff --git a/Front-end/PhoneLogin/main.css b/Front-end/PhoneLogin/main.css new file mode 100644 index 0000000..81f985b --- /dev/null +++ b/Front-end/PhoneLogin/main.css @@ -0,0 +1,274 @@ +*{ + margin: 0; + padding: 0; +} + +html, +body { + height: 100%; +} + +@font-face { + font-family: 'neo'; + src: url("NEOTERICc-1.ttf")/*tpa=http://www.17sucai.com/preview/384665/2018-12-28/login/css/font/NEOTERICc.ttf*/; +} +input:focus{ + outline: none; +} +.form input{ + width: 300px; + height: 30px; + font-size: 18px; + background: none; + border: none; + border-bottom: 1px solid #fff; + color: #fff; + margin-bottom: 20px; +} +.form input::placeholder{ + color: rgba(255,255,255,0.8); + font-size: 18px; + font-family: "neo"; +} +.confirm{ + height: 0; + overflow: hidden; + transition: .25s; +} +.btn{ + width:140px; + height: 40px; + border: 1px solid #fff; + background: none; + font-size:20px; + color: #fff; + cursor: pointer; + margin-top: 25px; + font-family: "neo"; + transition: .25s; +} +.btn:hover{ + background: rgba(255,255,255,.25); +} +#login_wrap{ + width: 980px; + min-height: 500px; + border-radius: 10px; + font-family: "neo"; + overflow: hidden; + box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25); + position: fixed; + top: 50%; + right: 50%; + margin-top: -250px; + margin-right: -490px; +} +#login{ + width: 50%; + height: 100%; + min-height: 500px; + background: linear-gradient(45deg, #9a444e, #e06267); + position: relative; + float: right; +} +#login #status{ + width: 90px; + height: 35px; + margin: 40px auto; + color: #fff; + font-size: 30px; + font-weight: 600; + position: relative; + overflow: hidden; +} +#login #status i{ + font-style: normal; + position: absolute; + transition: .5s +} +#login span{ + text-align: center; + position: absolute; + left: 50%; + margin-left: -150px; + top: 52%; + margin-top: -140px; +} +#login span a{ + text-decoration: none; + color: #fff; + display: block; + margin-top: 80px; + font-size: 18px; +} +#bg{ + background: linear-gradient(45deg, #211136, #bf5853); + height: 100%; +} +/*绘图*/ +#login_img{ + width: 50%; + min-height: 500px; + background: linear-gradient(45deg, #221334, #6c3049); + float: left; + position: relative; +} +#login_img span{ + position: absolute; + display: block; +} +#login_img .circle{ + width: 200px; + height: 200px; + border-radius: 50%; + background: linear-gradient(45deg, #df5555, #ef907a); + top: 70px; + left: 50%; + margin-left: -100px; + overflow: hidden; +} +#login_img .circle span{ + width: 150px; + height: 40px; + border-radius: 50px; + position: absolute; +} +#login_img .circle span:nth-child(1){ + top: 30px; + left: -38px; + background: #c55c59; +} +#login_img .circle span:nth-child(2){ + bottom: 20px; + right: -35px; + background: #934555; +} +#login_img .star span{ + background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0)); + border-radius: 50%; + box-shadow: 0 0 7px #fff; +} +#login_img .star span:nth-child(1){ + width: 15px; + height: 15px; + top: 50px; + left: 30px; +} +#login_img .star span:nth-child(2){ + width: 10px; + height: 10px; + left: 360px; + top: 80px; +} +#login_img .star span:nth-child(3){ + width: 5px; + height: 5px; + top: 400px; + left: 80px; +} +#login_img .star span:nth-child(4){ + width: 8px; + height: 8px; + top: 240px; + left: 60px; +} +#login_img .star span:nth-child(5){ + width: 4px; + height: 4px; + top: 20px; + left: 200px; +} +#login_img .star span:nth-child(6){ + width: 4px; + height: 4px; + top: 460px; + left: 410px; +} +#login_img .star span:nth-child(7){ + width: 6px; + height: 6px; + top: 250px; + left: 350px; +} +#login_img .fly_star span{ + width: 90px; + height: 3px; + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); + background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); + background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); + transform: rotate(-45deg); +} +#login_img .fly_star span:nth-child(1){ + top:60px; + left: 80px; +} +#login_img .fly_star span:nth-child(2){ + top: 210px; + left: 332px; + opacity: 0.6; +} +#login_img p{ + text-align: center; + color: #af4b55; + font-weight: 600; + margin-top: 365px; + font-size: 25px; +} +#login_img p i{ + font-style: normal; + margin-right: 45px; +} +#login_img p i:nth-last-child(1){ + margin-right: 0; +} +/*提示*/ +#hint{ + width: 100%; + line-height: 70px; + background: linear-gradient(-90deg, #9b494d, #bf5853); + text-align: center; + font-size: 25px; + color: #fff; + box-shadow: 0 0 20px #733544; + display: none; + opacity: 0; + transition: .5s; + position: absolute; + top: 0; + z-index: 999; +} +/* 响应式 */ +@media screen and (max-width:1000px ) { + #login_img{ + display: none; + } + #login_wrap{ + width: 490px; + margin-right: -245px; + } + #login{ + width: 100%; + + } +} +@media screen and (max-width:560px ) { + #login_wrap{ + width: 330px; + margin-right: -165px; + } + #login span{ + margin-left: -125px; + } + .form input{ + width: 250px; + } + .btn{ + width: 113px; + } +} +@media screen and (max-width:345px ) { + #login_wrap { + width: 290px; + margin-right: -145px; + } +} \ No newline at end of file