From 4f1158bd99e7df5a38f0cf80b7f48a6bf9a8dc9a Mon Sep 17 00:00:00 2001
From: hxz <fuxixiy@gmail.com>
Date: Thu, 19 Dec 2024 00:54:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A8=E8=8D=90=E7=9A=84=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/recommend/IntroSection.vue   |  42 ++++
 src/recommend/Navbar.vue         | 203 +++++++++++++++++
 src/recommend/PreferenceForm.vue | 367 +++++++++++++++++++++++++++++++
 3 files changed, 612 insertions(+)
 create mode 100644 src/recommend/IntroSection.vue
 create mode 100644 src/recommend/Navbar.vue
 create mode 100644 src/recommend/PreferenceForm.vue

diff --git a/src/recommend/IntroSection.vue b/src/recommend/IntroSection.vue
new file mode 100644
index 00000000..e1063aba
--- /dev/null
+++ b/src/recommend/IntroSection.vue
@@ -0,0 +1,42 @@
+<template>
+  <section class="intro">
+    <h1>填写你的恋爱偏好</h1>
+    <div class="card-container">
+      <el-card class="card" v-for="card in cards" :key="card.title">
+        <h3>{{ card.title }}</h3>
+        <p>{{ card.description }}</p>
+      </el-card>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "IntroSection",
+  data() {
+    return {
+      cards: [
+        { title: "精准配对", description: "为你找到最合适的伴侣" },
+        { title: "优质社区", description: "了解更多互动圈子" },
+        { title: "趣味排行", description: "参与有趣的话题投票" },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.intro {
+  padding: 20px;
+  text-align: center;
+}
+.card-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+.card {
+  width: 180px;
+  text-align: center;
+}
+</style>
diff --git a/src/recommend/Navbar.vue b/src/recommend/Navbar.vue
new file mode 100644
index 00000000..07f277df
--- /dev/null
+++ b/src/recommend/Navbar.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <!-- 顶部导航栏 -->
+    <el-header class="navbar">
+      <div class="navbar-left">
+        <div class="logo">
+          <img src="/picture/logo.png" alt="logo" class="logo-image" />
+          <span class="logo-green">恋爱</span><span class="logo-black">森林</span>
+        </div>
+      </div>
+      <el-menu mode="horizontal" class="menu">
+        <el-menu-item index="1">智能推荐</el-menu-item>
+        <el-menu-item index="2">社区互动</el-menu-item>
+        <el-menu-item index="3">情感助手</el-menu-item>
+        <el-menu-item index="4">个人空间</el-menu-item>
+      </el-menu>
+    </el-header>
+
+    <!-- 中部内容区域 -->
+    <section class="intro">
+      <!-- 背景图片 -->
+      <div class="background-container">
+        <img src="/picture/bg1.png" class="background-image bg1" alt="背景图片1" />
+        <img src="/picture/bg2.png" class="background-image bg2" alt="背景图片2" />
+        <img src="/picture/bg3.png" class="background-image bg3" alt="背景图片3" />
+        <img src="/picture/bg4.png" class="background-image bg4" alt="背景图片4" />
+      </div>
+
+      <!-- 内容 -->
+      <h1>填写你的恋爱偏好</h1>
+      <div class="card-container">
+        <el-card class="card" v-for="card in cards" :key="card.title">
+          <div class="card-image">
+            <img :src="`/picture/${card.image}`" alt="卡片图片" />
+          </div>
+          <h3>{{ card.title }}</h3>
+          <p>{{ card.description }}</p>
+        </el-card>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MainPage",
+  data() {
+    return {
+      cards: [
+        { 
+          title: "恋爱偏好", 
+          description: "为了找到与你的心动嘉宾，请你诚实填写你的恋爱偏好",
+          image: "tu1.png" 
+        },
+        { 
+          title: "查看结果", 
+          description: "查看你的恋爱树，了解你的恋爱类型",
+          image: "tu2.png" 
+        },
+        { 
+          title: "释放潜力", 
+          description: "与你的心动嘉宾开始聊天，勇敢追求真爱",
+          image: "tu3.png" 
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* 顶部导航栏样式 */
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(90deg, #ffe4e1, #ff77a9);
+  padding: 10px 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.navbar-left {
+  display: flex;
+  align-items: center;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  font-weight: bold;
+}
+.logo-image {
+  height: 50px;
+  width: 60px;
+  margin-right: 10px;
+  border-radius: 50%;
+  background: #fff;
+}
+.logo-green {
+  color: #59d876; /* 绿色 */
+}
+.logo-black {
+  color: #000; /* 黑色 */
+}
+
+.menu {
+  justify-content: center; /* 菜单居中 */
+  gap: 70px; /* 菜单项之间间距 */
+  flex-grow: 1;
+}
+.menu .el-menu-item {
+  font-size: 16px;
+  color: #333;
+}
+.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%);
+}
+</style>
diff --git a/src/recommend/PreferenceForm.vue b/src/recommend/PreferenceForm.vue
new file mode 100644
index 00000000..c3cdb4a9
--- /dev/null
+++ b/src/recommend/PreferenceForm.vue
@@ -0,0 +1,367 @@
+
+<template>
+  <el-form class="form" ref="form" :model="formData" :rules="rules">
+    <fieldset>
+      <legend style="color: #ff77a9">- 基本属性 -</legend>
+      <el-form-item label="匹配的性别" prop="gender">
+        <el-radio-group v-model="formData.gender">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+          <el-radio label="不限">不限</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="匹配对象的年龄区间" prop="ageRange">
+        <el-input-number v-model="formData.minAge" placeholder="最小" :min="0" />
+        <span>-</span>
+        <el-input-number v-model="formData.maxAge" placeholder="最大" :min="0" />
+      </el-form-item>
+      <el-form-item label="匹配对象的距离范围" prop="distance">
+        <el-select v-model="formData.distance" placeholder="请选择">
+          <el-option label="同城" value="同城"></el-option>
+          <el-option label="同省" value="同省"></el-option>
+          <el-option label="不限" value="不限"></el-option>
+        </el-select>
+      </el-form-item>
+    </fieldset>
+
+
+    <fieldset>
+      <legend style="color: #ff77a9">- 个人资料 -</legend>
+      <el-form-item label="希望匹配对象的最低教育水平" prop="education">
+        <el-select v-model="formData.education" placeholder="请选择">
+          <el-option label="本科" value="本科"></el-option>
+          <el-option label="硕士" value="硕士"></el-option>
+          <el-option label="不限" value="不限"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="希望匹配对象的职业类型" prop="occupation">
+        <el-select v-model="formData.occupation" placeholder="请选择">
+          <el-option label="工程师" value="工程师"></el-option>
+          <el-option label="教师" value="教师"></el-option>
+          <el-option label="医生" value="医生"></el-option>
+          <el-option label="不限" value="不限"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="匹配对象的身高范围" prop="heightRange">
+        <el-input-number v-model="formData.minHeight" placeholder="最小" :min="0" />
+        <span>-</span>
+        <el-input-number v-model="formData.maxHeight" placeholder="最大" :min="0" />
+      </el-form-item>
+      <el-form-item label="匹配对象的体重范围" prop="weightRange">
+        <el-input-number v-model="formData.minWeight" placeholder="最小" :min="0" />
+        <span>-</span>
+        <el-input-number v-model="formData.maxWeight" placeholder="最大" :min="0" />
+      </el-form-item>
+    </fieldset>
+
+    <fieldset>
+      <legend style="color: #ff77a9">- 生活方式 -</legend>
+      <el-form-item label="是否接受吸烟者" prop="smoker">
+        <el-radio-group v-model="formData.smoker">
+          <el-radio label="是">是</el-radio>
+          <el-radio label="否">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否接受饮酒者" prop="drinker">
+        <el-radio-group v-model="formData.drinker">
+          <el-radio label="是">是</el-radio>
+          <el-radio label="否">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否接受素食主义者" prop="vegetarian">
+        <el-radio-group v-model="formData.vegetarian">
+          <el-radio label="是">是</el-radio>
+          <el-radio label="否">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </fieldset>
+
+    <fieldset>
+      <legend style="color: #ff77a9">- 兴趣爱好 -</legend>
+      <el-form-item label="喜欢的运动" prop="sports">
+        <el-checkbox-group v-model="formData.sports">
+          <el-checkbox label="游泳">游泳</el-checkbox>
+          <el-checkbox label="跑步">跑步</el-checkbox>
+          <el-checkbox label="健身">健身</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="喜欢的音乐类型" prop="musicTypes">
+        <el-checkbox-group v-model="formData.musicTypes">
+          <el-checkbox label="摇滚">摇滚</el-checkbox>
+          <el-checkbox label="古典">古典</el-checkbox>
+          <el-checkbox label="流行">流行</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="喜欢的电影类型" prop="movieTypes">
+        <el-checkbox-group v-model="formData.movieTypes">
+          <el-checkbox label="喜剧">喜剧</el-checkbox>
+          <el-checkbox label="动作">动作</el-checkbox>
+          <el-checkbox label="科幻">科幻</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </fieldset>
+  
+    <fieldset>
+      <legend style="color: #ff77a9">- 价值观和宗教信仰 -</legend>
+      <el-form-item label="生活价值观" prop="lifeValue">
+        <el-radio-group v-model="formData.lifeValue">
+          <el-radio label="家庭第一">家庭第一</el-radio>
+          <el-radio label="事业导向">事业导向</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="宗教信仰" prop="religion">
+        <el-radio-group v-model="formData.religion">
+          <el-radio label="有">有</el-radio>
+          <el-radio label="无">无</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </fieldset>
+
+    <fieldset>
+      <legend style="color: #ff77a9">- 关系目标 -</legend>
+      <el-form-item label="寻找的关系类型" prop="relationshipType">
+        <el-radio-group v-model="formData.relationshipType">
+          <el-radio label="长期关系">长期关系</el-radio>
+          <el-radio label="短期约会">短期约会</el-radio>
+          <el-radio label="友谊">友谊</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="婚姻状况" prop="maritalStatus">
+        <el-radio-group v-model="formData.maritalStatus">
+          <el-radio label="未婚">未婚</el-radio>
+          <el-radio label="离异">离异</el-radio>
+          <el-radio label="丧偶">丧偶</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </fieldset>
+
+    <fieldset>
+      <legend style="color: #ff77a9">- 经济条件 -</legend>
+      <el-form-item label="希望匹配对象的最低收入水平" prop="minIncome">
+        <el-radio-group v-model="formData.minIncome">
+          <el-radio label="5K">5K</el-radio>
+          <el-radio label="10K">10K</el-radio>
+          <el-radio label="15K">15K</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="希望匹配对象是否拥有房产" prop="ownProperty">
+        <el-radio-group v-model="formData.ownProperty">
+          <el-radio label="是" >是</el-radio>
+          <el-radio label="否">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </fieldset>
+
+    <fieldset>
+      <legend style="color: #ff77a9">- 个性特征 -</legend>
+      <el-form-item label="希望对方的性格类型" prop="personalityType">
+        <el-radio-group v-model="formData.personalityType">
+          <el-radio label="外向">外向</el-radio>
+          <el-radio label="内敛">内敛</el-radio>
+          <el-radio label="幽默">幽默</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否希望对方有幽默感" prop="senseOfHumor">
+        <el-radio-group v-model="formData.senseOfHumor">
+          <el-radio label="是">是</el-radio>
+          <el-radio label="否">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否希望对方非常诚实" prop="honesty">
+        <el-radio-group v-model="formData.honesty">
+          <el-radio label="是">是</el-radio>
+          <el-radio label="否">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </fieldset>
+
+    <el-button type="primary" class="submit-button" @click="handleSubmit">生成恋爱树</el-button>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "PreferenceForm",
+  data() {
+    return {
+      formData: {
+        gender: "",
+        minAge: null,
+        maxAge: null,
+        distance: "",
+        education: "",
+        occupation: "",
+        minHeight: null,
+        maxHeight: null,
+        minWeight: null,
+        maxWeight: null,
+        smoker: "",
+        drinker: "",
+        vegetarian: "",
+        sports: [],
+        musicTypes: [],
+        movieTypes: [],
+        lifeValue: "",
+        religion: "",
+        relationshipType: "",
+        maritalStatus: "",
+        minIncome: "",
+        ownProperty: "",
+        personalityType: "",
+        senseOfHumor: "",
+        honesty: ""
+      },
+      
+      rules: {
+        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
+        ageRange: [
+        { validator: this.checkAgeRange, trigger: 'change' }
+      ],
+        distance: [{ required: true, message: '请选择距离范围', trigger: 'change' }],
+        heightRange: [
+        { validator: this.checkHeightRange, trigger: 'change' }
+      ],
+        weightRange: [
+        { validator: this.checkWeightRange, trigger: 'change' }
+      ],
+        education: [{ required: true, message: '请选择最低教育水平', trigger: 'change' }],
+        smoker: [{ required: true, message: '请选择抽烟情况', trigger: 'change' }],
+        drinker: [{ required: true, message: '请选择喝酒情况', trigger: 'change' }],
+        vegetarian: [{ required: true, message: '请选择饮食况', trigger: 'change' }],
+        occupation: [{ required: true, message: '请选择职业类型', trigger: 'change' }],
+        sports: [{ required: true, message: '请选择喜欢的运动', trigger: 'change' }],
+        musicTypes: [{ required: true, message: '请选择喜欢的音乐类型', trigger: 'change' }],
+        movieTypes: [{ required: true, message: '请选择喜欢的电影类型', trigger: 'change' }],
+        lifeValue: [{ required: true, message: '请选择生活价值观', trigger: 'change' }],
+        religion: [{ required: true, message: '请选宗教信仰', trigger: 'change' }],
+        relationshipType: [{ required: true, message: '请选择关系类型', trigger: 'change' }],
+        maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
+        minIncome: [{ required: true, message: '请选择最低收入', trigger: 'change' }],
+        ownProperty: [{ required: true, message: '请选择房产情况', trigger: 'change' }],
+        personalityType: [{ required: true, message: '请选择性格类型', trigger: 'change' }],
+        senseOfHumor: [{ required: true, message: '请选择是否希望对方有幽默感', trigger: 'change' }],
+        honesty: [{ required: true, message: '请选择是否希望对方非常诚实', trigger: 'change' }],
+      },
+    };
+  },
+  methods: {
+    // 自定义范围验证方法
+    validateRange(minKey, maxKey) {
+      return (rule, value, callback) => {
+        const min = this.formData[minKey];
+        const max = this.formData[maxKey];
+        if (min !== null && max !== null && min > max) {
+          callback(new Error("最小值不能大于最大值"));
+        } else {
+          callback();
+        }
+      };
+    },
+    checkAgeRange(rule, value, callback) {
+    if (this.formData.minAge !== null && this.formData.maxAge !== null && this.formData.minAge > this.formData.maxAge) {
+      callback(new Error('最小年龄不能大于最大年龄'));
+    } else if (this.formData.minAge === null || this.formData.maxAge === null) {
+      callback(new Error('年龄范围必须填写'));
+    } else {
+      callback();
+    }
+  },
+  checkHeightRange(rule, value, callback) {
+    if (this.formData.minHeight !== null && this.formData.maxHeight !== null && this.formData.minHeight > this.formData.maxHeight) {
+      callback(new Error('最小身高不能大于最大身高'));
+    } else if (this.formData.minHeight === null || this.formData.maxHeight === null) {
+      callback(new Error('身高范围必须填写'));
+    } else {
+      callback();
+    }
+  },
+  checkWeightRange(rule, value, callback) {
+    if (this.formData.minWeight !== null && this.formData.maxWeight !== null && this.formData.minWeight > this.formData.maxWeight) {
+      callback(new Error('最小体重不能大于最大体重'));
+    } else if (this.formData.minWeight === null || this.formData.maxWeight === null) {
+      callback(new Error('体重范围必须填写'));
+    } else {
+      callback();
+    }
+  },
+    // 提交表单
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // 在这里发送表单数据到后端
+          this.submitData(this.formData);
+        } else {
+          this.$message.error("请检查表单填写是否正确");
+        }
+      });
+    },
+    // 提交数据
+    submitData(data) {
+      // 发送数据到后端接口
+      console.log("表单数据:", data);
+      this.$message({
+        type: "success",
+        message: "偏好已生成",
+      });
+    }
+  },
+};
+
+</script>
+
+<style scoped>
+fieldset {
+  border: none;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+}
+
+.el-form-item__label {
+  font-size: 16px;
+  text-align: right;
+  width: 180px;
+  padding-right: 10px;
+  display: inline-block;
+}
+
+.el-radio-group, .el-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.el-radio, .el-checkbox {
+  margin-right: 10px;
+  margin-bottom: 5px;
+}
+
+.submit-button {
+  background-color: #ff77a9;
+  color: white;
+  border: 2px solid #ff77a9;
+  padding: 12px 25px;
+  font-size: 18px;
+  margin-top: 20px;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
+.submit-button:hover {
+  background-color: #ff3d7f;
+}
+
+legend {
+  font-size: 22px;
+  color: #ff77a9;
+  margin-bottom: 15px;
+}
+</style>
\ No newline at end of file