小bug修改,添加了整理了scss样式

This commit is contained in:
twinkle255 2023-06-21 00:02:09 +08:00
parent 511a8b2eaa
commit 81ea40ddcf
3 changed files with 55 additions and 28 deletions

View File

@ -8,6 +8,7 @@
<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="../scss/businessInfo.scss">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body class="">
@ -31,13 +32,13 @@
<!--食品列表部分-->
<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">
<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>
<h3 class="FoodName">纯肉鲜肉(水饺)</h3>
<p class="FoodBriefIntro">新鲜猪肉</p>
<p class="FoodNumber">&#165;15</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">
@ -51,13 +52,13 @@
</div>
</li>
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
<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>
<h3 class="FoodName">玉米鲜肉(水饺)</h3>
<p class="FoodBriefIntro">玉米鲜肉</p>
<p class="FoodNumber">&#165;16</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">
@ -71,13 +72,13 @@
</div>
</li>
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
<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>
<h3 class="FoodName">虾仁三鲜(蒸饺)</h3>
<p class="FoodBriefIntro">虾仁三鲜</p>
<p class="FoodNumber">&#165;22</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">
@ -91,13 +92,13 @@
</div>
</li>
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
<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>
<h3 class="FoodName">素三鲜(蒸饺)</h3>
<p class="FoodBriefIntro">素三鲜</p>
<p class="FoodNumber">&#165;15</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">
@ -111,13 +112,13 @@
</div>
</li>
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
<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>
<h3 class="FoodName">角瓜鸡蛋(蒸饺)</h3>
<p class="FoodBriefIntro">角瓜鸡蛋</p>
<p class="FoodNumber">&&#165;16</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">
@ -131,13 +132,13 @@
</div>
</li>
<li class="w=full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center">
<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>
<h3 class="FoodName">小白菜肉(水饺)</h3>
<p class="FoodBriefIntro">小白菜肉</p>
<p class="FoodNumber">&#165;18</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">
@ -155,9 +156,9 @@
<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>
<h3 class="FoodName">芹菜牛肉(水饺)</h3>
<p class="FoodBriefIntro">芹菜牛肉</p>
<p class="FoodNumber">&#165;18</p>
</div>
</div>
<div class="w-18 flex justify-between items-center">

27
UI/scss/businessInfo.scss Normal file
View File

@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
//@layer components {
// .FoodList{
// @apply w-full box-border mx-3 my-8 p-1.25/1 select-none flex justify-between items-center;
// }
// .Bar{
// @apply fa fa-plus-circle fa-2x mx-3 text-blue-500 cursor-pointer;
// }
//}
.FoodName{
@apply text-3xl mx-3 font-semibold text-gray-600;
}
.FoodBriefIntro{
@apply text-2xl leading-loose mx-3 font-normal text-gray-500 mt-1;
}
.FoodNumber{
@apply text-2xl text-gray-500 mx-3 font-normal mt-1;
}

View File

@ -1,4 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;