196 lines
10 KiB
HTML
196 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ch">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>饿了么 商家信息</title>
|
||
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
|
||
<link rel="stylesheet" href="../css/output.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||
</head>
|
||
<body class="">
|
||
<div class="w-full h-full ">
|
||
<!--herder部分-->
|
||
<header class="w-full h-24 bg-[#0097FFFF] text-white text-4xl fixed left-0 top-0 z-50 flex justify-center items-center">
|
||
<p>商家信息</p>
|
||
</header>
|
||
|
||
<!--商家图片部分-->
|
||
<div class="w-full h-full mt-28 flex justify-center items-center text-base">
|
||
<img class="w-72 h-72 rounded" src="../assets/images/sj01.png">
|
||
</div>
|
||
|
||
<!--商家信息部分-->
|
||
<div class="w-full h-32 flex flex-col justify-center items-center text-2xl">
|
||
<h1 class="text-4xl font-semibold ">万家饺子（软件园E18店）</h1>
|
||
<p class="text-2xl font-medium text-gray-500 mt-px">¥15起送 ¥3配送</p>
|
||
<p class="text-2xl font-medium text-gray-500 mt-px">各种饺子炒菜</p>
|
||
</div>
|
||
|
||
<!--食品列表部分-->
|
||
<ul class="w-full mb-7 text-sm">
|
||
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex box-content items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp01.png">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">纯肉鲜肉（水饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">新鲜猪肉</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">¥15</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>3</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp02.png">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">玉米鲜肉（水饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">玉米鲜肉</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">¥16</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>2</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp03.png">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">虾仁三鲜（蒸饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">虾仁三鲜</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">¥22</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>0</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp04.png">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">素三鲜（蒸饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">素三鲜</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">¥15</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>0</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp05.png">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">角瓜鸡蛋（蒸饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">角瓜鸡蛋</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">&¥16</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>0</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp06.png" alt="">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">小白菜肉（水饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">小白菜肉</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">¥18</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>0</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="w=full box-border mx-3 mt-8 mb-32 p-1.25/1 select-none flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<img class="ml-3 w-1/3 h-1/3" src="../assets/images/sp07.png">
|
||
<div class="ml-1.5">
|
||
<h3 class="text-3xl mx-3 font-semibold text-gray-600">芹菜牛肉（水饺）</h3>
|
||
<p class="text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1">芹菜牛肉</p>
|
||
<p class="text-2xl text-gray-500 mx-3 font-normal mt-1">¥18</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-18 flex justify-between items-center">
|
||
<div>
|
||
<i class="fa fa-minus-circle fa-2x mx-3 text-gray-500 cursor-pointer"></i>
|
||
</div>
|
||
<p class="text-3xl text-gray-600"><span>0</span></p>
|
||
<div>
|
||
<i class="fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<!--购物车部-->
|
||
<div class="w-full h-28 fixed left-0 bottom-0 flex text-base">
|
||
<div class=" bg-gray-700 basis-2/3 flex">
|
||
<div class="w-32 h-32 box-border border-solid border-8 border-gray-700 rounded-full bg-blue-500 text-white flex justify-center items-center -mt-2 -ml-1 relative">
|
||
<i class="fa fa-shopping-cart fa-3x"></i>
|
||
<div class="w-10 h-10 rounded-full bg-red-600 text-white text-2xl flex justify-center items-center absolute -right-1/4 -top-1/4">3</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-4xl text-white mt-4">¥12.88</p>
|
||
<p class="text-xl text-gray-500">另需配送费3元</p>
|
||
</div>
|
||
</div>
|
||
<div class="basis-1/3">
|
||
<button class="w-full h-full bg-green-500 text-white text-4xl font-bold select-none cursor-pointer flex justify-center items-center"
|
||
onclick="location.href='order.html'">
|
||
去结算
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |