Skip to content

P
project-online-old
提交 65f7ea05 authored 作者: matian's avatar matian
浏览文件
操作

项目优化

上级 c687cb38
隐藏空白字符变更
内嵌 并排
正在显示 包含 430 行增加 和 476 行删除
src/assets/images/major-set/mz.png
查看替换文件 @ c687cb38 浏览文件 @ 65f7ea05
src/assets/images/major-set/mz.png

535.1 KB | W: | H:

src/assets/images/major-set/mz.png

885.3 KB | W: | H:

src/assets/images/major-set/mz.png
src/assets/images/major-set/mz.png
src/assets/images/major-set/mz.png
src/assets/images/major-set/mz.png
  • 2-up
  • Swipe
  • Onion skin
src/components/layout/components/slider.vue
浏览文件 @ 65f7ea05
......@@ -38,7 +38,7 @@ export default {
tempRoute: {},
navList: [
{ title: '首页', path: '/index' },
{ title: '专业设置', path: '/profession' },
{ title: '儿童教育硕士', path: '/profession' },
{ title: '报名申请', path: '/my' },
{ title: '最新动态', path: '/news' },
{ title: '联系我们', path: '/contact' }
......
src/components/layout/components/tab.vue
浏览文件 @ 65f7ea05
......@@ -65,7 +65,7 @@ export default {
<style lang="scss" scoped>
.tab {
height: 40px;
background: #af1b40ff;
background: #af1b40;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
......
src/components/leavex/index.vue
浏览文件 @ 65f7ea05
<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 />
</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 class="section-form">
<div class="section-form-inner">
<div class="form-box">
<h2>报名咨询CU教育学（儿童）硕士</h2>
<p>填写姓名 + 手机， 点击报名咨询</p>
<el-form :model="ruleForm" :rules="rules" ref="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>
......@@ -100,81 +84,63 @@ export default {
</script>
<style lang="scss" scoped>
.homepage_message {
width: 100%;
.section-form {
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%;
}
}
height: 554px;
background: url(@/assets/images/major-set/mz.png) no-repeat center;
background-repeat: no-repeat;
background-size: 100%;
}
.section-form-inner {
width: 70%;
margin: 0 auto;
h2 {
font-size: 26px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #af1b40;
line-height: 40px;
letter-spacing: 5px;
text-align: center;
}
p {
margin-bottom: 30px;
font-size: 20px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #777777;
line-height: 30px;
letter-spacing: 2px;
text-align: center;
}
.form-box {
width: 450px;
padding: 40px;
background-color: #fff;
margin-top: 100px;
white-space: nowrap;
.el-input {
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;
::v-deep .el-input__inner {
background: transparent;
border: 0px;
border-bottom: 1px solid #000;
border-radius: 0px;
padding: 0px;
color: #333;
}
.homepage_message_body {
padding: 63px 0px 0px 0px;
display: flex;
::v-deep .el-button {
margin-top: 20px;
color: #fff;
background-color: #af1b40;
border: 1px solid #af1b40;
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;
}
}
}
height: 40px;
border-radius: 0;
}
}
}
......
src/pages/homepage/index.vue
浏览文件 @ 65f7ea05
<template>
<div class="layout_com_page">
<!-- 模块一 -->
<div class="homepage-banner" :style="{height: heightdy + 'px'}">
<div class="homepage-banner" :style="{ height: heightdy + 'px' }">
<div class="video-box">
<video
ref="video"
......@@ -25,29 +25,17 @@
</div>
</div>
<div class="more-title">
<h3>美国康博斯威尔大学</h3>
<h5>—教育学硕士</h5>
<h1>美国康博斯威尔大学</h1>
<h2>教育学硕士</h2>
</div>
</div>
</div>
<!-- 模块二 -->
<div
class="homepage-main"
:class="{'study-show': hoverCap}"
:style="{'min-height': heightdy - 60 + 'px'}"
>
<div class="homepage-main" :class="{ 'study-show': hoverCap }" :style="{ 'min-height': heightdy - 60 + 'px' }">
<div class="cap">
<div class="cap-image" ref="cap">
<img
:src="require('@/assets/images/baidu-snapshot.png')"
alt
class="baidu-snapshot"
/>
<img
:src="require('@/assets/images/mz.png')"
alt
:class="{'cap-image-hover': hoverCap}"
/>
<img :src="require('@/assets/images/baidu-snapshot.png')" alt class="baidu-snapshot" />
<img :src="require('@/assets/images/mz.png')" alt :class="{ 'cap-image-hover': hoverCap }" />
</div>
<div class="cap-title">
<div class="cap-h3">
......@@ -56,25 +44,26 @@
</div>
</div>
<div class="cap-main" ref="counter">
<span>康博斯威尔大学（Campbellsville University）始创于1906年，距今已有115年历史。这是一所声名卓著、实力雄厚的非营利性综合型高等学府。</span>
<span
>康博斯威尔大学（Campbellsville
University）始创于1906年，距今已有116年历史。这是一所声名卓著、实力雄厚的非营利性综合型高等学府。</span
>
</div>
<div class="cap-xx animate__animated animate__fadeInUp animate__delay-0.2s">
<!-- <span>在肯塔基、加利福尼亚、亚利桑那、伊利诺伊和佛罗里达等地共有10个校区。其中主校区坐落于美国“蓝草之州”—肯塔基州（Kentucky）康博斯威尔市，占地面积约2465亩，承担本科、硕士和博士的教学和研究工作。在中国已经与武汉大学、华中科技大学、西南财经大学、延边大学、陕西师范大学等40余所大学建立了合作关系。</span> -->
<span>康博斯威尔大学的前身是一所独具特色的教师培养学院——拉塞尔教师培养学院，那时候教育先驱者们已经意识到了教师培养的重要性，自发成立了这所教师培养学院。至今，教育学院依然是康博斯威尔大学最好的学院之一。</span>
<span
>康博斯威尔大学的前身是一所独具特色的教师培养学院——拉塞尔教师培养学院，那时候教育先驱者们已经意识到了教师培养的重要性，自发成立了这所教师培养学院。至今，教育学院依然是康博斯威尔大学最好的学院之一。</span
>
</div>
<div class="cap-many animate__animated animate__fadeInUp animate__delay-0.2s">
<div class="cap-many-body">
<div
v-for="(item, index) in capList"
:key="index"
:class="['cap-many-img',item.class]"
>
<div v-for="(item, index) in capList" :key="index" :class="['cap-many-img', item.class]">
<img :src="item.img" />
<span class="cap-many-padd">
{{itemValue(item.value)}}
<small>{{item.label}}</small>
{{ itemValue(item.value) }}
<small>{{ item.label }}</small>
</span>
<span class="cap-many-yt">{{item.small}}</span>
<span class="cap-many-yt">{{ item.small }}</span>
</div>
</div>
</div>
......@@ -87,8 +76,12 @@
<!-- 模块三 -->
<div
class="homepage-wrapper"
:style="{'min-height': heightdy - 60 + 'px'}"
:class="[{'wrapper-show-title':hoverWrapperTitle}, {'wrapper-show':hoverWrapperLi01}, {'wrapper-show-a':hoverWrapperLi02}]"
:style="{ 'min-height': heightdy - 60 + 'px' }"
:class="[
{ 'wrapper-show-title': hoverWrapperTitle },
{ 'wrapper-show': hoverWrapperLi01 },
{ 'wrapper-show-a': hoverWrapperLi02 }
]"
>
<div class="homepage-son">
<div class="title" ref="wrapper_title">
......@@ -107,7 +100,7 @@
<div class="div-item">
<img src="@/assets/images/tir2.png" alt />
<!-- <span>2020 年美国南部大学排名第 92</span> -->
<span>连续 24 年上榜《美国新闻》全美最佳大学指南</span>
<span>连续 25 年上榜《美国新闻》全美最佳大学指南</span>
</div>
</div>
<div class="wrapper-center">
......@@ -120,7 +113,7 @@
</div> -->
<div class="div-item">
<img src="@/assets/images/tir4.png" alt />
<span>2020 年肯塔基州大学排名第 2</span>
<span>2021 年肯塔基州大学排名第 2</span>
</div>
</div>
</div>
......@@ -142,18 +135,10 @@
<h4 class="no_mar">的学习环境，为学生打造梦想的摇篮，塑造谦卑且具使命感</h4>
<h4>的领导典范，培养具有卓越学术能力的专业人才。</h4>
<div class="cobo-size">
<span
class="cobo-min"
>To foster academic excellence through pre-professional certificates,</span>
<span
class="cobo-min"
>associates, baccalaureate, masters, and doctoral programs through</span>
<span
class="cobo-min"
>traditional, technical and online systems.To provide an environment for</span>
<span
class="cobo-min"
>student success. To uphold the dignity of all persons and value diverse</span>
<span class="cobo-min">To foster academic excellence through pre-professional certificates,</span>
<span class="cobo-min">associates, baccalaureate, masters, and doctoral programs through</span>
<span class="cobo-min">traditional, technical and online systems.To provide an environment for</span>
<span class="cobo-min">student success. To uphold the dignity of all persons and value diverse</span>
<span class="cobo-min">perspectives.To model servant leadership through effective</span>
<span class="cobo-min">stewardship of resources.</span>
</div>
......@@ -164,7 +149,7 @@
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/mesbk.png')"
:leavheight=" heightdy - 60"
:leavheight="heightdy - 60"
/>
<!-- 模块六 -->
<page-footer />
......@@ -232,7 +217,7 @@ export default {
}
},
watch: {
num1: function (newValue, oldValue) {
num1: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
......@@ -241,13 +226,13 @@ export default {
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function () {
.onUpdate(function() {
vm.animatedNum1 = this.tweeningNumber.toFixed(0)
})
.start()
animate()
},
num2: function (newValue, oldValue) {
num2: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
......@@ -256,13 +241,13 @@ export default {
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function () {
.onUpdate(function() {
vm.animatedNum2 = this.tweeningNumber.toFixed(0)
})
.start()
animate()
},
num3: function (newValue, oldValue) {
num3: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
......@@ -271,13 +256,13 @@ export default {
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function () {
.onUpdate(function() {
vm.animatedNum3 = this.tweeningNumber.toFixed(0)
})
.start()
animate()
},
num4: function (newValue, oldValue) {
num4: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
......@@ -286,9 +271,8 @@ export default {
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 2000)
.onUpdate(function () {
vm.animatedNum4 =
Math.round((this.tweeningNumber.toFixed(0) / 10000) * 100) / 100
.onUpdate(function() {
vm.animatedNum4 = Math.round((this.tweeningNumber.toFixed(0) / 10000) * 100) / 100
})
.start()
animate()
......@@ -355,10 +339,7 @@ export default {
const h = this.$refs[el].offsetHeight
const t = this.$refs[el].offsetTop
const top = t - (windowH - h) / 2
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
let currentTop = scrollTop
let requestId
function step() {
......@@ -394,7 +375,7 @@ export default {
</script>
<style lang="scss" scoped>
.baidu-snapshot{
.baidu-snapshot {
width: 100px !important;
height: auto !important;
position: fixed;
......@@ -475,19 +456,18 @@ export default {
}
}
.more-title {
h5 {
font-size: 20px;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
h2 {
margin-top: 16px;
font-size: 26px;
color: #af1b40;
font-weight: 400;
text-align: right;
padding-right: 5px;
}
h3 {
font-size: 42px;
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
h1 {
font-size: 36px;
color: #fff;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: right;
}
}
}
......@@ -495,8 +475,8 @@ export default {
width: 100%;
position: relative;
overflow: hidden;
background: url(https://zws-imgs-pub.ezijing.com/static/public/d3153d674eb0810028d69b13f075fbc6.png)
no-repeat center center;
background: url(https://zws-imgs-pub.ezijing.com/static/public/d3153d674eb0810028d69b13f075fbc6.png) no-repeat center
center;
background-size: cover;
display: flex;
justify-content: center;
......@@ -655,7 +635,7 @@ export default {
display: flex;
justify-content: center;
padding-bottom: 30px;
@media screen and (min-width: 320px){
@media screen and (min-width: 320px) {
overflow: hidden !important;
}
.homepage-son {
......
src/pages/major-set/index.vue
浏览文件 @ 65f7ea05
<template>
<div class="layout_com_page">
<div class="layout_com_page_banner" :style="{height: heightdy + 'px'}">
<!-- <div class="layout_com_page_banner" :style="{height: heightdy + 'px'}">
<div
class="major-banner"
v-for="(item, index) in bannerList"
......@@ -21,225 +21,230 @@
<span>美国康博斯威尔大学</span>
<span class="font-size-40">
<small>——</small>教育学硕士
<!-- <small>-</small>儿童心理与教育方向 -->
<small>-</small>儿童心理与教育方向
</span>
</div>
</div> -->
<div class="banner">
<div class="mask"></div>
<div class="banner-inner">
<h1>康博斯威尔大学-教育学硕士</h1>
<p>
你可知道，在中国：3000万儿童受到各种情绪障碍和行为问题困扰，30%的儿童青少年出现过抑郁症状，10%的儿童青少年出现有过焦虑障碍，每年我国约有10万青少年死于自杀，中国是世界上儿童自杀第一大国。
</p>
<p>
很多孩子6岁以后出现的问题，都源于孩子6岁以前家庭教育的不当。必然到来的青春期、叛逆期，伴随而来的早恋、网瘾，都会打破父母前6年的安稳无忧。孩子不会自己长大，父母是孩子来到这个世界上的第一个起跑线。
</p>
</div>
<div class="layout_com_page_banner major_padd back_fff">
<div class="major-dl">
</div>
<div class="layout_com_page_banner major_padd back_fff">
<div class="major-dl">
<div class="major-dl1" ref="dl1" :class="{ 'animate__animated animate__fadeInUp show-flex': houseShowbt }">
<div class="major-dl1-title">
<span>排名第20</span>
<span class="dl1_span">全美早期儿童教育学科</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>CAEP认证</span>
<span class="font-size-30">美国国家教师教育认证委员会认证</span>
</div>
<div
class="major-dl1"
ref="dl1"
:class="{'animate__animated animate__fadeInUp show-flex':houseShowbt}"
class="major-dl2-image dl3 padd-left-40 ts-ma"
:class="{ 'animate__animated animate__fadeInTopRight animate__delay-1.5s show-flex': houseShowbt }"
>
<div class="major-dl1-title">
<span>排名第20</span>
<span class="dl1_span">全美早期儿童教育学科</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>CAEP认证</span>
<span class="font-size-30">美国国家教师教育认证委员会认证</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>排名第1</span>
<span class="font-size-30">肯塔基州早期</span>
<span class="font-size-30">儿童教育学科</span>
</div>
<img :src="require('@/assets/images/major-set/dl3.png')" alt />
<div class="dl2-span">
<span>排名第1</span>
<span class="font-size-30">肯塔基州早期</span>
<span class="font-size-30">儿童教育学科</span>
</div>
</div>
</div>
</div>
<div class="layout_com_page_banner back_fff major_banner" :style="{'height': 700 + 'px'}">
<div class="major-finish finish-a">
<img :src="require('@/assets/images/major-set/lt02.png')" alt />
</div>
<div class="major-finish finish-b">
<div class="finish-b-a">
<span class="finish-b-a-size">
<img class="rs-img" :src="require('@/assets/images/major-set/lt01.png')" alt />
<div class="center_post font-size-28">
<span>教育学硕士-蒙氏教育方向</span>
<span>带你实现人生无限可能！</span>
</div>
</span>
<div class="finsih-b-main">
<div class="finsih-b-main-size">
<img :src="require('@/assets/images/major-set/lt05.png')" alt />
<div class="center_post font-size-16">
<span>课程涵盖蒙台梭利等全球前</span>
<span>沿的儿童教育方法以及科学</span>
<span>的儿童心理发展规律</span>
</div>
</div>
<div class="finsih-b-main-size">
<img :src="require('@/assets/images/major-set/lt06.png')" alt />
<div class="center_post font-size-16">
<span>想攻读海外学位，接受国际</span>
<span>化教育，不断超越自己</span>
</div>
</div>
</div>
</div>
<div class="finsih-b-b">
<div class="ts-width post_rl">
<img :src="require('@/assets/images/major-set/lt03.png')" alt />
<span class="center_post font-size-16">
<span>如果你已为人父母，想掌握儿童心理发展规</span>
<span>律，让孩子接受更科学的启蒙和家庭教育</span>
</span>
</div>
<div class="layout_com_page_banner back_fff major_banner" :style="{ height: 700 + 'px' }">
<div class="major-finish finish-a">
<img :src="require('@/assets/images/major-set/lt02.png')" alt />
</div>
<div class="major-finish finish-b">
<div class="finish-b-a">
<span class="finish-b-a-size">
<img class="rs-img" :src="require('@/assets/images/major-set/lt01.png')" alt />
<div class="center_post font-size-28">
<span>教育学硕士-蒙氏教育方向</span>
<span>带你实现人生无限可能！</span>
</div>
<div class="post_rl">
<img :src="require('@/assets/images/major-set/lt04.png')" alt />
<span class="center_post font-size-16">
<span>如果你想兼顾家庭与工作</span>
<span>投身儿童心理与教育领域</span>
<span>实现事业家庭双丰收</span>
</span>
</span>
<div class="finsih-b-main">
<div class="finsih-b-main-size">
<img :src="require('@/assets/images/major-set/lt05.png')" alt />
<div class="center_post font-size-16">
<span>课程涵盖蒙台梭利等全球前</span>
<span>沿的儿童教育方法以及科学</span>
<span>的儿童心理发展规律</span>
</div>
</div>
<div class="post_rl">
<img :src="require('@/assets/images/major-set/lt07.png')" alt />
<span class="center_post font-size-16">
<span>如果你是一位儿童心理与教</span>
<span>育工作者，希望继续扎根教育</span>
<span>获得一张更有分量的学位文凭</span>
</span>
<div class="finsih-b-main-size">
<img :src="require('@/assets/images/major-set/lt06.png')" alt />
<div class="center_post font-size-16">
<span>想攻读海外学位，接受国际</span>
<span>化教育，不断超越自己</span>
</div>
</div>
</div>
</div>
<div class="major-finish finish-a">
<div class="finish-as">
<img :src="require('@/assets/images/major-set/lt08.png')" alt />
<div class="finsih-b-b">
<div class="ts-width post_rl">
<img :src="require('@/assets/images/major-set/lt03.png')" alt />
<span class="center_post font-size-16">
<span>如果你已为人父母，想掌握儿童心理发展规</span>
<span>律，让孩子接受更科学的启蒙和家庭教育</span>
</span>
</div>
<div class="finish-as">
<img :src="require('@/assets/images/major-set/lt09.png')" alt />
<div class="post_rl">
<img :src="require('@/assets/images/major-set/lt04.png')" alt />
<span class="center_post font-size-16">
<span>如果你想兼顾家庭与工作</span>
<span>投身儿童心理与教育领域</span>
<span>实现事业家庭双丰收</span>
</span>
</div>
<div class="post_rl">
<img :src="require('@/assets/images/major-set/lt07.png')" alt />
<span class="center_post font-size-16">
<span>如果你是一位儿童心理与教</span>
<span>育工作者，希望继续扎根教育</span>
<span>获得一张更有分量的学位文凭</span>
</span>
</div>
</div>
</div>
<div class="layout_com_page_banner major-kc-bg" :style="{'height': 700 + 'px'}">
<div class="major-kc-left">
<button @mouseover="buhover(1)" :class="{'hover-bt': course === 1}">儿童心理发展课程</button>
<button @mouseover="buhover(2)" :class="{'hover-bt': course === 2}">儿童教育实践课程</button>
<div class="div-child-btn" @mouseover="newChildOver">实践课程内容</div>
<!-- <button @mouseover="buhover(3)" :class="{'hover-bt': course === 3}">实践课程内容</button> -->
<div class="major-finish finish-a">
<div class="finish-as">
<img :src="require('@/assets/images/major-set/lt08.png')" alt />
</div>
<div class="major-kc-right">
<template v-if="!newChildIsShow">
<div class="major-kc-svg">
<img :src="require('@/assets/images/major-set/xl1.png')" alt />
<div class="finish-as">
<img :src="require('@/assets/images/major-set/lt09.png')" alt />
</div>
</div>
</div>
<div class="layout_com_page_banner major-kc-bg" :style="{ height: 700 + 'px' }">
<div class="major-kc-left">
<button @mouseover="buhover(1)" :class="{ 'hover-bt': course === 1 }">儿童心理发展课程</button>
<button @mouseover="buhover(2)" :class="{ 'hover-bt': course === 2 }">儿童教育实践课程</button>
<div class="div-child-btn" @mouseover="newChildOver">实践课程内容</div>
<!-- <button @mouseover="buhover(3)" :class="{'hover-bt': course === 3}">实践课程内容</button> -->
</div>
<div class="major-kc-right">
<template v-if="!newChildIsShow">
<div class="major-kc-svg">
<img :src="require('@/assets/images/major-set/xl1.png')" alt />
</div>
<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>
</template>
<template v-else>
<div class="new-child-content">
<div class="content-text">
<div class="circle-box">
<div class="child-circle"></div>
</div>
<div class="text">
组织学生前往不同城市、走访不同教育理念的代表性幼儿园（传统园、蒙氏园、瑞吉欧园等），包括教育实践、学术访谈等环节，为学生们提供了深度交流学习的机会。<br />*时长约10小时
</div>
</div>
<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>
</template>
<template v-else>
<div class="new-child-content">
<div class="content-text">
<div class="circle-box">
<div class="child-circle"></div>
</div>
<div class="text">
组织学生前往不同城市、走访不同教育理念的代表性幼儿园（传统园、蒙氏园、瑞吉欧园等），包括教育实践、学术访谈等环节，为学生们提供了深度交流学习的机会。<br />*时长约10小时
</div>
<div class="content-text">
<div class="circle-box">
<div class="child-circle"></div>
</div>
<div class="content-text">
<div class="circle-box">
<div class="child-circle"></div>
</div>
<div class="text">
蒙氏生活实践/文化实用教育法、蒙氏感知教育法、蒙氏语言与文学教育法、蒙氏数学教育法四门课为线下实践课程，美方与中方教授组成的教学团组织学生在不同城市的幼儿园实地巡回授课，包括真实教学演练、教具使用、角色扮演、教授讲座、场景模拟等实践训练。<br />*时长约16小时每门课x4门课
</div>
<div class="text">
蒙氏生活实践/文化实用教育法、蒙氏感知教育法、蒙氏语言与文学教育法、蒙氏数学教育法四门课为线下实践课程，美方与中方教授组成的教学团组织学生在不同城市的幼儿园实地巡回授课，包括真实教学演练、教具使用、角色扮演、教授讲座、场景模拟等实践训练。<br />*时长约16小时每门课x4门课
</div>
</div>
</template>
</div>
</div>
</template>
</div>
<div class="layout_com_page_banner major-kc-sy" :style="{'min-height':700 + 'px'}">
<div class="sy-body">
<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 class="layout_com_page_banner major-kc-sy" :style="{ 'min-height': 700 + 'px' }">
<div class="sy-body">
<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 class="sy-footer">
<img :src="require('@/assets/images/major-set/su.png')" />
</div>
</div>
<div class="layout_com_page_banner major-kc-wm" :style="{'min-height':700 + 'px'}">
<h3 style="padding-top:30px;">
<span>师资介绍</span>
</h3>
<div class="major-kc-wm-body">
<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" style="width: 162px"/>
</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 class="sy-footer">
<img :src="require('@/assets/images/major-set/su.png')" />
</div>
</div>
<div class="layout_com_page_banner major-kc-wm" :style="{ 'min-height': 700 + 'px' }">
<h3 style="padding-top:30px;">
<span>师资介绍</span>
</h3>
<div class="major-kc-wm-body">
<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" style="width: 162px" />
</div>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- <div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
<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 class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
<div class="list-img">
<img :src="item.img" />
</div>
......@@ -249,33 +254,33 @@
<span class="font-size-14 max-width-180">{{item.main}}</span>
</div>
</div> -->
</div>
</div>
<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" style="width: 162px"/>
</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>
<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" style="width: 162px" />
</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>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- <div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
</div>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- <div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
<div class="list-img">
<img :src="item.img" />
</div>
......@@ -287,16 +292,12 @@
</template>
</div>
</div> -->
</div>
</div>
<div ref="leavex">
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/major-set/mz.png')"
:leavheight=" heightdy - 60"
/>
</div>
<page-footer />
</div>
<div ref="leavex">
<leavex />
</div>
<page-footer />
</div>
</template>
......@@ -356,10 +357,7 @@ export default {
img: require('@/assets/images/wm/wm_011.png'),
title: '韩卓',
label: '',
main: [
'北京师范大学心理学部副教授、博士生导师',
'哥伦比亚大学毕业、斯坦福大学访问学者'
]
main: ['北京师范大学心理学部副教授、博士生导师', '哥伦比亚大学毕业、斯坦福大学访问学者']
},
{
img: require('@/assets/images/wm/wm_022.png'),
......@@ -375,19 +373,13 @@ export default {
img: require('@/assets/images/wm/wm_055.png'),
title: '黄翯青',
label: '',
main: [
'首都师范大学副教授 ',
'北京大学发展心理学博士'
]
main: ['首都师范大学副教授 ', '北京大学发展心理学博士']
},
{
img: require('@/assets/images/wm/wm_033.png'),
title: '刘文',
label: '',
main: [
'辽宁师范大学特聘二级教授、博士生导师、副院长',
'中国心理学会认定心理学家'
]
main: ['辽宁师范大学特聘二级教授、博士生导师、副院长', '中国心理学会认定心理学家']
},
{
img: require('@/assets/images/wm/wm_044.png'),
......@@ -413,11 +405,7 @@ export default {
img: require('@/assets/images/wm/wm_066.png'),
title: '朱晶晶',
label: '',
main: [
'上海师范大学教育学院副教授 ',
'上海师范大学博士后',
'Carleton University访问学者'
]
main: ['上海师范大学教育学院副教授 ', '上海师范大学博士后', 'Carleton University访问学者']
}
// {
// img: require('@/assets/images/wm/wm_077.png'),
......@@ -434,70 +422,49 @@ export default {
img: require('@/assets/images/wm/wm_01.png'),
title: 'Sharon Hundley,Ed.D.',
label: '',
main: [
'副教授、康博斯威尔大学教育学院早期儿童教育项目主任',
'AMI认证3-6岁主教',
'AMS授证导师'
]
main: ['副教授、康博斯威尔大学教育学院早期儿童教育项目主任', 'AMI认证3-6岁主教', 'AMS授证导师']
},
{
img: require('@/assets/images/wm/wm_03.png'),
title: 'Julie Ann Ball',
label: '',
main: [
'副教授、康博斯威尔大学教育学院早期儿童教育项目成员',
'AMI认证3-6岁主教'
]
main: ['副教授、康博斯威尔大学教育学院早期儿童教育项目成员', 'AMI认证3-6岁主教']
},
{
img: require('@/assets/images/wm/wm_04.png'),
title: 'April Lin',
label: '',
main: [
'康博斯威尔大学AMI培训师',
'AMI3-6培训教师',
'中国语文培训专任教师'
]
main: ['康博斯威尔大学AMI培训师', 'AMI3-6培训教师', '中国语文培训专任教师']
},
{
img: require('@/assets/images/wm/wm_05.png'),
title: 'Ellen Hamilton-Ford, Ed.D.',
label: '',
main: [
'康博斯威尔大学教育学院早期儿童教育项目副教授'
]
main: ['康博斯威尔大学教育学院早期儿童教育项目副教授']
},
{
img: require('@/assets/images/wm/wm_06.png'),
title: 'Jeffrey Herron, Ed.D.',
label: '',
main: [
'康博斯威尔大学教育学院早期儿童教育项目副教授'
]
main: ['康博斯威尔大学教育学院早期儿童教育项目副教授']
},
{
img: require('@/assets/images/wm/wm_07.png'),
title: 'Josh Switzer, Ph.D.候选人',
label: '',
main: [
'康博斯威尔大学早期儿童项目经理'
]
main: ['康博斯威尔大学早期儿童项目经理']
},
{
img: require('@/assets/images/wm/wm_02.png'),
title: 'Marilyn Goodwin,Ph.D.',
label: '',
main: [
'副教授、康博斯威尔大学教育学院早期儿童教育项目副主任'
]
main: ['副教授、康博斯威尔大学教育学院早期儿童教育项目副主任']
},
{
img: require('@/assets/images/wm/wm_08.png'),
title: 'Rita Curtis',
label: '',
main: [
'康博斯威尔大学教育学院早期儿童教育项目讲师'
]
main: ['康博斯威尔大学教育学院早期儿童教育项目讲师']
}
],
bannerList: [
......@@ -641,6 +608,48 @@ export default {
</script>
<style lang="scss" scoped>
.banner {
position: relative;
height: calc(100vh - 10px);
min-height: 600px;
background: url(https://webapp-pub.ezijing.com/project/cu/project_banner.jpg) no-repeat center;
background-size: cover;
/* 遮罩层*/
.mask {
background-color: rgba(0, 0, 0, 0.53);
/* 使用固定定位让元素撑满全屏 */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.banner-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 980px;
margin: 0 auto;
}
h1 {
font-size: 50px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #ffffff;
line-height: 58px;
letter-spacing: 9px;
text-align: center;
padding: 20px 0;
}
p {
font-size: 24px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #ffffff;
line-height: 40px;
}
}
.major-banner-title {
position: absolute;
bottom: 30%;
......@@ -675,11 +684,11 @@ export default {
display: flex;
align-items: center;
justify-content: center;
.new-color{
.new-color {
position: relative;
width: 100%;
height: 100%;
&.active{
&.active {
background: rgba(255, 255, 255, 0.7);
}
}
......@@ -981,14 +990,14 @@ export default {
font-size: 12px;
padding-bottom: 10px;
}
span{
span {
width: 100%;
}
}
.show_anima_li_left {
visibility: visible;
animation-name: bounceInLeft;
span{
span {
text-align: right;
}
}
......@@ -1003,8 +1012,7 @@ export default {
}
}
.major-kc-sy {
background: url('~@/assets/images/major-set/blxbj.png') no-repeat center
center;
background: url('~@/assets/images/major-set/blxbj.png') no-repeat center center;
background-size: cover;
position: relative;
flex-direction: column;
......@@ -1068,7 +1076,7 @@ export default {
align-items: center;
flex-wrap: wrap;
overflow: hidden;
&.bg2{
&.bg2 {
background: url(https://zws-imgs-pub.ezijing.com/static/public/bf9ce097a044e3efbe11cb0d80270c59.png);
background-size: cover;
}
......@@ -1093,13 +1101,13 @@ export default {
}
}
.major-kc-wm-body {
::v-deep .swiper-container{
.swiper-pagination-bullet{
opacity:1;
::v-deep .swiper-container {
.swiper-pagination-bullet {
opacity: 1;
background: #fff;
}
.swiper-pagination-bullet-active{
background: rgb(174,14,63);
.swiper-pagination-bullet-active {
background: rgb(174, 14, 63);
}
}
width: 80%;
......@@ -1162,27 +1170,27 @@ export default {
border-radius: 26px;
border-style: dashed;
}
.mian-txt{
.mian-txt {
position: relative;
&::before{
content:'';
&::before {
content: '';
position: absolute;
left: 22px;
top: 10px;
// -webkit-transform: translateX(-50%);
width: 8px;
height: 8px;
border: 2px solid rgb(174,14,63);
border: 2px solid rgb(174, 14, 63);
border-radius: 50%;
}
}
.title{
.title {
padding: 0;
display: block;
width: 100%;
text-align: center;
}
.zs{
.zs {
padding: 5px 0 0 0;
display: block;
width: 100%;
......@@ -1216,13 +1224,13 @@ export default {
.nowrap {
white-space: nowrap;
}
.div-child-btn{
.div-child-btn {
font-size: 22px;
color: #AF1B40;
color: #af1b40;
line-height: 30px;
position: relative;
cursor: pointer;
&::after{
&::after {
content: '';
position: absolute;
top: -100%;
......@@ -1232,29 +1240,29 @@ export default {
height: 34px;
}
}
.new-child-content{
.new-child-content {
position: absolute;
top: 50%;
left: 140px;
transform: translateY(-50%);
.content-text{
.content-text {
display: flex;
margin-bottom: 30px;
.circle-box{
.circle-box {
width: 28px;
height: 28px;
background: rgba(175, 27, 64, .5);
background: rgba(175, 27, 64, 0.5);
border-radius: 50%;
margin-top: 5px;
.child-circle{
.child-circle {
width: 20px;
height: 20px;
background: #AF1B40;
background: #af1b40;
margin: 4px auto;
border-radius: 50%;
}
}
.text{
.text {
font-size: 18px;
color: #222222;
line-height: 36px;
......@@ -1263,7 +1271,7 @@ export default {
}
}
}
.swiper-container{
.swiper-container {
padding-top: 70px;
padding-bottom: 40px;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论