diff --git a/src/Mini-12306前端开发/pages.json b/src/Mini-12306前端开发/pages.json
index fd3c3247..78a8edcc 100644
--- a/src/Mini-12306前端开发/pages.json
+++ b/src/Mini-12306前端开发/pages.json
@@ -17,6 +17,12 @@
 				"navigationBarTitleText": "Mini-12306"
 			}
 		},
+		{
+			"path": "pages/index/ticket",
+			"style": {
+				"navigationBarTitleText": "Mini-12306"
+			}
+		},
 		{
 			"path": "pages/index/user-center",
 			"style": {
@@ -33,7 +39,7 @@
 				"navigationBarTitleText": "Mini-12306"
 			}
 		},{
-			"path": "pages/index/Buy-ticket",
+			"path": "pages/index/confirm-order",
 			"style": {
 				"navigationBarTitleText": "Mini-12306"
 			}
diff --git a/src/Mini-12306前端开发/pages/index/Home.vue b/src/Mini-12306前端开发/pages/index/Home.vue
index 939b51ba..3e6f124f 100644
--- a/src/Mini-12306前端开发/pages/index/Home.vue
+++ b/src/Mini-12306前端开发/pages/index/Home.vue
@@ -43,17 +43,6 @@ export default {
   	  this.date = this.today; // 设置日期输入框默认值为当天日期
   	},
   methods: {
-	  
-	  // handleDepartureClick() {
-	  //     uni.navigateTo({
-	  //       url: '/pages/index/Station?type=departure'  
-	  //     });
-	  //   },
-	  //   handleDestinationClick() {
-	  //     uni.navigateTo({
-	  //       url: '/pages/index/Station?type=destination'  
-	  //     });
-	  //   },
 	  goToHome() {
 	        // 导航到首页
 	        uni.navigateTo({
@@ -73,9 +62,6 @@ export default {
 		});
 	  },
     searchTickets() {
-      // 在这里执行搜索车票的逻辑，可以发送请求给后端获取车票信息
-      // console.log('出发地:', this.departure);
-      // console.log('目的地:', this.destination);
 	  const formData = {
 			departure: this.departure,  
 			destination: this.destination,
@@ -93,17 +79,15 @@ export default {
 		    // 请求成功处理，检查返回的状态码和数据
 		    if (res.statusCode === 200) { // 确保状态码为200 
 			 const data = res.data;
-			 const ticketInfo = { };
-			 this.ticketInfo = data.trains;
-			 localStorage.setItem('ticketInfo', JSON.stringify(ticketInfo));
 		      if (data.message === '查询成功') {  
-		        console.log('请求成功',data);  
+		        console.log('请求成功',data);
+				localStorage.setItem('ticketInfo', JSON.stringify(data.trains));
 		        uni.showToast({  
 		          title: '查询成功',  
 		          icon: 'success'  
 		        });  
-				uni.navigateTo({
-				  url: '/pages/index/search-results'
+				 uni.navigateTo({
+				    url: '/pages/index/search-results'
 				});
 		      } else {  
 		        // 如果有其他错误消息，显示给用户
@@ -125,8 +109,6 @@ export default {
 		   });  
 		  }  
 		});
-      // 这里简单模拟搜索结果
-      // 实际开发中需要根据实际情况获取真实数据并更新ticketList
     },
   }
 };
diff --git a/src/Mini-12306前端开发/pages/index/Payment.vue b/src/Mini-12306前端开发/pages/index/Payment.vue
index 7bc1d08c..c77a1d08 100644
--- a/src/Mini-12306前端开发/pages/index/Payment.vue
+++ b/src/Mini-12306前端开发/pages/index/Payment.vue
@@ -1,64 +1,44 @@
 <template>
-  <view class="payment-page">
-    <view class="order-info">
-      <text>订单号：{{ orderNumber }}</text>
-      <text>票价：{{ price }}</text>
-    </view>
-    <view class="payment-method">
-      <text>请选择支付方式：</text>
-      <view class="method-item" v-for="(method, index) in paymentMethods" :key="index">
-        <radio :value="method.value" v-model="selectedMethod">{{ method.label }}</radio>
-      </view>
-    </view>
-    <button @click="confirmPayment">确认支付</button>
-  </view>
+  <div class="payment-page">
+    <div class="content">
+      <!-- 支付内容展示 -->
+      <h1>支付页面</h1>
+      <p>这里展示支付相关的信息和操作。</p>
+    </div>
+    <div class="footer">
+      <button class="btn cancel-order" @click="cancelOrder">取消订单</button>
+      <button class="btn buy-return" @click="buyReturn">购买返程</button>
+      <button class="btn pay-now" @click="payNow">立即支付</button>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      orderNumber: '123456789',
-      price: 100,
-      selectedMethod: '', // 修改为单一的选中支付方式
-      paymentMethods: [
-        { label: '微信支付', value: 'wechat' },
-        { label: '支付宝支付', value: 'alipay' },
-        { label: '银联支付', value: 'unionpay' }
-      ]
-    };
-  },
   methods: {
-    confirmPayment() {
-      if (!this.selectedMethod) {
-        uni.showToast({
-          title: '支付成功',
-          icon: 'none'
-        });
-        return;
-      }
-      switch (this.selectedMethod) {
-        case 'wechat':
-          uni.showToast({
-            title: '调用微信支付SDK',
-            //跳转到微信支付
-          });
-          break;
-        case 'alipay':
-          uni.showToast({
-            title: '调用支付宝支付SDK',
-            //跳转到支付宝支付
-          });
-          break;
-        case 'unionpay':
-          uni.showToast({
-            title: '调用银联支付SDK',
-            //跳转到银联支付
-          });
-          break;
-        default:
-          break;
-      }
+    cancelOrder() {
+      uni.navigateTo({
+        url: '/pages/index/confirm-order'
+      });
+    },
+    buyReturn() {
+      // 购买返程票的逻辑处理
+      console.log("购买返程");
+    },
+    payNow() {
+     const paymentSuccess = Math.random() < 0.8; // 模拟80%的成功率
+     
+           if (paymentSuccess) {
+             uni.showToast({
+               title: '支付成功',
+               icon: 'none'
+             });
+             uni.navigateTo({
+               url: '/pages/index/ticket'
+             });
+           } else {
+             alert("支付失败,余额不足！");
+           }
     }
   }
 };
@@ -68,22 +48,49 @@ export default {
 .payment-page {
   padding: 20px;
 }
-.order-info {
-  margin-bottom: 20px;
-}
-.payment-method {
+
+.content {
+  text-align: center;
   margin-bottom: 20px;
 }
-.method-item {
-  margin-bottom: 10px;
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  padding: 10px 20px;
+  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
 }
-button {
-  width: 90%;
-  padding: 10px;
-  background-color: #007bff;
-  color: #fff;
+
+.btn {
+  padding: 10px 20px;
   border: none;
-  border-radius: 5px;
   cursor: pointer;
+  border-radius: 5px;
+  font-size: 12px;
+  flex: 1;
+  margin: 0 5px;
+}
+
+.cancel-order {
+  background-color: transparent; /* 无色 */
+  color: black;
+  border: 1px solid gray;
+}
+
+.buy-return {
+  background-color: #add8e6; /* 浅蓝色 */
+  color: white;
+  border: 1px solid #add8e6;
+}
+
+.pay-now {
+  background-color: #ffa500; /* 橙色 */
+  color: white;
+  border: 1px solid #ffa500;
 }
 </style>
diff --git a/src/Mini-12306前端开发/pages/index/confirm-order.vue b/src/Mini-12306前端开发/pages/index/confirm-order.vue
new file mode 100644
index 00000000..fb37a8b8
--- /dev/null
+++ b/src/Mini-12306前端开发/pages/index/confirm-order.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+   <h1>确认订单</h1>
+      <div v-if="ticket">
+        <div v-for="(ticket, index) in selectedTicketInfo" :key="index" class="ticket-box">
+          <div class="departure-info">
+            <p class="time">{{ ticket.departure_time }}</p>
+            <p class="station">{{ ticket.departure_station }}</p>
+          </div>
+          <div class="train-info">
+            <h2 class="train-no">{{ ticket.trainno }}</h2>
+            <p class="date">{{ ticket.date }}</p>
+          </div>
+          <div class="arrival-info">
+            <p class="time">{{ ticket.arrival_time }}</p>
+            <p class="station">{{ ticket.arrival_station }}</p>
+          </div>
+        </div>
+      </div>
+    <div id="app">
+      <div class="seat-selection">
+        <div class="seat-options">
+          <label class="seat-option" :class="{ active: selectedSeat === 'business' }">
+            <input type="radio" v-model="selectedSeat" value="business"> 商务座
+          </label>
+          <label class="seat-option" :class="{ active: selectedSeat === 'firstClass' }">
+            <input type="radio" v-model="selectedSeat" value="firstClass"> 一等座
+          </label>
+          <label class="seat-option" :class="{ active: selectedSeat === 'secondClass' }">
+            <input type="radio" v-model="selectedSeat" value="secondClass"> 二等座
+          </label>
+          <label class="seat-option" :class="{ active: selectedSeat === 'noSeat' }">
+            <input type="radio" v-model="selectedSeat" value="noSeat"> 无座
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="passenger-selection">
+      <h2>乘车人选择</h2>
+      <button class="add-btn" @click="addPassenge">添加乘车人</button>
+    </div>
+    <button class="submit-btn" @click="submitOrder">提交订单</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ticket: {}  // 存储车票信息的变量
+    };
+  },
+  mounted() {
+    // 从本地存储中读取车票信息
+     if (this.$route.query.data) {
+          this.selectedData = JSON.parse(this.$route.query.data);
+        }
+  },
+  methods: {
+    submitOrder() {
+      uni.navigateTo({
+        url: '/pages/index/Payment'
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.ticket-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.departure-info, .arrival-info {
+  text-align: center;
+}
+
+.train-info {
+  text-align: center;
+}
+
+.time {
+  font-size: 8px;  /* 设置时间的字体大小 */
+}
+
+.station {
+  font-size: 16px;  /* 设置车站名称的字体大小 */
+}
+
+.train-no {
+  font-size: 20px;  /* 设置车次的字体大小 */
+}
+
+.date {
+  font-size: 10px;  /* 设置日期的字体大小 */
+}
+
+.seat-selection {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.seat-options {
+  display: flex;
+}
+
+.seat-option {
+  border: 1px solid #ccc;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s, border-color 0.3s;
+  margin-right: 10px;
+}
+
+.seat-option:last-child {
+  margin-right: 0;
+}
+
+.seat-option input[type="radio"] {
+  display: none;
+}
+
+.seat-option.active {
+  border-color: #007bff;
+  background-color: #d0e6ff;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 40px;
+  background-color: #007aff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+</style>
diff --git a/src/Mini-12306前端开发/pages/index/search-results.vue b/src/Mini-12306前端开发/pages/index/search-results.vue
index 6d202085..5ec8a4c7 100644
--- a/src/Mini-12306前端开发/pages/index/search-results.vue
+++ b/src/Mini-12306前端开发/pages/index/search-results.vue
@@ -1,12 +1,26 @@
 <template>
   <div>
-    <h1>火车票信息</h1>
-    <ul>
-      <li v-for="train in ticketInfo" :key="train.id">
-        <!-- 假设 train 对象中有相应的属性来显示火车票信息 -->
-        <p>{{ train.name }} - {{ train.departure }} to {{ train.destination }}</p>
-      </li>
-    </ul>
+    <h1>查询结果</h1>
+    <div v-if="ticketInfo && ticketInfo.length">
+      <div v-for="(ticket, index) in ticketInfo" :key="index" class="ticket-box">
+        <div class="departure-info">
+          <p class="time">{{ ticket.departure_time }}</p>
+          <p class="station">{{ ticket.departure_station }}</p>
+        </div>
+        <div class="train-info">
+          <h2 class="train-no">{{ ticket.trainno }}</h2>
+          <p class="date">{{ ticket.date }}</p>
+        </div>
+        <div class="arrival-info">
+          <p class="time">{{ ticket.arrival_time }}</p>
+          <p class="station">{{ ticket.arrival_station }}</p>
+        </div>
+        <button class="book-button" @click="handleBookClick(ticket)">预订</button>
+      </div>
+    </div>
+    <div v-else>
+      <p>未找到车票信息</p>
+    </div>
   </div>
 </template>
 
@@ -14,26 +28,81 @@
 export default {
   data() {
     return {
-      ticketInfo: [] // 初始化为空数组
+      ticketInfo: []  // 存储车票信息的变量
     };
   },
   mounted() {
-    // 从 localStorage 中获取存储的数据
-    const ticketInfoString = localStorage.getItem('ticketInfo');
-
-    if (ticketInfoString) {
-      // 解析 JSON 字符串为 JavaScript 对象
-      this.ticketInfo = JSON.parse(ticketInfoString);
-    } else {
-      console.log('未在 localStorage 中找到火车票信息');
+    // 从本地存储中读取车票信息
+    const storedTicketInfo = JSON.parse(localStorage.getItem('ticketInfo'));
+    if (storedTicketInfo) {
+      this.ticketInfo = storedTicketInfo;
+    }
+  },
+  methods: {
+    handleBookClick(ticket) {
+      uni.navigateTo({
+        url: '/pages/index/confirm-order'
+      });
     }
   }
 };
 </script>
 
 <style scoped>
-/* 这里是样式部分 */
 h1 {
-  color: blue;
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.ticket-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.departure-info, .arrival-info {
+  text-align: center;
+}
+
+.train-info {
+  text-align: center;
+}
+
+.time {
+  font-size: 10px;  /* 设置时间的字体大小 */
+}
+
+.station {
+  font-size: 16px;  /* 设置车站名称的字体大小 */
+}
+
+.train-no {
+  font-size: 20px;  /* 设置车次的字体大小 */
+}
+
+.date {
+  font-size: 10px;  /* 设置日期的字体大小 */
+}
+
+.book-button {
+  background-color: #007aff; /* 绿色背景 */
+  color: white; /* 白色文本 */
+  border: none; /* 无边框 */
+  padding: 5px 18px; /* 内边距 */
+  text-align: center; /* 文本居中 */
+  text-decoration: none; /* 无下划线 */
+  display: inline-block; /* 内联块级元素 */
+  font-size: 12px; /* 字体大小 */
+  margin: 4px 2px; /* 外边距 */
+  cursor: pointer; /* 鼠标指针 */
+  border-radius: 4px; /* 圆角边框 */
+}
+
+.book-button:hover {
+  background-color: #007aff; /* 悬停效果 */
 }
 </style>
diff --git a/src/Mini-12306前端开发/pages/index/ticket.vue b/src/Mini-12306前端开发/pages/index/ticket.vue
new file mode 100644
index 00000000..5e37c276
--- /dev/null
+++ b/src/Mini-12306前端开发/pages/index/ticket.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="ticket-page">
+    <div class="content">
+      <h1>车票详情</h1>
+      <div v-if="ticket">
+        <p><strong>车次：</strong>{{ ticket.trainNumber }}</p>
+        <p><strong>出发时间：</strong>{{ ticket.departureTime }}</p>
+        <p><strong>到达时间：</strong>{{ ticket.arrivalTime }}</p>
+        <p><strong>出发站：</strong>{{ ticket.departureStation }}</p>
+        <p><strong>到达站：</strong>{{ ticket.arrivalStation }}</p>
+        <p><strong>座位：</strong>{{ ticket.seat }}</p>
+        <p><strong>乘客姓名：</strong>{{ ticket.passengerName }}</p>
+      </div>
+      <div v-else>
+        <p>加载中...</p>
+      </div>
+    </div>
+    <div class="footer">
+	  <button class="btn" @click="refundTicket">我要退票</button>
+      <button class="btn" @click="rescheduleTicket">我要改签</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ticket: null, // 存储车票详细信息
+    };
+  },
+  methods: {
+    fetchTicketDetails() {
+      // 模拟获取车票详细信息的逻辑
+      setTimeout(() => {
+        this.ticket = {
+          trainNumber: 'G1234',
+          departureTime: '2024-06-15 08:00',
+          arrivalTime: '2024-06-15 10:30',
+          departureStation: '北京南',
+          arrivalStation: '上海虹桥',
+          seat: '1号车厢3A',
+          passengerName: '张三',
+        };
+      }, 1000); // 模拟网络请求延迟
+    },
+    rescheduleTicket() {
+      // 改签车票的逻辑处理
+      alert('改签功能暂未开放，敬请期待！');
+    },
+    refundTicket() {
+      // 退票的逻辑处理
+      alert('退票功能暂未开放，敬请期待！');
+    }
+  },
+  mounted() {
+    this.fetchTicketDetails(); // 组件挂载后获取车票详细信息
+  }
+};
+</script>
+
+<style scoped>
+.ticket-page {
+  padding: 20px;
+}
+
+.content {
+  text-align: left;
+  margin-bottom: 20px;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  padding: 10px 20px;
+  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
+}
+
+.btn {
+  padding: 3px 20px;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 16px;
+  flex: 1;
+  margin: 0 5px;
+  background-color: #32CD32; /* 绿色 */
+  color: white;
+}
+</style>