Vue3商城后台管理实战-用户登录界面设计

界面设计

此时界面的预览效果如下：
在这里插入图片描述

登录界面的完整代码如下：

<script setup>
import {reactive} from "@vue/reactivity";

const form = reactive({
  username: "",
  password: "",
})

const onSubmit = () => {
  
}
</script>

<template>
  <el-row class="min-h-screen bg-blue-700">
    <el-col :span="16" class="flex items-center justify-center">
      <div>
        <h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1>
        <p class="text-light-50">zdppy + vue3 实现的商城后台管理系统</p>
      </div>
    </el-col>
    <el-col :span="8" class="bg-slate-100">
      <h2>欢迎回来</h2>

      <div>
        <span></span>
        <span>账号密码登录</span>
        <span></span>
      </div>

      <el-form :model="form">
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>

左侧布局和样式调整

核心代码：

<el-col :span="16" class="flex items-center justify-center">
  <div>
    <h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1>
    <p class="text-gray-200 text-1xl">zdppy + vue3 实现的商城后台管理系统</p>
  </div>
</el-col>

效果预览：
在这里插入图片描述

右侧布局初步调整

核心代码：

<el-col :span="8" class="bg-slate-100 flex items-center justify-center flex-col">
  <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>

  <div>
    <span></span>
    <span>账号密码登录</span>
    <span></span>
  </div>

  <el-form :model="form">
    <el-form-item>
      <el-input v-model="form.username" placeholder="请输入用户名"/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="form.password" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
  </el-form>
</el-col>

此时效果预览如下：
在这里插入图片描述

此时登录界面的完整代码如下：

<script setup>
import {reactive} from "@vue/reactivity";

const form = reactive({
  username: "",
  password: "",
})

const onSubmit = () => {

}
</script>

<template>
  <el-row class="min-h-screen bg-blue-700">
    <el-col :span="16" class="flex items-center justify-center">
      <div>
        <h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1>
        <p class="text-gray-200 text-1xl">zdppy + vue3 实现的商城后台管理系统</p>
      </div>
    </el-col>

    <el-col :span="8" class="bg-slate-100 flex items-center justify-center flex-col">
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>

      <div>
        <span></span>
        <span>账号密码登录</span>
        <span></span>
      </div>

      <el-form :model="form">
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>

此时登录界面的完整预览效果如下：
在这里插入图片描述

实现登录提示样式

核心代码：

  • 实现flex布局：flex items-center justify-center
  • 设置垂直方向的外边距：my-5
  • 设置文本颜色：text-gray-300
  • 设置flex容器中盒子的间距：space-x-2
  • 设置固定高度：h-[1px]
  • 设置宽度：w-16
  • 设置背景：bg-gray-200
<div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
  <span class="h-[1px] w-16 bg-gray-200"></span>
  <span>账号密码登录</span>
  <span class="h-[1px] w-16 bg-gray-200"></span>
</div>

此时右侧的渲染效果如下：
在这里插入图片描述

设置表单布局

核心代码：

  • 设置固定宽度：class="w-[250px]"
  • 设置圆角按钮：round
  • 设置按钮样式：class="w-[250px] bg-blue-700"
  • 设置密码输入框：v-model="form.password" type="password"
<el-form :model="form" class="w-[250px]">
  <el-form-item>
    <el-input v-model="form.username" placeholder="请输入用户名"/>
  </el-form-item>
  <el-form-item>
    <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
  </el-form-item>
  <el-form-item>
    <el-button round class="w-[250px] bg-blue-700" type="primary" @click="onSubmit">登录</el-button>
  </el-form-item>
</el-form>

此时右侧渲染效果如下：
在这里插入图片描述

最终代码

完整代码：

<script setup>
import {reactive} from "@vue/reactivity";

const form = reactive({
  username: "",
  password: "",
})

const onSubmit = () => {

}
</script>

<template>
  <el-row class="min-h-screen bg-blue-700">
    <el-col :span="16" class="flex items-center justify-center">
      <div>
        <h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1>
        <p class="text-gray-200 text-1xl">zdppy + vue3 实现的商城后台管理系统</p>
      </div>
    </el-col>

    <el-col :span="8" class="bg-slate-100 flex items-center justify-center flex-col">
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>

      <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>

      <el-form :model="form" class="w-[250px]">
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
          <el-button round class="w-[250px] bg-blue-700" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>

完整效果预览：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

模板初阶template

