software_engineering
/
menu.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu</title>
    <link rel="stylesheet" href="./fonts/font_vqnrr49p89/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/menu.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<style>
    body {
        background-image: url(./img/home-img/112.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .box1 {
        width: 90%;
        margin: 5%;
        margin-bottom: 0;
        margin-top: 3%;
        border-radius: 15px;
    }

    .box1 img {
        width: 100%;
        height: 100%;
    }

    .box2 {
        width: 100%;
        background-color: #fff;
        margin-top: 3%;
        margin-bottom: 3%;
        padding: 2%;
        padding-right: 0;
        padding-left: 0;
        border-radius: 5px;
        display: flex;
        flex-wrap: wrap;
    }

    .box2-1 {
        padding-top: 2%;
        padding-right: 2%;
        padding-left: 2%;
        width: 5%;
        height: 5%;
    }

    .box2-1 img {
        width: 100%;
        height: 100%;
    }

    .box2-2 {
        width: 55%;
    }

    .box2-2 h1 {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .box2-2 p {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .box2-3 {
        width: 30%;
    }

    .box2-3 img {
        width: 100%;
        height: 100%;
    }
    .login-1{
    position: absolute;
    right: 15px;
    bottom: 8px;
    padding: 2px 2px 2px 2px;
    z-index: 100;
  }
  .p1{
      font-style: oblique;
      color: #999;
      padding-bottom: 10px;
  }
</style>

<body>

        <div class="box2">
            <div class="box2-1"><img src="./img/menu-img/zuobiao.png"></div>
            <div class="box2-2">
                <h1>大连软件园食堂一楼</h1>
                <p>据您927m</p>
            </div>

        </div>
    </div>

<div class="main">
    <div class="comList">
        <div class="left-menu">
            <ul class="menuList">
                <li class="active"><a href="#item1">1号澡堂（男）</a></li>
                <li><a href="#item2">2号澡堂（男）</a></li>
                <li><a href="#item3">3号澡堂（男）</a></li>
                <li><a href="#item4">1号澡堂（女）</a></li>
                <li><a href="#item5">2号澡堂（女）</a></li>
                <li><a href="#item6">3号澡堂（女）</a></li>
            </ul>
        </div>
        <div class="con">
            <div class="right-con proList">
                <div class="item" id="item1">
                    <div class="menuTitle">
                        <div class="line"></div>
                        <div class="title">1号澡堂（男）</div>
                        <div class="line"></div>
                    </div>
                    <ul>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/personal-img/b1.png"  /></div>
                            <div class="menu-txt">
                                <h4>A区1——10号</h4>
                                <p class="list1">剩余3个位置</p>
                                <p class="list2">
                                    <b>￥5</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                           <div class="menu-img"><img src="./img/personal-img/b1.png"  /></div>
                            <div class="menu-txt">
                                <h4>A区11——20号</h4>
                                <p class="list1">剩余8个位置</p>
                                <p class="list2">
                                    <b>￥6</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                         <div class="menu-img"><img src="./img/personal-img/b1.png"  /></div>
                            <div class="menu-txt">
                                <h4>B区1——20号</h4>
                                <p class="list1">剩余11个位置</p>
                                <p class="list2">
                                    <b>￥5</b>
                                </p>
                            </div>
                        </li>
                </div>
                <div class="item" id="item2">
                    <div class="menuTitle">
                        <div class="line"></div>
                        <div class="title">2号澡堂（男）</div>
                        <div class="line"></div>
                    </div>
                    <ul>

                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                           <div class="menu-img"><img src="./img/personal-img/b1.png"  /></div>
                            <div class="menu-txt">
                                <h4>A区1——10号</h4>
                                <p class="list1">剩余1个位置</p>
                                <p class="list2">
                                    <b>￥5</b>
                                </p>A
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                        <div class="menu-img"><img src="./img/personal-img/b1.png"  /></div>
                            <div class="menu-txt">
                                <h4>A区11——20号</h4>
                                <p class="list1">剩余1个位置</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c2.png" /></div>
                            <div class="menu-txt">
                                <h4>陨石拿铁</h4>
                                <p class="list1">Brown Sugar BoBo Latte</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c3.png"/></div>
                            <div class="menu-txt">
                                <h4>拿铁</h4>
                                <p class="list1">Latte</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c4.png" /></div>
                            <div class="menu-txt">
                                <h4>香草拿铁</h4>
                                <p class="list1">Vanilla Latte</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c5.png" /></div>
                            <div class="menu-txt">
                                <h4>焦糖拿铁</h4>
                                <p class="list1">Caramel Latte</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c6.png"  /></div>
                            <div class="menu-txt">
                                <h4>榛果拿铁</h4>
                                <p class="list1">Hazelnut Latte</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <div class="p1"><p>黑咖系列</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c13.png"  /></div>
                            <div class="menu-txt">
                                <h4>标准美式</h4>
                                <p class="list1">Americano</p>
                                <p class="list2">
                                    <b>￥21</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c7.png" /></div>
                            <div class="menu-txt">
                                <h4>加浓美式</h4>
                                <p class="list1">Extra Americano</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c8.png"  /></div>
                            <div class="menu-txt">
                                <h4>焦糖标准美式</h4>
                                <p class="list1">Caramel Americano</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c9.png" /></div>
                            <div class="menu-txt">
                                <h4>焦糖加浓美式</h4>
                                <p class="list1">Caramel Extra Americano</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <div class="p1"><p>气泡家族</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c10.png" /></div>
                            <div class="menu-txt">
                                <h4>银河气泡美式</h4>
                                <p class="list1">Lemon Soda Americano</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c11.png" /></div>
                            <div class="menu-txt">
                                <h4>橘金气泡美式</h4>
                                <p class="list1">Mandarine Soda Americano</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/c12.png"  /></div>
                            <div class="menu-txt">
                                <h4>黑金气泡美式</h4>
                                <p class="list1">Black Gold Soda Americano</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <div class="p1"><p>经典奶咖</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/d1.png"  /></div>
                            <div class="menu-txt">
                                <h4>澳瑞白</h4>
                                <p class="list1">Flat White</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/d2.png" /></div>
                            <div class="menu-txt">
                                <h4>卡布奇诺</h4>
                                <p class="list1">Cappuccino</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/d3.png" /></div>
                            <div class="menu-txt">
                                <h4>焦糖玛奇朵</h4>
                                <p class="list1">Caramel Macchiato</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/d4.png"/></div>
                            <div class="menu-txt">
                                <h4>摩卡</h4>
                                <p class="list1">Mocha</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item" id="item3">
                    <div class="menuTitle">
                        <div class="line"></div>
                        <div class="title">小鹿茶精选</div>
                        <div class="line"></div>
                    </div>
                    <ul>
                        <div class="p1"><p>芝士茶系列</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/b2.png" width="55" height="55" /></div>
                            <div class="menu-txt">
                                <h4>桃桃芝士红宝石茶</h4>
                                <p class="list1">Peach Cheese Ruby Tea</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e1.png"  /></div>
                            <div class="menu-txt">
                                <h4>西柚芝士茉香茶</h4>
                                <p class="list1">Graperfruit Cheese Jasmine Tea</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e2.png" /></div>
                            <div class="menu-txt">
                                <h4>莓莓芝士茉香茶</h4>
                                <p class="list1">Strawberry Cheese Jasmine Tea</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e3.png"  /></div>
                            <div class="menu-txt">
                                <h4>芒芒芝士茉香茶</h4>
                                <p class="list1">Mango Cheese Jasmine Tea</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <div class="p1"><p>牛乳系列</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e4.png"  /></div>
                            <div class="menu-txt">
                                <h4>大红袍寒天牛乳茶</h4>
                                <p class="list1">Dahong Agar Jelly Milk Tea</p>
                                <p class="list2">
                                    <b>￥21</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e5.png"  /></div>
                            <div class="menu-txt">
                                <h4>红茶拿铁</h4>
                                <p class="list1">Black Tea Latte</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e6.png"  /></div>
                            <div class="menu-txt">
                                <h4>抹茶拿铁</h4>
                                <p class="list1">Matcha Latte</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <div class="p1"><p>水果茶系列</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e7.png"  /></div>
                            <div class="menu-txt">
                                <h4>活力派对柠檬绿茶</h4>
                                <p class="list1">Lemon Green Tea</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e8.png" /></div>
                            <div class="menu-txt">
                                <h4>活力柠檬红宝石茶</h4>
                                <p class="list1">Lemon Ruby Tea</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/e9.png"  /></div>
                            <div class="menu-txt">
                                <h4>桃桃山雾乌龙茶</h4>
                                <p class="list1">White & Yellow Peach Oolong Tea</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item" id="item4">
                    <div class="menuTitle">
                        <div class="line"></div>
                        <div class="title">瑞纳冰</div>
                        <div class="line"></div>
                    </div>
                    <ul>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/f1.png"  /></div>
                            <div class="menu-txt">
                                <h4>樂岛桃桃冰</h4>
                                <p class="list1">Peach & Rose Exfreezo</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/f2.png"  /></div>
                            <div class="menu-txt">
                                <h4>巧克力瑞纳冰</h4>
                                <p class="list1">Chocolate Exfreezo</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/f3.png"/></div>
                            <div class="menu-txt">
                                <h4>抹茶瑞纳冰</h4>
                                <p class="list1">Matecha Exfreezo</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/f4.png" /></div>
                            <div class="menu-txt">
                                <h4>卡布奇诺瑞纳冰</h4>
                                <p class="list1">Cappuccion Exfreezo</p>
                                <p class="list2">
                                    <b>￥27</b>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item" id="item5">
                    <div class="menuTitle">
                        <div class="line"></div>
                        <div class="title">鲜榨果蔬汁</div>
                        <div class="line"></div>
                    </div>
                    <ul>
                        <div class="p1"><p>鲜榨果蔬汁</p></div>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/g1.png" /></div>
                            <div class="menu-txt">
                                <h4>NFC鲜榨橙汁</h4>
                                <p class="list1">NFC Fresh Orange</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/g2.png" /></div>
                            <div class="menu-txt">
                                <h4>NFC鲜榨西柚汁</h4>
                                <p class="list1">NFC Fresh Graperfruit Juice</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/g3.png" /></div>
                            <div class="menu-txt">
                                <h4>NFC鲜榨蓝莓草莓混合汁</h4>
                                <p class="list1">NFC Fresh Blueberry & Strawberry Juice</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/g4.png"  /></div>
                            <div class="menu-txt">
                                <h4>NFC鲜榨芒果混合汁</h4>
                                <p class="list1">NFC Fresh Mixed Mange Juice</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <div class="p1"><p>已售罄</p></div>
                        <li>
                            <div class="menu-img"><img src="./img/menu-img/g5.png" /></div>
                            <div class="menu-txt">
                                <h4>猕猴桃复合果汁</h4>
                                <p class="list1">Kiwifruit Juice</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="item" id="item6">
                    <div class="menuTitle">
                        <div class="line"></div>
                        <div class="title">经典饮品</div>
                        <div class="line"></div>
                    </div>
                    <ul>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/h1.png"  /></div>
                            <div class="menu-txt">
                                <h4>巧克力</h4>
                                <p class="list1">Chocolate Milk</p>
                                <p class="list2">
                                    <b>￥24</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/h2.png"  /></div>
                            <div class="menu-txt">
                                <h4>纯牛奶</h4>
                                <p class="list1">Milk</p>
                                <p class="list2">
                                    <b>￥21</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/h3.png"  /></div>
                            <div class="menu-txt">
                                <h4>依云矿泉水330ml</h4>
                                <p class="list1">Evian</p>
                                <p class="list2">
                                    <b>￥18</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/h4.png"  /></div>
                            <div class="menu-txt">
                                <h4>巴黎水330ml</h4>
                                <p class="list1">Perrier</p>
                                <p class="list2">
                                    <b>￥18</b>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="login-1"><img src="./img/home-img/plus.png"></div>
                            <div class="menu-img"><img src="./img/menu-img/h5.png"  /></div>
                            <div class="menu-txt">
                                <h4>小红莓苏打水</h4>
                                <p class="list1">Ruby Tea & Soda Water</p>
                                <p class="list2">
                                    <b>￥21</b>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


    <nav id="fixed">
        <div class="item1">
            <span class="iconfont icon-home0"></span>
            <a href="#">首页</a>
        </div>
        <div class="item1">
            <span class="iconfont icon-coffee"></span>
            <a href="#">预约</a>
        </div>
        <div class="item1">
            <span class="iconfont icon-shoppingbagalt"></span>
            <a href="#">特别优惠</a>
        </div>
        <div class="item1">
            <span class="iconfont icon-weibiao45124"></span>
            <a href="#">澡堂服务</a>
        </div>
        <div class="item1">
            <span class="iconfont icon-icon25"></span>
            <a href="#">我的</a>
        </div>

    <script src="./js/swiper.min.js"></script>
    <script src="./js/js.js"></script>
</body>

</html>