项目基本完成
This commit is contained in:
twinkle255
@@ -11,7 +11,7 @@
|
||||
<h1 class="font-bold text-3xl ml-4 tracking-wider">TailwindCSS Starter</h1>
|
||||
<p class="tracking-widest mt-3">In about</p>
|
||||
<div class="mt-4">
|
||||
<a href="../index.html" class="px-2 underline">Home</a>
|
||||
<a href="index.html" class="px-2 underline">Home</a>
|
||||
<a href="#" class="px-2 text-purple-500 underline">About</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
19
UI/pages/business.html
Normal file
19
UI/pages/business.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="../assets/svgs/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tailwind + Sass</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="app">
|
||||
<h1 >
|
||||
商家列表
|
||||
</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module" src="../src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
196
UI/pages/businessInfo.html
Normal file
196
UI/pages/businessInfo.html
Normal file
@@ -0,0 +1,196 @@
|
||||
<!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>
|
||||
153
UI/pages/businessList.html
Normal file
153
UI/pages/businessList.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="../scss/businessList.scss">
|
||||
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.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>商家列表</p>
|
||||
</header>
|
||||
|
||||
<!--商家列表部分-->
|
||||
<ul class="w-full mt-24">
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj01.png">
|
||||
<div class="CornerLabels">3</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">万家饺子（软件园E18店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">各种饺子炒菜</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj02.png">
|
||||
<div class="CornerLabels">3</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">小锅饭豆腐馆（全运店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">特色美食</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj03.png">
|
||||
<div class="CornerLabels">1</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">麦当劳麦乐送（全运路店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">汉堡薯条</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj04.png">
|
||||
<!--<div class="w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3">1</div>-->
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">米村拌饭（浑南店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">各种炒菜拌饭</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj05.png">
|
||||
<!--<div class="w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3">1</div>-->
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">申记串道（中海康城店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">烤串炸串</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj06.png">
|
||||
<!--<div class="w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3">1</div>-->
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">半亩良田排骨米饭</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">排骨米饭套餐</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj07.png">
|
||||
<!--<div class="w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3">1</div>-->
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">茶兮鲜果饮品（国际软件园店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">甜品饮品</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar" onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj08.png">
|
||||
<!--<div class="w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3">1</div>-->
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">唯一水果捞（软件园E18店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">新鲜水果</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ListBar " onclick="location.href='businessInfo.html'">
|
||||
<div class="relative items-center">
|
||||
<img class="w-[20vw] h-[20vw]" src="../assets/images/sj09.png">
|
||||
<!--<div class="w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3">1</div>-->
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="TextTittle ">满园春饼（全运路店）</h3>
|
||||
<p class="Text">¥15起送 | ¥3配送</p>
|
||||
<p class="Text">各种春饼</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--底部菜单部分-->
|
||||
<ul class="w-full h-28 border-solid border-t-[1px] border-[#DDDDDDFF] bg-[#FFFFFFFF] fixed left-0 bottom-0 flex justify-around items-center text-sm">
|
||||
<li class="BottomBar">
|
||||
<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="">首页</p>
|
||||
</li>
|
||||
<li class="BottomBar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="">发现</p>
|
||||
</li>
|
||||
<li class="BottomBar">
|
||||
<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="">订单</p>
|
||||
</li>
|
||||
<li class="BottomBar">
|
||||
<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="">我的</p>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
112
UI/pages/index.html
Normal file
112
UI/pages/index.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="../assets/svgs/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Tailwind + Sass</title>
|
||||
<link rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
|
||||
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app" class="app">
|
||||
<div class="topBarInHome">
|
||||
<div>
|
||||
<i class="fa fa-map-marker-alt"></i>
|
||||
云南省昆明市呈贡区云南大学xxxx
|
||||
<i class="fa fa-sort-down"></i>
|
||||
</div>
|
||||
<div class="mt-3 w-full">
|
||||
<label>
|
||||
<input type="text" class="w-full rounded border-0"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainPad">
|
||||
<div class="mainMenu ">
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
||||
美食
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/c/7e/76a23eb90dada42528bc41499d6f8jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">早餐
|
||||
</div>
|
||||
<div><img
|
||||
src="https://cube.elemecdn.com/0/d0/dd7c960f08cdc756b1d3ad54978fdjpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
||||
拍腿代购
|
||||
</div>
|
||||
<div><img
|
||||
src="https://cube.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
海报
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/c/21/e42997b86b232161a5a16ab813ae8jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
甜品
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
速食
|
||||
</div>
|
||||
<div><img
|
||||
src="https://cube.elemecdn.com/e/c7/b7ba9547aa700bd20d0420e1794a8jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
地方小吃
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/7/d6/6f2631288a44ec177204e05cbcb93jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
米粉
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
苞子
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://cube.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed">
|
||||
炸鸡
|
||||
</div>
|
||||
</div>
|
||||
<div class="AdBar">
|
||||
<div class="basis-3/5">
|
||||
<div>配置套餐</div>
|
||||
<div>搭配齐全吃得好</div>
|
||||
<div class="text-yellow-600">立即抢购></div>
|
||||
</div>
|
||||
<div class="basis-2/5">
|
||||
<img src="https://cube.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?x-oss-process=image/format,webp/resize,w_282,h_188,m_fixed">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="businessPad">-->
|
||||
<!-- <div class="bsTitleBar">-->
|
||||
<!-- list title-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="bsList">lst</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="bottomBar">
|
||||
<div>
|
||||
<i class="fas fa-home fa-lg"></i>
|
||||
<br/>
|
||||
首页
|
||||
</div>
|
||||
<div>
|
||||
<i class="far fa-compass fa-lg"></i>
|
||||
<br/>
|
||||
发现
|
||||
</div>
|
||||
<div>
|
||||
<i class="far fa-file-alt fa-lg"></i>
|
||||
<br/>订单
|
||||
</div>
|
||||
<div>
|
||||
<i class="far fa-user fa-lg"></i>
|
||||
<br/>
|
||||
我的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
65
UI/pages/login.html
Normal file
65
UI/pages/login.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!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">
|
||||
</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>用户登录</p>
|
||||
</header>
|
||||
|
||||
<!--表单部分-->
|
||||
<ul class="w-full mt-[12vw]">
|
||||
<li class="box-border py-10 px-8 pb-0 flex items-center text-2xl">
|
||||
<p class="flex flex-shrink-0 flex-grow-0 font-bold text-[#666666FF]">手机号码：</p>
|
||||
<label>
|
||||
<input class="ml-4" type="text" placeholder="手机号码">
|
||||
</label>
|
||||
</li>
|
||||
<li class="box-border pt-10 px-8 pb-0 flex items-center text-2xl">
|
||||
<p class="flex flex-shrink-0 flex-grow-0 font-bold text-[#666666FF]">密码：</p>
|
||||
<label>
|
||||
<input class="ml-4" type="password" placeholder="密码">
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<!--登录、注册按钮-->
|
||||
<li class="w-full flex-col box-border justify-center items-center">
|
||||
<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]">登陆</button>
|
||||
</div>
|
||||
<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-[#666666FF] bg-[#DDDDDDFF] rounded-[4px]" onclick="location.href='register.html'">去注册</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--底部菜单部分-->
|
||||
<ul class="w-full h-28 border-solid border-t-[1px] border-[#DDDDDDFF] bg-[#FFFFFFFF] fixed left-0 bottom-0 flex justify-around items-center text-sm">
|
||||
<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="">首页</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="20" height="20" 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="">发现</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="">订单</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="">我的</p>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
UI/pages/order.html
Normal file
62
UI/pages/order.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-full h-full">
|
||||
|
||||
<!--header部分-->
|
||||
<header class="w-full h-24 font-medium 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 mt-24 bg-[#0097FFFF] box-border p-[2vw] text-white">
|
||||
<p class="text-2xl font-light">订单配送至：</p>
|
||||
<div class="w-full flex justify-between items-center font-bold select-none cursor-pointer my-1 mx-0">
|
||||
<p class="w-[90%] text-4xl">沈阳市浑南区智慧四街1-121号</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15.54 11.29L9.88 5.64a1 1 0 0 0-1.42 0a1 1 0 0 0 0 1.41l4.95 5L8.46 17a1 1 0 0 0 0 1.41a1 1 0 0 0 .71.3a1 1 0 0 0 .71-.3l5.66-5.65a1 1 0 0 0 0-1.47Z"/></svg>
|
||||
</div>
|
||||
<p class="text2xl">孟云浩先生 13599996666</p>
|
||||
</div>
|
||||
|
||||
<p class="box-border p-[3vw] text-3xl font-bold text-[#666666FF] border-solid border-b-[1px] border-b-[#DDDDDDFF]">万家饺子（软件园E18店）</p>
|
||||
|
||||
<!--订单明细部分-->
|
||||
<ul class="w-full">
|
||||
<li class="w-full h-32 box-border p-[3vw] text-[#666666FF] flex justify-between items-center ">
|
||||
<div class="flex items-center">
|
||||
<img src="../assets/images/sp01.png"
|
||||
height="40" width="40"/>"
|
||||
<p class="text-3xl ml-6">纯肉鲜肉（水饺） x 2</p>
|
||||
</div>
|
||||
<p class="text-3xl">¥15</p>
|
||||
</li>
|
||||
<li class="w-full h-32 box-border p-[3vw] text-[#666666FF] flex justify-between items-center ">
|
||||
<div class="flex items-center">
|
||||
<img src="../assets/images/sp02.png"
|
||||
height="40" width="40"/>"
|
||||
<p class="text-3xl ml-6">玉米鲜肉（水饺） x 1</p>
|
||||
</div>
|
||||
<p class="text-3xl">¥16</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-full h-32 box-border p-[3vw] text-[#666666FF] flex justify-between items-center text-3xl">
|
||||
<p class="">配送费</p>
|
||||
<p class="">¥31</p>
|
||||
</div>
|
||||
|
||||
<!--合计部分-->
|
||||
<div class="w-full h-28 fixed left-0 bottom-0 flex">
|
||||
<div class="flex basis-2/3 bg-[#505051FF] text-white text-4xl font-bold select-none justify-center items-center">¥49</div>
|
||||
<div class="flex basis-1/3 bg-[#38CA73FF] text-white text-4xl font-bold select-none cursor-pointer justify-center items-center" onclick="location.href='payment.html'">去支付</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
158
UI/pages/orderList.html
Normal file
158
UI/pages/orderList.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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="">¥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>
|
||||
83
UI/pages/payment.html
Normal file
83
UI/pages/payment.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!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">¥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]">¥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]">¥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]">¥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>
|
||||
39
UI/pages/register.html
Normal file
39
UI/pages/register.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="../assets/svgs/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Tailwind + Sass</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="topBar">
|
||||
用户注册
|
||||
</div>
|
||||
|
||||
<div class="m-2 space-y-4">
|
||||
<div>手机号码: <label>
|
||||
手机号码:
|
||||
<input type="tel" placeholder="手机号码"
|
||||
/>
|
||||
</label></div>
|
||||
<div>密码: <label>
|
||||
密码:
|
||||
<input type="password" placeholder="密码"/>
|
||||
</label></div>
|
||||
</div>
|
||||
|
||||
<div class="m-2 space-y-8">
|
||||
<a class="btn btn-green">
|
||||
登录
|
||||
</a>
|
||||
<a class="btn btn-stone">
|
||||
注册
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user