From 4a5b127262e574089c26a525711536caa2d87cb8 Mon Sep 17 00:00:00 2001 From: hxz Date: Thu, 19 Dec 2024 21:31:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A8=E8=8D=90=E9=83=A8=E5=88=86=E6=95=B4?= =?UTF-8?q?=E5=90=88=E4=B8=8E=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/recommend/App.vue | 34 ++++ src/recommend/Navbar.vue | 132 +------------ src/recommend/PreferenceForm.vue | 131 ++++++++++++- src/recommend/Recommenduser.vue | 306 +++++++++++++++++++++++++++++++ src/recommend/index.js | 34 ++++ src/recommend/index.vue | 55 ++++++ src/recommend/main.js | 10 + 7 files changed, 569 insertions(+), 133 deletions(-) create mode 100644 src/recommend/App.vue create mode 100644 src/recommend/Recommenduser.vue create mode 100644 src/recommend/index.js create mode 100644 src/recommend/index.vue create mode 100644 src/recommend/main.js diff --git a/src/recommend/App.vue b/src/recommend/App.vue new file mode 100644 index 00000000..e5e5846c --- /dev/null +++ b/src/recommend/App.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/recommend/Navbar.vue b/src/recommend/Navbar.vue index 07f277df..7384362d 100644 --- a/src/recommend/Navbar.vue +++ b/src/recommend/Navbar.vue @@ -15,56 +15,12 @@ 个人空间 - - -
- -
- 背景图片1 - 背景图片2 - 背景图片3 - 背景图片4 -
- - -

填写你的恋爱偏好

-
- -
- 卡片图片 -
-

{{ card.title }}

-

{{ card.description }}

- -
-
@@ -114,90 +70,4 @@ export default { .menu .el-menu-item:hover { color: #ffdbdb; } - -/* 中部内容样式 */ -.intro { - position: relative; /* 确保背景图片和内容可以叠加 */ - padding: 60px 20px; - text-align: center; - background: linear-gradient(to bottom, #fffacd, #ffe4e1); - overflow: hidden; /* 确保背景图片不超出区域 */ -} -.intro h1 { - font-size: 28px; - color: #333; - margin-bottom: 30px; - position: relative; /* 内容相对于背景定位 */ - z-index: 2; /* 确保内容在背景图片之上 */ -} -.card-container { - display: flex; - justify-content: center; - gap: 30px; - position: relative; /* 内容层级 */ - z-index: 2; -} -.card { - width: 250px; - text-align: center; - padding: 20px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - border-radius: 10px; - background: #fff; -} -.card-image { - height: 100px; - width: 100px; - background: #f0f0f0; - border-radius: 50%; - margin: 0 auto 15px auto; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} -.card-image img { - width: 100%; - height: 100%; - object-fit: cover; -} -.card h3 { - font-size: 20px; - color: #ff77a9; - margin-bottom: 10px; -} -.card p { - font-size: 14px; - color: #555; -} - -/* 背景图片样式 */ -.background-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; /* 背景层级 */ - pointer-events: none; /* 确保背景不影响内容的交互 */ -} -.background-image { - position: absolute; - width: 200px; - height: auto; - opacity: 0.8; -} -.bg1 { - top: 20px; - left: 50px; -} -.bg2 { - bottom: 30px; - right: 80px; -} -.bg3 { - top: 50%; - left: 40%; - transform: translate(-50%, -50%); -} diff --git a/src/recommend/PreferenceForm.vue b/src/recommend/PreferenceForm.vue index c3cdb4a9..48eca9e2 100644 --- a/src/recommend/PreferenceForm.vue +++ b/src/recommend/PreferenceForm.vue @@ -1,5 +1,27 @@ - @@ -211,6 +233,24 @@ export default { senseOfHumor: "", honesty: "" }, + + cards: [ + { + title: "恋爱偏好", + description: "为了找到与你的心动嘉宾，请你诚实填写你的恋爱偏好", + image: "tu1.png" + }, + { + title: "查看结果", + description: "查看你的恋爱树，了解你的恋爱类型", + image: "tu2.png" + }, + { + title: "释放潜力", + description: "与你的心动嘉宾开始聊天，勇敢追求真爱", + image: "tu3.png" + }, + ], rules: { gender: [{ required: true, message: '请选择性别', trigger: 'change' }], @@ -286,10 +326,12 @@ export default { }, // 提交表单 handleSubmit() { + this.$refs.form.validate((valid) => { if (valid) { // 在这里发送表单数据到后端 this.submitData(this.formData); + this.$router.push("/result"); } else { this.$message.error("请检查表单填写是否正确"); } @@ -305,6 +347,7 @@ export default { }); } }, + }; @@ -358,7 +401,91 @@ fieldset { .submit-button:hover { background-color: #ff3d7f; } +/* 中部内容样式 */ +.intro { + position: relative; /* 确保背景图片和内容可以叠加 */ + padding: 60px 20px; + text-align: center; + background: linear-gradient(to bottom, #fffacd, #ffe4e1); + overflow: hidden; /* 确保背景图片不超出区域 */ +} +.intro h1 { + font-size: 28px; + color: #333; + margin-bottom: 30px; + position: relative; /* 内容相对于背景定位 */ + z-index: 2; /* 确保内容在背景图片之上 */ +} +.card-container { + display: flex; + justify-content: center; + gap: 30px; + position: relative; /* 内容层级 */ + z-index: 2; +} +.card { + width: 250px; + text-align: center; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 10px; + background: #fff; +} +.card-image { + height: 100px; + width: 100px; + background: #f0f0f0; + border-radius: 50%; + margin: 0 auto 15px auto; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +.card-image img { + width: 100%; + height: 100%; + object-fit: cover; +} +.card h3 { + font-size: 20px; + color: #ff77a9; + margin-bottom: 10px; +} +.card p { + font-size: 14px; + color: #555; +} +/* 背景图片样式 */ +.background-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; /* 背景层级 */ + pointer-events: none; /* 确保背景不影响内容的交互 */ +} +.background-image { + position: absolute; + width: 200px; + height: auto; + opacity: 0.8; +} +.bg1 { + top: 20px; + left: 50px; +} +.bg2 { + bottom: 30px; + right: 80px; +} +.bg3 { + top: 50%; + left: 40%; + transform: translate(-50%, -50%); +} legend { font-size: 22px; color: #ff77a9; diff --git a/src/recommend/Recommenduser.vue b/src/recommend/Recommenduser.vue new file mode 100644 index 00000000..ed1b8917 --- /dev/null +++ b/src/recommend/Recommenduser.vue @@ -0,0 +1,306 @@ + + + + + \ No newline at end of file diff --git a/src/recommend/index.js b/src/recommend/index.js new file mode 100644 index 00000000..8de879f8 --- /dev/null +++ b/src/recommend/index.js @@ -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; diff --git a/src/recommend/index.vue b/src/recommend/index.vue new file mode 100644 index 00000000..737c8340 --- /dev/null +++ b/src/recommend/index.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/recommend/main.js b/src/recommend/main.js new file mode 100644 index 00000000..1faee739 --- /dev/null +++ b/src/recommend/main.js @@ -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'); // 挂载应用