feat(*):登录页样式修改

src/layout/index.vue

 <template>
   <div class="layout-box">
-    <div class="left" :class="{'colWidth': sidebar}">
+    <div class="left" :class="{ colWidth: sidebar }">
       <menuCom></menuCom>
     </div>
-    <div class="right" :class="{'extend': sidebar}">
+    <div class="right" :class="{ extend: sidebar }">
       <div class="header">
         <hamburger
-            class="hamburger-container"
-            @toggleClick="toggleSideBar"
-            :is-active="sidebar"
+          class="hamburger-container"
+          @toggleClick="toggleSideBar"
+          :is-active="sidebar"
         />
         <h3>DC-TOM管理平台</h3>
         <div class="go-tom" @click="goTom">Eco-TOM三流合一</div>
         <div class="right-block">
-          <el-dropdown class="right-menu-item"
-              trigger="click"
-          >
-            <div  class="user-info">
-              <svg color="red"  data-icon-name="user-circle" data-style="line" icon_origin_id="24289" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="user-circle" class="icon line" width="40" height="40"><path style="fill: none; stroke: rgb(1, 135, 150); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;" d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z" id="primary"></path></svg>
+          <el-dropdown class="right-menu-item" trigger="click">
+            <div class="user-info">
+              <svg
+                color="red"
+                data-icon-name="user-circle"
+                data-style="line"
+                icon_origin_id="24289"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                id="user-circle"
+                class="icon line"
+                width="40"
+                height="40"
+              >
+                <path
+                  style="
+                    fill: none;
+                    stroke: rgb(1, 135, 150);
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                    stroke-width: 1;
+                  "
+                  d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z"
+                  id="primary"
+                ></path>
+              </svg>
               <!-- <img
                 src="data:image/png;base64,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"
                 class="user-avatar"
@@ -27,7 +48,7 @@
 
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item  @click="logout">退出登录</el-dropdown-item>
+                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -36,8 +57,11 @@
       <div class="content">
         <div class="breadcrumb-container">
           <el-breadcrumb separator="/">
-            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
-              {{ item.meta?.title || '未命名页面' }}
+            <el-breadcrumb-item
+              v-for="(item, index) in breadcrumbList"
+              :key="index"
+            >
+              {{ item.meta?.title || "未命名页面" }}
             </el-breadcrumb-item>
           </el-breadcrumb>
         </div>
@@ -49,38 +73,38 @@
 <script>
 import menuCom from "./menuCom.vue";
 import { CaretBottom } from "@element-plus/icons-vue";
-import { useRoute, useRouter } from 'vue-router';
-import { watch, ref, onMounted } from 'vue';
-import { getToken } from '@/utils/auth';
+import { useRoute, useRouter } from "vue-router";
+import { watch, ref, onMounted } from "vue";
+import { getToken } from "@/utils/auth";
 import { useUsersStore } from "@/pinia/user.js";
-import { menuStore } from '@/pinia/menu.js';
+import { menuStore } from "@/pinia/menu.js";
 import hamburger from "@/components/Hamburger/index.vue";
-import { storeToRefs } from 'pinia';
+import { storeToRefs } from "pinia";
 export default {
   components: {
     menuCom,
-    hamburger
+    hamburger,
   },
   setup() {
     const router = useRouter();
     const route = useRoute();
     const breadcrumbList = ref([]);
-    
+
     // 获取当前路由的面包屑数据
     const getBreadcrumbData = () => {
       breadcrumbList.value = [];
-      
+
       if (route.matched && route.matched.length > 0) {
         const matchedRoutes = route.matched;
-        
+
         // // 添加首页项（可选）
         // breadcrumbList.value.push({
         //   path: '/dashboard',
         //   meta: { title: '首页' }
         // });
-        
+
         // 添加匹配的路由
-        matchedRoutes.forEach(item => {
+        matchedRoutes.forEach((item) => {
           if (item.meta && item.meta.title) {
             breadcrumbList.value.push(item);
           }
@@ -89,19 +113,23 @@ export default {
     };
 
     const goTom = () => {
-      router.push({ path: '/intermediate' });
-    }
-    
+      router.push({ path: "/intermediate" });
+    };
+
     // 监听路由变化，更新面包屑
-    watch(() => route.path, () => {
-      getBreadcrumbData();
-    }, { immediate: true });
-    
+    watch(
+      () => route.path,
+      () => {
+        getBreadcrumbData();
+      },
+      { immediate: true }
+    );
+
     onMounted(() => {
       getBreadcrumbData();
     });
-    
-    const userName = getToken('userName')
+
+    const userName = getToken("userName");
     const store = useUsersStore();
     const menu = menuStore();
     const { sidebar } = storeToRefs(menuStore());
@@ -111,22 +139,21 @@ export default {
       sessionStorage.setItem("primaryTypeList", []);
       await store.logout();
       store.istrue = false;
-      router.push({ path: '/login' });
+      router.push({ path: "/login" });
     }
     const toggleSideBar = () => {
       menu.toggleSideBar();
-    }
+    };
     return {
       breadcrumbList,
       userName,
       logout,
       sidebar,
       toggleSideBar,
-      goTom
+      goTom,
     };
   },
-  created() {
-  },
+  created() {},
 };
 </script>
 
@@ -138,7 +165,7 @@ export default {
   .left {
     width: 200px;
     height: 100%;
-    background: linear-gradient(180deg, #018796, #014155);
+    background: linear-gradient(180deg, #000000, #181d21);
     transition: all 0.3s ease;
   }
   .colWidth {
@@ -151,10 +178,11 @@ export default {
     .header {
       width: 100%;
       height: 4.0625rem !important;
-      background: #ffffff;
+      background: #181d21;
       box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
       box-sizing: border-box;
       position: relative;
+      color: #ccc;
       .hamburger-container {
         line-height: 4.0625rem;
         height: 100%;
@@ -177,7 +205,7 @@ export default {
       }
       .go-tom {
         font-size: 0.9rem;
-        margin-top: - 16px;
+        margin-top: -16px;
         top: 50%;
         height: 32px;
         line-height: 32px;
@@ -227,19 +255,19 @@ export default {
           line-height: 1.5rem;
         }
       }
-
     }
     .breadcrumb-container {
-        flex: 1;
-        margin-bottom: 0.6rem;
-      }
+      flex: 1;
+      margin-bottom: 0.6rem;
+      color: #ccc !important;
+    }
     .content {
       width: 100%;
       height: calc(100vh - 4.0625rem);
       box-sizing: border-box;
       overflow: hidden;
       padding: 1.25rem 1.25rem 2rem;
-      background: #e7eef5;
+      background: black;
     }
   }
   .extend {
@@ -256,4 +284,7 @@ export default {
 .el-menu--collapse {
   width: auto !important;
 }
+.hamburger-icon path {
+  fill: #ccc !important;
+}
 </style>

src/style.css

 * {
- padding: 0;
- margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 .page-container {
     width: 100%;
     background: #ffffff;
     border-radius: 6px;
-    box-shadow: 0px 3px 6px 0px rgba(13,15,18,0.10);
+    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.10);
     padding: 1rem;
     box-sizing: border-box;
 }
@@ -29,7 +29,18 @@
     background: transparent !important;
     border: unset !important;
 }
+
 .login-container .el-input__wrapper {
     background: #181d21 !important;
     border-radius: 0 !important;
+}
+
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+    -webkit-text-fill-color: black !important;
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+    background-color: transparent;
+    background-image: none;
+    transition: background-color 50000s ease-in-out 0s;
 }
\ No newline at end of file

src/views/login/index.vue

@@ -28,7 +28,7 @@
             tabindex="1"
             @blur="handleAccountBlur($event)"
             @input="debounceAction"
-            autocomplete="on"
+            autocomplete="off"
           />
         </el-form-item>
       </div>
@@ -46,6 +46,7 @@
               show-password
               placeholder="密码 / Password"
               tabindex="1"
+              autocomplete="off"
             />
           </el-form-item>
         </el-tooltip>