From 6d63961541cee56e82bc27fc6fa7565422a463c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=BF=E5=AD=9D=E5=BA=AD?= <a3197878436@163.com>
Date: Mon, 17 Jun 2024 18:29:57 +0800
Subject: [PATCH] 1

---
 src/前端/src/pages/DemandList.vue           |  75 ++
 src/前端/src/pages/DemandMatch.vue          |  93 +++
 src/前端/src/pages/Evaluation.vue           | 161 +++++
 src/前端/src/pages/EvaluationList.vue       |  94 +++
 src/前端/src/pages/Register.vue             | 145 ++++
 src/前端/src/pages/SecurityVerification.vue | 116 ++++
 src/前端/src/pages/addServe.vue             | 119 ++++
 src/前端/src/pages/mine.vue                 | 157 +++++
 src/前端/src/pages/searchPage.vue           |  74 ++
 src/前端/src/pages/serverDetail.vue         | 133 ++++
 src/前端/src/pages/serverList.vue           |  75 ++
 src/前端/src/pages/serverMatch.vue          |  69 ++
 src/前端/src/pages/serverMatched.vue        |  69 ++
 src/前端/src/pages/test.vue                 | 146 ++++
 src/前端/src/pages/views.vue                | 657 ++++++++++++++++++
 15 files changed, 2183 insertions(+)
 create mode 100644 src/前端/src/pages/DemandList.vue
 create mode 100644 src/前端/src/pages/DemandMatch.vue
 create mode 100644 src/前端/src/pages/Evaluation.vue
 create mode 100644 src/前端/src/pages/EvaluationList.vue
 create mode 100644 src/前端/src/pages/Register.vue
 create mode 100644 src/前端/src/pages/SecurityVerification.vue
 create mode 100644 src/前端/src/pages/addServe.vue
 create mode 100644 src/前端/src/pages/mine.vue
 create mode 100644 src/前端/src/pages/searchPage.vue
 create mode 100644 src/前端/src/pages/serverDetail.vue
 create mode 100644 src/前端/src/pages/serverList.vue
 create mode 100644 src/前端/src/pages/serverMatch.vue
 create mode 100644 src/前端/src/pages/serverMatched.vue
 create mode 100644 src/前端/src/pages/test.vue
 create mode 100644 src/前端/src/pages/views.vue

