一、Element UI
1、Element UI概述
Element UI 是一款基于Vue.js的前端UI组件库,拥有丰富的基础组件和高级组件,提供了易于使用和美观的用户界面。
已经设计好了,拿过来就可以直接用。
Element UI的官方网站为:https://element.eleme.cn/#/zh-CN
使用Element UI
- CSS样式文件:Element UI 的 CSS 文件包含了所有组件的样式
- Vue的JS文件:Element UI基于Vue开发,需要引入相应版本的vue.js文件
- JS 部分:Element UI 的 JS 文件包含了组件的逻辑和交互行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element UI</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<!-- 定义一个按钮 -->
<el-button type="primary" @click="hello()">点击一下</el-button>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app",
data: {},
methods: {
hello() {
alert("Hello Element UI --SmallG")
}
}
});
</script>
</body>
</html>
2、布局和容器组件
(1)Layout布局
el-row 是行容器,它的作用是用来组织和包含 el-col ,在 el-row 中可以通过gutter 属性可以设置栅格之间的空白距离。
el-col是列容器,它用来组织内容的布局。el-col的宽度可以通过给 :span属性设置一个值来调节。
:span属性的值表示当前 el-col 占据整个行(el-row)的宽度的份数,行的宽度被分为 24 份,默认 :span 为 24,则此时整个 el-col 的宽度为整个行的宽度。如果设置 :span="12",则表示此 el-col 占据整个行的 1/2 宽度。
el-col 还支持设置行偏移 offset 属性,列偏移 push 属性和 pull 属性,可以让内容自由组合到任意位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
.c1 {
border: 1px solid red;
border-radius: 5px;
height: 30px;
}
</style>
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<!-- 定义了一行 -->
<el-row>
<!-- el-col表示列 :span表示一列占用多少份,默认一行共24分 -->
<el-col :span="12"><div class="c1"></div></el-col>
<el-col :span="12"><div class="c1"></div></el-col>
</el-row>
<h1>1:1:1</h1>
<el-row>
<el-col :span="8"> <div class="c1"></div></el-col>
<el-col :span="8"> <div class="c1"></div></el-col>
<el-col :span="8"> <div class="c1"></div></el-col>
</el-row>
<h1>1:2:3</h1>
<el-row>
<el-col :span="4"> <div class="c1"></div></el-col>
<el-col :span="8"> <div class="c1"></div></el-col>
<el-col :span="12"> <div class="c1"></div></el-col>
</el-row>
<h1>1:3:1:1</h1>
<!-- 设置列与列之间的间隔 gutter="20" -->
<el-row style="width: 1200px; margin: 0 auto" gutter="20">
<el-col :span="4"><div class="c1"></div></el-col>
<el-col :span="12"><div class="c1"></div></el-col>
<el-col :span="4"><div class="c1"></div></el-col>
<el-col :span="4"><div class="c1"></div></el-col>
</el-row>
<h1>分栏偏移量</h1>
<el-row>
<!-- offset向右偏移几份 -->
<el-col :span="20" offset="4"><div class="c1"></div></el-col>
</el-row>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app",
})
</script>
</body>
</html>
(2)Container 布局容器
- el-header组件:一般用于放置导航栏、LOGO、搜索框等网页顶部的内容
- el-aside组件:一般用于放置侧边栏、菜单栏、分类栏等网页左侧或右侧的内容
- el-main组件:用于放置网页的主体内容,占据容器的主要部分
- el-footer组件:一般用于放置版权信息、联系方式等网页底部的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局容器</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
.el-header {
background-color: #0aa1ed;
}
.el-main {
background-color: red;
height: 300px;
}
.el-footer {
background-color:greenyellow;
}
.el-aside{
background-color: #00ffe1;
}
</style>
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<h1>上中下</h1>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<h1>左右</h1>
<el-container>
<el-aside width="400px">Left</el-aside>
<el-main>Main</el-main>
</el-container>
<h1>上下(左右(上下))</h1>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside>Left</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app",
});
</script>
</body>
</html>
效果展示:
(3)卡片
Element UI 中的卡片组件提供了以下主要特性:
1、包含 header、body、footer 三个插槽,方便自定义布局和样式
2、支持图片、文字、链接等丰富的内容类型展示
3、支持阴影和圆角效果,增强视觉效果
4、支持简单卡片和带border的卡片风格选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<div style="width: 200px; height: 200px">
<el-card>
<h1>这是卡片</h1>
</el-card>
</div>
<el-row gutter="10">
<el-col :span="4" v-for="i in 6">
<el-card>卡片{{i}}</el-card>
</el-col>
</el-row>
<h1>商品列表</h1>
<el-row gutter="20">
<el-col :span="6" v-for="product in arr">
<el-card>
<img :src="product.url" width="100%" :alt="product.title">
<p>{{product.title}}</p>
<p>
<span>价格:{{product.price}}</span>
<span style="float: right">销量:{{product.saleCount}}</span>
</p>
</el-card>
</el-col>
</el-row>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app",
data: {
arr: [
{url: "imgs/a.jpg", title: "牛仔裤", price: 500, saleCount: 25},
{url: "imgs/b.jpg", title: "白色卫衣", price: 200, saleCount: 18},
{url: "imgs/c.jpg", title: "灰色运动裤", price: 300, saleCount: 30},
{url: "imgs/d.jpg", title: "黑色帽衫", price: 100, saleCount: 133}
]
}
});
</script>
</body>
</html>
效果展示:
3、常用组件
(1)按钮组件
- type:按钮类型,包括primary, success, warning, danger等,默认为default
- size:按钮大小,包括medium, small, mini,默认为medium
- icon:按钮图标,可以使用element-ui中的icon名称或自定义图标class
- plain:是否是朴素按钮,朴素按钮背景透明
- round:是否是圆角按钮
- circle:是否是圆形按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app"
});
</script>
</body>
</html>
(2)消息提示
Element UI中的消息提示组件是el-message,可以在用户操作后给出即时反馈信息,是一种常用的交互方式。它具有以下的特点:
- 位置自适应:可自动根据需要调整消息提示框的位置
- 样式众多:有多个预置的类型,包括 success(成功提示)、warning(警告提示)、info(消息提示)、error(错误提示)
- 延迟关闭:可自定义消息提示框显示时长及是否延迟关闭
$message 还支持一些可选参数:
- duration,表示提示框显示的时间,默认为3000毫秒
- showClose,表示是否显示关闭按钮,默认为false
- center,表示是否居中显示,默认为false
- dangerouslyUseHTMLString,表示 message 属性是否为一段 HTML 代码,默认为false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消息提示</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-button plain @click="fun1()">消息</el-button>
<el-button plain @click="fun2()">成功</el-button>
<el-button plain @click="fun3()">警告</el-button>
<el-button plain @click="fun4()">错误</el-button>
</el-row>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app",
methods: {
fun1() {
v.$message("这是一个普通的消息");
},
fun2() {
v.$message({
message: "恭喜,操作成功!",
type: "success", //表示成功的消息框
center: true, //信息内容居中
showClose: true //显示关闭按钮
});
},
fun3() {
v.$message({
message: "注意,发出警告",
type: "warning",
center: true,
duration: 5000, //自动关闭时间 默认是3000毫秒
showClose: true
});
},
fun4() {
v.$message({
message: "错误,操作失败",
type: "error",
center: true,
showClose: true
});
}
}
});
</script>
</body>
</html>
效果展示:
(3)表单
el-form是Element UI中的表单组件,用于创建包含验证和布局的表单。表单域(input)中可以放置各种类型的表单控件,包括el-input、el-select、el-checkbox、el-radio、el-switch、el-datepicker、el-timepicker。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app" style="width: 700px">
<el-form label-width="80px" :model="form">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select placeholder="请选择活动区域" v-model="form.location">
<el-option label="北京" value="Beijing"></el-option>
<el-option label="上海" value="Shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
</el-col>
<el-col :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.time"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<br>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.disc"></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>
<script type="text/javascript">
let v = new Vue({
el: "#app",
data: {
form: {
name: "",
location: "",
date: "",
time: "",
delivery: false,
type: [],
resource: "",
desc: ""
}
},
methods: {
onsubmit() {
v.$message({
message: "恭喜,操作成功!",
type: "success", //表示成功的消息框
center: true, //信息内容居中
showClose: true //显示关闭按钮
});
}
}
});
</script>
</body>
</html>
(4)表格
el-table 是 Element UI 中的表格组件,可以用于展示、编辑和排序数据。
el-table-column 是作为 el-table 的子组件而存在的,用于定义表格中的列。
el-table-column 常用的属性包括:
- label: 表示列显示的名称
- prop: 表示列所对应的属性名称
- width: 表示列的宽度
- min-width: 表示列的最小宽度
- sortable: 表示该列的数据是否可排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<!-- :default-sort="{prop:'date',order:'ascending'}" 默认按照日期的升序进行排列 -->
<el-table :data="tableData" width="100%" :default-sort="{prop:'date',order:'ascending'}">
<!-- sortable支持排序 -->
<el-table-column label="日期" width="140" prop="date" sortable></el-table-column>
<el-table-column label="姓名" width="120" prop="name" sortable></el-table-column>
<el-table-column label="地址" width="400" prop="address" sortable></el-table-column>
</el-table>
<h1>商品列表</h1>
<el-table :data="arr" width="500px">
<el-table-column label="编号" type="index"></el-table-column>
<el-table-column label="商品标题" prop="title" width="100px"></el-table-column>
<el-table-column label="商品价格" prop="price" width="100px"></el-table-column>
<el-table-column label="操作">
<!-- 相当于一行的数据 -->
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script type="text/javascript">
let v = new Vue({
el: "#app",
data: {
tableData: [
{date: '2016-05-01', name: "王小虎", address: "上海市普陀区金沙江路1517弄"},
{date: '2016-05-02', name: "王小虎", address: "上海市普陀区金沙江路1516弄"},
{date: '2016-05-03', name: "王小虎", address: "上海市普陀区金沙江路1518弄"},
{date: '2016-05-04', name: "王小虎", address: "上海市普陀区金沙江路1519弄"},
],
arr: [
{title: "李宁篮球鞋", price: 500},
{title: "华为手机", price: 8000},
{title: "小米电视", price: 3500},
]
},
methods: {
del(i, product) {
v.arr.splice(i,1);
v.$message({
message:"删除了:"+product.title,
type:"success",
center:true
})
}
}
});
</script>
</body>
</html>
二、综合案例
实现头部导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0;
}
.nav-menu {
border-bottom: 3px solid #0aa1ed;
}
.nav-menu img{
vertical-align: middle;
height: 97px;
}
.nav-menu a{
color: #666;
text-decoration: none;
}
.active{
color: #0aa1ed !important;
}
.nav-menu-bar{
width: 1200px;
margin: 0 auto;
}
</style>
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header class="nav-menu" height="100px">
<div class="nav-menu-bar">
<img src="imgs/logo.png" alt="酷鲨商城"/>
<a href="" class="active">商城首页</a>
<el-divider direction="vertical"></el-divider>
<a href="">热点资讯</a>
<el-divider direction="vertical"></el-divider>
<a href="">商家入驻</a>
<el-divider direction="vertical"></el-divider>
<a href="">社会招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">校园招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">招采平台</a>
<el-divider direction="vertical"></el-divider>
<a href="">商家入驻</a>
<el-divider direction="vertical"></el-divider>
<a href="">举报平台</a>
<el-divider direction="vertical"></el-divider>
<a href="">快递查询</a>
<el-divider direction="vertical"></el-divider>
<a href="">帮助中心</a>
</div>
</el-header>
</el-container>
</div>
<script src="data.js"></script>
</body>
</html>
实现商品分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0;
}
.nav-menu {
border-bottom: 3px solid #0aa1ed;
}
.nav-menu img {
vertical-align: middle;
height: 97px;
}
.nav-menu a {
color: #666;
text-decoration: none;
}
.active {
color: #0aa1ed !important;
}
.nav-menu-bar {
width: 1200px;
margin: 0 auto;
}
.category {
background-color: #0aa1ed;
}
.category .el-menu {
width: 1200px;
margin: 0 auto;
}
.category .search-box{
float: right;
position: relative;
top: 10px;
left: -22px;
}
</style>
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header class="nav-menu" height="100px">
<div class="nav-menu-bar">
<img src="imgs/logo.png" alt="酷鲨商城"/>
<a href="" class="active">商城首页</a>
<el-divider direction="vertical"></el-divider>
<a href="">热点资讯</a>
<el-divider direction="vertical"></el-divider>
<a href="">商家入驻</a>
<el-divider direction="vertical"></el-divider>
<a href="">社会招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">校园招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">招采平台</a>
<el-divider direction="vertical"></el-divider>
<a href="">商家入驻</a>
<el-divider direction="vertical"></el-divider>
<a href="">举报平台</a>
<el-divider direction="vertical"></el-divider>
<a href="">快递查询</a>
<el-divider direction="vertical"></el-divider>
<a href="">帮助中心</a>
</div>
</el-header>
<el-header class="category" height="60px">
<el-menu background-color="#0AA1ED" text-color="#FFF" mode="horizontal">
<el-menu-item v-for="category in categories" :key="category.id" :index="category.id">{{category.name}}
</el-menu-item>
<div class="search-box">
<el-input placeholder="请输入搜索内容">
<el-button icon="el-icon-search" slot="append"></el-button>
</el-input>
</div>
</el-menu>
</el-header>
</el-container>
</div>
<script src="data.js"></script>
</script>
</body>
</html>
实现轮播图和排行榜
<el-main>
<el-row gutter="20">
<el-col :span="18">
<!-- 轮播图开始 -->
<el-carousel height="300px">
<el-carousel-item v-for="banner in banners">
<img :src="banner.image" width="100%" height="100%">
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="6">
<el-card class="top-sales">
<h3>
<i class="el-icon-medal"></i>销量最高
</h3>
<el-table :data="topSales" height="220px">
<el-table-column type="index" label="排名"></el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="sales" label="销量"></el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-main>
实现商品列表
<!--商品列表-->
<el-row gutter="20">
<el-col :span="6" v-for="product in products">
<el-card class="product">
<img :src="product.image" width="100%" height="233px">
<h4>{{product.title}}</h4>
<p style="font-size: 12px">
<b>¥{{product.discount}}</b>
<s>{{product.price}}</s>
<span>销量:{{product.sales}}</span>
</p>
</el-card>
</el-col>
</el-row>
.product{
margin-top: 20px;
}
.product h4{
font-size: 14px;
margin: 0;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.product span{
float: right;
}
.product b{
color: #f40;
font-size: 16px;
}
实现版权信息
.el-footer{
padding: 0;
}
.el-footer .top-border{
background-image: url("imgs/wave.png");
height: 90px;
}
.el-footer .footer-text{
font-size: 14px;
background-color: #3f3f3f;
text-align: center;
color: #b1b1b1;
padding: 20px 0;
}
<el-footer>
<div class="top-border"></div>
<div class="footer-text">
<p>{{copyright.lineOne}}</p>
<p>{{copyright.lineTwo}}</p>
</div>
</el-footer>
三、练习
1 开发热点资讯页面
基于VUE和Element UI实现酷鲨商城的热点资讯页面。
提示:
1、页头和页脚部分可以复用课堂案例index.html中的内容。
2、需要导入新的imgs文件夹和data.js文件。
页面效果如下图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>酷鲨商城</title>
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0;
}
.nav-menu {
border-bottom: 3px solid #0aa1ed;
}
.nav-menu img {
vertical-align: middle;
height: 97px;
}
.nav-menu a {
color: #666;
text-decoration: none;
}
.active {
color: #0aa1ed !important;
}
.nav-menu-bar {
width: 1200px;
margin: 0 auto;
}
.el-main {
text-align: center;
}
.nav-main {
width: 1200px;
margin: 0 auto;
}
.main {
margin-top: -1.4vw;
}
.nav-main img {
width: 1200px;
}
.new-list {
width: 1200px;
margin: 0 auto;
}
.news-subject {
font-weight: lighter;
}
.news-date {
color: #b1b1b1;
}
.new-lists p {
margin-top: 20px;
}
.el-footer{
padding: 0;
width: 100%;
}
.first-footer{
background-image: url("imgs/wave.png");
background-size: cover;
height: 90px;
width: 100%;
}
.footer{
font-size: 14px;
color: #b1b1b1;
text-align: center;
background-color: #3f3f3f;
overflow: hidden;
}
.footer p{
margin-top: 20px;
margin-bottom: 20px;
}
</style>
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header class="nav-menu" height="100px">
<div class="nav-menu-bar">
<img src="imgs/logo.png" alt="酷鲨商城"/>
<a href="" class="active">商城首页</a>
<el-divider direction="vertical"></el-divider>
<a href="">热点资讯</a>
<el-divider direction="vertical"></el-divider>
<a href="">商家入驻</a>
<el-divider direction="vertical"></el-divider>
<a href="">社会招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">校园招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">招采平台</a>
<el-divider direction="vertical"></el-divider>
<a href="">商家入驻</a>
<el-divider direction="vertical"></el-divider>
<a href="">举报平台</a>
<el-divider direction="vertical"></el-divider>
<a href="">快递查询</a>
<el-divider direction="vertical"></el-divider>
<a href="">帮助中心</a>
</div>
</el-header>
<el-main class="main">
<div class="nav-main">
<img src="imgs/news_banner.jpeg">
</div>
<div></div>
</el-main>
<el-mian>
<div class="new-list">
<el-card class="card-list" v-for="row in news">
<el-row gutter="20">
<el-col :span="7">
<el-image class="list-img" :src="row.image"></el-image>
</el-col>
<el-col class="new-lists" :span="17">
<h3 class="news-title">{{row.title}}</h3>
<p class="news-subject">{{row.subject}}</p>
<p class="news-date">日期: {{row.date}}</p>
</el-col>
</el-row>
</el-card>
</div>
</el-mian>
</el-container>
<el-footer>
<div class="first-footer"></div>
<div class="footer">
<p>{{copyright.lineOne}}</p>
<p>{{copyright.lineTwo}}</p>
</div>
</el-footer>
</div>
<script src="data.js"></script>
</body>
</html>