diff --git a/.gitignore b/.gitignore
index b00044b..1815bd8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ node_modules/
 .idea/modules.xml
 .idea/jarRepositories.xml
 .idea/compiler.xml
+/.idea/jsLibraryMappings.xml
 *.iws
 *.iml
 *.ipr
diff --git a/UI/pages/businessList.html b/UI/pages/businessList.html
index 9410a9b..6054268 100644
--- a/UI/pages/businessList.html
+++ b/UI/pages/businessList.html
@@ -6,6 +6,7 @@
           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="../scss/index.scss">
     <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">
diff --git a/UI/pages/login.html b/UI/pages/login.html
index eaeb537..43ac365 100644
--- a/UI/pages/login.html
+++ b/UI/pages/login.html
@@ -6,7 +6,9 @@
           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="../css/output.css">
+    <link rel="stylesheet" href="../scss/index.scss">
+    <link rel="stylesheet" href="../scss/login.scss">
 </head>
 <body>
     <div class="w-full h-full">
@@ -18,14 +20,14 @@
 
         <!--表单部分-->
         <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>
+            <li class="FormList">
+                <p class="FormText">手机号码：</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>
+            <li class="FormList">
+                <p class="FormText">密码：</p>
                 <label>
                     <input class="ml-4" type="password" placeholder="密码">
                 </label>
@@ -33,30 +35,30 @@
 
             <!--登录、注册按钮-->
             <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 class="LoginBar">
+                    <button class="LoginText text-white bg-[#38CA73FF]">登陆</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 class="LoginBar">
+                    <button class="LoginText text-[#666666FF] bg-[#DDDDDDFF]" 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">
+            <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="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <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="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <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="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <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>
diff --git a/UI/pages/order.html b/UI/pages/order.html
index db2a514..232554f 100644
--- a/UI/pages/order.html
+++ b/UI/pages/order.html
@@ -7,6 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>饿了么 确认订单</title>
     <link rel="stylesheet" href="../css/output.css">
+    <link rel="stylesheet" href="../scss/order.scss">
 </head>
 <body>
     <div class="w-full h-full">
@@ -30,7 +31,7 @@
 
         <!--订单明细部分-->
         <ul class="w-full">
-            <li class="w-full h-32 box-border p-[3vw] text-[#666666FF] flex justify-between items-center ">
+            <li class="OderMessage">
                 <div class="flex items-center">
                     <img src="../assets/images/sp01.png"
                          height="40" width="40"/>"
@@ -38,7 +39,7 @@
                 </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 ">
+            <li class="OderMessage">
                 <div class="flex items-center">
                     <img src="../assets/images/sp02.png"
                          height="40" width="40"/>"
@@ -47,7 +48,7 @@
                 <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">
+        <div class="OderMessage text-3xl">
             <p class="">配送费</p>
             <p class="">&#165;31</p>
         </div>
diff --git a/UI/pages/orderList.html b/UI/pages/orderList.html
index 0561af7..fc8ab0a 100644
--- a/UI/pages/orderList.html
+++ b/UI/pages/orderList.html
@@ -7,9 +7,11 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>饿了么 我的订单</title>
     <link rel="stylesheet" href="../css/output.css">
+    <link rel="stylesheet" href="../scss/orderList.scss">
+    <link rel="stylesheet" href="../scss/index.scss">
+    <link rel="stylesheet" href="../css/orderList.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">
@@ -30,19 +32,19 @@
                     </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>
+                        <button class="ListBar" 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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <p class="">配送费</p>
                         <p class="">&#165;3</p>
                     </li>
@@ -50,26 +52,26 @@
             </li>
 
             <li class="w-full text-3xl">
-                <div class="box-border py-[2vw] px-[4vw]  text-[#666666FF] flex justify-between items-center">
+                <div class="PageBar">
                     <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>
+                        <button class="ListBar" 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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <p class="">配送费</p>
                         <p class="">&#165;3</p>
                     </li>
@@ -80,26 +82,26 @@
         <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">
+                <div class="PageBar">
                     <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>
+                        <button class="ListBar" 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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <p class="">配送费</p>
                         <p class="">&#165;3</p>
                     </li>
@@ -107,26 +109,26 @@
             </li>
 
             <li class="w-full text-3xl">
-                <div class="box-border py-[2vw] px-[4vw]  text-[#666666FF] flex justify-between items-center">
+                <div class="PageBar">
                     <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>
+                        <button class="ListBar" 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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <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">
+                    <li class="TextBar">
                         <p class="">配送费</p>
                         <p class="">&#165;3</p>
                     </li>
@@ -136,19 +138,19 @@
 
         <!--底部菜单部分-->
         <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">
+            <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="text-[2.8vw]">首页</p>
             </li>
-            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <li class="BottomBar">
                 <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">
+            <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="text-[2.8vw]">订单</p>
             </li>
-            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <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="text-[2.8vw]">我的</p>
             </li>
diff --git a/UI/pages/payment.html b/UI/pages/payment.html
index 40ff8dd..cfd0534 100644
--- a/UI/pages/payment.html
+++ b/UI/pages/payment.html
@@ -7,6 +7,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>饿了么 在线支付</title>
     <link rel="stylesheet" href="../css/output.css">
