Anchor-x/ElmDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

改了页面好多bug，整合了一部分代码，提高了代码复用性

Browse Source
This commit is contained in:
myh 2023-06-21 17:16:37 +08:00
parent 2318325519
commit e2b274abbd
13 changed files with 126 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -13,6 +13,7 @@ node_modules/
.idea/modules.xml .idea/modules.xml
.idea/jarRepositories.xml .idea/jarRepositories.xml
.idea/compiler.xml .idea/compiler.xml
/.idea/jsLibraryMappings.xml
*.iws *.iws
*.iml *.iml
*.ipr *.ipr

1
UI/pages/businessList.html
View File

@ -6,6 +6,7 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 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"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饿了么 商家列表</title> <title>饿了么 商家列表</title>
<link rel="stylesheet" href="../scss/index.scss">
<link rel="stylesheet" href="../css/output.css"> <link rel="stylesheet" href="../css/output.css">
<link rel="stylesheet" href="../scss/businessList.scss"> <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://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

26
UI/pages/login.html
View File

@ -7,6 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饿了么 用户登陆</title> <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> </head>
<body> <body>
<div class="w-full h-full"> <div class="w-full h-full">
@ -18,14 +20,14 @@
<!--表单部分--> <!--表单部分-->
<ul class="w-full mt-[12vw]"> <ul class="w-full mt-[12vw]">
<li class="box-border py-10 px-8 pb-0 flex items-center text-2xl"> <li class="FormList">
<p class="flex flex-shrink-0 flex-grow-0 font-bold text-[#666666FF]">手机号码：</p> <p class="FormText">手机号码：</p>
<label> <label>
<input class="ml-4" type="text" placeholder="手机号码"> <input class="ml-4" type="text" placeholder="手机号码">
</label> </label>
</li> </li>
<li class="box-border pt-10 px-8 pb-0 flex items-center text-2xl"> <li class="FormList">
<p class="flex flex-shrink-0 flex-grow-0 font-bold text-[#666666FF]">密码：</p> <p class="FormText">密码：</p>
<label> <label>
<input class="ml-4" type="password" placeholder="密码"> <input class="ml-4" type="password" placeholder="密码">
</label> </label>
@ -33,30 +35,30 @@
<!--登录、注册按钮--> <!--登录、注册按钮-->
<li class="w-full flex-col box-border justify-center items-center"> <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"> <div class="LoginBar">
<button class="w-full h-20 text-3xl font-bold text-white bg-[#38CA73FF] rounded-[4px]">登陆</button> <button class="LoginText text-white bg-[#38CA73FF]">登陆</button>
</div> </div>
<div class="w-full flex-col h-30 flex box-border pt-[4vw] px-[3vw] pb-0 justify-center items-center"> <div class="LoginBar">
<button class="w-full h-20 text-3xl font-bold text-[#666666FF] bg-[#DDDDDDFF] rounded-[4px]" onclick="location.href='register.html'">去注册</button> <button class="LoginText text-[#666666FF] bg-[#DDDDDDFF]" onclick="location.href='register.html'">去注册</button>
</div> </div>
</li> </li>
</ul> </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"> <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> <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> <p class="">首页</p>
</li> </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> <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> <p class="">发现</p>
</li> </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> <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> <p class="">订单</p>
</li> </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> <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> <p class="">我的</p>
</ul> </ul>

7
UI/pages/order.html
View File