diff --git a/src/前端/src/pages/DemandList.vue b/src/前端/src/pages/DemandList.vue
new file mode 100644
index 0000000..34fc235
--- /dev/null
+++ b/src/前端/src/pages/DemandList.vue
@@ -0,0 +1,75 @@
+<template>
+	<div class="return">
+	    <button class="returnList" @click="returnList()">返回</button>
+	</div>
+  <div>  
+    <h1>订单列表</h1>  
+    <div  
+      v-for="(list, index) in lists"  
+      :key="lists.orderId"  
+      class="order-box"  
+      @click="goToOrderDetails(list.did)"  
+    >  
+      <p>目的地: {{ list.city }}</p>  
+      <p>开始时间: {{ list.departureDate }}</p>
+	  <p>结束时间: {{ list.endDate }}</p> 
+    </div>  
+  </div>  
+</template>  
+  
+<script>  
+import axios from 'axios';  
+  
+export default {  
+  data() {  
+    return {   
+      phone: sessionStorage.getItem('phone') || '',  
+      lists: [],  
+    };  
+  },  
+  async created() {  
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/SendDemand/sendAllDemands?phone=${this.phone}`)
+        .then(response => {
+    		this.lists = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+  methods: {  
+      goToOrderDetails(orderId) {  
+        this.$router.push({ name: 'OrderDetails', params: { orderId } });  
+      },
+	  returnList() {
+	  	this.$router.push('/mine');   		
+	  }
+    }
+};  
+</script>  
+  
+<style scoped>  
+.order-box {  
+  /* 样式代码，用于美化订单盒子 */  
+  border: 1px solid #ccc;  
+  padding: 10px;  
+  margin-bottom: 10px;  
+}
+.returnList {  
+/* 定义返回按钮的样式 */  
+	position: fixed; /* 使按钮位置固定 */  
+	top: 10px; 
+	left: 10px; 
+	margin: 0;   
+	padding: 10px 20px;  
+	border: none;  
+	border-radius: 5px;  
+	background-color: #ccc;  
+	color: #333;  
+	cursor: pointer;
+}
+ 	
+.returnList:hover {  
+	  background-color: #aaaaaa;  
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/DemandMatch.vue b/src/前端/src/pages/DemandMatch.vue
new file mode 100644
index 0000000..7e2dcbb
--- /dev/null
+++ b/src/前端/src/pages/DemandMatch.vue
@@ -0,0 +1,93 @@
+<template>     
+  <div>  
+    <h2>订单号: {{ orderId }}</h2>  
+    <div v-for="(service, index) in services" :key="service.gid" class="service-box">    
+        <div class="service-info">  
+            <p class="nickname">{{ service.nickname }}</p>    
+            <p class="end-date">{{ service.endDate }}</p>  
+        </div>  
+   
+        <button class="send-button" @click="sendServiceId(service.gid)">点击发送</button>    
+    </div>  
+  </div>  
+</template>    
+  
+<style scoped>  
+  
+/* 为按钮添加一些样式 */  
+.send-button {  
+  display: block;  
+  margin-left: auto; /* 将按钮推到右侧 */  
+  margin-top: 10px; /* 顶部添加一些间距 */  
+  padding: 5px 10px; /* 内边距 */  
+  border: none; /* 移除边框 */  
+  border-radius: 4px; /* 添加圆角 */  
+  background-color: #4CAF50; /* 背景色 */  
+  color: white; /* 文字颜色 */  
+  cursor: pointer; /* 鼠标悬停时显示小手 */  
+  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */  
+}  
+  
+.send-button:hover {  
+  background-color: #45a049; /* 鼠标悬停时改变背景色 */  
+}  
+  
+/* 为服务信息盒子添加样式 */  
+.service-box {  
+  border: 1px solid #ccc;  
+  padding: 15px;  
+  margin-bottom: 15px;  
+  background-color: #fff; /* 添加背景色 */  
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */  
+  border-radius: 5px; /* 添加圆角 */  
+}  
+  
+/* 为昵称和结束日期添加样式 */  
+.service-info {  
+  display: flex;  
+  justify-content: space-between; /* 内容两端对齐 */  
+  align-items: center; /* 内容垂直居中 */  
+}  
+  
+.nickname, .end-date {  
+  margin: 0; /* 移除默认的外边距 */  
+}  
+  
+</style>
+  
+<script>  
+import axios from 'axios'; 
+  
+export default {  
+  props: ['orderId'],  
+  data() {  
+    return {  
+      services: [] 
+    };  
+  },
+	methods: {  
+	    async sendServiceId(gid) {  
+	      try {  
+	        // 假设后端API接受gid和did作为POST请求体
+			const orderIdAsInt = parseInt(this.orderId, 10);
+			const gidAsInt = parseInt(gid, 10);
+	        const response = await axios.post('http://192.168.243.35:9000/DemandMatch/match', { did:orderIdAsInt,gid:gidAsInt});  
+	        alert('已向导游发送确认信息');  
+	      } catch (error) {  
+	        console.error('Error sending service ID and order ID:', error);  
+	      }  
+	    }  
+	  },
+  async created() {
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/DemandMatch/register?did=${this.orderId}`)
+        .then(response => {
+    		this.services = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+};  
+</script>  
+  
diff --git a/src/前端/src/pages/Evaluation.vue b/src/前端/src/pages/Evaluation.vue
new file mode 100644
index 0000000..8e928ca
--- /dev/null
+++ b/src/前端/src/pages/Evaluation.vue
@@ -0,0 +1,161 @@
+<template>  
+  <div class="item-manager">  
+    <el-button type="primary" @click="add">Add Item</el-button>  
+    <el-button type="danger" @click="onDelete">Delete Item</el-button>  
+    <el-scrollbar class="custom-scrollbar" max-height="800px">  
+      <div v-for="(item, index) in count" :key="index" class="item-container">  
+        <p class="scrollbar-demo-item">{{ item }}</p>  
+      </div>  
+      <div v-for="review in reviews" :key="review.id" class="review-container">  
+        <p class="scrollbar-demo-item">{{ review.content }}</p>  
+      </div>  
+    </el-scrollbar>  
+  </div>  
+</template>  
+  
+<style scoped>  
+.item-manager {  
+  display: flex;  
+  flex-direction: column;  
+  align-items: center;  
+  justify-content: center;  
+  margin: 20px;  
+}  
+  
+.custom-scrollbar {  
+  width: 100%; /* 根据需要调整滚动条容器的宽度 */  
+  border-radius: 8px; /* 添加圆角 */  
+  overflow: auto; /* 确保滚动条出现 */  
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */  
+}  
+  
+.scrollbar-demo-item {  
+  display: flex;  
+  align-items: center;  
+  justify-content: center;  
+  height: 50px;  
+  margin: 10px;  
+  padding: 0 15px; /* 添加内边距 */  
+  border-radius: 4px;  
+  background: var(--el-color-primary-light-9);  
+  color: var(--el-color-primary);  
+  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */  
+}  
+  
+.item-container,  
+.review-container {  
+}  
+  
+
+.custom-scrollbar::-webkit-scrollbar {  
+     width: 10px;  
+}  
+.custom-scrollbar::-webkit-scrollbar-track {  
+     background: #f1f1f1;   
+}  
+.custom-scrollbar::-webkit-scrollbar-thumb {  
+     background: #888;   
+}  
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {  
+     background: #555;   
+}  
+  
+  
+</style>
+
+<script>
+import axios from 'axios';
+
+export default {
+	props: ['orderId'],
+  data() {
+    return {
+      ebody: '',
+      satisfaction:'',
+      did:'',
+      evaluation: {}, // 添加一个用于存储评价信息的变量
+    };
+  },
+  methods: {
+    send() {
+            axios.post('http://192.168.243.35:9000/evaluate/addEvaluation', {
+              did: this.orderId, 
+              satisfaction: this.evaluation.satisfaction,
+              ebody: this.evaluation.ebody,
+            }, {
+              withCredentials: true,
+              headers: {
+                'Content-Type': 'application/json'
+              }
+            }).then(response => {
+              // 处理成功发送评价的情况
+			  location.reload();
+            }).catch(error => {
+              // 处理发送评价失败的情况
+              console.error('评价发送失败', error);
+            });
+    },
+    fetchEvaluation() {
+      axios.get(`http://192.168.243.35:9000/evaluate/getEvaluation?eid=${this.orderId}`)
+          .then(response => {
+            this.evaluation = response.data;// 将获取到的评价信息存储到 evaluation 变量中
+          })
+          .catch(error => {
+            console.error('获取评价信息失败', error);
+          });
+    },
+    handleRateChange(satisfaction) {
+      this.evaluation.satisfaction = satisfaction; // 更新星级值
+    }
+  },
+  mounted() {
+    this.fetchEvaluation(); // 在组件挂载时调用 fetchEvaluation 方法获取评价信息
+  }
+};
+</script>
+
+<style scoped>
+.user-feedback {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.feedback-input {
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #28a7a3;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #003f3f;
+  cursor: pointer;
+}
+
+.submitted-feedback {
+  border-top: 1px solid #a6cfee;
+  padding-top: 20px;
+}
+
+.feedback-item {
+  background-color: #abd4ee;
+  border: 1px solid #c2f1fb;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.feedback-item p {
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/EvaluationList.vue b/src/前端/src/pages/EvaluationList.vue
new file mode 100644
index 0000000..5f5a1c5
--- /dev/null
+++ b/src/前端/src/pages/EvaluationList.vue
@@ -0,0 +1,94 @@
+<template>  
+  <div class="item-manager">  
+    <el-button type="primary" @click="add">Add Item</el-button>  
+    <el-button type="danger" @click="onDelete">Delete Item</el-button>  
+    <el-scrollbar class="custom-scrollbar" max-height="800px">  
+      <div v-for="(item, index) in count" :key="index" class="item-container">  
+        <p class="scrollbar-demo-item">{{ item }}</p>  
+      </div>  
+      <div v-for="review in reviews" :key="review.id" class="review-container">  
+        <p class="scrollbar-demo-item">{{ review.content }}</p>  
+      </div>  
+    </el-scrollbar>  
+  </div>  
+</template>  
+  
+<style scoped> 
+ .scrollbar-demo-item {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   height: 50px;
+   margin: 10px;
+   text-align: center;
+   border-radius: 4px;
+   background: var(--el-color-primary-light-9);
+   color: var(--el-color-primary);
+ }
+.item-manager {  
+  display: flex;  
+  flex-direction: column;  
+  align-items: center;  
+  justify-content: center;  
+  margin: 20px;  
+}  
+  
+.custom-scrollbar {  
+  width: 100%; /* 根据需要调整滚动条容器的宽度 */  
+  border-radius: 8px; /* 添加圆角 */  
+  overflow: auto; /* 确保滚动条出现 */  
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */  
+}  
+  
+.scrollbar-demo-item {  
+  display: flex;  
+  align-items: center;  
+  justify-content: center;  
+  height: 50px;  
+  margin: 10px;  
+  padding: 0 15px; /* 添加内边距 */  
+  border-radius: 4px;  
+  background: var(--el-color-primary-light-9);  
+  color: var(--el-color-primary);  
+  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */  
+}  
+  
+.item-container,  
+.review-container {  
+
+}  
+   .custom-scrollbar::-webkit-scrollbar {  
+     width: 10px;  
+   }  
+   .custom-scrollbar::-webkit-scrollbar-track {  
+     background: #f1f1f1;   
+   }  
+   .custom-scrollbar::-webkit-scrollbar-thumb {  
+     background: #888;   
+   }  
+   .custom-scrollbar::-webkit-scrollbar-thumb:hover {  
+     background: #555;   
+   }   
+  
+</style>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+
+const count = ref(3)
+const reviews = ref([
+  { id: 1, content: 'Great product!' },
+  { id: 2, content: 'Fast shipping!' },
+  { id: 3, content: 'Excellent customer service!' }
+])
+
+const add = () => {
+  count.value++
+}
+const onDelete = () => {
+  if (count.value > 0) {
+    count.value--
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/前端/src/pages/Register.vue b/src/前端/src/pages/Register.vue
new file mode 100644
index 0000000..2b5c545
--- /dev/null
+++ b/src/前端/src/pages/Register.vue
@@ -0,0 +1,145 @@
+<template>
+	<div class="register-container-wrapper">
+		<div class="register-container">  
+			<h1>注册</h1>  
+			<form @submit.prevent="register" class="register-form">  
+			<label for="phone">手机号：</label>  
+			<input type="phone" id="phone" v-model="phone" class="input-field">  
+			<br>  
+			<label for="password">密码：</label>  
+			<input type="password" id="password" v-model="password" class="input-field">  
+			<br>
+	  
+			<label for="name">姓名：</label>
+			<input type="name" id="name" v-model="name" class="input-field">  
+			<br>
+	  
+			<label for="IDcard">身份证号：</label>
+			<input type="IDcard" id="IDcard" v-model="IDcard" class="input-field">  
+			<br>  
+      
+			<label for="nickname">昵称：</label>
+			<input type="nickname" id="nickname" v-model="nickname" class="input-field">  
+			<br>
+	  
+			<button type="submit" class="submit-button">注册</button>
+			<button class="returnLogin-button" @click="gotoLogin()">返回登录</button>   
+			</form>  
+		</div>
+	</div>
+</template>  
+  
+<style scoped> 
+.register-container-wrapper {  
+  /* 为这个容器设置背景图片 */  
+  background-image: url('../data/picture/loginBackground.webp');
+  background-size: cover;  
+  background-position: center;  
+  background-repeat: no-repeat;  
+  height: 100vh; /* 根据需要设置高度，可以是视口高度 */  
+  display: flex;  
+  justify-content: center;  
+  align-items: center; /* 垂直居中 */  
+}  
+
+.register-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 30px;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.input-field {
+  margin: 10px 0;
+  padding: 5px;
+  width: 100%;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  background-color: #28a7a3;
+  color: #abd4ee;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.returnLogin-button {  
+  padding: 10px 20px;  
+  background-color: #ff6347; /* 例如，设置为红色 */  
+  color: white;  
+  border: none;  
+  border-radius: 5px;  
+  cursor: pointer;  
+  margin-top: 10px; /* 可以添加一些上边距来分隔按钮 */  
+}  
+</style>
+
+<script>
+import { register } from '../api/auth'
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      phone: '',
+      password: '',
+	  name:'',
+	  nickname:'',
+	  IDcard:''
+    }
+  },
+  methods: {
+    register() {
+      console.log("：", this.phone);
+      console.log("密码：", this.password);
+	  console.log("姓名：",this.name);
+	  console.log("身份证号：",this.IDcard);
+	  console.log("昵称：",this.nickname);
+	  
+      axios.post(`http://192.168.243.35:9000/Login/register`, {
+        // 在请求体中传递用户名和密码字段
+        phone: this.phone,
+        password: this.password,
+		name:this.name,
+		IDCard:this.IDcard,
+		nickname:this.nickname
+      }, {
+        // 配置跨域请求时携带 cookie
+        withCredentials: true,
+        // 设置请求头部为 JSON 格式
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+          .then(response => {
+            if(response.data == 5){
+				alert("注册成功");
+				this.$router.push('/login');
+			}else if(response.data == 4){
+				alert("该账号已注册")
+			}else if(response.data == 9){
+				alert("身份证错误")
+			}else if (response.data == 11){
+				alert("手机号错误")
+			}else if (response.data == 12){
+				alert("密码过于简单，请输入8位以上密码")
+			}else if (response.data == 13){
+				alert("请输入真实姓名")
+			}else{
+				alert("未知错误")
+			}
+          })
+          .catch(error => {
+            console.error(error)
+            // 处理注册失败后的逻辑
+            alert("网络或服务器错误");
+          })
+    },
+	gotoLogin(){
+		this.$router.push('/login');
+	},
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/前端/src/pages/SecurityVerification.vue b/src/前端/src/pages/SecurityVerification.vue
new file mode 100644
index 0000000..811c2f4
--- /dev/null
+++ b/src/前端/src/pages/SecurityVerification.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="security-verification">
+    <h2>安全验证</h2>
+    <!-- 身份证号验证 -->
+    <div class="verification-item">
+      <label for="idCard">身份证号：</label>
+      <input type="text" id="idCard" v-model.trim="idCard" placeholder="请输入身份证号">
+      <button @click="verifyIdCard" :disabled="loading">验证</button>
+      <p v-if="idCardValid" class="valid-message">身份证号验证通过！</p>
+      <p v-else-if="idCard !== ''" class="invalid-message">请输入有效的身份证号！</p>
+    </div>
+    <!-- 银行卡号验证 -->
+    <div class="verification-item">
+      <label for="bankCard">银行卡号：</label>
+      <input type="text" id="bankCard" v-model.trim="bankCard" placeholder="请输入银行卡号">
+      <button @click="verifyBankCard" :disabled="loading">验证</button>
+      <p v-if="bankCardValid" class="valid-message">银行卡号验证通过！</p>
+      <p v-else-if="bankCard !== ''" class="invalid-message">请输入有效的银行卡号！</p>
+    </div>
+    <p v-if="error" class="error-message">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      idCard: '',
+      idCardValid: false,
+      bankCard: '',
+      bankCardValid: false,
+      loading: false,
+      error: ''
+    };
+  },
+  methods: {
+    verifyIdCard() {
+      this.loading = true;
+      // 模拟与后端接口通信
+      setTimeout(() => {
+        if (/^\d{17}[\dXx]$/.test(this.idCard)) {
+          this.idCardValid = true;
+          this.error = '';
+        } else {
+          this.idCardValid = false;
+          this.error = '请输入有效的身份证号！';
+        }
+        this.loading = false;
+      }, 1000); // 模拟1秒延迟
+    },
+    verifyBankCard() {
+      this.loading = true;
+      // 模拟与后端接口通信
+      setTimeout(() => {
+        if (/^\d{16,19}$/.test(this.bankCard)) {
+          this.bankCardValid = true;
+          this.error = '';
+        } else {
+          this.bankCardValid = false;
+          this.error = '请输入有效的银行卡号！';
+        }
+        this.loading = false;
+      }, 1000); // 模拟1秒延迟
+    }
+  }
+};
+</script>
+
+<style scoped>
+.security-verification {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.verification-item {
+  margin-bottom: 20px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input {
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.valid-message {
+  color: #28a745;
+}
+
+.invalid-message {
+  color: #dc3545;
+}
+
+.error-message {
+  color: #dc3545;
+}
+</style>
diff --git a/src/前端/src/pages/addServe.vue b/src/前端/src/pages/addServe.vue
new file mode 100644
index 0000000..ba8cee6
--- /dev/null
+++ b/src/前端/src/pages/addServe.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>  
+import { ref, onBeforeMount, watch, watchEffect } from 'vue'  
+import axios from 'axios'  
+import { ElSelect, ElOption } from 'element-plus'  
+import { AreaList } from '../components/types'
+import { format, addDays } from 'date-fns'
+import Return from '../components/return.vue'
+
+const province = ref('')
+const city = ref('')
+const area = ref('')
+const remark = ref('')
+
+const provinceList = ref<AreaList[]>([])
+const cityList = ref<AreaList[]>([])
+const areaList = ref<AreaList[]>([])
+const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDays(new Date(), 1), 'yyyy-MM-dd')])
+
+// 获取到JSON数据
+const getProvinceList = async () => {  
+  const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')  
+  provinceList.value = res.data  
+  console.log(provinceList.value)  
+}
+const publish = () => {  
+// 在这里编写发布时需要执行的逻辑  
+	if(city.value!=''){
+		axios.post(`http://192.168.243.35:9000/SendGuideService/register`,{phone:sessionStorage.getItem('phone') || '',city:city.value,time:rangeValue.value,remark:remark.value})
+	    .then(response => {
+	      alert("发布成功")
+	    })
+	    .catch(error => {
+	      console.error('发布失败', error);
+	    });}
+	else{
+		alert("请输入目的地")
+	}
+};
+onBeforeMount(async()=>{
+  getProvinceList()
+})
+
+watchEffect(() => {
+  console.log('rangeValue:', rangeValue.value)
+})
+// 监听省份的值改变调用的函数
+watch(province, (newValue, oldValue) => {  
+  const matchedProvince = provinceList.value.find(item => item.name === newValue)  
+  if (matchedProvince) {  
+    cityList.value = matchedProvince.areaList  
+    city.value = '' // 重置城市选择  
+    areaList.value = [] // 重置区县选项  
+    console.log(cityList.value)  
+  }  
+})  
+// 监听 市 的值改变调用的函数
+watch(city, (newValue, oldValue) => {  
+  const matchedCity = cityList.value.find(item => item.name === newValue)  
+  if (matchedCity) {  
+    areaList.value = matchedCity.areaList  
+    area.value = '' // 重置区县选择  
+    console.log(areaList.value)  
+  }  
+})  
+</script>
+<template>
+	<div>
+	      <Return></Return> 
+	</div>
+	
+	<div><h1>导游服务</h1></div>
+	<div class="addServe-container">
+		<h3>选择导游城市：</h3>
+		<div style="display: flex;">
+			<p style="color: red;">*</p>
+			<el-select v-model="province" clearable placeholder="省份">  
+				<el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name" />  
+			</el-select> 
+			<el-select v-model="city" clearable placeholder="城市">
+				<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.name" />
+			</el-select>
+			<!--<el-select v-model="area" clearable placeholder="Select">
+				<el-option v-for="item in areaList" :key="item.code" :label="item.name" :value="item.name" />
+			</el-select>-->
+		</div>
+		
+		<h3>选择导游时间：</h3>
+		
+		<div>
+			<VueDatePicker
+			  placeholder="请选择出行时间"
+			  range
+				:min-date="new Date()"
+			  format="yyyy-MM-dd"
+			  :width="280"
+			  v-model="rangeValue" />
+		</div>
+		
+		<h3>添加备注信息：</h3>
+		
+		<div>
+			<label for="user-input">备注信息:</label>  
+			<input type="text" id="remark" v-model="remark" placeholder="">  
+		</div>
+		
+		<el-button type="primary" @click="publish"style="margin-top: 20px;">发布</el-button>
+	</div>
+</template>
+	
+<style>
+.addServe-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 30px;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/mine.vue b/src/前端/src/pages/mine.vue
new file mode 100644
index 0000000..72b5bde
--- /dev/null
+++ b/src/前端/src/pages/mine.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="profile">
+    <h2>个人主页</h2>
+	
+	<div v-if="showNicknameInput">
+	  <label for="nickname">昵称：</label>
+	  <input type="nickname" id="nickname" v-model="nickname" class="input-field">
+	  <button @click="updateNickname">保存</button>
+	</div>
+	<div v-else>
+	  <p>昵称：{{ user.nickname }}</p>
+	  <button @click="toggleNicknameInput">更换</button>
+	</div>
+	
+	
+    <div v-if="showEmailInput">
+      <label for="email">邮箱：</label>
+      <input type="email" id="email" v-model="email" class="input-field">
+      <button @click="updateEmail">保存</button>
+    </div>
+    <div v-else>
+      <p>邮箱：{{ user.email }}</p>
+      <button @click="toggleEmailInput">编辑</button>
+    </div>
+
+    <div v-if="showPhoneInput">
+      <label for="PhoneNumber">手机号：</label>
+      <input type="phone" id="phone" v-model="phone" class="input-field">
+      <button @click="updatePhone">保存</button>
+    </div>
+    <div v-else>
+      <p>手机号：{{ user.phone }}</p>
+      <button @click="togglePhoneInput">更换</button>
+    </div>
+	<div><button @click="gotoDemandList">历史出行</button></div>
+	
+	<div v-if="user.membertype"><button @click="gotoServerList">导游记录</button></div>
+	
+	<div><button @click="gotoLogin">退出登陆</button></div>
+	
+	<div><NavigationBar /></div>
+	
+  </div>
+</template>
+
+<style scoped>
+/* 在这里添加样式 */
+  
+    
+</style>
+
+<script>
+import axios from 'axios';
+import NavigationBar from '../components/NavigationBar.vue';
+
+export default {
+  data() {
+    return {
+      user: {},
+	  nickname:'',
+	  showNicknameInput: false,
+      email: '',
+      showEmailInput: false,
+      phone:sessionStorage.getItem('phone') || '',
+      showPhoneInput: false,
+      idcard: '',
+      createtime: '',
+	  status: 0,
+	  reputation:60,
+    };
+  },
+  components: {
+      NavigationBar 
+  },
+  mounted() {
+    this.fetchUser(this.phone);
+  },
+  methods: {
+    fetchUser(phone) {
+      // 从后端 API 请求
+      axios.get(`http://192.168.243.35:9000/users/getByPhone?phone=${phone}`)
+          .then(response => {
+			this.user = response.data
+          })
+          .catch(error => {
+            console.error('Error fetching user:', error);
+          });
+    },
+	
+	toggleNicknameInput(){
+	  this.showNicknameInput = !this.showNicknameInput;
+	  this.nickname = this.user.nickname;
+	},
+	updateNickname(){
+		this.user.nickname = this.nickname;
+		axios.post(`http://192.168.243.35:9000/users/Pupdate`,{user:this.user})
+	      .then(response => {
+	        this.user.nickname = this.nickname;
+	        this.toggleNicknameInput(); // 切换回展示模式
+	      })
+	      .catch(error => {
+	        console.error('Error updating nickname:', error);
+	      });
+	},
+    toggleEmailInput() {
+      this.showEmailInput = !this.showEmailInput;
+      this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
+    },
+    updateEmail() {
+      // 这里发送请求更新用户邮箱
+	  this.user.email = this.email;
+      axios.post(`http://192.168.243.35:9000/users/Pupdate`,{user:this.user})
+          .then(response => {
+            this.user.email = this.email;
+            this.toggleEmailInput(); // 切换回展示模式
+          })
+          .catch(error => {
+            console.error('Error updating email:', error);
+          });
+    },
+    togglePhoneInput(){
+      this.showPhoneInput = !this.showPhoneInput;
+      this.phone = this.user.phone;
+    },
+    updatePhone(){
+		this.user.phone = this.phone;
+      axios.post(`http://192.168.243.35:9000/users/Pupdate`,{user:this.user})
+          .then(response => {
+			sessionStorage.setItem('phone', this.phone);
+            this.user.phone = this.phone;
+            this.togglePhoneInput(); // 切换回展示模式
+          })
+          .catch(error => {
+            console.error('Error updating phone:', error);
+          });
+    },
+	gotohome() {
+	  this.$router.push('/home'); 
+	},
+	gotomessage() {
+	  this.$router.push('/message'); 
+	},
+	gotoDemandList() {
+	  this.$router.push('/demandlist'); 
+	},
+	gotoServerList() {
+	  this.$router.push('/serverlist'); 
+	},
+	gotoLogin() {
+	  this.$router.push('/login');
+	  sessionStorage.setItem('phone', '');
+	  
+	},
+  }
+};
+</script>
+
diff --git a/src/前端/src/pages/searchPage.vue b/src/前端/src/pages/searchPage.vue
new file mode 100644
index 0000000..92016e6
--- /dev/null
+++ b/src/前端/src/pages/searchPage.vue
@@ -0,0 +1,74 @@
+<script>  
+import Return from '../components/return.vue'
+	export default {  
+	  name: 'SearchPage',  
+	  components: {  
+	    Return
+	  },
+	}
+</script>
+<template>  
+  <div class="home-container">  
+  <div>
+        <Return></Return> 
+  </div>
+    <div class="search-container">  
+          <input type="text" class="search-input" placeholder="世界这么大出去看看吧">  
+          <button class="search-button" @click="search">搜索</button>  
+    </div>        
+  </div>  
+  
+</template>  
+  
+<style scoped>  
+
+.search-container {  
+  /* 定义搜索框容器的样式 */  
+  text-align: center;  
+  /* 使用margin-top来确保搜索框在返回按钮下方20px */  
+  margin-top: 50px; /* 假设返回按钮的高度是30px（10px padding * 2 + 10px height），再加上20px的间距 */  
+  margin-bottom: 20px; /* 根据需要添加一些底部间距 */  
+  display: flex;  
+  align-items: center; /* 垂直居中 */  
+  justify-content: center; /* 水平居中（如果不需要完全居中，可以去掉这个）*/  
+}  
+
+.search-input {  
+  /* 定义搜索框的样式 */  
+  flex: 1; /* 占据剩余空间 */  
+  padding: 15px;    
+  border-radius: 5px;    
+  border: 1px solid #ccc;    
+}
+
+.search-button {  
+  margin-left: 10px; /* 与搜索框之间的间距 */    
+  padding: 10px 20px;    
+  border: none;    
+  border-radius: 5px;    
+  background-color: #ccc;    
+  color: #333;    
+  cursor: pointer;    
+} 
+
+.search-button:hover {  
+/* 搜索按钮点击时的样式 */  
+	background-color: #bbb;  
+}  
+
+.footer-nav button {  
+  /* 定义按钮的样式 */  
+  flex: 1;  
+  border: none;  
+  padding: 10px;  
+  background-color: #ccc;  
+  color: #333;  
+  cursor: pointer;  
+}  
+  
+.footer-nav button:hover {  
+  /* 按钮点击时的样式 */  
+  background-color: #bbb;  
+}  
+</style>  
+  
diff --git a/src/前端/src/pages/serverDetail.vue b/src/前端/src/pages/serverDetail.vue
new file mode 100644
index 0000000..7c2d312
--- /dev/null
+++ b/src/前端/src/pages/serverDetail.vue
@@ -0,0 +1,133 @@
+<template>
+	<div class="return">
+	    <button class="returnList" @click="returnList()">返回</button>
+	</div>
+	<h1>订单</h1>
+  <div class="server-details">  
+    <h2>订单详情</h2>  
+    <p>目的地: {{ list.city }}</p>  
+    <p>开始时间: {{ list.departureDate }}</p>
+	<p>结束时间: {{ list.endDate }}</p>
+	<p>创建时间: {{ list.createTime }}</p>
+	<p>备注: {{ list.message }}</p>
+	<p>当前状态:  
+	    <span v-if="list.status === 0">匹配中</span>
+		<span v-else-if="list.status === 1">匹配中</span>
+	    <span v-else-if="list.status === 2">匹配成功</span>  
+	    <span v-else-if="list.status === 3">已完成</span>  
+	    <span v-else>未知状态</span>  
+	</p>
+	<div>
+		<button v-if="list.status === 0" @click="goToServerMatch(serverId)">查看详情</button>
+		<button v-if="list.status === 1" @click="goToServerMatch(serverId)">查看详情</button>
+	</div>
+	<div>
+		<button v-if="list.status === 0" @click="goToServerMatched(serverId)">查看申请</button>
+		<button v-if="list.status === 1" @click="goToServerMatched(serverId)">查看申请</button>
+	</div>
+	<div>
+		<button v-if="list.status === 0" @click="cancelTrip(serverId)">取消服务</button>
+		<button v-if="list.status === 1" @click="cancelTrip(serverId)">取消服务</button>
+	</div>
+	<div>
+		<button v-if="list.status === 2" @click="cancel(serverId)">取消服务</button>
+	</div>
+	<div>
+		<button v-if="list.status === 3" @click="deleteOrder(serverId)">删除订单</button>
+	</div>
+  </div>  
+</template> 
+ 
+<style scoped> 
+.returnList {  
+/* 定义返回按钮的样式 */  
+	position: fixed; /* 使按钮位置固定 */  
+	top: 10px; 
+	left: 10px; 
+	margin: 0;   
+	padding: 10px 20px;  
+	border: none;  
+	border-radius: 5px;  
+	background-color: #ccc;  
+	color: #333;  
+	cursor: pointer;
+}
+ 	
+.returnList:hover {  
+	  background-color: #aaaaaa;  
+}
+</style>
+  
+<script>  
+import axios from 'axios';
+ 
+export default {  
+  props: ['serverId'], 
+  data() {
+    return {   
+      phone: sessionStorage.getItem('phone') || '',  
+      list: [],  
+    };  
+  },  
+  async created() {  
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/guideService/findbyid?gid=${this.serverId}`)
+        .then(response => {
+    		this.list = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+	methods: {    
+		goToServerMatch(serverId) {     
+			this.$router.push({ name: 'ServerMatch', params: { serverId } });    
+		},
+		goToServerMatched(serverId) {
+			this.$router.push({ name: 'ServerMatched', params: { serverId } });    
+		},
+		cancel(serverId) {     
+			    const gid = parseInt(this.serverId, 10);
+			    axios.post(`http://192.168.243.35:9000/GuideMatch/refuse`,{gid:gid})
+			        .then(response => {
+			    		if(response.data == 1){
+			    			alert('取消成功');
+			    			location.reload();
+			    		}
+			        })
+			        .catch(error => {
+			             console.error('Error fetching user:', error);
+			        });
+		},
+		cancelTrip(serverId) {
+			    const gid = parseInt(this.serverId, 10);
+			    axios.post(`http://192.168.243.35:9000/guideService/delbyid`,{gid:gid})
+			        .then(response => {
+			    		if(response.data == 1){
+			    			alert('取消成功');
+			    			this.$router.push('/serverList')
+			    		}
+			        })
+			        .catch(error => {
+			             console.error('Error fetching user:', error);
+			        });
+		},
+		deleteOrder(serverId) {
+			    const gid = parseInt(this.serverId, 10);
+			    axios.post(`http://192.168.243.35:9000/GuideMatch/delete`,{gid:gid})
+			        .then(response => {
+			    		if(response.data == 1){
+			    			alert('删除成功');
+			    			this.$router.push('/serverList')
+			    		}
+			        })
+			        .catch(error => {
+			             console.error('Error fetching user:', error);
+			        });
+		},
+		returnList() {
+			this.$router.push('/serverList');   		
+		}
+	}
+};  
+</script>
\ No newline at end of file
diff --git a/src/前端/src/pages/serverList.vue b/src/前端/src/pages/serverList.vue
new file mode 100644
index 0000000..94d15d2
--- /dev/null
+++ b/src/前端/src/pages/serverList.vue
@@ -0,0 +1,75 @@
+<template>
+	<div class="return">
+	    <button class="returnList" @click="returnList()">返回</button>
+	</div>
+  <div>  
+    <h1>订单列表</h1>  
+    <div  
+      v-for="(list, index) in lists"  
+      :key="list.gid"  
+      class="order-box"  
+      @click="goToServerDetails(list.gid)"  
+    >  
+      <p>目的地: {{ list.city }}</p>  
+      <p>开始时间: {{ list.departureDate }}</p>
+	  <p>结束时间: {{ list.endDate }}</p> 
+    </div>  
+  </div>  
+</template>  
+  
+<script>  
+import axios from 'axios';  
+  
+export default {  
+  data() {  
+    return {   
+      phone: sessionStorage.getItem('phone') || '',  
+      lists: [],  
+    };  
+  },  
+  async created() {  
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/SendGuideService/sendAllGuideService?phone=${this.phone}`)
+        .then(response => {
+    		this.lists = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+  methods: {  
+      goToServerDetails(serverId) {  
+        this.$router.push({ name: 'ServerDetail', params: { serverId } });  
+      },
+	  returnList() {
+	  	this.$router.push('/mine');   		
+	  }
+    }
+};  
+</script>  
+  
+<style scoped>  
+.order-box {  
+  /* 样式代码，用于美化订单盒子 */  
+  border: 1px solid #ccc;  
+  padding: 10px;  
+  margin-bottom: 10px;  
+}
+.returnList {  
+/* 定义返回按钮的样式 */  
+	position: fixed; /* 使按钮位置固定 */  
+	top: 10px; 
+	left: 10px; 
+	margin: 0;   
+	padding: 10px 20px;  
+	border: none;  
+	border-radius: 5px;  
+	background-color: #ccc;  
+	color: #333;  
+	cursor: pointer;
+}
+ 	
+.returnList:hover {  
+	  background-color: #aaaaaa;  
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/serverMatch.vue b/src/前端/src/pages/serverMatch.vue
new file mode 100644
index 0000000..43198f9
--- /dev/null
+++ b/src/前端/src/pages/serverMatch.vue
@@ -0,0 +1,69 @@
+<template>   
+  <div>订单号: {{ serverId }}</div>  
+  <div v-for="(service, index) in services" :key="service.gid" class="service-box">  
+        <p>目的地:{{ service.city }}</p>  
+        <p>开始时间:{{ service.departureDate }}</p>
+		<p>结束时间：{{ service.endDate }}</p>
+        <!-- 添加一个按钮，并绑定 click 事件处理器 sendServiceId -->  
+        <button @click="sendServiceId(service.did)">申请导游</button>  
+    </div>
+</template>  
+  
+<script>  
+import axios from 'axios'; 
+  
+export default {  
+  props: ['serverId'],  
+  data() {  
+    return {  
+      services: [] 
+    };  
+  },
+	methods: {  
+	    async sendServiceId(did) {  
+	      try {  
+	        // 假设后端API接受gid和did作为POST请求体
+			const serverIdAsInt = parseInt(this.serverId, 10);
+			const didAsInt = parseInt(did, 10);
+	        const response = await axios.post('http://192.168.243.35:9000/GuideMatch/match', { gid:serverIdAsInt,did:didAsInt});  
+	        alert('已向游客发送确认信息');  
+	      } catch (error) {  
+	        console.error('Error sending service ID and order ID:', error);  
+	      }  
+	    }  
+	  },
+  async created() {
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/GuideMatch/register?gid=${this.serverId}`)
+        .then(response => {
+    		this.services = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+};  
+</script>  
+  
+<style scoped>  
+/* 样式代码，定义 .service-box 的样式 */
+
+  
+/* 为按钮添加一些样式 */  
+.service-box button {  
+  margin-left: auto; /* 将按钮推到右侧 */  
+}   
+  
+/* 为按钮添加一些样式 */  
+.service-box button {  
+  margin-left: auto; /* 将按钮推到右侧 */  
+}   
+  
+.service-box {  
+  border: 1px solid #ccc;  
+  padding: 10px;  
+  margin-bottom: 10px;  
+  /* 其他样式 */  
+}
+
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/serverMatched.vue b/src/前端/src/pages/serverMatched.vue
new file mode 100644
index 0000000..dbf156f
--- /dev/null
+++ b/src/前端/src/pages/serverMatched.vue
@@ -0,0 +1,69 @@
+<template>   
+  <div>订单号: {{ serverId }}</div>  
+  <div v-for="(service, index) in services" :key="service.gid" class="service-box">  
+        <p>目的地:{{ service.city }}</p>  
+        <p>开始时间:{{ service.departureDate }}</p>
+		<p>结束时间：{{ service.endDate }}</p>
+        <!-- 添加一个按钮，并绑定 click 事件处理器 sendServiceId -->  
+        <button @click="sendServiceId(service.did)">接单</button>  
+    </div>
+</template>  
+  
+<script>  
+import axios from 'axios'; 
+  
+export default {  
+  props: ['serverId'],  
+  data() {  
+    return {  
+      services: [] 
+    };  
+  },
+	methods: {  
+	    async sendServiceId(did) {  
+	      try {  
+	        // 假设后端API接受gid和did作为POST请求体
+			const serverIdAsInt = parseInt(this.serverId, 10);
+			const didAsInt = parseInt(did, 10);
+	        const response = await axios.post('http://192.168.243.35:9000/GuideMatch/confirmed', { gid:serverIdAsInt,did:didAsInt});  
+	        alert('已接单');  
+	      } catch (error) {  
+	        console.error('Error sending service ID and order ID:', error);  
+	      }  
+	    }  
+	  },
+  async created() {
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/GuideMatch/register?gid=${this.serverId}`)
+        .then(response => {
+    		this.services = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+};  
+</script>  
+  
+<style scoped>  
+/* 样式代码，定义 .service-box 的样式 */
+
+  
+/* 为按钮添加一些样式 */  
+.service-box button {  
+  margin-left: auto; /* 将按钮推到右侧 */  
+}   
+  
+/* 为按钮添加一些样式 */  
+.service-box button {  
+  margin-left: auto; /* 将按钮推到右侧 */  
+}   
+  
+.service-box {  
+  border: 1px solid #ccc;  
+  padding: 10px;  
+  margin-bottom: 10px;  
+  /* 其他样式 */  
+}
+
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/test.vue b/src/前端/src/pages/test.vue
new file mode 100644
index 0000000..7eee1c1
--- /dev/null
+++ b/src/前端/src/pages/test.vue
@@ -0,0 +1,146 @@
+<template>  
+  <div class="home-page">  
+    <div class="page-header">
+		<h1 class="page-title">首页</h1>  
+    </div>  
+    <div class="carousel-container">  
+          <el-carousel :interval="4000" arrow="always" type="card">  
+            <el-carousel-item  
+              v-for="(item, index) in imagePaths"  
+              :key="index"  
+              :class="['carousel-item', index === Math.floor(imagePaths.length / 2) ? 'center-item' : '']"  
+            >  
+              <img :src="item" :alt="`Image ${index + 1}`" class="carousel-image">  
+            </el-carousel-item>  
+          </el-carousel>    
+    </div>  
+    <div class="search-container">    
+      <input type="text" class="search-input" placeholder="世界这么大出去看看吧">    
+      <button class="search-button" @click="gotoSearchPage()">搜索</button>
+	</div>
+    <div class="return">
+        <button class="addDemand-button" @click="gotoAddDemandPage()">我要出行</button>
+    	<isRegisterGuide />
+    </div> 
+  </div>
+	<div><NavigationBar /></div>
+</template>  
+  
+<script>  
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import NavigationBar from '../components/NavigationBar.vue';
+import isRegisterGuide from '../components/isRegisterGuide.vue'; 
+  
+export default {
+	components: {
+	    NavigationBar,
+		isRegisterGuide
+	},
+	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'
+    ]);  
+	const router = useRouter();
+    // 假设你有一个跳转到搜索页面的方法  
+    function gotoSearchPage() {  
+      router.push('/searchPage');   
+    }
+	function gotoAddDemandPage() {
+		router.push('/addDemandPage'); 
+	}
+  
+    return {  
+      imagePaths,  
+      gotoSearchPage,
+	  gotoAddDemandPage
+    };  
+  }  
+};  
+</script>  
+  
+<style scoped>  
+.home-page {  
+  display: flex;  
+  flex-direction: column;  
+  height: 100vh; /* 设置页面高度为视口高度 */  
+  padding: 20px;  
+  box-sizing: border-box;  
+}  
+  
+.page-title {  
+  margin: 0 0 20px; /* 为标题添加下边距，与轮播图分隔开 */  
+}    
+  
+.carousel-container {  
+  width: 100%;  
+  /* 根据需要添加其他样式 */  
+}  
+  
+.carousel-item {  
+  /* 默认的轮播项样式 */  
+  width: 80%; /* 假设默认宽度是80% */  
+  margin: 0 auto; /* 水平居中 */  
+}  
+  
+.center-item {  
+  /* 居中的轮播项样式 */  
+  width: 100%; /* 居中的项宽度为100% */  
+  /* 可以添加其他样式，如高度、边框等 */  
+}  
+  
+.carousel-image {  
+  width: 100%; /* 图片宽度与轮播项宽度一致 */  
+  height: auto; /* 保持图片比例 */  
+}  
+  
+.search-container {  
+  margin-top: 20px;  
+  text-align: center; /* 让搜索框和按钮居中 */  
+}  
+  
+.search-input {  
+  padding: 10px;  
+  border-radius: 4px;  
+  border: 1px solid #ccc;  
+  width: 300px; /* 可选，设置输入框宽度 */  
+}  
+  
+.search-button {  
+  padding: 10px 20px;  
+  border-radius: 4px;  
+  background-color: #4CAF50; /* 绿色背景 */  
+  border: none;  
+  color: white; /* 白色文字 */  
+  text-align: center;  
+  text-decoration: none;  
+  display: inline-block;  
+  font-size: 16px;  
+  margin: 4px 2px;  
+  cursor: pointer;  
+}
+
+.addDemand-button {  
+/* 定义返回按钮的样式 */  
+	position: fixed; /* 使按钮位置固定 */  
+	top: 10px; 
+	left: 10px; 
+	margin: 0;   
+	padding: 10px 20px;  
+	border: none;  
+	border-radius: 5px;  
+	background-color: #ccc;  
+	color: #333;  
+	cursor: pointer;
+}
+ 	
+.addDemand-button:hover {  
+	  background-color: #aaaaaa;  
+} 
+  
+ 
+  
+/* 可以添加更多样式来进一步美化 */  
+</style>
\ No newline at end of file
diff --git a/src/前端/src/pages/views.vue b/src/前端/src/pages/views.vue
new file mode 100644
index 0000000..fd7f213
--- /dev/null
+++ b/src/前端/src/pages/views.vue
@@ -0,0 +1,657 @@
+<script setup>
+// JavaScript Document
+
+window.onload = function(){
+  function $(param){
+    if(arguments[1] == true){
+      return document.querySelectorAll(param);
+    }else{
+      return document.querySelector(param);
+    }
+  }
+  var $box = $(".box");
+  var $box1 = $(".box-1 ul li",true);
+  var $box2 = $(".box-2 ul");
+  var $box3 = $(".box-3");
+  var $length = $box1.length;
+
+  var str = "";
+  for(var i =0;i<$length;i++){
+    if(i==0){
+      str +="<li class='on'>"+(i+1)+"</li>";
+    }else{
+      str += "<li>"+(i+1)+"</li>";
+    }
+  }
+  $box2.innerHTML = str;
+
+  var current = 0;
+
+  var timer;
+  timer = setInterval(go,4000);
+  function go(){
+    for(var j =0;j<$length;j++){
+      $box1[j].style.display = "none";
+      $box2.children[j].className = "";
+    }
+    if($length == current){
+      current = 0;
+    }
+    $box1[current].style.display = "block";
+    $box2.children[current].className = "on";
+    current++;
+  }
+
+  for(var k=0;k<$length;k++){
+    $box1[k].onmouseover = function(){
+      clearInterval(timer);
+    }
+    $box1[k].onmouseout = function(){
+      timer = setInterval(go,4000);
+    }
+  }
+  for(var p=0;p<$box3.children.length;p++){
+    $box3.children[p].onmouseover = function(){
+      clearInterval(timer);
+    };
+    $box3.children[p].onmouseout = function(){
+      timer = setInterval(go,4000);
+    }
+  }
+
+  for(var u =0;u<$length;u++){
+    $box2.children[u].index  = u;
+    $box2.children[u].onmouseover = function(){
+      clearInterval(timer);
+      for(var j=0;j<$length;j++){
+        $box1[j].style.display = "none";
+        $box2.children[j].className = "";
+      }
+      this.className = "on";
+      $box1[this.index].style.display = "block";
+      current = this.index +1;
+    }
+    $box2.children[u].onmouseout = function(){
+      timer = setInterval(go,2000);
+    }
+  }
+
+  $box3.children[0].onclick = function(){
+    back();
+  }
+  $box3.children[1].onclick = function(){
+    go();
+  }
+  function back(){
+    for(var j =0;j<$length;j++){
+      $box1[j].style.display = "none";
+      $box2.children[j].className = "";
+    }
+    if(current == 0){
+      current = $length;
+    }
+    $box1[current-1].style.display = "block";
+    $box2.children[current-1].className = "on";
+    current--;
+  }
+}
+
+</script>
+
+<template>
+
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <meta charset="utf-8">
+    <link type="text/css" rel="stylesheet" href="css/style.css" />
+    <script type="text/javascript" src="js/js.js"></script>
+    <title>电影电视剧</title>
+  </head>
+  <body>
+  <div class="wrapin">
+    <header class="clearfix"> <a href="#" class="logo"><img src="images/logo.png"/></a>
+      <ul class="clearfix nav">
+        <li><a href="index.html">首页</a></li>
+        <li><a href="dianying.html">电影</a></li>
+        <li><a href="dianshiju.html">电视剧</a></li>
+        <li><a href="yingyuan.html">电影院</a></li>
+      </ul>
+      <div class="denglu"> <a href="login.html" class="dl">登录</a>丨 <a href="zhuce.html" class="zc">注册</a> </div>
+    </header>
+  </div>
+  <div class="wrapin">
+    <div class="banner_con clearfix">
+      <div class="banner_box ">
+        <div class="box-1">
+          <ul>
+            <li><a href="#"><img src="images/banner_01.jpg"></img></a> </li>
+            <li><a href="#"><img src="images/banner_02.jpg"></img></a> </li>
+            <li><a href="#"><img src="images/banner_03.jpg"></img></a> </li>
+          </ul>
+        </div>
+        <div class="box-2">
+          <ul>
+          </ul>
+        </div>
+        <div class="box-3"> <span class="prev"> < </span> <span class="next"> > </span> </div>
+      </div>
+    </div>
+
+    <div class="con">
+      <div class="title">
+        <h2>电影院</h2>
+      </div>
+
+      <div class="about clearfix">
+        <div class="text">
+          <p>万达电影股份有限公司（以下简称万达电影 股票代码：002739.SZ）隶属于万达集团。2005年，万达电影院线成立，2015年A股上市，2017年正式更名为万达电影。业务范围从产业链下游放映业务向上延伸至电影投资、制作和发行及相关衍生业务，全面覆盖电影产业链。截至2020年12月31日，万达电影在全球拥有影院1704家，银幕17118块；包含国内直营影城700家、6099块银幕。其中，拥有44家杜比影院和370块IMAX银幕，IMAX银幕数量全球领先。 </p>
+          <a href="dyy1.html" class="btn">详情查看</a> <a href="dingpiao.html" class="btn2">订票</a>
+        </div>
+        <div class="pic"><img src="images/c1.jpg"/></div>
+      </div>
+
+      <div class="about clearfix">
+        <div class="text">
+          <p>太平洋电影城是四川省电影公司全资影城、属太平洋电影院线旗下影院，创立于1992年12月，距今已23年历史，累计票房收入2.3亿元，接待观众超过2千余万。影城成立以来先后投资三千余万元，经数次装修改造，使影城始终引领电影时尚潮流。 地处最繁华的春熙路商圈核心位置， 拥有18个豪华电影厅，观众座席数2000多座，是全国影厅最多、节目最多、场次最多、人次最多的影城。率先引进数字3D电影，影厅内安装有世界顶级的英国杜比CP650(EX)数字处理器、 美国JBL音响、德国ISCO一体化镜头、美国QSC数字功放（DCA）、 6.1声道杜比数码立体声系统！</p><a href="dyy2.html" class="btn">详情查看</a> <a href="dingpiao.html" class="btn2">订票</a>
+        </div>
+        <div class="pic"><img src="images/c2.jpg"/></div>
+      </div>
+
+      <div class="about clearfix">
+        <div class="text">
+          <p>百老汇电影中心有4间影院，共640个座位，还有1间叫Kubrick的书店，售卖电影、书籍及提供咖啡店服务。该处是除了已结业的影艺戏院外，香港少数播放非主流电影的戏院。
+            2009年11月，百老汇电影院(香港安乐影片有限公司)在北京开设了一家艺术影院——MOMA百老汇电影中心，这是北京第一座大型艺术影院。坐落在地标性建筑群当代MOMA(当代万国城)中， MOMA百老汇电影中心拥有三个放映屏幕、一个电影资料馆、一家书店和一间咖啡厅。</p>
+          <a href="dyy3.html" class="btn">详情查看</a>  <a href="dingpiao.html" class="btn2">订票</a>    </div>
+        <div class="pic"><img src="images/c3.jpg"/></div>
+      </div>
+    </div>
+
+    <div class="con">
+      <div class="title">
+        <h2>热门电影</h2>
+        <a href="dianying.html">查看更多</a> </div>
+      <ul class="game_list clearfix">
+        <li> <a href="dianying1.html" class="box">
+          <div class="pic"><img src="images/1.jpg"/></div>
+          <p>峰爆</p>
+        </a> </li>
+        <li> <a href="dianying2.html" class="box">
+          <div class="pic"><img src="images/2.jpg"/></div>
+          <p>困在时间的父亲</p>
+        </a> </li>
+        <li> <a href="dianying3.html" class="box">
+          <div class="pic"><img src="images/3.jpg"/></div>
+          <p>一级指控</p>
+        </a> </li>
+        <li> <a href="dianying4.html" class="box">
+          <div class="pic"><img src="images/4.jpg"/></div>
+          <p>寻龙诀</p>
+        </a> </li>
+        <li> <a href="dianying6.html" class="box">
+          <div class="pic"><img src="images/5.jpg"/></div>
+          <p>一曲倾情</p>
+        </a> </li>
+      </ul>
+    </div>
+    <div class="con">
+      <div class="title">
+        <h2>热门电视剧</h2>
+        <a href="dianshiju.html">查看更多</a> </div>
+      <ul class="game_list clearfix">
+        <li> <a href="dianshiju1.html" class="box">
+          <div class="pic"><img src="images/11.jpg"/></div>
+          <p> 加里森敢死队</p>
+        </a> </li>
+        <li> <a href="dianshiju2.html" class="box">
+          <div class="pic"><img src="images/22.jpg"/></div>
+          <p>情谜睡美人</p>
+        </a> </li>
+        <li> <a href="dianshiju3.html" class="box">
+          <div class="pic"><img src="images/33.jpg"/></div>
+          <p>双镜</p>
+        </a> </li>
+        <li> <a href="dianshiju4.html" class="box">
+          <div class="pic"><img src="images/44.jpg"/></div>
+          <p>突如其来的假期</p>
+        </a> </li>
+        <li> <a href="dianshiju5.html" class="box">
+          <div class="pic"><img src="images/55.png"/></div>
+          <p>奇妙博物馆</p>
+        </a> </li>
+      </ul>
+    </div>
+    <footer> 电影</footer>
+  </div>
+  </body>
+  </html>
+
+
+
+</template>
+
+<style scoped>
+
+
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  margin: 0 auto;
+  font-size: 14px;
+  background: #000;
+  background-size: auto;
+  color: #333;
+  position: relative;
+}
+img {
+  border: none;
+}
+a {
+  cursor: pointer;
+  color: #333;
+  text-decoration: none;
+  outline: none;
+}
+ul {
+  list-style-type: none;
+}
+em {
+  font-style: normal;
+}
+.lt {
+  float: left;
+}
+.rt {
+  float: right;
+}
+div.clear {
+  font: 0px Arial;
+  line-height: 0;
+  height: 0;
+  overflow: hidden;
+  clear: both;
+}
+.clearfix::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.wrapin {
+  width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.logo {
+  display: block;
+  width:80px;
+  margin: 5px 0;
+  float: left;
+  padding-right:100px;
+}
+.logo img {
+  width: 100%;
+}
+header {
+  height: 80px;
+  padding: 0 15px
+}
+.nav {
+  float: left;
+  line-height: 80px;
+}
+.nav li {
+  display: inline-block;
+  width: 80px;
+  font-size: 18px;
+  text-align: center;
+}
+.nav li a {
+  color: #fff;
+}
+.denglu {
+  float: right;
+  color: #fff;
+  line-height: 80px;
+}
+.denglu a {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 5px;
+  display: inline-block;
+}
+.banner {
+  width: 100%;
+}
+.banner img {
+  display: block;
+  width: 100%;
+}
+.banner_con {
+  margin: 20px 0; position:relative
+}
+.banner_box {
+  float: left;
+  width: 1200px;
+  height: 410px;
+  overflow: hidden;
+  position: relative;
+}
+.box-1 ul {
+}
+.box-1 ul li {
+  width: 100%;
+  height: 410px;
+  position: relative;
+  overflow: hidden;
+}
+.box-1 ul li img {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  height: 100%;
+}
+.box-1 ul li h2 {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 40px;
+  width: 100%;
+  background: rgba(125,125,120,.4);
+  text-indent: 2em;
+  padding-right: 500px;
+  font-size: 15px;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: normal;
+  color: ghostwhite
+}
+.box-2 {
+  position: absolute;
+  right: 20px;
+  bottom: 14px;
+}
+.box-2 ul li {
+  float: left;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  margin: 0 5px;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.5);
+  text-indent: 100px;
+  cursor: pointer;
+}
+.box-2 ul .on {
+  background: rgba(255,255,255,0.6);
+}
+.box-3 span {
+  position: absolute;
+  color: rgba(255,255,255,0.1);
+  background: rgba(255,255,255,0.1);
+  width: 50px;
+  height: 80px;
+  top: 50%;
+  font-family: "宋体";
+  line-height: 80px;
+  font-size: 60px;
+  margin-top: -40px;
+  border-radius: 5px;
+  text-align: center;
+  cursor: pointer;
+}
+.box-3 .prev {
+  left: 10px;
+}
+.box-3 .next {
+  right: 10px;
+}
+.box-3 span::selection {
+  background: transparent;
+}
+.box-3 span:hover {
+  background: rgba(255,255,255,.5);
+  color: rgba(255,255,255,1)
+}
+.banner_rt {
+  float: left;
+  width: 220px;
+  position:absolute;
+  top:0;
+  right:0;
+  height: 410px;
+  background: #0F161F;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.banner_rt h2 {
+  padding-bottom: 5px;
+  color: #fff;
+  font-size: 18px;
+}
+.banner_rt li {
+  margin: 8px 0;
+  height: 110px;
+  border: 1px solid #ccc;
+  overflow: hidden;
+}
+.banner_rt img {
+  width: 100%;
+  height: 100%;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.banner_rt img:hover {
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);  /*兼容-webkit-引擎浏览器*/
+  -moz-transform: scale(1.1);
+}
+.con {
+  margin-top: 20px;
+  background: #222;
+  padding: 15px;
+}
+.title {
+  color: #fff;
+  border-bottom: 1px solid #666;
+  margin: 15px 0;
+  position: relative;
+}
+.title h2 {
+  width: 180px;
+
+  font-weight: 600;
+  line-height: 40px;
+  font-size:24px;
+  border-bottom: none;
+}
+.title2 {
+  color: #fff;
+  margin: 15px 0;
+}
+.title2 h2 {
+  display: block;
+  padding: 0 15px;
+  text-align: center;
+  font-weight: 100;
+  line-height: 40px;
+  font-size: 18px;
+  border: 1px solid #fff;
+}
+.title a {
+  display: block;
+  font-size: 14px;
+  color: #ccc;
+  line-height: 40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.game_list {
+  margin: 15px -15px;
+}
+.game_list li {
+  float: left;
+  width: 20%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.game_list li .box {
+  display: block;
+  background: #214575;
+}
+.game_list li .pic {
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+}
+.game_list li .pic img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.game_list li .pic img:hover {
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);  /*兼容-webkit-引擎浏览器*/
+  -moz-transform: scale(1.1);
+}
+.game_list li p {
+  line-height: 40px;
+  text-align: center;
+  color: #fff;
+  font-size: 16px;
+}
+footer {
+  background: #0F161F;
+  text-align: center;
+  line-height: 50px;
+  font-size: 16px;
+  color: #fff;
+  margin-top: 20px;
+}
+.about {
+  line-height: 26px;
+  color: #fff;
+  font-size: 14px;
+}
+.about .text {
+  float: left;
+  width: 68%;
+  padding-top:100px;
+}
+.btn{ background:#006699; display:inline-block; font-size:19px; width:120px; line-height:40px; color:#fff; text-align:center; margin-top:20px}
+.btn2{ background:#CC6666; display:inline-block; font-size:19px; width:120px; line-height:40px; color:#fff; text-align:center; margin-top:20px}
+.about .pic {
+  float: right;
+  width: 30%;
+  margin-top: 20px;
+}
+.about .pic img {
+  width: 100%;
+}
+.hm_vdo {
+  width: 800px;
+  margin: 30px auto;
+  display: block;
+}
+form {
+  color: #fff;
+  width: 400px;
+  display: block;
+  margin: 20px auto;
+}
+form h2 {
+  text-align: center;
+  font-size: 20px;
+  margin: 30px 0;
+}
+form .in {
+  display: block;
+  margin: 10px 0;
+}
+form .in p {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+form .in .phone {
+  width: 100%;
+  padding: 0 15px;
+  border: none;
+  box-sizing: border-box;
+  height: 40px;
+  border-radius: 5px;
+  background: #fff;
+}
+form .but {
+  width: 100%;
+  height: 40px;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  background: #06c3ff;
+  margin: 20px 0;
+}
+form a {
+  display: block;
+  color: #eee;
+  font-size: 14px;
+}
+.details .pic {
+  float: left;
+  width: 15%;
+  height: 243px;
+}
+.details .pic img {
+  width: 100%;
+  height: 100%;
+}
+.details .text {
+  float: right;
+  width: 83%;
+  height: 243px;
+  color: #fff;
+}
+.details .text h2 {
+  font-size: 24px;
+  margin-bottom:30px;
+}
+.details .text p {
+  font-size: 16px;
+  line-height: 26px;
+}
+.txt{ color:#fff; line-height:30px;}
+.txt p{ margin:10px 0}
+.table_a {
+  font-size: 12px;
+  margin: 10px 0;
+  margin-top:40px;
+}
+.table_a td {
+  line-height: 26px;
+}
+.leix h4 {
+  font-size: 14px;
+  color: #fff;
+  font-weight: 100;
+  margin-bottom: 10px;
+}
+.leix a {
+  padding: 3px 8px;
+  margin-bottom: 5px;
+  margin-right: 5px;
+  background: #0e1e34;
+  color: #67c1f5;
+  display: inline-block;
+}
+
+
+</style>
\ No newline at end of file