diff --git a/src/前端/src/App.vue b/src/前端/src/App.vue
new file mode 100644
index 0000000..1918e77
--- /dev/null
+++ b/src/前端/src/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+
+</script>
+
+<style>
+#app {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/src/components/InputComponent.vue b/src/前端/src/components/InputComponent.vue
new file mode 100644
index 0000000..682eab6
--- /dev/null
+++ b/src/前端/src/components/InputComponent.vue
@@ -0,0 +1,16 @@
+<template>  
+  <div>
+  	<label for="user-input"></label>  
+  	<input type="text" id="user-input" v-model="userInput" placeholder="请输入">  
+  </div>  
+</template>  
+
+<script>  
+export default {  
+  data() {  
+	return {  
+	  userInput: '', // 初始化为空字符串  
+	};  
+  },  
+};  
+</script>
\ No newline at end of file
diff --git a/src/前端/src/components/NavigationBar.vue b/src/前端/src/components/NavigationBar.vue
new file mode 100644
index 0000000..c3b0c86
--- /dev/null
+++ b/src/前端/src/components/NavigationBar.vue
@@ -0,0 +1,67 @@
+<template>
+	<div class="footer-nav">
+		<div class="button-with-icon" @click="gotohome()">
+		    <el-icon><House /></el-icon>  
+		    <span>首页</span>  
+		</div>
+		<div class="button-with-icon" @click="gotomessage()()">
+		    <el-icon><ChatDotSquare /></el-icon>  
+		    <span>消息</span>  
+		</div>
+		<div class="button-with-icon" @click="gotomine()">  
+	        <el-icon><User /></el-icon>  
+	        <span>我的</span>  
+		</div> 
+	</div>  
+</template>
+
+<script>
+	export default {
+	  name: 'Home',  
+	  methods: {   
+		gotohome() {
+		    this.$router.push('/home'); 
+		},
+		gotomessage() {
+		  this.$router.push('/message'); 
+		},
+		gotomine() {
+		  this.$router.push('/mine'); 
+		},
+		gotoSearchPage() {
+		  this.$router.push('/searchPage'); 
+		},
+		gotoAddDemandPage() {
+		  this.$router.push('/addDemandPage'); 
+		},
+	  }  
+	}  
+</script>
+
+<style>
+	.footer-nav {
+	  /* 定义底部导航的样式 */  
+	  position: fixed;  
+	  bottom: 0;  
+	  left: 0;  
+	  right: 0;  
+	  display: flex;  
+	  justify-content: space-around;  
+	  padding: 10px;  
+	  background-color: #f5f5f5; /* 示例背景色 */  
+	}  
+	  
+	.button-with-icon {  
+	  /* 定义按钮的样式 */  
+	  flex: 1;  
+	  border: none;  
+	  padding: 10px;  
+	  background-color: #d5d5d5;  
+	  color: #333;  
+	  cursor: pointer;  
+	}  
+	  
+	.button-with-icon:hover {  
+	  background-color: #aaaaaa;  
+	}  
+</style>
\ No newline at end of file
diff --git a/src/前端/src/components/carousel.vue b/src/前端/src/components/carousel.vue
new file mode 100644
index 0000000..c6977ab
--- /dev/null
+++ b/src/前端/src/components/carousel.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-carousel :interval="4000" arrow="always">
+      <el-carousel-item v-for="(item, index) in imagePaths" :key="index">
+        <img :src="item" alt = "描述图像的文本">
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const imagePaths = ref([
+      'https://dimg04.c-ctrip.com/images/0102p12000828jmogCF2E_C_1600_1200.jpg',
+      'https://pic.kuaizhan.com/g3/b7/18/7a16-bad5-4d28-b5aa-571710c674cb36',
+      'https://img.shetu66.com/2023/07/11/1689058469100908.png'
+    ]);
+
+    return {
+      imagePaths
+    };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/前端/src/components/icons/IconCommunity.vue b/src/前端/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/src/前端/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git a/src/前端/src/components/icons/IconDocumentation.vue b/src/前端/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/src/前端/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git a/src/前端/src/components/icons/IconEcosystem.vue b/src/前端/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/src/前端/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git a/src/前端/src/components/icons/IconSupport.vue b/src/前端/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/src/前端/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git a/src/前端/src/components/icons/IconTooling.vue b/src/前端/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/src/前端/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/src/前端/src/components/isRegisterGuide.vue b/src/前端/src/components/isRegisterGuide.vue
new file mode 100644
index 0000000..057f9d8
--- /dev/null
+++ b/src/前端/src/components/isRegisterGuide.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-button plain class="addServe-button" @click="isGuide()">
+    我是导游
+  </el-button>
+
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+  >
+    <span>您还不是导游，是否申请平台导游资格</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="gotoRegisterGuide">
+          申请
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+import axios from 'axios';
+
+const router = useRouter();
+const dialogVisible = ref(false)
+	
+const gotoRegisterGuide = () => {
+	router.push('/registerGuide')
+}
+
+const isGuide = () => {
+	axios.get(`http://192.168.243.35:9000/users/isGuide?phone=${sessionStorage.getItem('phone')}`)
+	.then(response => {
+		if (response.data == true){
+		  router.push('/addServe')
+		}	
+		else{
+		  dialogVisible.value = true; 
+		}
+	})
+	.catch(error => {
+	  console.error('Error fetching user:', error);
+	});
+}
+
+</script>
+
+<style>
+	.addServe-button {
+	/* 定义返回按钮的样式 */  
+		position: fixed; /* 使按钮位置固定 */  
+		top: 10px; 
+		right: 10px; 
+		margin: 0;   
+		padding: 10px 20px;  
+		border: none;  
+		border-radius: 5px;  
+		background-color: #ccc;  
+		color: #333;  
+		cursor: pointer;  
+	} 
+	
+	.addServe-button:hover {  
+		  background-color: #aaaaaa;  
+		}
+	
+</style>
\ No newline at end of file
diff --git a/src/前端/src/components/types.ts b/src/前端/src/components/types.ts
new file mode 100644
index 0000000..b4c7ad9
--- /dev/null
+++ b/src/前端/src/components/types.ts
@@ -0,0 +1,6 @@
+export type AreaList = {  
+  code: string;  
+  level: number;  
+  name: string;  
+  areaList: AreaList[];  
+};
\ No newline at end of file
diff --git a/src/前端/src/main.js b/src/前端/src/main.js
new file mode 100644
index 0000000..041ba2e
--- /dev/null
+++ b/src/前端/src/main.js
@@ -0,0 +1,18 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import ElementPlus from 'element-plus';  
+import 'element-plus/theme-chalk/index.css'; 
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
+const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+app.use(ElementPlus);
+app.use(router);
+app.component('VueDatePicker', VueDatePicker);
+app.mount('#app');
\ No newline at end of file