hxz
1 month ago
parent
a17abcc956
commit
4f1158bd99
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in new issue