模板初阶template

千呼万唤始出来&#xff01;我们终于迎来了C的又一个便利的东东&#xff1a;模板&#xff0c;相信通过模板的学习&#xff0c;大家一定会对于C的使用更加喜爱&#xff01; 泛型编程 当我们想写一个交换函数时&#xff0c;我们会怎么写&#xff1f;如果需要不同类型的交换函数&a…
阅读更多...
【STM32-MX_GPIO_Init分析】

【STM32-MX_GPIO_Init分析】

MX_GPIO_Init分析源码如下&#xff1a; __HAL_RCC_GPIOE_CLK_ENABLE源码如下&#xff1a; #define RCC ((RCC_TypeDef *) RCC_BASE) #define RCC_BASE (AHB1PERIPH_BASE 0x3800UL) #define AHB1PERIPH_BASE (PERIPH_BASE 0x00020000U…
阅读更多...
C语言之旅：动态内存管理

C语言之旅：动态内存管理

目录 一.为什么要有动态内存分配 二.malloc和free 2.1 malloc 2.2 free 2. 3malloc和free的使用 三. calloc 四. raelloc 4.1 代码示例&#xff1a; 4.2 注意事项&#xff1a; 4.3 对动态开辟空间的越界访问 4.4 对非动态开辟内存使⽤free释放 4.5 使用free释放⼀块…
阅读更多...
IC设计企业如何实现安全便捷的芯片云桌面跨网摆渡？

IC设计企业如何实现安全便捷的芯片云桌面跨网摆渡？

IC设计企业&#xff0c;主要专注于集成电路的设计。这些企业通常包括集成电路、二极管、三极管和特殊电子元件等产品的设计和生产。IC设计企业在其运营和产品设计过程中&#xff0c;会涉及和产生多种文件&#xff0c;如&#xff1a; 项目需求文档&#xff1a;这是项目启动的基础…
阅读更多...
骨干高企瞪羚计划30万奖励！武汉市骨干高企瞪羚计划项目申报条件

骨干高企瞪羚计划30万奖励！武汉市骨干高企瞪羚计划项目申报条件

武汉市骨干高企瞪羚计划项目申报条件、奖励政策内容整理如下&#xff0c;武汉各区企业申报骨干高企瞪羚计划有不明白的可随时了解: 武汉市骨干高企瞪羚计划项目申报对象 &#xff08;一&#xff09;江岸区未上市高新技术企业&#xff0c;注册成立时间不超过10年。 &#xff08;…
阅读更多...
STM32HAL库-中断篇

STM32HAL库-中断篇

中断 中断简介 中断是一种事件处理机制&#xff0c;可以暂停主程序的运行&#xff0c;转而处理特定事件程序。 中断的作用和意义&#xff1a; 实时控制 在确定事件内对响应事件做出相应 故障处理 检测到故障需要第一时间处理 数据传输 如串口通信&#xff0c;不确定数…
阅读更多...
计算机网络5——应用层3万维网2

计算机网络5——应用层3万维网2

文章目录 一、万维网的文档1、超文本标记语言 HTML2、动态万维网文档3、活动万维网文档 二、万维网的信息检索系统1、全文检索搜索与分类目录搜索2、Google 搜索技术的特点 三、博客和微博1、博客2、微博 四、社交网站 一、万维网的文档 1、超文本标记语言 HTML 要使任何一台…
阅读更多...
初识C语言——第二十一天

初识C语言——第二十一天

猜数字小游戏的实现&#xff1a; 学会了之后可以自己制作彩票抽奖&#xff0c;哈哈&#xff01; 代码实现&#xff1a; #include <stdlib.h> #include <time.h>void menu()//无返回值函数 {printf("**************************\n");printf("****…
阅读更多...
C语言性能深度剖析：从底层优化到高级技巧及实战案例分析

C语言性能深度剖析：从底层优化到高级技巧及实战案例分析

C语言以其接近硬件的特性、卓越的性能和灵活性&#xff0c;在系统编程、嵌入式开发和高性能计算等领域中占据着举足轻重的地位。本文将深入探讨C语言性能优化的各个方面&#xff0c;包括底层原理、编译器优化、内存管理和高级编程技巧&#xff0c;并结合多个代码案例来具体分析…
阅读更多...
什么是趋肤效应

什么是趋肤效应

