From 01ee572a973ac73c364e98c9071062fc71200db6 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sun, 31 Mar 2024 18:12:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/LayoutDefaults/index.vue  | 19 ++++++++--
 src/layout/components/Menu/index.vue |  2 +-
 src/style.css                        |  1 +
 src/style/index.scss                 | 24 +++++++++++++
 src/style/variable.scss              | 54 +++++++++++++++++++++++++++-
 5 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 src/style/index.scss

diff --git a/src/layout/LayoutDefaults/index.vue b/src/layout/LayoutDefaults/index.vue
index 101eb71..506cdfb 100644
--- a/src/layout/LayoutDefaults/index.vue
+++ b/src/layout/LayoutDefaults/index.vue
@@ -1,7 +1,20 @@
 <template>
-  <div>默认布局</div>
+  <a-layout class="layout">
+    <a-layout-sider>Sider</a-layout-sider>
+    <a-layout>
+      <a-layout-header>Header</a-layout-header>
+      <a-layout-content>Content</a-layout-content>
+    </a-layout>
+    <a-layout-footer>Footer</a-layout-footer>
+  </a-layout>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({ name: "LayoutDefaults" });
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.layout {
+  height: 100vh;
+}
+</style>
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 97c42ce..8b80e99 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>菜单</div>
+  <div></div>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/src/style.css b/src/style.css
index e69de29..8640e58 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1 @@
+@import "./style/index.scss";
diff --git a/src/style/index.scss b/src/style/index.scss
new file mode 100644
index 0000000..b8ab440
--- /dev/null
+++ b/src/style/index.scss
@@ -0,0 +1,24 @@
+@import "./variable.scss";
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+html {
+  font-size: 14px;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
diff --git a/src/style/variable.scss b/src/style/variable.scss
index 1fc13d1..c6e0c93 100644
--- a/src/style/variable.scss
+++ b/src/style/variable.scss
@@ -1,2 +1,54 @@
 /* global css variable */
-$primary-color: #00b96b;
+
+$margin: 14px; // 盒子间距
+$padding: 16px; // 盒子和内容的间距
+$radius-box: 2px; // 边框圆角
+
+// 边框宽度
+$border-1: 1px; // 常规
+$border-2: 2px; // 较粗
+$border-3: 3px; // 粗
+
+// 设置全局主题色：https://arco.design/vue/docs/token
+$color-primary: rgb(var(--primary-6)); // 主题色
+$color-success: rgb(var(--success-6)); // 成功色
+$color-warning: rgb(var(--warning-6)); // 警示色
+$color-danger: rgb(var(--danger-6)); // 错误色
+$color-link: rgb(var(--link-6)); // 链接色
+
+// 字体色
+$color-text-1: var(--color-text-1); // 标题、重点字体颜色 强调/正文标题
+$color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
+$color-text-3: var(--color-text-3); // 次要信息 二级字体色
+$color-text-4: var(--color-text-4); // 置灰信息
+
+// 边框色
+$color-border-1: var(--color-border-1); // 浅色-主要边框色
+$color-border-2: var(--color-border-2); // 一般
+$color-border-3: var(--color-border-3); // 深/悬浮
+$color-border-4: var(--color-border-4); // 重/按钮描边
+
+// 背景色
+$color-bg-1: var(--color-bg-1); // 整体背景色
+$color-bg-2: var(--color-bg-2); // 一级容器背景
+$color-bg-3: var(--color-bg-3); // 二级容器背景
+$color-bg-4: var(--color-bg-4); // 三级容器背景
+
+// 阴影
+$shadow-special: 0 0 1px rgba(0, 0, 0, 0.3); // 特殊阴影
+$shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1); // 阴影样式1
+$shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2
+$shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3
+
+// 字体大小
+$font-size-body-3: 14px; // 默认大小-正文-常规
+$font-size-body-2: 13px; // 常规大小的小号字体
+$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
+// 标题
+$font-size-title-1: 16px; // h3-标题-小
+$font-size-title-2: 20px; // h2-标题-中
+$font-size-title-3: 24px; // h1-标题-大
+// 运营标题
+$font-size-display-1: 36px; // 运营标题-小
+$font-size-display-2: 48px; // 运营标题-中
+$font-size-display-3: 56px; // 运营标题-大