From 17f0452297f210af445034b80fa0a5eb74d4bab6 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Tue, 17 Oct 2023 19:21:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/globalVar.scss |  5 ++++-
 src/components/Header/User.vue |  7 +++++++
 src/pages/Home.vue             | 12 ++++++------
 src/pages/Main.vue             | 44 ++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Header/User.vue

diff --git a/src/assets/scss/globalVar.scss b/src/assets/scss/globalVar.scss
index 771137c..002837f 100644
--- a/src/assets/scss/globalVar.scss
+++ b/src/assets/scss/globalVar.scss
@@ -1 +1,4 @@
-$bg-color: #1989fa;
\ No newline at end of file
+$bg-color: #272f35;
+$theme-color: #393f46;
+$font-color: #ffffff;
+$success-color: #26d574;
diff --git a/src/components/Header/User.vue b/src/components/Header/User.vue
new file mode 100644
index 0000000..2c9bcea
--- /dev/null
+++ b/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>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 33c2192..531b801 100644
--- a/src/pages/Home.vue
+++ b/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;
         }
       }
     }
diff --git a/src/pages/Main.vue b/src/pages/Main.vue
index 4d34ba2..60b0d61 100644
--- a/src/pages/Main.vue
+++ b/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>