项目基本完成

This commit is contained in:
twinkle255 2023-06-20 23:35:50 +08:00
parent 36fb46cdf8
commit 511a8b2eaa
83 changed files with 2282 additions and 44 deletions

BIN
UI/assets/images/alipay.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
UI/assets/images/dcfl01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
UI/assets/images/dcfl02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
UI/assets/images/dcfl03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
UI/assets/images/dcfl04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
UI/assets/images/dcfl05.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
UI/assets/images/dcfl06.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
UI/assets/images/dcfl07.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
UI/assets/images/dcfl08.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
UI/assets/images/dcfl09.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
UI/assets/images/dcfl10.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

View File

@ -0,0 +1,38 @@
dcfl点餐分类
1 dcfl01 美食
2 dcfl02 早餐
3 dcfl03 跑腿代购
4 dcfl04 汉堡披萨
5 dcfl05 甜品饮品
6 dcfl06 速食简餐
7 dcfl07 地方小吃
8 dcfl08 米粉面馆
9 dcfl09 包子粥铺
10 dcfl10 炸鸡炸串
sj商家
1 sj01 万家饺子软件园E18店
2 sj02 小锅饭豆腐馆(全运店)
3 sj03 麦当劳麦乐送(全运路店)
4 sj04 米村拌饭(浑南店)
5 sj05 申记串道(中海康城店)
6 sj06 半亩良田排骨米饭
7 sj07 茶兮鲜果饮品(国际软件园店)
8 sj08 唯一水果捞软件园E18店
9 sj09 满园春饼(全运路店)
sp商品
1 sj01 万家饺子软件园E18店
1sp01 纯肉鲜肉(水饺)
2sp02 玉米鲜肉(水饺)
3sp03 虾仁三鲜(蒸饺)
4sp04 素三鲜(蒸饺)
5sp05 角瓜鸡蛋(蒸饺)
6sp06 小白菜肉(水饺)
7sp07 芹菜牛肉(水饺)
8sp08 虾腰鲜肉(蒸饺)
9sp09 青椒鲜肉(蒸饺)
2 sj02 小锅饭豆腐馆(全运店)
1sp10 蛋黄焗豆花
2sp11 麻婆豆腐
3sp12 广式小豆腐

BIN
UI/assets/images/sj01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
UI/assets/images/sj02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
UI/assets/images/sj03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
UI/assets/images/sj04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
UI/assets/images/sj05.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
UI/assets/images/sj06.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
UI/assets/images/sj07.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
UI/assets/images/sj08.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
UI/assets/images/sj09.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
UI/assets/images/sp01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
UI/assets/images/sp02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
UI/assets/images/sp03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
UI/assets/images/sp04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
UI/assets/images/sp05.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
UI/assets/images/sp06.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
UI/assets/images/sp07.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
UI/assets/images/sp08.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
UI/assets/images/sp09.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
UI/assets/images/sp10.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
UI/assets/images/sp11.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
UI/assets/images/sp12.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
UI/assets/images/wechat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 379 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 289 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 311 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 449 B

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>

After

Width:  |  Height:  |  Size: 140 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1200 1200"><path fill="currentColor" d="M672.633 0C389.326 0 159.634 229.652 159.634 512.958c0 100.662 28.986 194.563 79.083 273.79c-.368.16-.729.305-1.098.471l-223.21 223.172L204.019 1200l231.249-231.288c-.069-.326-.162-.651-.234-.979c71.035 37.19 151.865 58.224 237.6 58.224c283.309 0 512.959-229.69 512.959-512.997C1185.59 229.652 955.939 0 672.633 0zm0 227.877c157.441 0 285.041 127.639 285.041 285.081s-127.6 285.081-285.041 285.081c-157.442 0-285.082-127.639-285.082-285.081S515.19 227.877 672.633 227.877z"/></svg>

After

Width:  |  Height:  |  Size: 597 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 379 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 289 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"><path d="M13 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0Z"/><path d="M17.5 9.5c0 3.038-2 6.5-5.5 10.5c-3.5-4-5.5-7.462-5.5-10.5a5.5 5.5 0 1 1 11 0Z"/></g></svg>

After

Width:  |  Height:  |  Size: 307 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 311 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 17.27l4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72l3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41l-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18l-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"/></svg>

After

Width:  |  Height:  |  Size: 357 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 449 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M14 13v7h-4v-7L2.95 4h18.1L14 13Zm-2-.7L16.95 6h-9.9L12 12.3Zm0 0Z"/></svg>

After

Width:  |  Height:  |  Size: 187 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 270 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>

After

Width:  |  Height:  |  Size: 140 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>

After

Width:  |  Height:  |  Size: 238 B

View File

