ElmDemo/UI/pages/payment.html
2023-06-21 17:23:21 +08:00

83 lines
5.6 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/payment.js"></script>
</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>
<!--订单信息部分-->
<div class="w-full h-full">
<p class="mt-[12vw] box-border pt-[4vw] px-[4vw] pb-0 text-3xl font-light text-[#999999FF]">订单信息:</p>
<div class="box-border p-[4vw] text-3xl text-[#666666FF] flex flex-row justify-between items-center">
<p class="flex flex-row justify-between items-center">
万家饺子软件园E18店
<svg id="showBtn" class="flex" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>
</p>
<p class="text-orange-600">&#165;49</p>
</div>
<!--订单明细部分-->
<ul class="w-full" id="detailetBox" style="display: none">
<li class="w-full box-border py-[1vw] px-[4vw] flex justify-between items-center">
<p class="text-2xl text-[#666666FF]">纯肉鲜肉(水饺) x 2</p>
<p class="text-2xl text-[#666666FF]">&#165;15</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] flex justify-between items-center">
<p class="text-2xl text-[#666666FF]">玉米鲜肉(水饺) x 1</p>
<p class="text-2xl text-[#666666FF]">&#165;16</p>
</li>
<li class="w-full box-border py-[1vw] px-[4vw] flex justify-between items-center">
<p class="text-2xl text-[#666666FF]">配送费</p>
<p class="text-2xl text-[#666666FF]">&#165;3</p>
</li>
</ul>
</div>
<!--支付方式-->
<ul class="w-full">
<li class="w-full box-border p-[4vw] flex justify-between items-center">
<img class="w-[33vw] h-[8.9vw]" src="../assets/images/alipay.png"/>
<svg class="text-[#38CA73FF]" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
</li>
<li class="w-full box-border p-[4vw] flex justify-between items-center">
<img class="w-[33vw] h-[8.9vw]" src="../assets/images/wechat.png" />
</li>
</ul>
<div class="w-full flex-col h-30 flex box-border pt-[4vw] px-[3vw] pb-0 justify-center items-center">
<button class="w-full h-20 text-3xl font-bold text-white bg-[#38CA73FF] rounded-[4px] border-none outline-none">确认支付</button>
</div>
<!--底部菜单部分-->
<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>