@ -7,6 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饿了么 确认订单</title> <title>饿了么 确认订单</title>
<link rel="stylesheet" href="../css/output.css"> <link rel="stylesheet" href="../css/output.css">
<link rel="stylesheet" href="../scss/order.scss">
</head> </head>
<body> <body>
<div class="w-full h-full"> <div class="w-full h-full">
@ -30,7 +31,7 @@
<!--订单明细部分--> <!--订单明细部分-->
<ul class="w-full"> <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"> <div class="flex items-center">
<img src="../assets/images/sp01.png" <img src="../assets/images/sp01.png"
height="40" width="40"/>" height="40" width="40"/>"
@ -38,7 +39,7 @@
</div> </div>
<p class="text-3xl">&#165;15</p> <p class="text-3xl">&#165;15</p>
</li> </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"> <div class="flex items-center">
<img src="../assets/images/sp02.png" <img src="../assets/images/sp02.png"
height="40" width="40"/>" height="40" width="40"/>"
@ -47,7 +48,7 @@
<p class="text-3xl">&#165;16</p> <p class="text-3xl">&#165;16</p>
</li> </li>
</ul> </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="">配送费</p>
<p class="">&#165;31</p> <p class="">&#165;31</p>
</div> </div>

50
UI/pages/orderList.html
View File

@ -7,9 +7,11 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饿了么 我的订单</title> <title>饿了么 我的订单</title>
<link rel="stylesheet" href="../css/output.css"> <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> <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 href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/orderList.css">
</head> </head>
<body> <body>
<div class="w-full h-full"> <div class="w-full h-full">
@ -30,19 +32,19 @@
</p> </p>
<div class="flex"> <div class="flex">
<p class="">&#165;49</p> <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>
</div> </div>
<ul class="w-full order-detailet" style="display: none"> <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="">纯肉鲜肉（水饺） x 2</p>
<p class="">&#165;15</p> <p class="">&#165;15</p>
</li> </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="">玉米鲜肉（水饺） x 1</p>
<p class="">&#165;16</p> <p class="">&#165;16</p>
</li> </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="">配送费</p>
<p class="">&#165;3</p> <p class="">&#165;3</p>
</li> </li>
@ -50,26 +52,26 @@
</li> </li>
<li class="w-full text-3xl"> <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"> <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> <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> </p>
<div class="flex"> <div class="flex">
<p class="">&#165;55</p> <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>
</div> </div>
<ul class="w-full order-detailet" style="display: none"> <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="">纯肉鲜肉（水饺） x 2</p>
<p class="">&#165;15</p> <p class="">&#165;15</p>
</li> </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="">玉米鲜肉（水饺） x 1</p>
<p class="">&#165;16</p> <p class="">&#165;16</p>
</li> </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="">配送费</p>
<p class="">&#165;3</p> <p class="">&#165;3</p>
</li> </li>
@ -80,26 +82,26 @@
<h3 class=" mt-24 box-border p-[4vw] text-3xl font-light text-[#999999FF]">已支付订单信息：</h3> <h3 class=" mt-24 box-border p-[4vw] text-3xl font-light text-[#999999FF]">已支付订单信息：</h3>
<ul class="w-full"> <ul class="w-full">
<li class="w-full text-3xl"> <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"> <p class="flex flex-row justify-between items-center">
万家饺子（软件园E18店） 万家饺子（软件园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> <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> </p>
<div class="flex"> <div class="flex">
<p class="">&#165;49</p> <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>
</div> </div>
<ul class="w-full order-detailet" style="display: none"> <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="">纯肉鲜肉（水饺） x 2</p>
<p class="">&#165;15</p> <p class="">&#165;15</p>
</li> </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="">玉米鲜肉（水饺） x 1</p>
<p class="">&#165;16</p> <p class="">&#165;16</p>
</li> </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="">配送费</p>
<p class="">&#165;3</p> <p class="">&#165;3</p>
</li> </li>
@ -107,26 +109,26 @@
</li> </li>
<li class="w-full text-3xl"> <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"> <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> <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> </p>
<div class="flex"> <div class="flex">
<p class="">&#165;55</p> <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>
</div> </div>
<ul class="w-full order-detailet" style="display: none"> <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="">纯肉鲜肉（水饺） x 2</p>
<p class="">&#165;15</p> <p class="">&#165;15</p>
</li> </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="">玉米鲜肉（水饺） x 1</p>
<p class="">&#165;16</p> <p class="">&#165;16</p>
</li> </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="">配送费</p>
<p class="">&#165;3</p> <p class="">&#165;3</p>
</li> </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"> <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> <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> <p class="text-[2.8vw]">首页</p>
</li> </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> <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> <p class="text-[2.8vw]">发现</p>
</li> </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> <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> <p class="text-[2.8vw]">订单</p>
</li> </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> <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> <p class="text-[2.8vw]">我的</p>
</li> </li>

