Skip to content

P
project-online-old
提交 67ed9c33 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 f04ed8aa
隐藏空白字符变更
内嵌 并排
正在显示 包含 316 行增加 和 1371 行删除
src/components/leavex/index.vue deleted 100644 → 0
浏览文件 @ f04ed8aa
<template>
<div
class="homepage_message"
:style="{'min-height': leavheight + 'px', backgroundImage:'url(' + imgUrlBg + ')' }"
>
<div class="homepage_message-main">
<h3>
<span>留下您的信息</span>
</h3>
<h5>紫荆教育学位顾问为您提供专业的服务</h5>
<div class="homepage_message_body">
<div class="body_img">
<img :src="imgUrl" alt :style="imgUrl.indexOf('mes1') != -1 ? 'width:472px' : ''"/>
</div>
<div class="body_input">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="0px"
class="demo-ruleForm"
>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item prop="phone">
<el-input v-model="ruleForm.phone" placeholder="手机"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="isLoading" @click="submit">提交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
export default {
name: 'leavex',
props: {
imgUrl: {},
leavheight: {
type: Number
},
imgUrlBg: {}
},
data() {
var checkPhone = (rule, value, callback) => {
var reg = /^1[345789]\d{9}$/
if (!reg.test(value)) {
callback(new Error('请输入11位手机号！'))
} else {
callback()
}
}
return {
ruleForm: {
name: '',
phone: '',
channel: 19960,
project_id: 1021
},
isLoading: false,
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
phone: [{ required: true, validator: checkPhone, trigger: 'blur' }]
}
}
},
methods: {
submit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.isLoading = true
cAction.Infos.postInfo(this.ruleForm)
.then(() => {
this.$alert('提交成功', '信息', {
confirmButtonText: '确定',
type: 'success'
})
this.isLoading = false
})
.catch(e => {
this.isLoading = false
console.log(e)
})
} else {
this.isLoading = false
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.homepage_message {
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
.homepage_message-main {
width: 80%;
margin: 0 auto;
h3 {
margin-top: 80px;
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%;
}
}
}
h5 {
padding-top: 24px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
opacity: 0.6;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.homepage_message_body {
padding: 63px 0px 0px 0px;
display: flex;
width: 100%;
.body_img {
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 {
max-width: 324px;
}
::v-deep .el-input__inner {
border: 0px;
background: transparent;
border-bottom: 2px solid #fff;
border-radius: 0px;
padding: 0px;
color: #fff;
}
::v-deep .el-button {
width: 132px;
height: 54px;
border-radius: 4px;
.el-icon-loading {
color: #fff !important;
}
}
}
}
}
}
</style>
src/pages/major-set/index.vue
浏览文件 @ 67ed9c33
<template> <template>
<div class="layout_com_page"> <div class="layout_com_page">
<vue-lazy-component> <div class="banner">
<div class="layout_com_page_banner" :style="{ height: heightdy + 'px' }"> <div class="banner-inner">
<div <h1>威斯康星协和大学—家庭教育硕士</h1>
class="major-banner" <p>
v-for="(item, index) in bannerList" 目前，国内普遍的家庭教育课程结构像是一棵树，父母好比树干，孩子好比枝叶，课程更多的是围绕父母教养孩子的“狭义家庭教育”。然而，深入的家庭教育不应只片面地强调子女养育。家庭好比一片森林（FOREST），科学的家庭教育是将家庭作为一个系统进行研究。
:key="index" </p>
@mouseenter="outStyle(item, index)"
:class="{ 'min-wd': item.minWidth, blacker: !item.bgShow }"
:style="{ backgroundImage: 'url(' + item.img + ')' }"
>
<div class="major-banner-main">
<div class="new-pop" v-if="index == 2 && hoverIndex == 2">
<div class="txt">{{ item.title }}</div>
</div>
<span v-else>{{ item.title }}</span>
<span class="pad">{{ item.label }}</span>
</div>
<div class="major-banner-bg" v-if="item.bgShow"></div>
</div>
<div class="major-banner-title">
<span>加州整合大学</span>
<span class="font-size-40">
家庭教育硕士
</span>
</div>
</div> </div>
</vue-lazy-component> </div>
<vue-lazy-component> <section class="school-top">
<div class="layout_com_page_banner major_padd back_fff"> <div class="subtitle">
<div class="major-dl"> <h2>专业排名与认证</h2>
<div class="major-dl1" ref="dl1" :class="{ 'animate__animated animate__fadeInUp show-flex': houseShowbt }">
<div class="major-dl1-title">
<span class="new-font">排名<i>第1</i></span>
<span class="dl1_span">2020年加州最佳心理咨询学院</span>
</div>
<img :src="require('@/assets/images/major-set/dl1.png')" alt />
</div>
<div class="major-dl1 major-dl2" ref="dl2" :class="{ 'show-flex': houseShowbt }">
<div class="major-dl2-image dl2" :class="{ 'animate__animated animate__fadeInUp delay3': houseShowbt }">
<img :src="require('@/assets/images/major-set/dl2.png')" alt />
<span class="new-font">全美<i>第4</i></span>
<span class="font-size-24">2020年临床心理咨询专业排名</span>
</div>
<div
class="major-dl2-image dl3 padd-left-40 ts-ma"
:class="{ 'animate__animated animate__fadeInTopRight animate__delay-1.5s show-flex': houseShowbt }"
>
<img :src="require('@/assets/images/major-set/dl3.png')" alt />
<div class="dl2-span">
<span class="new-font">加州<i>第1</i></span>
<span class="font-size-24">2020年临床心理</span>
<span class="font-size-24">咨询专业排名</span>
</div>
</div>
</div>
</div>
</div> </div>
</vue-lazy-component> <img src="https://webapp-pub.ezijing.com/project/cuw/project_top.jpg" />
<vue-lazy-component> </section>
<div class="pics"> <section class="project-forest">
<div class="left"> <h2>项目采用<span>“FOREST（森林）”</span>教学体系</h2>
<img src="@/assets/images/major-set/left.png" alt="" /> <p class="t0">
</div> 引领学生全方位掌握在家庭教育中，个体发展、婚姻关系、家庭发展、性与家庭、儿童和青少年养育等理论与方法，<br />
<div class="mid"> 以及家庭与社会的文化、政策、法律等关系，让学生从根本上理解并解决家庭的问题。
<div class="p1"> </p>
<div class="txt">CIIS终身教授、与马斯洛等人共同创建后人本心理学 斯坦·葛罗夫</div> <div class="forest-group">
<img src="@/assets/images/major-set/mid-1.png" alt="" /> <div
</div> class="forest-item"
<div class="p2"> :class="{ 'is-active': forestIndex === index }"
<div class="txt top-n">正念之父 乔·卡巴金</div> v-for="(item, index) in forest"
<img src="@/assets/images/major-set/mid-2.png" alt="" /> :key="item.name"
</div> @mouseenter="forestIndex = index"
<div class="p3"> >
<div class="txt">《狂喜之后》《踏上心灵幽静》作者、正念导师 杰克·康菲尔德</div> <div class="circle">
<img src="@/assets/images/major-set/mid-3.png" alt="" /> <p class="t1">{{ item.eName }}</p>
</div> <p class="t2">{{ item.name }}</p>
<div class="p7">
<div class="txt2">国内外心理界大咖联袂推荐</div>
<img src="@/assets/images/major-set/mid-7.png" alt="" />
</div>
<div class="p4">
<div class="txt">复旦大学心理学系主任 孙时进</div>
<img src="@/assets/images/major-set/mid-new1.png" alt="" />
</div>
<div class="p5">
<div class="txt">澳门城市大学教授、华南师范大学教授 申荷永</div>
<img src="@/assets/images/major-set/mid-new2.png" alt="" />
</div>
<div class="p6">
<div class="txt top-n">华语世界深具影响力个人成长作家 张德芬</div>
<img src="@/assets/images/major-set/mid-new3.png" alt="" />
</div>
<div class="p8">
<div class="txt top-n">壹心理创始人 黄伟强</div>
<img src="@/assets/images/major-set/mid-new4.png" alt="" />
</div>
</div>
<div class="right">
<div>
<img src="@/assets/images/major-set/right-1.png" alt="" />
</div> </div>
<div> <div class="forest-item-main">
<img src="@/assets/images/major-set/right-2.png" alt="" /> <div class="line"></div>
<dl v-for="child in item.children" :key="child.nam">
<dt>{{ child.name }}</dt>
<dd>{{ child.eName }}</dd>
</dl>
</div> </div>
</div> </div>
</div> </div>
</vue-lazy-component> </section>
<vue-lazy-component> <section class="project-card">
<div class="layout_com_page_banner major-kc-bg" :style="{ height: 700 + 'px' }"> <div class="project-card-item" v-for="(item, index) in list" :key="index">
<div class="major-kc-left"> <div class="project-card-item-header">
<button @mouseover="buhover(1)" :class="{ 'hover-bt': course === 1 }">第一学年</button> <h3>{{ item.name }}</h3>
<button @mouseover="buhover(2)" :class="{ 'hover-bt': course === 2 }">第二学年</button>
</div> </div>
<div class="major-kc-right"> <div class="project-card-item-box">
<div class="major-kc-svg"> <img :src="item.bg" />
<img :src="require('@/assets/images/major-set/xl1.png')" alt /> <ul>
</div> <li v-for="child in item.children">{{ child }}</li>
<ul class="ul-1">
<li
v-for="(item, index) in FilterJson[course]"
:class="[{ show_anima_li_left: item.li1stateLeft, show_anima_li_right: item.li1stateRight }, item.class]"
:key="index"
:ref="item.ref"
:style="{ top: item.top1, right: item.right1 }"
>
<div class="div-son"></div>
</li>
</ul>
<ul class="ul-2">
<li
v-for="(item, index) in FilterJson[course]"
:class="[{ show_anima_li_left: item.li1stateLeft, show_anima_li_right: item.li1stateRight }, item.class2]"
:key="index"
:style="{ top: item.top2, right: item.right2 }"
>
<span class="yw">{{ item.span }}</span>
<span>{{ item.span1 }}</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</vue-lazy-component> </section>
<vue-lazy-component> <section class="project-study">
<div class="layout_com_page_banner major-kc-sy" :style="{ 'min-height': 700 + 'px' }"> <div class="subtitle">
<div class="sy-body"> <h2>学习相关</h2>
<div
class="sy-banner"
v-for="(item, index) in timeList"
:key="index"
:class="{ 'blacker-sy': !item.bgShow }"
@mouseenter="outsyStyle(item, index)"
>
<div class="sy-banner-bg sy-banner-header">
<img :src="require('@/assets/images/major-set/blxbjh.png')" />
<span class="sy-banner-bg-layout">{{ item.name }}</span>
</div>
<div class="sy-banner-bg sy-banner-main">
<img :src="item.img" />
<div class="sy-banner-bg-layout">
<span class="font-size-18">{{ item.title }}</span>
<span class="font-size-18">{{ item.title1 }}</span>
<span class="font-size-18">{{ item.title2 }}</span>
<span class="font-size-18">{{ item.title3 }}</span>
<span class="font-size-18">{{ item.title4 }}</span>
<span class="font-size-18">{{ item.title5 }}</span>
</div>
<div class="sy-banner-bg-00" v-if="!item.bgShow"></div>
</div>
</div>
</div>
<div class="sy-footer">
<img :src="require('@/assets/images/major-set/su.png')" />
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="layout_com_page_banner major-kc-wm" :style="{ 'min-height': 700 + 'px' }">
<h3>
<span>师资介绍</span>
</h3>
<div class="major-kc-wm-body" @mouseover="mouseOver" @mouseleave="mouseLeave">
<swiper ref="mySwiper" :options="swiperOptions">
<template v-for="(item, index) in wmList">
<swiper-slide :key="index">
<div class="major-kc-wm-list">
<div class="list-img">
<img :src="item.img" />
</div>
<div class="list-body">
<span class="font-size-18 nowrap title">{{ item.title }}</span>
<span class="font-size-14 wm-red zs">{{ item.label }}</span>
<template v-for="(sItem, sIndex) in item.main">
<span :key="sIndex + '-' + index" class="font-size-14 mian-txt">{{ sItem }}</span>
</template>
</div>
</div>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div> </div>
</vue-lazy-component> </section>
<vue-lazy-component>
<div class="layout_com_page_banner major-kc-wm bg2" :style="{ 'min-height': 700 + 'px' }">
<h3>
<span>师资介绍</span>
</h3>
<div class="major-kc-wm-body" @mouseover="mouseOver2" @mouseleave="mouseLeave2">
<swiper ref="mySwiper2" :options="swiperOptions">
<template v-for="(item, index) in wmList2">
<swiper-slide :key="index">
<div class="major-kc-wm-list">
<div class="list-img">
<img :src="item.img" />
</div>
<div class="list-body">
<span class="font-size-18 nowrap title">{{ item.title }}</span>
<span class="font-size-14 wm-red zs">{{ item.label }}</span>
<template v-for="(sItem, sIndex) in item.main">
<span :key="sIndex + '-' + index" class="font-size-14 mian-txt">{{ sItem }}</span>
</template>
</div>
</div>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</vue-lazy-component>
<FormBox /> <FormBox />
</div> </div>
</template> </template>
<script> <script>
import FilterJson from './filterType.json'
import FormBox from '@/components/formBox' import FormBox from '@/components/formBox'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
import Vue from 'vue'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default { export default {
name: 'major-set', components: { FormBox },
mixins: [dyHeight],
components: {
Swiper,
SwiperSlide,
FormBox
},
directives: {
swiper: directive
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
},
swiper2() {
return this.$refs.mySwiper2.$swiper
}
},
data() { data() {
return { return {
hoverIndex: 0, forestIndex: 0,
swiperOptions: { forest: [
observer: true,
autoHeight: true,
slidesPerView: 3,
// paginationClickable: true,
spaceBetween: 0,
freeMode: true,
// autoplay: {
// delay: 2000
// },
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets'
}
},
FilterJson,
course: 1,
wmList2: [
{
img: require('@/assets/images/wm/wm_21.png'),
title: '钟思嘉',
label: '博士',
main: [
'美国俄勒冈大学哲学博士（教育心理学与咨询心理学）',
'现任浙江师范大学教师教育学院特聘专家',
'曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
]
},
{
img: require('@/assets/images/wm/wm_22.png'),
title: '方刚',
label: '博士',
main: [
'著名性学家，性与性别学者专家',
'北京林业大学性与性别研究所所长',
'中国白丝带志愿者网络召集人',
'湾树德科技大学人类性学研究所兼职教授',
'世界华人性学家协会执委，中国性学会理事'
]
},
{ {
img: require('@/assets/images/wm/wm_23.png'), name: '家庭',
title: '许育光', eName: 'Family',
label: '博士', children: [
main: [ { name: '今日家庭', eName: 'The Family Today' },
'美国马里兰大学(UMD) 咨商与人事服务学系博士后', { name: '家庭发展', eName: 'Family Development' }
'彰化师范大学辅导与咨商博士',
'台湾清华大学教育心理与咨商学系教授兼任系主任',
'辅导季刊主编（华人地区创刊 56 年之咨商辅导经典学术期刊） ',
'台湾学校心理与咨商辅导协会发起专家暨理事长'
] ]
}, },
{ {
img: require('@/assets/images/wm/wm_24.png'), name: '社会',
title: '张沛超', eName: 'Others',
label: '博士', children: [
main: [ { name: '人类发展', eName: 'Human Development' },
'武汉大学心理学硕士、哲学博士', { name: '家庭法律与公共政策', eName: 'Family Law and Public Policy' }
'香港精神分析学会会员、副主席',
'武汉大学现代心理学研究中心 特约研究员',
'中国心理卫生协会会员 精神分析专委会委员 青年工作委员会委员'
] ]
}, },
{ {
img: require('@/assets/images/wm/wm_25.png'), name: '关系',
title: '臧寅垠', eName: 'Relations',
label: '博士', children: [
main: [ { name: '婚姻与家庭关系', eName: 'Marriage and Family Relations' },
'高校心理学院博士生导师', { name: '人类性学', eName: 'Human Sexuality' }
'英国诺丁汉大学医学院应用心理学博士',
'英国心理学会特许心理学家',
'美国宾夕法尼亚大学医学院精神病学系临床心理学博士后'
]
}
],
wmList: [
{
img: require('@/assets/images/wm/wm_01.png'),
title: 'Nicolle Zapien',
label: '博士',
main: [
'CIIS人类性学博士专业 教授',
'国际教练学会ICF 认证教练',
'哈佛大学教育学院硕士、塞布鲁克大学临床心理学博士',
'临床心理学研究、教学以及治疗领域拥有十余年丰富经验'
]
},
{
img: require('@/assets/images/wm/wm_02.png'),
title: 'Luna Yue Ren',
label: '博士候选人',
main: [
'CIIS中国项目办公室负责人',
'中国社会心理学会下属整合心理学专业委员会委员',
'加州整合大学东西方心理学专业博士候选人',
'拥有十年以上政府及跨国公司人力资源测评及咨询经验'
]
},
{
img: require('@/assets/images/wm/wm_03.png'),
title: 'Glenn Hartelius',
label: '博士',
main: [
'CIIS整合与后人本主义心理学博士项目创始人、系主任',
'《国际整合与后人本主义心理学专业手册》编纂人',
'《国际整合与后人本主义心理学》专业学术期刊主编',
'2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
] ]
}, },
{ {
img: require('@/assets/images/wm/wm_04.png'), name: '养育',
title: 'Rachael Vaughan', eName: 'Education',
label: '执业心理咨询师', children: [
main: [ { name: '家庭与育儿的现代议题-儿童期', eName: 'Contemporary Issues of Family and Parenting - Childhood' },
'CIIS整合心理咨询专业 核心教授', { name: '家庭与育儿的现代议题-青少年期', eName: 'Contemporary Issues of Family and Parenting - Adolescent' }
'加州认证执业MFT临床心理咨询师',
'英国爱丁堡大学语言学硕士、加州太平洋研究所精神分析学硕士',
'出生于香港，成长于英国，求学于法国美国，擅长多文化视角的整合教学，身为荣格学派治疗师，兼具女性主义和后现代理论视角'
] ]
}, },
{ {
img: require('@/assets/images/wm/wm_05.png'), name: '技能',
title: 'Michelle Marzullo', eName: 'Skills',
label: '博士', children: [{ name: '家庭教育的课程设计与方法', eName: 'Curriculum and Methods in Family Life Education' }]
main: [
'CIIS人类性学博士专业系主任',
'美国国家性心理与性教育协会常任委员',
'人类学研究博士',
'曾多年担任安永国际特约顾问，为多家财富前100的机构和企业提供管理咨询服务'
]
},
{
img: require('@/assets/images/wm/wm_06.png'),
title: 'Daniela Loenig',
label: '执业心理咨询师',
main: [
'CIIS临床心理咨询专业 核心教授',
'加州认证执业MFT临床心理咨询师',
'美国性教育与心理健康委员会认证成员',
'出生成长于欧洲，求学执业于美国，现与家人长驻瑞士，在自身经验实证中发展了对临床理论与治疗的体悟'
]
},
{
img: require('@/assets/images/wm/wm_07.png'),
title: 'Meg Jordan',
label: '博士',
main: [
'CIIS整合健康研究专业 系主任',
'临床医学人类学专家',
'全美医药及健康教练联盟主席',
'哈佛大学医学院阿尔海默研究中心高级顾问',
'作家，出版多本整合健康教练领域书籍'
]
},
{
img: require('@/assets/images/wm/wm_08.png'),
title: 'Courtenay Crouch',
label: '博士',
main: [
'CIIS整合心理博士专业 讲师',
'杜克大学硕士、CIIS整合与后人本主义心理学博士',
'美国国家心理学会 APA 国际心理学分会主管',
'《整合心理学》《人本心理学与现象学》等国际学术期刊评委'
]
}, },
{ {
img: require('@/assets/images/wm/wm_09.png'), name: '治疗',
title: 'Clark Hsu, MFT', eName: 'Therapy',
label: '博士候选人', children: [{ name: '家庭治疗（技术与特殊专题）', eName: 'Family Therapy (Techniques and specials Topics)' }]
main: [
'CIIS表达艺术临床心理咨询专业 副教授',
'加州认证执业MFT 临床心理咨询师',
'国际表达艺术治疗协会认证治疗师',
'CIIS东西方心理学博士候选人'
]
} }
], ],
bannerList: [ list: [
{
img: require('@/assets/images/major-set/ma01.png'),
bgShow: true
},
{ {
img: require('@/assets/images/major-set/ma02.png'), name: '招生对象',
bgShow: true bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_01.png',
children: [
'心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
'幼儿园、小学、中学教师、班主任',
'对科学理解家庭及养育有需求的人群'
]
}, },
{ {
img: require('@/assets/images/major-set/ma03.png'), name: '入学条件',
bgShow: true, bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_02.png',
title: children: [
'应用心理学是心理学中迅速发展的一个重要学科分支。应用心理学研究心理学基本原理在各种实际领域的应用，包括工业、工程、组织管理、市场消费、社会生活、医疗保健、体育运动以及军事、司法、环境等各个领域，通过运用心理学的原则及理论来解决领域内的实际问题。随着经济、科技、社会和文化迅速发展，应用心理学有着日益广阔的前景。' '心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
'幼儿园、小学、中学教师、班主任',
'对科学理解家庭及养育有需求的人群'
]
}, },
{
img: require('@/assets/images/major-set/ma04.png'),
bgShow: true,
minWidth: true
}
],
timeList: [
{ {
name: '授课形式', name: '授课形式',
title: '中文授课', bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_03.png',
title1: '简洁易操作的', children: [
title2: '多媒体交互平台', '心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
title3: '线下实践+工作坊', '幼儿园、小学、中学教师、班主任',
title4: '赴美研学', '对科学理解家庭及养育有需求的人群'
img: require('@/assets/images/major-set/bxl1.png'), ]
bgShow: true
},
{
name: '上课时间',
title: '按照教学周发布课程',
title1: '可灵活掌握学习时间',
title2: '可反复观看和查阅',
img: require('@/assets/images/major-set/bxl2.png'),
bgShow: true
},
{
name: '学位授予',
title: '保证出勤',
title1: '撰写论文并合格',
title2: '修满全部学分',
title3: '授予硕士学位',
img: require('@/assets/images/major-set/bxl3.png'),
bgShow: true
}, },
{ {
name: '毕业典礼', name: '毕业典礼',
title: '在国内或赴美', bg: 'https://webapp-pub.ezijing.com/project/cuw/project_bg_04.png',
title1: '参加毕业典礼', children: [
title2: '与各国学子欢聚一堂', '心理咨询师、婚姻家庭治疗师、家庭教育指导师、社区工作者',
img: require('@/assets/images/major-set/bxl4.png'), '幼儿园、小学、中学教师、班主任',
bgShow: true '对科学理解家庭及养育有需求的人群'
} ]
],
houseShowbt: false,
li1state: false,
neutralityI: 0,
dowUp: false,
presentts: 0,
scrollTopts: 0,
ones: true
}
},
methods: {
mouseOver() {
this.swiper.autoplay.stop()
},
mouseLeave() {
this.swiper.autoplay.start()
},
mouseOver2() {
this.swiper2.autoplay.stop()
},
mouseLeave2() {
this.swiper2.autoplay.start()
},
dyScroll(present, scrollTop) {
this.presentts = present
this.scrollTopts = scrollTop
const scroll = scrollTop - this.neutralityI
this.neutralityI = scrollTop
scroll < 0 ? (this.dowUp = false) : (this.dowUp = true)
if (this.dowUp) {
if (this.$refs.dl2) {
if (!this.houseShowbt) {
const topdl2 = this.getElementTop(this.$refs.dl2)
this.houseShowbt = !!(present > topdl2 + 100)
}
FilterJson[this.course].forEach(l => {
if (this.$refs[l.ref][0]) {
const topLi = this.getElementTop(this.$refs[l.ref][0])
if (present > topLi + 20) {
if (!l[l.name]) {
l[l.name] = true
}
}
}
})
} }
} ]
if (!scrollTop && this.ones) {
this.ones = false
FilterJson[this.course].forEach(l => {
l[l.name] = false
})
}
},
buhover(number) {
this.course = number
this.dyScroll(this.presentts, this.scrollTopts)
},
outStyle(item, index) {
this.bannerList.forEach((l, ind) => {
index === ind ? Vue.set(l, 'bgShow', false) : Vue.set(l, 'bgShow', true)
})
this.hoverIndex = index
},
outsyStyle(item, index) {
this.timeList.forEach((l, ind) => {
index === ind ? Vue.set(l, 'bgShow', false) : Vue.set(l, 'bgShow', true)
})
} }
},
mounted() {
this.bannerList[2].bgShow = false
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.major-banner-title { .banner {
position: absolute;
bottom: 30%;
left: 14.5%;
display: flex;
flex-direction: column;
span {
font-size: 18px;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
display: flex;
color: rgba(255, 255, 255, 1);
small {
display: flex;
font-size: 25px;
font-weight: bold;
align-items: center;
}
}
}
.major_padd {
padding-bottom: 0px;
// overflow: hidden;
}
.major-banner {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
flex: 2;
position: relative; position: relative;
display: flex; height: calc(100vh - 40px);
align-items: center; min-height: 660px;
justify-content: center; background: url(https://webapp-pub.ezijing.com/project/cuw/project_banner.jpg) no-repeat center;
.major-banner-main { background-size: cover;
font-size: 18px; .banner-inner {
font-family: PingFangSC-Semibold, PingFang SC;
color: rgba(255, 255, 255, 1);
padding: 0px 20px;
display: flex;
z-index: 3;
flex-direction: column;
span {
line-height: 1.5;
}
.pad {
padding-top: 20px;
}
}
.major-banner-bg {
height: 100%;
position: absolute; position: absolute;
width: 100%; top: 50%;
opacity: 0.6; left: 50%;
background: rgba(0, 0, 0, 1); transform: translateX(-50%);
width: 980px;
margin: 0 auto;
} }
.major-banner-bg-ff { h1 {
height: 100%; font-size: 56px;
position: absolute; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
width: 100%; font-weight: 500;
background-color: rgb(249 249 249 / 68%); color: #ffffff;
line-height: 59px;
letter-spacing: 9px;
padding: 20px 0;
} }
} p {
.major-dl { font-size: 24px;
display: flex; font-family: SourceHanSansCN-Regular, SourceHanSansCN;
flex-direction: column; font-weight: 400;
justify-content: center; color: #ffffff;
padding: 30px 0px; line-height: 40px;
padding-top: 60px;
position: relative;
.major-dl1 {
display: none;
.major-dl1-title {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 40px;
padding-right: 10px;
padding-top: 40px;
justify-content: flex-start;
font-family: PingFangSC-Regular, PingFang SC;
.new-font {
font-size: 32px;
font-weight: 600;
color: rgba(34, 34, 34, 1);
i {
color: #e68851;
font-size: 40px;
font-style: normal;
}
}
.dl1_span {
font-size: 24px;
font-weight: 400;
color: rgba(34, 34, 34, 1);
}
}
.major-dl2-image {
display: flex;
color: #222222ff;
flex-direction: column;
// font-weight: 600;
position: relative;
font-size: 40px;
img {
padding-bottom: 18px;
width: 100%;
}
.font-size-30 {
font-weight: 400;
color: rgba(34, 34, 34, 1);
}
.new-font {
font-size: 32px;
font-weight: bold;
i {
font-size: 40px;
font-style: normal;
color: #e68851;
}
}
}
.ts-ma {
position: absolute;
top: 0px;
right: -40px;
display: flex;
flex-direction: inherit;
.dl2-span {
display: flex;
flex-direction: column;
padding-left: 10px;
white-space: nowrap;
.new-font {
font-size: 32px;
font-weight: bold;
i {
font-style: normal;
font-size: 40px;
color: #e68851;
}
}
}
}
.padd-left-40 {
top: 240px;
}
} }
} }
.major-dl2 { .school-top {
position: relative; position: relative;
margin-top: -220px;
left: -64px;
margin-bottom: 100px;
}
.blacker {
.major-banner-main {
color: #000000ff;
}
}
.min-wd {
flex: 1;
}
.major-finish {
width: 100%;
height: 100%;
.finsih-b-main {
display: flex;
height: 100%;
.finsih-b-main-size {
position: relative;
overflow: hidden;
flex: 1;
height: 50%;
img {
height: 100%;
width: 100%;
}
}
}
}
.finish-a {
flex: 1;
img { img {
overflow: hidden;
}
.finish-as {
overflow: hidden;
}
}
.finish-b {
// flex: 2;
width: 100%;
display: flex;
flex-direction: column;
.finsih-b-b {
display: flex;
width: 100%; width: 100%;
height: 40%;
div {
width: 30%;
img {
height: 100%;
width: 100%;
}
}
.ts-width {
width: 40%;
}
} }
.finish-b-a { .subtitle {
display: flex;
height: 60%;
.finish-b-a-size {
width: 70%;
display: inline-flex;
position: relative;
overflow: hidden;
.rs-img {
width: 100%;
}
}
.finsih-b-main {
display: flex;
flex-direction: column;
width: 30%;
}
}
.finsih-b-main-a {
flex: 1;
}
.center_post {
position: absolute; position: absolute;
top: 50%; top: 50px;
left: 50%; left: 50%;
transform: translate(-50%, -50%); padding: 20px 0;
display: inline-flex; text-align: center;
font-family: PingFangSC-Semibold, PingFang SC; transform: translateX(-50%);
font-weight: 600; h2 {
color: rgba(255, 255, 255, 1); display: inline-block;
width: 100%; padding-bottom: 12px;
align-items: center; font-size: 40px;
flex-direction: column; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
} font-weight: 500;
} color: #fff;
.major_banner { line-height: 1;
overflow: hidden; border-bottom: 3px solid #fff;
img {
transition: all 0.5s;
&:hover {
cursor: pointer;
transform: scale(1.1);
} }
} }
} }
.major-kc-bg { .project-forest {
background: url('~@/assets/images/major-set/xbg.png') no-repeat center center; padding: 70px 0;
height: 866px;
background: url(https://webapp-pub.ezijing.com/project/cuw/project_forest.jpg) no-repeat;
background-size: cover; background-size: cover;
.major-kc-left { box-sizing: border-box;
display: flex; h2 {
flex-direction: column; font-size: 40px;
flex: 1; font-family: PingFangSC-Semibold, PingFang SC;
align-items: center; font-weight: 600;
justify-content: center; color: #ffffff;
height: initial; text-align: center;
button { span {
width: 270px; color: var(--main-color);
height: 84px;
line-height: 84px;
color: #faa634;
background: #fff;
border-radius: 4px;
cursor: pointer;
margin: 30px 0px;
border: 2px solid #faa634;
font-size: 22px;
}
.hover-bt {
background-color: #faa634;
color: #fff;
} }
} }
.major-kc-right { .t0 {
width: 847px; font-size: 20px;
height: initial; font-family: SourceHanSansCN-Regular, SourceHanSansCN;
position: relative; font-weight: 400;
.major-kc-svg { color: #ffffff;
width: 512px; line-height: 30px;
height: 100%; text-align: center;
position: absolute;
right: 200px;
top: 0;
img {
width: 100%;
height: 100%;
}
}
.ul-1 {
margin: 0;
padding: 0;
list-style: none;
padding-inline-start: 0 !important;
.li {
width: 30px;
height: 30px;
background: rgba(226, 127, 77, 0.5);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
visibility: hidden;
animation-name: none;
.div-son {
width: 20px;
height: 20px;
background: #faa634;
border-radius: 50%;
}
}
.show_anima_li_left {
visibility: visible;
animation-name: bounceInLeft;
}
.show_anima_li_right {
visibility: visible;
animation-name: bounceInRight;
}
}
.ul-2 {
margin: 0;
padding: 0;
list-style: none;
padding-inline-start: 0 !important;
.li2 {
font-size: 18px;
font-weight: 500;
color: #222222ff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: flex-end;
position: absolute;
visibility: hidden;
animation-name: none;
.yw {
color: #222222ff;
font-size: 12px;
padding-bottom: 10px;
}
span {
width: 100%;
}
}
.show_anima_li_left {
visibility: visible;
animation-name: bounceInLeft;
span {
text-align: right;
}
}
.show_anima_li_right {
visibility: visible;
animation-name: bounceInRight;
}
.bounceInRight {
align-items: baseline;
}
}
} }
} }
.major-kc-sy { .forest-group {
background: url('~@/assets/images/major-set/blxbj.png') no-repeat center center; display: flex;
background-size: cover; justify-content: center;
margin-top: 65px;
}
.forest-item {
position: relative; position: relative;
flex-direction: column; margin: 0 12px;
align-items: center; &:hover,
.sy-body { &.is-active {
width: 80%; .circle {
margin: 0 auto; border-color: var(--main-color);
height: 100%; }
.forest-item-main {
display: block;
}
}
.circle {
width: 180px;
height: 180px;
border: 6px solid #0d78c6;
border-radius: 50%;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: center; justify-content: center;
.sy-banner { align-items: center;
padding: 10px; cursor: pointer;
.sy-banner-bg { .t1 {
position: relative; font-size: 30px;
display: flex; font-family: Lato-Regular, Lato;
justify-content: center; font-weight: 400;
.sy-banner-bg-layout { color: #ffffff;
position: absolute; &::first-letter {
top: 50%; font-size: 70px;
z-index: 3;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: center;
.font-size-18 {
font-weight: 400;
display: inline-flex;
white-space: nowrap;
}
}
} }
} }
.blacker-sy { .t2 {
.sy-banner-main { font-size: 22px;
position: relative; font-family: SourceHanSansCN-Regular, SourceHanSansCN;
.sy-banner-bg-00 { font-weight: 400;
transition: all 0.8s; color: #ffffff;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 15px;
}
}
} }
} }
.sy-footer { }
padding: 40px 0px 10px 0px; .forest-item-main {
width: 40px; display: none;
height: 118px; position: absolute;
img { left: 50%;
width: 100%; transform: translate(-50%);
display: block; .line {
position: relative;
margin: 0 auto 22px;
width: 0;
height: 190px;
border-left: 1px dashed var(--main-color);
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: var(--main-color);
transform: translateX(-50%);
} }
} }
} dl {
.swiper-container { padding-left: 8px;
padding-top: 70px; border-left: 2px solid var(--main-color);
padding-bottom: 40px;
}
.major-kc-wm {
background: url('~@/assets/images/wm/wmbg.png') no-repeat center top;
background-size: cover;
position: relative;
align-items: center;
flex-wrap: wrap;
&.bg2 {
background: url('~@/assets/images/wm/wmbg2.png') no-repeat center top;
background-size: cover;
} }
h3 { dl + dl {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 40px;
color: rgba(255, 255, 255, 1);
margin-top: 30px; margin-top: 30px;
span {
position: relative;
&::before {
content: '';
position: absolute;
bottom: -8px;
width: 100%;
height: 3px;
background: #ffffff;
}
}
} }
.major-kc-wm-body { dt {
width: 80%; font-size: 16px;
display: flex; font-family: SourceHanSansCN-Bold, SourceHanSansCN;
justify-content: center; font-weight: bold;
h3 { color: #ffffff;
color: #ffffffff; line-height: 24px;
} white-space: nowrap;
.major-kc-wm-list { }
display: flex; dd {
flex-direction: column; margin-top: 5px;
position: relative; font-size: 16px;
padding: 20px 30px; font-family: Lato-Bold, Lato;
margin: 0 auto; font-weight: bold;
width: 300px; color: #ffffff;
.list-img { line-height: 19px;
z-index: 3; white-space: nowrap;
position: relative;
position: absolute;
left: 50%;
background: #fff;
border-radius: 50%;
top: 7%;
overflow: hidden;
transform: translate(-50%, -50%);
img {
transition: all 0.5s;
transform: scale(0.9);
cursor: pointer;
&:hover {
transform: scale(1);
}
}
}
.list-body {
display: flex;
position: relative;
// align-items: center;
flex-direction: column;
background: #fff;
border-radius: 26px;
width: 300px;
padding: 100px 0px 30px 0px;
min-height: 250px;
.max-width-180 {
max-width: 180px;
}
span {
// padding: 5px 0px;
padding: 5px 15px 0 40px;
color: #222222ff;
line-height: 20px;
}
.mian-txt {
position: relative;
&::before {
content: '';
position: absolute;
left: 22px;
top: 10px;
// -webkit-transform: translateX(-50%);
width: 8px;
height: 8px;
border: 2px solid #faa634;
border-radius: 50%;
}
}
.title {
padding: 0;
display: block;
width: 100%;
text-align: center;
}
.zs {
padding: 5px 0 0 0;
display: block;
width: 100%;
text-align: center;
}
&::before {
content: '';
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
border: 1px solid rgba(151, 151, 151, 1);
border-radius: 26px;
border-style: dashed;
}
}
}
} }
}
.show-flex {
display: flex !important;
}
.post_rl {
overflow: hidden;
}
.wm-red {
color: #faa634 !important;
}
.nowrap {
white-space: nowrap;
}
.pics {
width: 100%;
font-size: 0;
}
.pics img {
display: inline-block;
width: 100%;
transition: all 0.5s;
transform: scale(1.03);
} }
.pics img:hover { .project-card {
cursor: pointer; padding: 120px 0;
transform: scale(1.15); display: flex;
align-items: center;
justify-content: center;
} }
.project-card-item {
.pics .mid div { width: 270px;
margin: 0 20px;
}
.project-card-item-header {
width: 230px;
height: 67px;
margin: 0 auto;
font-size: 28px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #ffffff;
line-height: 67px;
text-align: center;
background: url('https://webapp-pub.ezijing.com/project/cuw/proejct_card_bg.png') no-repeat;
background-size: contain;
}
.project-card-item-box {
position: relative; position: relative;
display: inline-block; background: #0b5a94;
width: 100%; border-radius: 13px;
overflow: hidden; overflow: hidden;
.txt { padding-bottom: 10px;
img {
width: 100%;
}
ul {
position: absolute; position: absolute;
bottom: 10px; left: 0;
left: 50%; top: 0;
-webkit-transform: translateX(-50%); right: 0;
bottom: 0;
padding: 40px 18px 0;
background: rgba(0, 0, 0, 0.5);
}
li {
position: relative;
font-size: 18px; font-size: 18px;
color: #fff; font-family: SourceHanSansCN-Regular, SourceHanSansCN;
width: 90%; font-weight: 400;
text-align: center; color: #ffffff;
z-index: 9; line-height: 28px;
&.top-n { padding-left: 15px;
bottom: 23px; &::before {
content: '';
position: absolute;
top: 12px;
left: 0;
width: 6px;
height: 6px;
background: #ffffff;
border-radius: 50%;
overflow: hidden;
} }
} }
.txt2 { li + li {
text-align: center; margin-top: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
font-size: 40px;
color: #fff;
z-index: 9;
} }
} }
.project-study {
.pics .left { height: 660px;
display: inline-block; background: url(https://webapp-pub.ezijing.com/project/cuw/project_study_bg.jpg) no-repeat center center;
width: 14.2857%; background-size: cover;
overflow: hidden; .subtitle {
} padding: 50px 0;
text-align: center;
.pics .right { h2 {
display: inline-block; display: inline-block;
width: 14.2857%; padding-bottom: 12px;
overflow: hidden; font-size: 40px;
} font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
.pics .right div { color: #fff;
overflow: hidden; line-height: 1;
} border-bottom: 3px solid #fff;
.pics .mid {
display: inline-block;
width: 71.4286%;
}
.pics .mid .p1 {
width: 30.5%;
}
.pics .mid .p2 {
width: 41%;
}
.pics .mid .p3 {
width: 28.5%;
}
.pics .mid .p4 {
width: 28.4%;
}
.pics .mid .p5 {
width: 28.4%;
}
.pics .mid .p6 {
width: 21.6%;
}
.pics .mid .p8 {
width: 21.6%;
}
.pics .mid .p7 {
width: 100%;
}
.right img {
width: 100%;
}
.major-kc-wm-body {
::v-deep .swiper-container {
.swiper-pagination-bullet {
opacity: 1;
background: #fff;
}
.swiper-pagination-bullet-active {
background: #ff8340;
} }
} }
} }
// .major-kc-wm-body >>> .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
// opacity:1;
// background: #fff;
// }
.new-pop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
.txt {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
font-size: 18px;
line-height: 1.5;
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论