hxz
1 month ago
parent
61ab1d2c55
commit
4a5b127262
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<!-- Navbar 固定显示 -->
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<!-- router-view 会根据路由动态切换组件 -->
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Navbar from './components/Navbar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
Navbar
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#app {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// src/router/index.js
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
|
||||||
|
// 导入页面组件
|
||||||
|
import HomePage from '../components/index.vue';
|
||||||
|
import PreferencePage from '../components/PreferenceForm.vue';
|
||||||
|
import ResultPage from '../components/Recommenduser.vue';
|
||||||
|
|
||||||
|
// 定义路由规则
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/', // 默认主页
|
||||||
|
name: 'Home',
|
||||||
|
component: HomePage,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/preference', // 恋爱偏好页
|
||||||
|
name: 'Preference',
|
||||||
|
component: PreferencePage,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/result', // 查看结果页
|
||||||
|
name: 'Result',
|
||||||
|
component: ResultPage,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 创建路由实例
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes, // 确保包含路由配置
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="recommend-container">
|
||||||
|
<div class="content">
|
||||||
|
<!-- 添加 @click 事件监听器 -->
|
||||||
|
<button class="start-btn" @click="navigateToForm">开始填写</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'RecommendIndex',
|
||||||
|
methods: {
|
||||||
|
// 添加 navigateToForm 方法来处理路由跳转
|
||||||
|
navigateToForm() {
|
||||||
|
this.$router.push("/preference");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.recommend-container {
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
background-image: url('../assets/pictures/recommendbg.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-btn {
|
||||||
|
background-color: #E5579B;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-btn:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
background-color: #d94b8b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import ElementPlus from 'element-plus';
|
||||||
|
import 'element-plus/dist/index.css';
|
||||||
|
import router from './router';
|
||||||
|
|
||||||
|
const app = createApp(App); // 创建 Vue 应用实例
|
||||||
|
app.use(ElementPlus); // 注册 ElementPlus
|
||||||
|
app.use(router); // 挂载路由
|
||||||
|
app.mount('#app'); // 挂载应用
|
||||||
Loading…
Reference in new issue