+    <link rel="stylesheet" href="../scss/index.scss">
+    <link rel="stylesheet" href="../scss/payment.scss">
     <script src="../src/js/payment.js"></script>
 </head>
 <body>
@@ -30,28 +32,28 @@
 
             <!--订单明细部分-->
             <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 class="TextBar">
+                    <p class="text">纯肉鲜肉（水饺） x 2</p>
+                    <p class="text">&#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 class="TextBar">
+                    <p class="text">玉米鲜肉（水饺） x 1</p>
+                    <p class="text">&#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 class="TextBar">
+                    <p class="text">配送费</p>
+                    <p class="text">&#165;3</p>
                 </li>
             </ul>
         </div>
 
         <!--支付方式-->
         <ul class="w-full">
-            <li class="w-full box-border p-[4vw] flex justify-between items-center">
+            <li class="PayWay">
                 <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">
+            <li class="PayWay">
                 <img class="w-[33vw] h-[8.9vw]" src="../assets/images/wechat.png" />
             </li>
         </ul>
@@ -61,19 +63,19 @@
 
         <!--底部菜单部分-->
         <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">
+            <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="text-[2.8vw]">首页</p>
             </li>
-            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <li class="BottomBar">
                 <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">
+            <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="text-[2.8vw]">订单</p>
             </li>
-            <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer">
+            <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="text-[2.8vw]">我的</p>
             </li>
diff --git a/UI/pages/register.html b/UI/pages/register.html
index d465f3b..d4c3394 100644
--- a/UI/pages/register.html
+++ b/UI/pages/register.html
@@ -14,12 +14,12 @@
 </div>
 
 <div class="m-2 space-y-4">
-    <div>手机号码: <label>
+    <div> <label>
         手机号码:
         <input type="tel" placeholder="手机号码"
         />
     </label></div>
-    <div>密码: <label>
+    <div><label>
         密码:
         <input type="password" placeholder="密码"/>
     </label></div>
diff --git a/UI/scss/businessList.scss b/UI/scss/businessList.scss
index 08a685f..54576ec 100644
--- a/UI/scss/businessList.scss
+++ b/UI/scss/businessList.scss
@@ -20,8 +20,4 @@
 
 .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
 }
\ No newline at end of file
diff --git a/UI/scss/index.scss b/UI/scss/index.scss
index cdd9dc9..9eca73f 100644
--- a/UI/scss/index.scss
+++ b/UI/scss/index.scss
@@ -31,6 +31,10 @@
   }
 }
 
+.BottomBar{
+  @apply flex flex-col justify-center items-center text-[#999] select-none cursor-pointer;
+}
+
 .mainMenu {
   @apply grid grid-cols-5 gap-1  text-sm font-light text-center  items-center justify-center;
   div {
diff --git a/UI/scss/login.scss b/UI/scss/login.scss
new file mode 100644
index 0000000..db52185
--- /dev/null
+++ b/UI/scss/login.scss
@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.FormText {
+  @apply flex flex-shrink-0 flex-grow-0 font-bold text-[#666666FF];
+}
+
+.FormList {
+  @apply box-border pt-12 px-9 pb-0 flex items-center text-3xl;
+}
+
+.LoginBar {
+  @apply w-full flex-col h-32 flex box-border pt-[4vw] px-[3vw] pb-0 justify-center items-center;
+}
+
+.LoginText {
+  @apply w-full h-20 text-3xl font-bold rounded-[4px];
+}
\ No newline at end of file
diff --git a/UI/scss/order.scss b/UI/scss/order.scss
new file mode 100644
index 0000000..8421237
--- /dev/null
+++ b/UI/scss/order.scss
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.OderMessage{
+  @apply w-full h-32 box-border p-[3vw] text-[#666666FF] flex justify-between items-center;
+}
\ No newline at end of file
diff --git a/UI/scss/orderList.scss b/UI/scss/orderList.scss
new file mode 100644
index 0000000..77e4cb2
--- /dev/null
+++ b/UI/scss/orderList.scss
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.TextBar{
+  @apply w-full box-border py-[1vw] px-[4vw] text-[#666666FF] text-xl flex justify-between items-center;
+}
+
+.ListBar{
+  @apply bg-[#FF9900FF] text-white rounded-[3px] ml-4 select-none cursor-pointer;
+}
+
+.PageBar{
+  @apply box-border py-[2vw] px-[4vw]  text-[#666666FF] flex justify-between items-center;
+}
\ No newline at end of file
diff --git a/UI/scss/payment.scss b/UI/scss/payment.scss
new file mode 100644
index 0000000..8a9bca7
--- /dev/null
+++ b/UI/scss/payment.scss
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.TextBar {
+  @apply w-full box-border py-[1vw] px-[4vw] flex justify-between items-center;
+}
+
+.text {
+  @apply text-2xl text-[#666666FF];
+}
+
+.PayWay {
+  @apply w-full box-border p-[4vw] flex justify-between items-center;
+}
\ No newline at end of file
