feat: 创建了地图导航的组件

src/static/scss/background.scss

@@ -23,6 +23,10 @@
   background-color: #f5f7fa;
 }
 
+.bg-F2F5F8 {
+  background-color: #f2f5f8;
+}
+
 .bg-FF3D60 {
   background-color: #ff3d60;
 }
@@ -31,6 +35,10 @@
   background-color: $theme-color-500;
 }
 
+.bg-theme-color-100 {
+  background-color: $theme-color-100;
+}
+
 .bg-theme-color-50 {
   background-color: $theme-color-50;
 }

src/static/scss/colors.scss

@@ -55,3 +55,35 @@
 .color-FA7319 {
   color: #fa7319;
 }
+
+// text 颜色
+.text-color-900 {
+  color: $text-color-900;
+}
+.text-color-800 {
+  color: $text-color-800;
+}
+.text-color-700 {
+  color: $text-color-700;
+}
+.text-color-600 {
+  color: $text-color-600;
+}
+.text-color-500 {
+  color: $text-color-500;
+}
+.text-color-400 {
+  color: $text-color-400;
+}
+.text-color-300 {
+  color: $text-color-300;
+}
+.text-color-200 {
+  color: $text-color-200;
+}
+.text-color-100 {
+  color: $text-color-100;
+}
+.text-color-50 {
+  color: $text-color-50;
+}

src/static/scss/height.scss

@@ -6,22 +6,42 @@
   height: 100%;
 }
 
-.h-80 {
-  height: 80px;
+.h-8 {
+  height: 8px;
 }
 
-.h-44 {
-  height: 44px;
+.h-10 {
+  height: 10px;
 }
 
-.h-32 {
-  height: 32px;
+.h-12 {
+  height: 12px;
+}
+
+.h-16 {
+  height: 16px;
 }
 
 .h-24 {
   height: 24px;
 }
 
+.h-32 {
+  height: 32px;
+}
+
+.h-44 {
+  height: 44px;
+}
+
+.h-64 {
+  height: 64px;
+}
+
 .h72 {
   height: 72px;
-}
+}
+
+.h-80 {
+  height: 80px;
+}

src/static/scss/margin.scss

@@ -3,6 +3,14 @@
   margin-left: auto;
 }
 
+.mt-2 {
+  margin-top: 2px;
+}
+
+.mb-2 {
+  margin-bottom: 2px;
+}
+
 .m-4 {
   margin: 4px;
 }
@@ -31,6 +39,14 @@
   margin-bottom: 6px;
 }
 
+.ml-6 {
+  margin-left: 6px;
+}
+
+.mr-6 {
+  margin-right: 6px;
+}
+
 .m-8 {
   margin: 8px;
 }

src/static/scss/padding.scss

@@ -47,14 +47,6 @@
   padding-bottom: 8px;
 }
 
-.pl-8 {
-  padding-left: 8px;
-}
-
-.pr-8 {
-  padding-right: 8px;
-}
-
 .p-12 {
   padding: 12px;
 }
@@ -79,6 +71,18 @@
   padding-left: 12px;
 }
 
+.p-16 {
+  padding: 16px;
+}
+
+.pt-16 {
+  padding-top: 16px;
+}
+
+.pb-16 {
+  padding-bottom: 16px;
+}
+
 .pl-16 {
   padding-left: 16px;
 }

src/static/scss/width.scss

@@ -10,6 +10,22 @@
   width: calc(100vw - 24px);
 }
 
+.w-8 {
+  width: 8px;
+}
+
+.w-10 {
+  width: 10px;
+}
+
+.w-12 {
+  width: 12px;
+}
+
+.w-16 {
+  width: 16px;
+}
+
 .w-24 {
   width: 24px;
 }
@@ -26,7 +42,9 @@
   width: 60px;
 }
 
-
+.w-64 {
+  width: 64px;
+}
 
 .w-80 {
   width: 80px;