-
简单漂亮的登录页面
效果图
说明
开发环境：vue3，sass
代码
- <div class="container">
- <div class="card-container">
- <div class="card-left">
- <span>
- <h1>Dashboardh1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p>
- span>
- div>
- <div class="card-right">
- <form>
- <input>
- <input>
- <button>Loginbutton>
- <p>Forgot Password?p>
- form>
- div>
- div>
- div>
- template>
- <script setup>
- script>
- <style scoped lang="scss">
- .container {
- padding-top: 5%;
- width: 100%;
- height: 100%;
- background-image: url("@/assets/img/bg.jpg");
- background-size: cover;
- }
- .card-container {
- position: fixed;
- display: flex;
- margin-left: 15%;
- width: 70%;
- height: 70%;
- .card-left {
- width: 50%;
- background-color: #dc6c7a;
- border-radius: 10px 0 0 10px;
- span {
- display: block;
- color: #fff;
- margin-top: 40%;
- margin-left: 4%;
- h1 {
- text-align: left;
- font-size: 2.5em;
- font-weight: 700;
- }
- p {
- margin-top: 2%;
- }
- }
- }
- .card-right {
- width: 50%;
- background-color: #2d3035;
- border-radius: 0 10px 10px 0;
- form {
- margin-top: 23%;
- margin-left: 7%;
- width: 75%;
- input {
- margin-bottom: 10%;
- outline: none;
- border-color: #bb414d !important;
- width: 100%;
- border: none;
- border-bottom: 1px solid #444951;
- padding: 10px 0;
- background: none;
- color: #8a8d93;
- }
- button {
- color: #fff;
- border-radius: 5px;
- border: none;
- padding: 5%;
- padding-top: 3%;
- padding-bottom: 3%;
- background-color: #db6574;
- }
- button:hover {
- cursor: pointer;
- background-color: #d44658;
- }
- p {
- margin-top: 5%;
- color: #db6561 !important;
- }
- p:hover {
- cursor: pointer;
- text-decoration: underline;
- }
- }
- }
- }
- style>
-
相关阅读:
手机怎么监控电脑？
面试Java高级工程师之Redis总结
数据可视化（七）：Pandas香港酒店数据高级分析，涉及相关系数，协方差，数据离散化，透视表等精美可视化展示
PostgreSQL教程（十七）：SQL语言（十）之性能提示
五：ffmpe主要参数的使用
Keepalived 高可用详解
高效的开发流程搭建，kaggle提交流程示范
Compose 使用Navigation
Redis之list类型
Python应用—车辆统计（Opencv)
- 原文地址：https://blog.csdn.net/m0_63040701/article/details/134294318