32
UI/pages/payment.html
View File

@ -7,6 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饿了么 在线支付</title> <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/payment.scss">
<script src="../src/js/payment.js"></script> <script src="../src/js/payment.js"></script>
</head> </head>
<body> <body>
@ -30,28 +32,28 @@
<!--订单明细部分--> <!--订单明细部分-->
<ul class="w-full" id="detailetBox" style="display: none"> <ul class="w-full" id="detailetBox" style="display: none">
<li class="w-full box-border py-[1vw] px-[4vw] flex justify-between items-center"> <li class="TextBar">
<p class="text-2xl text-[#666666FF]">纯肉鲜肉（水饺） x 2</p> <p class="text">纯肉鲜肉（水饺） x 2</p>
<p class="text-2xl text-[#666666FF]">&#165;15</p> <p class="text">&#165;15</p>
</li> </li>
<li class="w-full box-border py-[1vw] px-[4vw] flex justify-between items-center"> <li class="TextBar">
<p class="text-2xl text-[#666666FF]">玉米鲜肉（水饺） x 1</p> <p class="text">玉米鲜肉（水饺） x 1</p>
<p class="text-2xl text-[#666666FF]">&#165;16</p> <p class="text">&#165;16</p>
</li> </li>
<li class="w-full box-border py-[1vw] px-[4vw] flex justify-between items-center"> <li class="TextBar">
<p class="text-2xl text-[#666666FF]">配送费</p> <p class="text">配送费</p>
<p class="text-2xl text-[#666666FF]">&#165;3</p> <p class="text">&#165;3</p>
</li> </li>
</ul> </ul>
</div> </div>
<!--支付方式--> <!--支付方式-->
<ul class="w-full"> <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"/> <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> <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>
<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" /> <img class="w-[33vw] h-[8.9vw]" src="../assets/images/wechat.png" />
</li> </li>
</ul> </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"> <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> <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> <p class="text-[2.8vw]">首页</p>
</li> </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> <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> <p class="text-[2.8vw]">发现</p>
</li> </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> <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> <p class="text-[2.8vw]">订单</p>
</li> </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> <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> <p class="text-[2.8vw]">我的</p>
</li> </li>

4
UI/pages/register.html
View File

@ -14,12 +14,12 @@
</div> </div>
<div class="m-2 space-y-4"> <div class="m-2 space-y-4">
<div>手机号码: <label> <div> <label>
手机号码: 手机号码:
<input type="tel" placeholder="手机号码" <input type="tel" placeholder="手机号码"
/> />
</label></div> </label></div>
<div>密码: <label> <div><label>
密码: 密码:
<input type="password" placeholder="密码"/> <input type="password" placeholder="密码"/>
</label></div> </label></div>

4
UI/scss/businessList.scss
View File

@ -21,7 +21,3 @@
.TextTittle{ .TextTittle{
@apply text-3xl text-gray-600 font-semibold leading-relaxed; @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
}

4
UI/scss/index.scss
View File

@ -31,6 +31,10 @@
} }
} }
.BottomBar{
@apply flex flex-col justify-center items-center text-[#999] select-none cursor-pointer;
}
.mainMenu { .mainMenu {
@apply grid grid-cols-5 gap-1 text-sm font-light text-center items-center justify-center; @apply grid grid-cols-5 gap-1 text-sm font-light text-center items-center justify-center;
div { div {

19
UI/scss/login.scss Normal file
View File

@ -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];
}

7
UI/scss/order.scss Normal file
View File

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

15
UI/scss/orderList.scss Normal file
View File

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

15
UI/scss/payment.scss Normal file
View File

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