diff --git a/index.html b/index.html index 3645f519dbbfbe503fbb73e27097f95b941d289c..5ca13f6f1675eb6ffa46a5f949c11bf63a4d6d45 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,40 @@ Vite App - -
{{message}}
+
+
+ + + + +
+
+ + +

已有账号

+ +
+
+ + +

没有账号?

+ +
+
+ - + diff --git a/src/assets/main.css b/src/assets/main.css index c9e3ba2382dc44739c426112ce0f53b3eda36231..dbb8243657dfd2c3ec233bdbb646d72e9be2561d 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -8,88 +8,186 @@ font-weight: normal; } -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } - - body{ - margin: 0; - padding: 0; - background: #34495e; - height: 100vh; - display: flex; - /* 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 */ - align-items:center; - justify-content: center; - /* font-family: "montserrat" ,sans-serif; */ - /* 在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用 */ -} -.loading{ - width:200px; - height:200px; - box-sizing: border-box; - border-radius: 50%; - border-top: 10px solid #e74c3c; - position:relative; - animation: a1 2s linear infinite; -} -.loading::before,.loading::after{ - content: ' '; - width: 200px; - height: 200px; - position: absolute; - left:0; - top: -10px; - box-sizing:border-box; - border-radius: 50%; -} -.loading::before{ - border-top: 10px solid #e67e22; - transform: rotate(120deg); -} -.loading::after{ - border-top: 10px solid #3498db; - transform: rotate(240deg); -} - -.loading span{ - position: absolute; - width: 200px; - height: 200px; - color: #fff; - text-align: center; - line-height: 200px; - animation: a2 2s linear infinite; -} -@keyframes a1{ - to{ - transform: rotate(360deg); - } -} -@keyframes a2{ - to{ - transform: rotate(-360deg); - } +*{ + /* 初始化 */ + padding: 0; + margin: 0; } + +html,body{ + /* 100%的窗口高度 */ + height: 100vh; + /* 弹性布局 水平+垂直居中 */ + display: flex; + align-items: center; + justify-content: center; + /* 渐变背景 */ + background: linear-gradient(200deg,#f3e7e9,#e3eeff); + -ms-overflow-style: none; + +} + + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; +} +.container{ + background-color: #fff; + width: 650px; + height: 415px; + /* 阴影 */ + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); + /* 相对定位 */ + position: relative; +} +.from-box{ + /* 绝对定位 */ + position: absolute; + top: -10%; + left: 5%; + background-color: #d3b7d8; + width: 320px; + height: 500px; + border-radius: 5px; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); + /* 弹性布局 水平+垂直居中 */ + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + /* 动画过渡 加速之后 减速 */ + transition: 0.5s ease-in-out; +} + +.register-box,.login-box{ + /* 弹性布局 垂直排列 */ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +.hidden{ + display: none; + transition: 0.5s; +} + +h1{ + text-align: center; + margin-bottom: 25px; + /* 大写字母 */ + text-transform: uppercase; + color: #fff; + /* 字间距 */ + letter-spacing: 5px; +} + +input{ + background-color: transparent; + width: 70%; + color: #fff; + border: none; + /* 下边框样式 */ + border-bottom: 1px solid rgba(255, 255, 255, 0.4); + padding: 10px 0; + text-indent: 10px; + margin: 8px 0; + font-size: 14px; + /* 字间距 */ + letter-spacing: 2px; +} +input::placeholder{ + color: #fff; +} + +input:focus{ + color: #a262ad; + outline: none; + border-bottom: 1px solid #a262ad80; + transition: 0.5s; +} +input:focus::placeholder{ + opacity: 0; +} + +.from-box button{ + width: 70%; + margin-top: 35px; + background-color: #f6f6f6; + outline: none; + border-radius: 8px; + padding: 13px; + color: #a262ad; + letter-spacing: 2px; + border: none; + cursor: pointer; +} + +.from-box button:hover{ + background-color: #a262ad; + color: #f6f6f6; + transition: background-color 0.5s ease; +} + +.con-box{ + width: 50%; + /* 弹性布局 垂直排列 居中 */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* 绝对定位 */ + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.con-box.left{ + left: -2%; +} + +.con-box.right{ + right: -2%; +} + +.con-box h2{ + color: #8e9aaf; + font-size: 25px; + font-weight: bold; + letter-spacing: 3px; + text-align: center; + margin-bottom: 4px; +} + +.con-box p{ + font-size: 12px; + letter-spacing: 2px; + color: #8e9aaf; + text-align: center; +} +.con-box span{ + color: #d3b7d8; +} + +.con-box img{ + width: 150px; + height: 150px; + opacity: 0.9; + margin: 40px 0; +} + +.con-box button{ + margin-top: 3%; + background-color: #fff; + color: #a262ad; + border: 1px solid #d3b7d8; + padding: 6px 10px; + letter-spacing: 1px; + outline: none; + /* 鼠标放上变小手 */ + cursor: pointer; +} +.con-box button:hover{ + background-color: #a262ad; + color: #f6f6f6; }