简单漂亮的登录页面

news2024/11/24 13:33:02

效果图

说明

开发环境:vue3,sass

代码 

<template>
  <div class="container">
    <div class="card-container">
      <div class="card-left">
        <span>
          <h1>Dashboard</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </span>
      </div>
      <div class="card-right">
        <form>
          <input>
          <input>
          <button>Login</button>
          <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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1189417.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基础课26——业务流程分析方法论

基础课25中我们提到业务流程分析方法包括以下几种&#xff1a; 价值链分析法&#xff1a;主要是找出或设计出哪些业务能够使得客户满意&#xff0c;实现客户价值最大化的业务流程。要进行价值链分析的时候可以从企业具体的活动进行细分&#xff0c;细分的具体方面可以从生产指…

Stable Diffusion WebUI扩展sd-webui-controlnet之Canny

什么是Canny? 简单来说,Canny是计算机视觉领域的一种边缘检测算法。 关于Canny算法大家可以去看我下面这篇博客,里面详细介绍了Canny算法的原理以及代码演示。 OpenCV竟然可以这样学!成神之路终将不远(十五)_maxminval opencv-CSDN博客文章浏览阅读111次。14 图像梯度…

统计学习笔记 第 5 部分:破碎系数

照片由 Unsplash上的 资源数据库提供 1&#xff1a;背景与动机 正如本系列之前的文章所述&#xff0c;统计学习理论为理解机器学习推理问题提供了一个概率框架。用数学术语来说&#xff0c;统计学习理论的基本目标可以表述为&#xff1a; 图片由作者提供 本文是统计学习理论系…

要查看Android应用的签名信息,可以采取以下几种方式

直接查看APK的签名信息。这可以通过在命令行中输入以下命令完成&#xff1a;keytool -list -printcert -jarfile [APK文件路径]。例如&#xff0c;如果你的APK文件名为wechat.apk&#xff0c;你可以在命令行中输入&#xff1a;keytool -list -printcert -jarfile wechat.apk。执…

【OpenCV实现图像:用OpenCV图像处理技巧之白平衡算法】

文章目录 概要加载样例图像统计数据分析White Patch Algorithm小结 概要 白平衡技术在摄影和图像处理中扮演着至关重要的角色。在不同的光照条件下&#xff0c;相机可能无法准确地捕捉到物体的真实颜色&#xff0c;导致图像呈现出暗淡、色调不自然或者褪色的效果。为了解决这个…

C++11常用特性

目录 1、{}初始化 2、auto 3、decltype 4、nullptr 5、范围for 6、STL容器 7、右值引用 ①左值引用和右值引用 ②移动构造 ③移动赋值 ④万能引用与完美转发 8、新的类功能 9、可变模版参数 10、lambda表达式 捕捉列表的使用 [val]&#xff1a;传值捕捉 [&…

ChatGPT生产力|中科院学术ChatGPT优化配置

资源链接&#xff1a;GitHub - binary-husky/gpt_academic b站配置讲解链接&#xff1a;chatgpt-academic 新手运行官方精简指南&#xff08;科研chatgpt拓展&#xff09; 某知配置图文讲解&#xff1a;图文详解&#xff1a;在windows中部署ChatGPT学术版 - 知乎 (zhihu.com) 一…

经典OJ题:随机链表的复制

目录 题目&#xff1a; 本题的解图关键在于画图与看图&#xff01; 思路分析&#xff1a; 方法一&#xff1a;暴力求解法。 方法二&#xff1a;插入法 方法解析&#xff1a; 步骤一、插入 步骤二、 处理每一个copy的randdom指针⭐————重点 步骤三、拆卸节点 代码…

轻松与任何 SQL 数据库集成:Directus 助你无代码开发 | 开源日报 No.69

