利用HTML、css以及vue，完成点餐页面

最新推荐文章于 2024-06-06 21:31:39 发布

正在努力加载...

最新推荐文章于 2024-06-06 21:31:39 发布

阅读量2.6k

点赞数 6

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_63489869/article/details/125462948

版权

利用HTML、css完成点餐页面的布局，以及通过vue组件化完成点餐页面相关功能的实现。

1、将页面划分成四个大的<div></div>，利用HTML和css把布局实现。

2、实现商品的展示，点击相关属性时，将对应的属性列表展现出来。

3、实现商品的增加、删除、商品数量的增加、总数量以及总金额等相关功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2679744_wr07lddqqp.css">
    <script src="js/vue221.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        
        #app {
            height: 100%;
        }
        
        li {
            list-style: none;
        }
        
        .leftnav {
            width: 5%;
            background-color: #1DBce0;
            height: 100%;
            float: left;
        }
        
        .leftnav li {
            width: 100%;
            height: 65px;
            text-align: center;
            line-height: 65px;
            border-bottom: 1px solid white;
            color: white;
        }
        
        .order {
            width: 30%;
            float: left;
            position: relative;
        }
        
        .order .order-nav {
            border-bottom: 1px solid black;
            overflow: hidden;
            /*  浮动的隐藏 */
        }
        
        .order-nav li {
            width: 60px;
            height: 42px;
            float: left;
            text-align: center;
            line-height: 42px;
        }
        
        .order-nav .active {
            color: #1DBce0;
        }
        
        .order .border {
            width: 60px;
            height: 3px;
            background-color: #1DBce0;
            position: absolute;
            top: 39px;
            transition: left 0.5s;
            /*过渡动画*/
        }
        
        .oftergoods,
        .typegoods {
            width: 65%;
            float: right;
        }
        
        .oftergoods {
            overflow: hidden;
        }
        
        .oftergoods h3 {
            height: 42px;
            border-bottom: 1px solid black;
            line-height: 42px;
        }
        
        .oftergoods