很多同行来问什么是趋肤效应&#xff0c;趋肤效应应该是附在表面&#xff0c;为什么变成了附在线路横截面的底面&#xff1f;下面就和小易&#xff0c;一起具体了解下趋肤效应。 趋肤效应也称集肤效应&#xff0c;英文术语是Skin effection,它是指在电流流过导体时&#xff0c;…
阅读更多...
vscode+clangd阅读Linux内核源码

vscode+clangd阅读Linux内核源码

1. 禁用或卸载官方C/C插件. 2. 安装clangd插件 3. 清除之前的产物 4. 生成.config文件 5.编译生成内核镜像 6.编译内核模块 7.编译设备树文件 8.生成compile_commands.json文件 运行上述命令后&#xff0c;在内核源码根目录生成了compile_commands.json文件 9.设置clangd插…
阅读更多...
分布式系统的一致性与共识算法(四)

分布式系统的一致性与共识算法(四)

Etcd与Raft算法 Raft保证读请求Linearizability的方法: 1.Leader把每次读请求作为一条日志记录&#xff0c;以日志复制的形式提交&#xff0c;并应用到状态机后&#xff0c;读取状态机中的数据返回(一次RTT、一次磁盘写)2.使用Leader Lease&#xff0c;保证整个集群只有一个L…
阅读更多...
超简约在线生成短网址源码带后台

超简约在线生成短网址源码带后台

基于 PHP、SQLite 进行开发&#xff0c;直接上传到服务器&#xff0c;安装一下就行 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89268253 更多资源下载&#xff1a;关注我。
阅读更多...
TensorFlow的学习

TensorFlow的学习

0.基础概念 术语表&#xff1a; https://developers.google.cn/machine-learning/glossary?hlzh-cn#logits 1.快速入门 https://tensorflow.google.cn/tutorials/quickstart/beginner?hlzh-cn 2.基于Keras进行图像分类 https://tensorflow.google.cn/tutorials/keras/cl…
阅读更多...
哈希表+DFS快速解决力扣129题：求根节点到叶节点数字之和

哈希表+DFS快速解决力扣129题：求根节点到叶节点数字之和

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…
阅读更多...
roscore启动报错的解决方法【将环境变量配置于最后】

roscore启动报错的解决方法【将环境变量配置于最后】

今天在启动rviz时发生一个很奇怪的报错&#xff1a; rviz: error while loading shared libraries: librviz.so: cannot open shared object file: No such file or directory 我感觉很纳闷&#xff01;再试着启动一下roscore&#xff0c;发现如下报错&#xff1a; [rosout-1…
阅读更多...
代码随想录——填充每个节点的下一个右侧节点指针 II（Leetcode117）

代码随想录——填充每个节点的下一个右侧节点指针 II（Leetcode117）

题目链接 层序遍历 /* // Definition for a Node. class Node {public int val;public Node left;public Node right;public Node next;public Node() {}public Node(int _val) {val _val;}public Node(int _val, Node _left, Node _right, Node _next) {val _val;left _l…
阅读更多...
白话机器学习7：五种降维方法的原理即Python代码实现

白话机器学习7：五种降维方法的原理即Python代码实现

一、主成分分析法&#xff08;PCA&#xff09; PCA是一种常用的线性降维技术&#xff0c;它可以将高维数据投影到低维空间&#xff0c;同时保留数据中的主要变异方向。 你可以选择保留的主成分数量&#xff0c;这取决于你的具体应用和数据集。通常&#xff0c;你可以通…
阅读更多...
flutter开发实战-JSON和序列化数据

flutter开发实战-JSON和序列化数据

flutter开发实战-JSON和序列化数据 大多数移动应用都需要与 web 服务器通信&#xff0c;同时在某些时候轻松地存储结构化数据。当创造需要网络连接的应用时&#xff0c;它迟早需要处理一些常见的 JSON。使用Json时候&#xff0c;可以使用json_serializable 一、引入json_anno…
阅读更多...
安泰ATA-7015高压放大器在材料极化中的应用研究

安泰ATA-7015高压放大器在材料极化中的应用研究

材料极化是材料科学中一个重要的研究领域&#xff0c;它涉及到材料内部电荷和极化性质的调控和分析。高压放大器在材料极化研究中起着至关重要的作用&#xff0c;通过提供高压力和高电场条件&#xff0c;研究人员可以深入探讨材料的电子结构、相变行为以及许多其他关键性质。 材…
阅读更多...
最新文章

Copyright @ 2022~2023