使用vue3做的一个比较满意的登陆页面

页面展示：分为三部分，账号登陆页，token登陆页，账号注册页

账号登陆页面：

token登陆页面： 

注册页面： 

忘记密码弹窗：

我没有把登陆/注册的功能拆分成两个组件，我把他们都放在同一个组件里面了，通过一个变量控制登陆注册的表单隐藏和显示，所以结构可能看着稍微复制，但是我相信你们都可以看得懂：

还有css样式代码：

*, *::after, *::before {margin: 0;padding: 0;box-sizing: border-box;user-select: none;
}.container {display: flex;justify-content: center;align-items: center;/* position: absolute; */top: 0;width: 100%;height: 100%;padding: 25px;background-color: var(--bg-color);/* background-color: #ecf0f3; */transition: 1.25s;
}.form {display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;height: 100%;
}
.form__icon {object-fit: contain;width: 30px;margin: 0 5px;opacity: 0.5;transition: 0.15s;
}
.form__icon:hover {opacity: 1;transition: 0.15s;cursor: pointer;
}
.form__input {width: 350px;height: 40px;margin: 4px 0;padding-left: 16px;font-size: 13px;letter-spacing: 0.15px;border: none;outline: none;color: var(--input-color);font-family: "Montserrat", sans-serif;background-color: #ecf0f3;transition: 0.25s ease;border-radius: 8px;box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}
.form__input:focus {box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}
.form__span {margin-top: 30px;margin-bottom: 12px;
}
.form__link {/* color: #181818; */font-size: 15px;margin-top: 25px;border-bottom: 1px solid #a0a5a8;line-height: 2;cursor: pointer;text-decoration: none;
}.title {font-size: 34px;font-weight: 700;line-height: 3;color: var(--text-color);
}.description {font-size: 14px;letter-spacing: 0.25px;text-align: center;line-height: 1.6;
}.button {width: 180px;height: 50px;border-radius: 25px;margin-top: 30px;font-weight: 700;font-size: 14px;letter-spacing: 1.15px;background-color: #4B70E2;color: #f9f9f9;box-shadow: var(--box-shadow);border: none;outline: none;
}/**/
.a-container {z-index: 100;
}.b-container {z-index: 0;
}.switch {display: flex;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;height: 100%;width: 400px;padding: 50px;z-index: 200;transition: 1.25s;background-color: #ecf0f3;overflow: hidden;box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
}
.switch__circle {position: absolute;width: 500px;height: 500px;border-radius: 50%;background-color: #ecf0f3;box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;bottom: -60%;left: -60%;transition: 1.25s;
}
.switch__circle--t {top: -30%;left: 60%;width: 300px;height: 300px;
}
.switch__container {display: flex;justify-content: center;align-items: center;flex-direction: column;position: absolute;width: 400px;padding: 50px 55px;transition: 1.25s;
}
.switch__button {cursor: pointer;
}
.switch__button:hover {box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;transform: scale(0.985);transition: 0.25s;
}
.switch__button:active, .switch__button:focus {box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;transform: scale(0.97);transition: 0.25s;
}/**/
.is-txr {left: calc(100% - 400px );transition: 1.25s;transform-origin: left;
}.is-txl {left: 0;transition: 1.25s;transform-origin: right;
}.is-z200 {z-index: 200;transition: 1.25s;
}.is-hidden {visibility: hidden;opacity: 0;position: absolute;transition: 1.25s;
}.is-gx {animation: is-gx 1.25s;
}@keyframes is-gx {0%, 10%, 100% {width: 400px;}30%, 50% {width: 500px;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！