Ebazhanov/linkedin-skill-assessments-quizzes Stars: 26.5k License: AGPL-3.0 这个项目是一个 LinkedIn 技能评估答案的存储库。它提供了各种领域和主题的问题和答案&#xff0c;以帮助用户更好地学习新概念并准备相关考试。该项目具有以下核心优势&#xff1a; 提供多语…

HarmonyOS开发:UI开展前的阶段总结

前言 关于HarmonyOS&#xff0c;陆陆续续总结了有14篇的文章&#xff0c;大家可以发现&#xff0c;没有一篇是关于UI相关的&#xff0c;不是自己没有分享的打算&#xff0c;而是对于这些UI而言&#xff0c;官方都有着一系列的文档输出&#xff0c;如果我再一一的分享&#xff0…

SPSS线性回归

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

高级运维学习(十五)Zabbix监控(二)

一 Zabbix 报警机制 1 基本概念 自定义的监控项默认不会自动报警首页也不会提示错误需要配置触发器与报警动作才可以自动报警 2 概念介绍 &#xff08;1&#xff09;触发器 (trigger) 表达式&#xff0c;如内存不足300M&#xff0c;用户超过30个等 当触发条件发生后&a…

【自然语言处理】基于python的问答系统实现

一&#xff0c;文件准备 该问答系统是基于已知的问题和其一一对应的答案进行实现的。首先需要准备两个文本文件&#xff0c;分别命名为“question.txt”和“answer.txt”&#xff0c;分别是问题文件和答案文件&#xff0c;每一行是一个问题以及对应的答案。 问题文件: 中国的首…

Pytorch模型使用与修改、保存与加载

模型的使用及修改、保存与加载 以图像处理中torchvision为例&#xff0c;PyTorch通过torchvision.models模块提供了更多的预训练模型. 在图像分类当中&#xff0c;包括许多模型 import torchvision import warnings import torch warnings.filterwarnings("ignore&quo…

3D Gaussian Splatting:用于实时的辐射场渲染

Kerbl B, Kopanas G, Leimkhler T, et al. 3d gaussian splatting for real-time radiance field rendering[J]. ACM Transactions on Graphics (ToG), 2023, 42(4): 1-14. 3D Gaussian Splatting 是 Siggraph 2023 的 Best Paper&#xff0c;法国团队在会议上展示了其实现的最…

软件测试|iOS 自动化测试——技术方案、环境配置

移动端的自动化测试&#xff0c;最常见的是 Android 自动化测试&#xff0c;我个人觉得 Android 的测试优先级会更高&#xff0c;也更开放&#xff0c;更容易测试&#xff1b;而 iOS 相较于 Android 要安全稳定的多&#xff0c;但也是一个必须测试的方向&#xff0c;这个系列文…

Bean作用域

从笔者之前的博客&#xff0c;我们可以看出 Spring 是⽤来读取和存储 Bean&#xff0c;因此在 Spring 中 Bean 是最核⼼的操作 资源&#xff0c;所以接下来我们深⼊学习⼀下 Bean 对象&#xff1a;Bean作用域&#xff01; 限定程序中变量的可用范围叫做作用域&#xff01;或者…

【遮天】荒古禁地采取圣药,姬老自己走上绝路,故事扣人心悬

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料&#xff0c;《遮天》动漫第30话最新剧情解析&#xff0c;姬云峰&#xff0c;姬家的长老&#xff0c;地位崇高&#xff0c;深受家族成员的尊敬和信赖。他的智慧和经验在家族中享有极高的声望&#xf…

【MATLAB源码-第72期】基于matlab的OFDM-IM索引调制系统在高斯,瑞利,莱斯信道误码率对比,对比传统OFDM系统。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 OFDM-IM索引调制技术是一种新型的无线通信技术&#xff0c;它将正交频分复用&#xff08;OFDM&#xff09;和索引调制&#xff08;IM&#xff09;相结合&#xff0c;以提高频谱效率和系统容量。OFDM-IM索引调制技术的基本思想…