微调样式

src/assets/style/base.css

@@ -23,9 +23,18 @@ body {
     'Droid Sans',
     'Helvetica Neue',
     sans-serif;
-  font-size: 16px;
+  
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   user-select: none;
 }
+
+:root {
+  font-size: 32px; /* 设计稿是双倍设计的 */
+	--primaryColor: #1989FA;
+	--headerHeight: 4.375rem;
+	--footerHeight: 4.375rem;
+  --menuAreaWidth: 11.875rem;
+  --bgColor: #e9e9e9;
+}

src/assets/style/tailwind.css

@@ -1,3 +1,27 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer utilities {
+    .btn-dark {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);
+		border-radius: 4px;
+		color: white;
+	}
+	.btn-light {
+		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);
+		border-radius: 4px;
+		color: var(--primaryColor);
+	}
+    .component-page {
+		height: calc(100vh - var(--headerHeight) - var(--footerHeight));
+        width: calc(100vw - var(--menuAreaWidth));
+	}
+}

src/views/components/Footer.vue

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

src/views/components/Header.vue

@@ -93,7 +93,7 @@
         display: flex;
         align-items: center;
         background: #e9e9e9;
-        height: 108px;
+        height: var(--headerHeight);
         .header_logo{
             padding:10px 10px;
         }

src/views/components/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="menu">
+    <div class="menu flex justify-center">
         <van-sidebar v-model="active" class="sidebar">
             <van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
                 <template #title scoped>
@@ -61,11 +61,12 @@
 </script>
 <style lang="css" scoped>
     .sidebar{
-        width:445px;
+        width: calc(var(--menuAreaWidth) - 2.5rem);
+        /* padding: 0 1.125rem; */
         font-size: 30px
     }
     .menu{
-        height:1840px;
+        width: var(--menuAreaWidth);
         background: #e9e9e9;
     }
 

src/views/home/index.vue

@@ -1,23 +1,19 @@
 <template>
-	<div id="container">
-		<div>
-			<Header></Header>
-		</div>
-		<div class="container" style="display: flex">
-			<div class="home_menu">
-				<Menu></Menu>
-			</div>
+	<div>
+		<Header></Header>
 
-			<main>
-				<div class="main">
-					<router-view v-slot="{ Component }">
-						<keep-alive :exclude="['Home']">
-							<component :is="Component" />
-						</keep-alive>
-					</router-view>
-				</div>
+		<div class="main-content flex">
+			<Menu></Menu>
+			<main class="component-page">
+				<router-view v-slot="{ Component }">
+					<keep-alive :exclude="['Home']">
+						<component :is="Component" />
+					</keep-alive>
+				</router-view>
 			</main>
 		</div>
+
+		<Footer></Footer>
 	</div>
 </template>
 <script setup lang="ts">
@@ -25,6 +21,7 @@ import Header from "../components/Header.vue";
 import { onMounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import Menu from "@/views/components/Menu.vue";
+import Footer from "@/views/components/Footer.vue";
 defineOptions({
 	name: "Home",
 });
@@ -43,17 +40,4 @@ watch(
 
 <style lang="scss" scoped>
 @use "@/assets/style/mixin.scss" as *;
-.main {
-	display: flex;
-	width: 218px;
-	background: rgb(255, 255, 255);
-	height: 1640px;
-}
-
-.home_menu {
-	background: rgb(255, 255, 255);
-	height: 1724px;
-	width: 450px;
-	color: $textGray;
-}
 </style>

src/views/oreManage/index.vue

@@ -1,3 +1,12 @@
 <template>
-    <div>矿石管理</div>
+	<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>
+		<section></section>
+	</div>
 </template>
+
+<script lang="ts"></script>