一 登录
![](https://img-blog.csdnimg.cn/img_convert/755c93db1ec9e3d13819ac31cede9afc.png)
1 背景
<div class="box"></div>
.box{
height: 100%;
background: url('~@/assets/images/login.jpg') no-repeat center;
background-size: cover;
}
2
fom 和第一行 都水平居中, 看成一个整体, 进行居中
水平居中,要设置一个宽度
第一行 对里边的图片文字居中,用text-align
![](https://img-blog.csdnimg.cn/img_convert/c503101cc51b19d4e3982be6bb2aaa77.png)
代码:
<template>
<div class="box">
<div class="login">
<div class="header">
<img
src="http://fes.qyerstatic.com/fe_ssr_passport/41bd0a522fbeb024a41208a408ca73ec.png"
alt=""
/>
<span>登录</span>
</div>
<div class="login-content">
<div class="left">
<el-form ref="form" :model="form" label-width="40px">
<el-form-item label="账号">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
<div class="titile">输入任意的账号admin和密码123才可以登录</div>
</div>
<div class="right">
<img src="@/assets/images/login-img.jpg" alt="" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'lLgoin',
data () {
return {
form: {
username: 'admin',
password: '123'
}
}
}
}
</script>
<style scoped lang="less">
.box {
height: 100%;
background: url('~@/assets/images/login.jpg') no-repeat center;
background-size: cover;
.login {
width: 650px;
margin: 0 auto;
.header {
text-align: center;
padding: 60px 0;
img {
height: 46px;
}
span {
font-size: 24px;
color: #fff;
}
}
.login-content {
width: 650px;
background-color: #fff;
display: flex;
.left {
flex: 1;
padding: 60px 20px 0px 20px;
.titile {
font-size: 12px;
color: #999;
padding-left: 40px;
}
}
.right {
width: 270px;
img {
width: 100%;
object-fit: contain;
}
}
}
}
}
</style>
二 设置头部
![](https://img-blog.csdnimg.cn/img_convert/801af9f862480127bb26af4e91931186.png)
使用了el-enmu 对他进行样式调整
![](https://img-blog.csdnimg.cn/img_convert/83814495eccd75a5da8e25eb8e268d18.png)
三 编写搜索框
![](https://img-blog.csdnimg.cn/img_convert/57e2847d3a996fe3701b8dab08f52f39.png)
1div里边 input, button
div 设置宽(内容撑开), 背景绿色, 添加padding撑开
input 设置宽 float
button 设置宽 高
2 定位,相对于父盒子, 轮播图肯定不能算是父盒子,所以再套用一个盒子进行定位
![](https://img-blog.csdnimg.cn/img_convert/bc12df8da0a3b4f75df9bc7d965cc264.png)
3.1
![](https://img-blog.csdnimg.cn/img_convert/ca889e62803f9d65e321bbca08e7f759.png)
![](https://img-blog.csdnimg.cn/img_convert/df8dbb11ff70359c1496aa4be23bef84.png)
3.2
![](https://img-blog.csdnimg.cn/img_convert/13462a9fccfdede15f61f6838a750237.png)
![](https://img-blog.csdnimg.cn/img_convert/3866a8e143194759072507ba8c27ff42.png)
四 两个图片
![](https://img-blog.csdnimg.cn/img_convert/e116a68f6535772f8fc13504baa35190.png)
父盒子 : 添加padding, 设置宽,不设置高(用内容撑开)
图片: 添加一个width (自动缩小成这样)
![](https://img-blog.csdnimg.cn/img_convert/d1210e6b67350f4dee0e93f38143f95d.png)
五:今日推荐
![](https://img-blog.csdnimg.cn/img_convert/5803cb1368e515cc8d0360a9a01544fe.png)
5.1 头部
1文字居中对齐, logo 用绝对定位
2 logo的图片用伪类选择器
3 设置line-height 注意不用padding, 用padding一定要加box-size
![](https://img-blog.csdnimg.cn/img_convert/4a74cd92cea5f453b74df2076271dffa.png)
代码:
![](https://img-blog.csdnimg.cn/img_convert/fe2267bbd6e51bd4b093ea2e2c5c4668.png)
5.2今日推荐列表
![](https://img-blog.csdnimg.cn/img_convert/71c6b1a4a5374178f9d43072d0a7a1a3.png)
1水平方向可以用el-row(:gutter:20), el-col(span:6)来设置
每一个item的下边边距,添加margin-bottom
每一个用div包裹,而不是li
2 文字只显示两行
设置一个高,其他都隐藏
p {
height: 43px;
font-size: 16px;
overflow: hidden;
margin-bottom: 10px;
}
![](https://img-blog.csdnimg.cn/img_convert/60a1169837723208b616fe4c60665226.png)
6穷游商城
![](https://img-blog.csdnimg.cn/img_convert/8c076acf6a806f2eda35cc4f9a37f0ae.png)
6.1 头部
1 文字直接水平居中对齐
2 a标签【绝对定位】到右边
3 a里边有图标,可以设置背景
a {
position: absolute;
right: 0px;
bottom: 20px;
font-size: 14px;
background: url(https://fes.qyerstatic.com/Fv2FsRrsqF3KeHTCW1iUvxLxakBC)
no-repeat;
padding-left: 20px;
}
![](https://img-blog.csdnimg.cn/img_convert/eb374ae8e0d32df5a40113e0ed276842.png)
6.2 列表
1 先布局, 对li进行flex布局:space-between , 注意不用设置margin-right
2 标题显示两行, 超出部分省略
line-height: 26px;
max-height: 52px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
2 图片和有部分,在父文本上添加flex:1
![](https://img-blog.csdnimg.cn/img_convert/440b601b872f34b61e37c5ed4eaebabf.png)
6.3 查看更多
使行内元素居中对齐, 给他再套个盒子,text-align:center
![](https://img-blog.csdnimg.cn/img_convert/74f3624bba363b5f4f4e411d46256b60.png)
7 热门游记
![](https://img-blog.csdnimg.cn/img_convert/67a28fa9a77ee075c0b6dbdb99e1d57b.png)
![](https://img-blog.csdnimg.cn/img_convert/5037b558d1fc5147020d3ed159bd5082.png)
轮播图:
![](https://img-blog.csdnimg.cn/img_convert/48459bebe3aac03aed2fa51907052dd8.png)
有多少el-carousel-item 就有多少个轮播页面
8 Fotter
![](https://img-blog.csdnimg.cn/img_convert/2337cb8a3fe31e53dac73cf6f5f6f991.png)
8,1
![](https://img-blog.csdnimg.cn/img_convert/c06204b7217d73efddc2569391dcf4c5.png)
vue项目介绍: