主题

src/assets/scss/globalVar.scss

@@ -1 +1,4 @@
-$bg-color: #1989fa;
+$bg-color: #272f35;
+$theme-color: #393f46;
+$font-color: #ffffff;
+$success-color: #26d574;

src/components/Header/User.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="user_info_container">123</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/pages/Home.vue

@@ -46,7 +46,7 @@ const isActiveTab = path => {
 .home_container {
   width: 2200px;
   height: 1395px;
-  background: #f6f6f6;
+  background: $bg-color;
   overflow: hidden;
   box-sizing: border-box;
   padding: 20px;
@@ -83,7 +83,7 @@ const isActiveTab = path => {
           border-radius: 50%;
           display: flex;
           align-items: center;
-          background: #eeeff8;
+          background: $theme-color;
           justify-content: center;
           margin-right: 18px;
           .icon {
@@ -97,16 +97,16 @@ const isActiveTab = path => {
           font-weight: bold;
           line-height: normal;
           letter-spacing: 0.06em;
-          color: #4f85fb;
+          color: $font-color;
         }
       }
       .active {
-        background: #4f85fb;
+        background: $success-color;
         .icon_wrap {
-          background: #4276e8;
+          background: #22c56b;
         }
         .tab_text {
-          color: #fff;
+          color: $font-color;
         }
       }
     }

src/pages/Main.vue

@@ -1,7 +1,47 @@
 <template>
-  <div>main</div>
+  <div class="main_container">
+    <div class="top_wrap">
+      <div class="phote_oper_container"></div>
+      <div class="heating_container"></div>
+      <div class="temperature_zone"></div>
+    </div>
+    <div class="bottom_wrap"></div>
+  </div>
 </template>
 
 <script setup></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.main_container {
+  .top_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .phote_oper_container {
+      width: 770px;
+      height: 870px;
+      border-radius: 16px;
+      background: $theme-color;
+    }
+    .heating_container {
+      width: 700px;
+      height: 870px;
+      border-radius: 16px;
+      background: $theme-color;
+    }
+    .temperature_zone {
+      width: 392px;
+      height: 870px;
+      border-radius: 16px;
+      background: $theme-color;
+    }
+  }
+  .bottom_wrap {
+    width: 1910px;
+    height: 377px;
+    border-radius: 20px;
+    background: $theme-color;
+  }
+}
+</style>