style:首页样式修改

src/views/components/Header.vue

@@ -71,8 +71,8 @@
     .header{
         display: flex;
         align-items: center;
-        background: #e9e9e9;
-        align-items: center;
+        background: #F6F6F6;
+      padding: 0 20px;
       height: var(--headerHeight);
         .header_logo{
             display: flex;

src/views/components/Menu.vue

@@ -6,7 +6,7 @@
 				<template #title scoped>
 					<div class="menn_li">
 						<div><img :src="active == index ? menu.s_icon : menu.n_icon" class="menu_icon" /></div>
-						<div>{{ menu.name }}</div>
+						<div :style="{color: active == index ? '#fff' : '#4F85FB'}">{{ menu.name }}</div>
 					</div>
 				</template>
 			</van-sidebar-item>
@@ -79,9 +79,9 @@ onMounted(async () => {
 }
 
 .van-sidebar {
-	--van-sidebar-active-color: #0088cc; /* 设置激活项颜色为蓝色 */
-	/* --van-sidebar-background: red; */
-	--van-sidebar-selected-background: #1989fa;
+	--van-sidebar-active-color: #4F85FB; /* 设置激活项颜色为蓝色 */
+	--van-sidebar-background: transparent;
+	--van-sidebar-selected-background: #1989FA;
 }
 
 .menn_btn {
@@ -101,4 +101,7 @@ onMounted(async () => {
 	width: 2.5rem;
 	height: 2.5rem;
 }
+.van-sidebar-item:active {
+  background-color: #fff;
+}
 </style>

src/views/login/index.vue

@@ -100,6 +100,13 @@ const loginHandle = () => {
 </script>
 
 <style lang="scss" scoped>
+@media screen and (max-width: 1000px) {
+  .main {
+    .login-form {
+      width: 80%;
+    }
+  }
+}
 .main {
   width: 100%;
   height: 100vh;
@@ -108,7 +115,7 @@ const loginHandle = () => {
   justify-content: center;
   align-items: center;
   .login-form {
-    width: 25%;
+    width: 30%;
     display: flex;
     flex-direction: column;
     justify-content: center;