一、Element UI

1、Element UI概述

Element UI 是一款基于Vue.js的前端UI组件库，拥有丰富的基础组件和高级组件，提供了易于使用和美观的用户界面。

已经设计好了，拿过来就可以直接用。

Element UI的官方网站为：https://element.eleme.cn/#/zh-CN

Element UI

使用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>
最后修改：2023 年 08 月 30 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