@ -1,8 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.business {
html{
font-size: 2vw;
}
body{
font-size: 2vw;
}

6
UI/css/orderList.css Normal file
View File

@ -0,0 +1,6 @@
.order-detailet{
}
.fa-caret-down{
}

1374
UI/css/output.css Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="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>

View File

@ -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>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<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>
@ -14,6 +14,6 @@
</div>
<script type="module" src="./src/main.ts"></script>
<script type="module" src="../src/main.ts"></script>
</body>
</html>

196
UI/pages/businessInfo.html Normal file
View 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">&#165;15起送 &#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&&#165;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">&#165;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">&#165;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">&#165;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
View 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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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">&#165;15起送 | &#165;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>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
<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"
@ -19,20 +19,22 @@
<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">
<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">早餐
<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">
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
@ -75,12 +77,12 @@
<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 class="businessPad">-->
<!-- <div class="bsTitleBar">-->
<!-- list title-->
<!-- </div>-->
<!-- <div class="bsList">lst</div>-->
<!-- </div>-->
</div>
<div class="bottomBar">
<div>
@ -105,6 +107,6 @@
</div>
</div>
<script type="module" src="./src/main.ts"></script>
<script type="module" src="../src/main.ts"></script>
</body>
</html>

65
UI/pages/login.html Normal file
View 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
View 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">&#165;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">&#165;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="">&#165;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">&#165;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
View 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="">&#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>

83
UI/pages/payment.html Normal file
View 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">&#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>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
<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>
@ -14,9 +14,15 @@
</div>
<div class="m-2 space-y-4">
<div>手机号码: <input type="tel" placeholder="手机号码"
/></div>
<div>密码: <input type="password" placeholder="密码" /></div>
<div>手机号码: <label>
手机号码:
<input type="tel" placeholder="手机号码"
/>
</label></div>
<div>密码: <label>
密码:
<input type="password" placeholder="密码"/>
</label></div>
</div>
<div class="m-2 space-y-8">
@ -28,6 +34,6 @@
</a>
</div>
<script type="module" src="./src/main.ts"></script>
<script type="module" src="../src/main.ts"></script>
</body>
</html>

28
UI/scss/businessList.scss Normal file
View File

@ -0,0 +1,28 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.business {
}
.CornerLabels{
@apply w-10 h-10 bg-red-600 text-white text-xl rounded-full flex justify-center items-center absolute -right-4 -top-3;
}
.ListBar{
@apply w-full p-6 select-none flex items-center cursor-pointer border-solid border-b border-gray-300;
}
.Text{
@apply text-2xl text-gray-500 font-medium leading-relaxed mt-1;
}
.TextTittle{
@apply text-3xl text-gray-600 font-semibold leading-relaxed;
}
.BottomBar{
@apply flex flex-col justify-center items-center text-[#999] select-none cursor-pointer
}

30
UI/src/js/index.js Normal file
View File

@ -0,0 +1,30 @@
/**
* 1使用哪一个事件
* 使用onscroll此事件移动端与PC端都有效
* 2如何获取滚动条位置
* 获取PC端滚动条位置document.documentElement.scrollTop
* 获取移动端滚动条位置document.body.scrollTop
* 3如何获取视口宽度
* document.documentElement.clientWidth 移动端与PC端都有效
*/
window.onload = function(){
document.onscroll = function(){
//获取滚动条位置
let s1 = document.documentElement.scrollTop;
let s2 = document.body.scrollTop;
let scroll = s1==0?s2:s1;
//获取视口宽度
let width = document.documentElement.clientWidth;
//获取顶部固定块
let search = document.getElementById('fixedBox');
//判断滚动条超过视口宽度的12%时,搜索块变固定定位
if(scroll>width*0.12){
search.style.position = 'fixed';
search.style.left = '0';
search.style.top = '0';
}else{
search.style.position = 'static';
}
}
}

20
UI/src/js/orderList.js Normal file
View File

@ -0,0 +1,20 @@
window.onload = function(){
//获取显示隐藏按钮DOM数组
let showBtnArr = document.getElementsByClassName('fa-caret-down');
//获取订单明细DOM数组
let detailetBoxArr = document.getElementsByClassName('order-detailet');
//设置默认所有订单明细都隐藏
for(let i=0;i<detailetBoxArr.length;i++){
detailetBoxArr[i].style.display='none';
}
for(let i=0;i<showBtnArr.length;i++){
showBtnArr[i].onclick = function(){
if(detailetBoxArr[i].style.display=='none'){
detailetBoxArr[i].style.display='block';
}else{
detailetBoxArr[i].style.display='none';
}
}
}
}

17
UI/src/js/payment.js Normal file
View File

@ -0,0 +1,17 @@
window.onload = function(){
//获取显示隐藏按钮DOM对象
let showBtn = document.getElementById('showBtn');
//获取订单明细DOM对象
let detailetBox = document.getElementById('detailetBox');
//设置默认订单明细隐藏
detailetBox.style.display='none';
showBtn.onclick = function(){
//判断订单明细DOM对象是否隐藏如果是就显示否则就隐藏
if(detailetBox.style.display=='none'){
detailetBox.style.display='block';
}else{
detailetBox.style.display='none';
}
}
}

View File

@ -1,6 +1,6 @@
import "../scss/app.scss"
import "../scss/index.scss"
import "../scss/business.scss"
import "../scss/businessList.scss"
export class AppComponent
{

View File

@ -8,4 +8,5 @@ module.exports = {
extend: {},
},
plugins: [],
mode: 'jit',
}