栗田工业大连有效公司网站哪年做的,西安北郊做网站的公司,wordpress怎么修改抬头,华为十大外包公司排名目录
一、创建登录页面
二、构建好登陆页面的路由
三、编写登录页代码
1.添加基础结构
2.给登录页添加背景
3.解决填充不满问题
4.我们把背景的红颜色替换成背景图#xff1a;
5.在页面中央添加一个卡片来显示登录页面
6.设置中间卡片页面的左侧
7.设置右侧的样式及…目录
一、创建登录页面
二、构建好登陆页面的路由
三、编写登录页代码
1.添加基础结构
2.给登录页添加背景
3.解决填充不满问题
4.我们把背景的红颜色替换成背景图
5.在页面中央添加一个卡片来显示登录页面
6.设置中间卡片页面的左侧
7.设置右侧的样式及数据
8.最后效果如下
9.登录页面的总代码如下 写在前面 登录页Login.Vue的代码会在文章最后给出其他代码须看文章图片修改。 一、创建登录页面
views文件是管理页面组件的文件夹再此文件夹上右击新建文件命名为Login.Vue,如下两图 小知识点补充 组件分为两种页面组件 和 功能组件。 1.页面组件 用来构建独立页面的组件保存在 views 目录中页面组件中可以包含多个功能组件。 2.功能组件 我们可以将页面中一些独立的小功能制作成组件这些组件可以被页面组件引入使用比如翻页、时间插件等功能组件保存在 components 目录中这些组件不能独立显示只能被包含在一个页面组件中使用。 页面组件和功能组件的关系每个页面就是一个页面组件每个页面中可以包含多个功能组件 二、构建好登陆页面的路由
把原先的路由删掉最后App.vue的script块和template块写成如下这样 接着去①管理路由的main.js文件下改路由路径, ②把原来的路径注释掉增加登录页的注释 ③把根路由添加为登录页三步对应如下图中三步 三、编写登录页代码
1.添加基础结构
打开登录页组件Login.vue,添加好vue3组件文件模板如下
template/template
script setup/script
style /style相关知识 template定义组件的HTML结构。你可以在这里编写你的HTML代码它将决定组件的渲染内容。 script setup 编写组件的 JavaScript 逻辑其中setup可以简化代码是vue3独有他使js的变量和方法直接暴露给模板template使用不用再单独return出去。 style定义组件的样式。你可以在这里编写CSS代码来定义组件的外观。如果你希望样式只作用于当前组件可以添加scoped属性例如style scoped。 2.给登录页添加背景
通过编写css样式以及html如下 发现填充不满整个屏幕如下 3.解决填充不满问题
肯定是创建文件后他给vue模板样式定义的填充范围限制了我们去改一下 发现系统的css样式都在main.css中写了我们找都这个文件在assets文件中修改main,js的地方如左下图另外我们还要修改base.css文件(这张图片的地方是改后的)如右下图 可以看到从上往下数这三处我们填充不满因为现在网页使grid网格布局我们改成flex弹性布局就可以了改好后的main.css的代码如下
import ./base.css;#app {/* max-width: 1280px; */margin: 0 auto;font-weight: normal;
}a,
.green {text-decoration: none;color: hsla(160, 100%, 37%, 1);transition: 0.4s;padding: 3px;
}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: flex;}
}4.我们把背景的红颜色替换成背景图 发现成功 5.在页面中央添加一个卡片来显示登录页面
在main.js中添加如下样式下左图用来设置用了该样式后那个布局其内部的子元素排列方式编写登陆页面的卡片位置下右图这个其实是给父容器最外侧的div设置水平和垂直居中父容器控制子容器的排列方式所以子容器是水平和垂直居中的 效果 6.设置中间卡片页面的左侧 设置其子元素排列为垂直排列背景为渐变 从左上角到右下角线性渐变两个渐变色为#88d1ea#d7c1bb代码为background:linear-gradient(to right bottom,#88d1ea 5%,#d7c1bb 100% )如下图 想设置不透明度就得用rgba格式写颜色,其中a代表不透明度他的值为0到1. 所以代码修改为background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% )
最后样式为下面
.login-form .left{width: 50%;height: 100%;align-items: left;justify-content: center;font-size: 1.6rem;font-weight: bold;background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% );color: #fff;text-indent:1rem;
}
左侧的内容如下
div classlogin-form dis-hdiv classdis-v leftspan 欢迎~ /spanspan 智慧农业物联网 /span/div /div
效果如下 7.设置右侧的样式及数据
样式如下
.login-form .right{width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.90);align-items: center;justify-content: center;
}
.login-form .username,.pwd,.btn{padding: 0.5rem 0; }
模板代码编写在template标签中如下
div classdis-v rightdiv classusername dis-hel-input placeholder请输入用户名 prefix-iconUser //divdiv classpwd dis-hel-input placeholder请输入密码 prefix-iconLock //divdiv classbtn dis-hel-button sizelarge stylewidth:220px;background-color:#626aef;color:#fff font-weight:bold; 登录/el-button/div/div /div
8.最后效果如下 9.登录页面的总代码如下
templatediv classlogin-container dis-hdiv classlogin-form dis-hdiv classdis-v leftspan 欢迎~ /spanspan 智慧农业物联网 /span/divdiv classdis-v rightdiv classusername dis-hel-input placeholder请输入用户名 prefix-iconUser //divdiv classpwd dis-hel-input placeholder请输入密码 prefix-iconLock //divdiv classbtn dis-hel-button sizelarge stylewidth:220px;background-color:#626aef;color:#fff font-weight:bold; 登录/el-button/div/div /div/div
/template
script setupimport { User,Lock } from element-plus/icons-vue
/script
style
.login-container{width: 100vw;height: 100vh;background-image: url(../assets/bg.png);background-size: 100%;align-items: center;justify-content: center;
}
.login-form{width: 600px;height: 300px;/* background-color: red; */}
.login-form .left{width: 50%;height: 100%;align-items: left;justify-content: center;font-size: 1.6rem;font-weight: bold;background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% );color: #fff;text-indent:1rem;
}
.login-form .right{width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.90);align-items: center;justify-content: center;
}
.login-form .username,.pwd,.btn{padding: 0.5rem 0; }
/style结束~
这篇文章只是页面简单的编写逻辑还没写下一篇文章更新哦~
