1

src/前端/src/pages/HomePage.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>