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

src/pages/index/components/module/OpenMapComponent/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+        <!-- 占位撑开 -->
+        <view class="w-vw"></view>
+        <view class="flex flex-items-center flex-justify-between p-12 border-box" @click="openMap">
+            <view class="rounded-16 p-16 bg-theme-color-50">
+                <view class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
+                    <image src="./images/map_icon.png" class="w-16 h-16" />
+                </view>
+            </view>
+            <view class="center ml-12">
+                <view class="font-color-800 font-size-14">打开导览地图</view>
+                <view class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</view>
+            </view>
+            <view class="ml-12 flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">
+                <uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />
+            </view>
+        </view>
+    </view>
+	
+</template>
+
+<script>
+export default {
+	name: 'OpenMapComponent',
+	props: {
+		distance: {
+			type: String,
+			default: '500m'
+		},
+		walk: {
+			type: String,
+			default: '8分钟'
+		}
+	},
+	methods: {
+		openMap() {
+			this.$emit('open')
+		}
+	}
+}
+</script>
+
+<style scoped>
+
+.center {
+	flex: 1 1 auto;
+}
+
+</style>
+

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;