调整背景色

src/assets/style/base.css

@@ -1,40 +1,30 @@
-
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-weight: normal;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
 }
 
 body {
-  min-height: 100vh;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+	min-height: 100vh;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+		"Droid Sans", "Helvetica Neue", sans-serif;
+
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	user-select: none;
   
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  user-select: none;
+  background-color: rgb(244, 244, 244);
 }
 
 :root {
-  font-size: 32px; /* 设计稿是双倍设计的 */
-	--primaryColor: #1989FA;
+	font-size: 32px; /* 设计稿是双倍设计的 */
+	--primaryColor: #1989fa;
 	--headerHeight: 4.375rem;
 	--footerHeight: 4.375rem;
-  --menuAreaWidth: 11.875rem;
-  --bgColor: #e9e9e9;
-}
+	--menuAreaWidth: 11.875rem;
+	--bgColor: rgb(244, 244, 244);
+}

src/assets/style/tailwind.css

@@ -3,11 +3,12 @@
 @tailwind utilities;
 
 @layer utilities {
-    .btn-dark {
+	.btn-dark {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);
+		background: var(--primaryColor);
+		border: solid 1px var(--primaryColor);
 		border-radius: 4px;
 		color: white;
 	}
@@ -15,13 +16,14 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background: linear-gradient(180deg, #ebf1fa 0%, #f8fafd 100%);
-		box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3), 0px 1px 5px 0px rgba(173, 173, 173, 0.47);
+		background-color: transparent;
 		border-radius: 4px;
 		color: var(--primaryColor);
+		border: solid 1px var(--primaryColor);
 	}
-    .component-page {
+	.component-page {
 		height: calc(100vh - var(--headerHeight) - var(--footerHeight));
-        width: calc(100vw - var(--menuAreaWidth));
+		width: calc(100vw - var(--menuAreaWidth));
+		background-color: #fff;
 	}
-}
+}

src/views/components/Footer.vue

@@ -1,3 +1,3 @@
 <template>
-    <div class="h-[--footerHeight] bg-[--bgColor]">Footer</div>
+    <div class="h-[--footerHeight] pl-[--menuAreaWidth]">Footer</div>
 </template>

src/views/components/Header.vue

@@ -92,7 +92,7 @@
         width: 100%;
         display: flex;
         align-items: center;
-        background: #e9e9e9;
+
         height: var(--headerHeight);
         .header_logo{
             padding:10px 10px;

src/views/components/Menu.vue

@@ -67,7 +67,6 @@
     }
     .menu{
         width: var(--menuAreaWidth);
-        background: #e9e9e9;
     }
 
     .menn_text{

src/views/home/index.vue

@@ -2,9 +2,9 @@
 	<div>
 		<Header></Header>
 
-		<div class="main-content flex">
+		<div class="flex">
 			<Menu></Menu>
-			<main class="component-page">
+			<main>
 				<router-view v-slot="{ Component }">
 					<keep-alive :exclude="['Home']">
 						<component :is="Component" />

src/views/oreManage/index.vue

@@ -1,11 +1,20 @@
 <template>
 	<div class="component-page">
-		<section class="flex items-center h-20">
-			<div class="btn-dark">添加矿石</div>
-			<div class="btn-light">编辑矿石</div>
-			<div class="btn-light">删除矿石</div>
+		<section class="flex items-center h-20 gap-3 pl-3">
+			<div class="btn-dark px-3 py-1 text-xs">添加矿石</div>
+			<div class="btn-light px-3 py-1 text-xs">编辑矿石</div>
+			<div class="btn-light px-3 py-1 text-xs">删除矿石</div>
+
+			<div class="btn-light px-3 py-1 text-xs ml-12">添加工艺</div>
+			<div class="btn-light px-3 py-1 text-xs">编辑工艺</div>
+			<div class="btn-light px-3 py-1 text-xs">删除工艺</div>
+		</section>
+
+		<section>
+			<header class="h-10 flex items-center bg-[#000]/[0.02]">
+
+			</header>
 		</section>
-		<section></section>
 	</div>
 </template>