项目基本完成

UI/assets/images/readme.txt

@@ -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店）
+      1）sp01  纯肉鲜肉（水饺）
+      2）sp02  玉米鲜肉（水饺）
+	  3）sp03  虾仁三鲜（蒸饺）
+	  4）sp04  素三鲜（蒸饺）
+	  5）sp05  角瓜鸡蛋（蒸饺）
+	  6）sp06  小白菜肉（水饺）
+	  7）sp07  芹菜牛肉（水饺）
+	  8）sp08  虾腰鲜肉（蒸饺）
+	  9）sp09  青椒鲜肉（蒸饺）
+   2 sj02  小锅饭豆腐馆（全运店）
+      1）sp10  蛋黄焗豆花
+      2）sp11  麻婆豆腐
+	  3）sp12  广式小豆腐

UI/assets/svgs/businessList/FeDocument.svg

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

UI/assets/svgs/businessList/HumbleiconsHome.svg

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

UI/assets/svgs/businessList/HumbleiconsUser.svg

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

UI/assets/svgs/businessList/MapCompass.svg

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

UI/assets/svgs/index/CarbonCaretDown.svg

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

UI/assets/svgs/index/ElSearch.svg

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

UI/assets/svgs/index/FeDocument.svg

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

UI/assets/svgs/index/HumbleiconsHome.svg

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

UI/assets/svgs/index/HumbleiconsLocation.svg

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

UI/assets/svgs/index/HumbleiconsUser.svg

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

UI/assets/svgs/index/IcRoundStar.svg

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

UI/assets/svgs/index/MapCompass.svg

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

UI/assets/svgs/index/MaterialSymbolsFilterAltOutlineSharp.svg

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

UI/assets/svgs/order/UilAngleRightB.svg

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

UI/assets/svgs/payment/CarbonCaretDown.svg

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

UI/assets/svgs/payment/IcBaselineCheckCircle.svg

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

UI/css/input.css

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

UI/css/orderList.css

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

UI/order.html

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

UI/pages/about.html

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

UI/pages/business.html

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

UI/pages/businessInfo.html

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

UI/pages/businessList.html

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

UI/pages/index.html

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

UI/pages/login.html

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

UI/pages/order.html

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

UI/pages/orderList.html

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

UI/pages/payment.html

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

UI/pages/register.html

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

UI/scss/businessList.scss

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

UI/src/js/index.js

@@ -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';
+		}
+		
+	}
+}

UI/src/js/orderList.js

@@ -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';
+			}
+		}
+	}
+}

UI/src/js/payment.js

@@ -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';
+		}
+	}
+}

UI/src/main.ts

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

UI/tailwind.config.js

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