ElmDemo/UI/pages/orderList.html
2023-06-20 23:35:50 +08:00

158 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<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="../css/output.css">
<script src="../src/js/orderList.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/orderList.css">
</head>
<body>
<div class="w-full h-full">
<!--header部分-->
<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 class="">我的订单</p>
</header>
<!--订单列表部分-->
<h3 class=" mt-24 box-border p-[4vw] text-3xl font-light text-[#999999FF]">未支付订单信息:</h3>
<ul class="w-full">
<li class="w-full text-3xl">
<div class="box-border py-[2vw] px-[4vw] text-[#666666FF] flex justify-between items-center">
<p class="flex flex-row justify-between items-center">
万家饺子软件园E18店
<svg class="fa-caret-down" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>
</p>
<div class="flex">
<p class="">&#165;49</p>
<button class="bg-[#FF9900FF] text-white rounded-[3px] ml-4 select-none cursor-pointer" onclick="location.href='order.html'">去支付</button>
</div>
</div>
<ul class="w-full order-detailet" style="display: none">
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">纯肉鲜肉(水饺) x 2</p>
<p class="">&#165;15</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">玉米鲜肉(水饺) x 1</p>
<p class="">&#165;16</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">配送费</p>
<p class="">&#165;3</p>
</li>
</ul>
</li>
<li class="w-full text-3xl">
<div class="box-border py-[2vw] px-[4vw] text-[#666666FF] flex justify-between items-center">
<p class="flex flex-row justify-between items-center">
小锅饭豆腐馆(全运店)
<svg class="fa-caret-down" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>
</p>
<div class="flex">
<p class="">&#165;55</p>
<button class="bg-[#FF9900FF] text-white rounded-[3px] ml-4 select-none cursor-pointer" onclick="location.href='order.html'">去支付</button>
</div>
</div>
<ul class="w-full order-detailet" style="display: none">
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">纯肉鲜肉(水饺) x 2</p>
<p class="">&#165;15</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">玉米鲜肉(水饺) x 1</p>
<p class="">&#165;16</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">配送费</p>
<p class="">&#165;3</p>
</li>
</ul>
</li>
</ul>
<h3 class=" mt-24 box-border p-[4vw] text-3xl font-light text-[#999999FF]">已支付订单信息:</h3>
<ul class="w-full">
<li class="w-full text-3xl">
<div class="box-border py-[2vw] px-[4vw] text-[#666666FF] flex justify-between items-center">
<p class="flex flex-row justify-between items-center">
万家饺子软件园E18店
<svg class="fa-caret-down" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>
</p>
<div class="flex">
<p class="">&#165;49</p>
<button class="bg-[#FF9900FF] text-white rounded-[3px] ml-4 select-none cursor-pointer" onclick="location.href='order.html'">去支付</button>
</div>
</div>
<ul class="w-full order-detailet" style="display: none">
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">纯肉鲜肉(水饺) x 2</p>
<p class="">&#165;15</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">玉米鲜肉(水饺) x 1</p>
<p class="">&#165;16</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">配送费</p>
<p class="">&#165;3</p>
</li>
</ul>
</li>
<li class="w-full text-3xl">
<div class="box-border py-[2vw] px-[4vw] text-[#666666FF] flex justify-between items-center">
<p class="flex flex-row justify-between items-center">
小锅饭豆腐馆(全运店)
<svg class="fa-caret-down" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>
</p>
<div class="flex">
<p class="">&#165;55</p>
<button class="bg-[#FF9900FF] text-white rounded-[3px] ml-4 select-none cursor-pointer" onclick="location.href='order.html'">去支付</button>
</div>
</div>
<ul class="w-full order-detailet" style="display: none">
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">纯肉鲜肉(水饺) x 2</p>
<p class="">&#165;15</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">玉米鲜肉(水饺) x 1</p>
<p class="">&#165;16</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center">
<p class="">配送费</p>
<p class="">&#165;3</p>
</li>
</ul>
</li>
</ul>
<!--底部菜单部分-->
<ul class="w-full h-24 border-t-[1px] border-solid border-t-[#DDDDDDFF] bg-white fixed left-0 bottom-0 flex justify-around items-center">
<li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9M6 10l6-6l6 6M6 10l-2 2m14-2l2 2m-10 1h4v4h-4v-4z"/></svg>
<p class="text-[2.8vw]">首页</p>
</li>
<li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 50 50"><path fill="currentColor" d="M25 49C11.766 49 1 38.233 1 25C1 11.766 11.766 1 25 1c13.233 0 24 10.766 24 24c0 13.233-10.767 24-24 24zm0-44C13.972 5 5 13.972 5 25s8.972 20 20 20s20-8.972 20-20S36.028 5 25 5zm.045 3.25S18 20.321 18 24v2c0 3.678 7.066 16 7.066 16S32 29.934 32 26.256v-2.262c0-3.679-6.955-15.744-6.955-15.744zM25 29a4 4 0 1 1 0-8a4 4 0 0 1 0 8z"/></svg>
<p class="text-[2.8vw]">发现</p>
</li>
<li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><g id="feDocument0" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="feDocument1" fill="currentColor" fill-rule="nonzero"><path id="feDocument2" d="M15 4H6v16h12V7h-3V4ZM6 2h10l4 4v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm2 9h8v2H8v-2Zm0 4h8v2H8v-2Z"/></g></g></svg>
<p class="text-[2.8vw]">订单</p>
</li>
<li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 19v-1.25c0-2.071-1.919-3.75-4.286-3.75h-3.428C7.919 14 6 15.679 6 17.75V19m9-11a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"/></svg>
<p class="text-[2.8vw]">我的</p>
</li>
</ul>
</div>
</body>
</html>