提交 fafafb31 authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 8085a32d
<template> <template>
<div class="homepage_message" :style="{ backgroundImage: 'url(' + bg + ')' }"> <div class="section-form">
<div class="homepage_message-main"> <div class="section-form-inner">
<h3> <div class="form-box">
<span>留下您的信息</span> <h2>了解CUW家庭教育硕士</h2>
</h3> <p>填写姓名 + 手机, 点击报名咨询</p>
<h5>紫荆教育学位顾问为您提供专业的服务</h5> <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<div class="homepage_message_body">
<div class="body_img">
<img src="@/assets/images/mes1.png" style="width: 472px;" />
</div>
<div class="body_input">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item prop="name"> <el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="姓名"></el-input> <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
</el-form-item> </el-form-item>
...@@ -18,13 +12,12 @@ ...@@ -18,13 +12,12 @@
<el-input v-model="ruleForm.phone" placeholder="手机"></el-input> <el-input v-model="ruleForm.phone" placeholder="手机"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" :loading="isLoading" @click="submit">提交</el-button> <el-button type="primary" :loading="isLoading" @click="submit">报名咨询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -32,9 +25,6 @@ import cAction from '@action' ...@@ -32,9 +25,6 @@ import cAction from '@action'
export default { export default {
name: 'FormBox', name: 'FormBox',
props: {
bg: { type: String, default: 'https://webapp-pub.ezijing.com/project/cuw/form_bg_1.png' }
},
data() { data() {
var checkPhone = (rule, value, callback) => { var checkPhone = (rule, value, callback) => {
var reg = /^1[345789]\d{9}$/ var reg = /^1[345789]\d{9}$/
...@@ -77,82 +67,59 @@ export default { ...@@ -77,82 +67,59 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.homepage_message { .section-form {
position: relative; position: relative;
background-repeat: no-repeat;
background-size: cover;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: calc(100vh - 100px); height: 554px;
min-height: 600px; background: url(https://webapp-pub.ezijing.com/project/cuw/proejct_form_bg.jpg) no-repeat center;
.homepage_message-main { background-repeat: no-repeat;
width: 80%; background-size: cover;
}
.section-form-inner {
width: 70%;
margin: 0 auto; margin: 0 auto;
h3 { h2 {
margin-top: 80px; font-size: 26px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #0466a1;
line-height: 40px;
letter-spacing: 5px;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 1);
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
span {
display: inline-block;
position: relative;
&::before {
content: '';
position: absolute;
bottom: -4px;
height: 3px;
background: #ffffff;
width: 100%;
} }
} p {
} margin-bottom: 30px;
h5 { font-size: 20px;
padding-top: 24px; font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-size: 18px; font-weight: 400;
font-family: PingFangSC-Semibold, PingFang SC; color: #777777;
font-weight: 600; line-height: 30px;
opacity: 0.6; letter-spacing: 2px;
color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
} }
.homepage_message_body { .form-box {
padding: 63px 0px 0px 0px; width: 400px;
display: flex; padding: 40px;
width: 100%; background-color: #fff;
.body_img { margin-top: 100px;
flex: 1;
padding: 0px 30px;
}
.body_input {
flex: 1;
padding: 0px 30px;
.demo-ruleForm {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.el-input { .el-input {
max-width: 324px; width: 100%;
} }
::v-deep .el-input__inner { ::v-deep .el-input__inner {
border: 0px;
background: transparent; background: transparent;
border-bottom: 2px solid #fff; border: 0px;
border-bottom: 1px solid #000;
border-radius: 0px; border-radius: 0px;
padding: 0px; padding: 0px;
color: #fff; color: #fff;
} }
::v-deep .el-button { ::v-deep .el-button {
width: 132px; color: #012642;
height: 54px; width: 100%;
height: 40px;
border-radius: 4px; border-radius: 4px;
.el-icon-loading {
color: #fff !important;
}
}
}
} }
} }
} }
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<el-carousel arrow="never" class="banner-swiper"> <el-carousel arrow="never" class="banner-swiper">
<el-carousel-item v-for="item in bannerList" :key="item.src"><img :src="item.src"/></el-carousel-item> <el-carousel-item v-for="item in bannerList" :key="item.src"><img :src="item.src"/></el-carousel-item>
</el-carousel> </el-carousel>
<router-link to="profession">
<div class="cover"> <div class="cover">
<h1>威斯康星协和大学</h1> <h1>威斯康星协和大学</h1>
<h2>家庭教育硕士</h2> <h2>家庭教育硕士</h2>
...@@ -10,11 +11,12 @@ ...@@ -10,11 +11,12 @@
围绕“广义家庭教育”进行教学,从家庭系统的视角深度剖析全部家庭元素以及家庭与社会的关系,从根本上理解并解决家庭的问题。 围绕“广义家庭教育”进行教学,从家庭系统的视角深度剖析全部家庭元素以及家庭与社会的关系,从根本上理解并解决家庭的问题。
</p> </p>
</div> </div>
</router-link>
<div class="video-box" v-show="isPlaying"> <div class="video-box" v-show="isPlaying">
<video ref="video" src="https://webapp-pub.ezijing.com/project/cuw/video.mp4" preload="auto" playsinline></video> <video ref="video" src="https://webapp-pub.ezijing.com/project/cuw/video.mp4" preload="auto" playsinline></video>
</div> </div>
<div class="button-group"> <div class="button-group">
<div class="button-item"><router-link to="profession">了解更多</router-link></div> <!-- <div class="button-item"><router-link to="profession">了解更多</router-link></div> -->
<div class="button-item button-play" :class="{ 'is-playing': isPlaying }" @click="togglePlay">学校视频</div> <div class="button-item button-play" :class="{ 'is-playing': isPlaying }" @click="togglePlay">学校视频</div>
</div> </div>
</div> </div>
......
...@@ -71,10 +71,17 @@ export default {} ...@@ -71,10 +71,17 @@ export default {}
position: relative; position: relative;
flex: 1; flex: 1;
height: 445px; height: 445px;
overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: all 0.25s ease-in-out;
}
&:hover {
img {
transform: scale(1.05);
}
} }
} }
.card-item__inner { .card-item__inner {
...@@ -97,6 +104,7 @@ export default {} ...@@ -97,6 +104,7 @@ export default {}
padding: 0 30px; padding: 0 30px;
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
text-align: justify;
} }
} }
</style> </style>
...@@ -116,11 +116,14 @@ export default { ...@@ -116,11 +116,14 @@ export default {
} }
} }
a { a {
font-size: 18px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 500;
color: rgba(34, 34, 34, 1); color: rgba(34, 34, 34, 1);
padding: 20px 0px; padding: 20px 0px;
&:hover {
color: var(--main-color);
}
} }
} }
.footer_logo { .footer_logo {
......
...@@ -144,29 +144,17 @@ export default { ...@@ -144,29 +144,17 @@ export default {
{ {
name: '入学条件', name: '入学条件',
bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_02.png', bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_02.png',
children: [ children: ['持有本科学历或学位', '有两年以上相关工作经验的大专学历学生有少量名额,可通过筛选后择优录取']
'心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
'幼儿园、小学、中学教师、班主任',
'对科学理解家庭及养育有需求的人群'
]
}, },
{ {
name: '授课形式', name: '授课形式',
bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_03.png', bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_03.png',
children: [ children: ['双语环境,中文授课', '操作流畅的学习平台', '线上课程+线下工作坊']
'心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
'幼儿园、小学、中学教师、班主任',
'对科学理解家庭及养育有需求的人群'
]
}, },
{ {
name: '毕业典礼', name: '毕业典礼',
bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_04.png', bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_04.png',
children: [ children: ['学生可在学业全部完成后,在国内或赴美参加毕业典礼,共享学有所成的高光时刻']
'心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
'幼儿园、小学、中学教师、班主任',
'对科学理解家庭及养育有需求的人群'
]
} }
] ]
} }
...@@ -357,6 +345,13 @@ export default { ...@@ -357,6 +345,13 @@ export default {
.project-card-item { .project-card-item {
width: 270px; width: 270px;
margin: 0 20px; margin: 0 20px;
&:hover {
.project-card-item-box {
img {
transform: scale(1.05);
}
}
}
} }
.project-card-item-header { .project-card-item-header {
width: 230px; width: 230px;
...@@ -379,6 +374,7 @@ export default { ...@@ -379,6 +374,7 @@ export default {
padding-bottom: 10px; padding-bottom: 10px;
img { img {
width: 100%; width: 100%;
transition: all 0.25s ease-in-out;
} }
ul { ul {
position: absolute; position: absolute;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<span @click="refreshQrcode">刷新</span> <span @click="refreshQrcode">刷新</span>
</div> </div>
<div class="pay-ft"> <div class="pay-ft">
<p class="t2">注释:再提交800元申请费后,申请人还需上传并提交如下文件。</p> <p class="t2">注释:再提交600元申请费后,申请人还需上传并提交如下文件。</p>
<p class="t2">①学历/学位证书、②本科中、英文成绩单各一份、③个人证件照(2寸、免冠、白底)</p> <p class="t2">①学历/学位证书、②本科中、英文成绩单各一份、③个人证件照(2寸、免冠、白底)</p>
<p class="t2">该申请费不退,请慎重缴费!</p> <p class="t2">该申请费不退,请慎重缴费!</p>
</div> </div>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<h5-pay @update="handleUpdateOrder" v-if="isWechat"></h5-pay> <h5-pay @update="handleUpdateOrder" v-if="isWechat"></h5-pay>
<qrcode-pay @update="handleUpdateOrder" v-else></qrcode-pay> <qrcode-pay @update="handleUpdateOrder" v-else></qrcode-pay>
<div class="pay-ft"> <div class="pay-ft">
<p class="t2">注释:在提交800元申请费后,申请人需上传并提交如下文件。</p> <p class="t2">注释:在提交600元申请费后,申请人需上传并提交如下文件。</p>
<p class="t2">①填写报名表、②完成推荐信2封、③本科学历学位证书、④中英文成绩单、⑤个人证件照</p> <p class="t2">①填写报名表、②完成推荐信2封、③本科学历学位证书、④中英文成绩单、⑤个人证件照</p>
<p class="t2">该申请费不退,请慎重缴费!</p> <p class="t2">该申请费不退,请慎重缴费!</p>
</div> </div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论