Skip to content

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

updates

上级 e8b64cc2
隐藏空白字符变更
内嵌 并排
正在显示 包含 350 行增加 和 324 行删除
src/assets/images/major-set/mid-2.png 100755 → 100644
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/major-set/mid-2.png

173.4 KB | W: | H:

src/assets/images/major-set/mid-2.png

121.7 KB | W: | H:

src/assets/images/major-set/mid-2.png
src/assets/images/major-set/mid-2.png
src/assets/images/major-set/mid-2.png
src/assets/images/major-set/mid-2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/major-set/mid-3.png 100755 → 100644
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/major-set/mid-3.png

141.7 KB | W: | H:

src/assets/images/major-set/mid-3.png

152.6 KB | W: | H:

src/assets/images/major-set/mid-3.png
src/assets/images/major-set/mid-3.png
src/assets/images/major-set/mid-3.png
src/assets/images/major-set/mid-3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/major-set/mid-new4.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/images/wm/wm_01.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_01.png

39.5 KB | W: | H:

src/assets/images/wm/wm_01.png

44.7 KB | W: | H:

src/assets/images/wm/wm_01.png
src/assets/images/wm/wm_01.png
src/assets/images/wm/wm_01.png
src/assets/images/wm/wm_01.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/wm/wm_02.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_02.png

48.2 KB | W: | H:

src/assets/images/wm/wm_02.png

50.4 KB | W: | H:

src/assets/images/wm/wm_02.png
src/assets/images/wm/wm_02.png
src/assets/images/wm/wm_02.png
src/assets/images/wm/wm_02.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/wm/wm_03.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_03.png

44.7 KB | W: | H:

src/assets/images/wm/wm_03.png

215.5 KB | W: | H:

src/assets/images/wm/wm_03.png
src/assets/images/wm/wm_03.png
src/assets/images/wm/wm_03.png
src/assets/images/wm/wm_03.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/wm/wm_04.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_04.png

50.4 KB | W: | H:

src/assets/images/wm/wm_04.png

22.2 KB | W: | H:

src/assets/images/wm/wm_04.png
src/assets/images/wm/wm_04.png
src/assets/images/wm/wm_04.png
src/assets/images/wm/wm_04.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/wm/wm_05.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_05.png

42.9 KB | W: | H:

src/assets/images/wm/wm_05.png

49.1 KB | W: | H:

src/assets/images/wm/wm_05.png
src/assets/images/wm/wm_05.png
src/assets/images/wm/wm_05.png
src/assets/images/wm/wm_05.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/wm/wm_06.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_06.png

40.9 KB | W: | H:

src/assets/images/wm/wm_06.png

17.8 KB | W: | H:

src/assets/images/wm/wm_06.png
src/assets/images/wm/wm_06.png
src/assets/images/wm/wm_06.png
src/assets/images/wm/wm_06.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/wm/wm_26.png
查看替换文件 @ e8b64cc2 浏览文件 @ 9b681f1d
src/assets/images/wm/wm_26.png

43.8 KB | W: | H:

src/assets/images/wm/wm_26.png

29.9 KB | W: | H:

src/assets/images/wm/wm_26.png
src/assets/images/wm/wm_26.png
src/assets/images/wm/wm_26.png
src/assets/images/wm/wm_26.png
  • 2-up
  • Swipe
  • Onion skin
src/components/layout/components/slider.vue
浏览文件 @ 9b681f1d
......@@ -41,7 +41,7 @@ export default {
tempRoute: {},
navList: [
{ title: '首页', path: '/index' },
{ title: '专业设置', path: '/profession' },
{ title: '应用心理学硕士', path: '/profession' },
{ title: '报名申请', path: '/my' },
{ title: '最新动态', path: '/news' },
{ title: '联系我们', path: '/contact' }
......
src/pages/homepage/index.vue
浏览文件 @ 9b681f1d
<template>
<div class="layout_com_page">
<vue-lazy-component>
<div class="homepage-banner" :style="{height: heightdy + 'px'}">
<div class="homepage-banner" :style="{ height: heightdy + 'px' }">
<div class="video-box">
<video
x5-playsinline=""
......@@ -28,26 +28,18 @@
</div>
</div>
<div class="more-title">
<h5>应用心理学硕士</h5>
<h3>加州整合大学</h3>
<h1>加州整合大学</h1>
<h2>应用心理学硕士</h2>
</div>
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="color-fff">
<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/mz.png')"
alt
:class="{'cap-image-hover': hoverCap}"
/>
<img :src="require('@/assets/images/mz.png')" alt :class="{ 'cap-image-hover': hoverCap }" />
</div>
<div class="cap-title">
<div class="cap-h3">
......@@ -56,20 +48,29 @@
</div>
</div>
<div class="cap-main" ref="counter">
<span>加州整合大学（California Institute of Integral Studies）始创于1968年，是一所专注于心理学相关专业的非营利性研究型大学。学校位于美国加州湾区核心——旧金山，坐落在Twitter、Uber、Airbnb和市政府、收容所中间，是链接财富与道德、未来与传统的界限和平衡所在。</span>
<span
>加州整合大学（California Institute of Integral
Studies）始创于1968年，是一所专注于心理学相关专业的非营利性研究型大学。学校位于美国加州湾区核心——旧金山，坐落在Twitter、Uber、Airbnb和市政府、收容所中间，是链接财富与道德、未来与传统的界限和平衡所在。</span
>
</div>
<ul class="cap-item-box">
<li>
<div class="title">学校构成</div>
<div class="txt">加州整合大学是全美整合教育研究的创始者和中心，由4个学院共26个专业构成，涵盖了本科、硕士和博士的教学和研究工作。</div>
<div class="txt">
加州整合大学是全美整合教育研究的创始者和中心，由4个学院共26个专业构成，涵盖了本科、硕士和博士的教学和研究工作。
</div>
</li>
<li>
<div class="title">学校特色</div>
<div class="txt">绝大多数项目均系围绕心理学理论和临床的细分方向进行专业设置，几十年间，孕育了大批政界、商界、学术界的杰出人才。</div>
<div class="txt">
绝大多数项目均系围绕心理学理论和临床的细分方向进行专业设置，几十年间，孕育了大批政界、商界、学术界的杰出人才。
</div>
</li>
<li>
<div class="title">学术影响</div>
<div class="txt">加州整合大学连续15年蝉联美国加州心理咨询师资格考试通过率第1名，每年约有500名专业心理咨询师在这里持证。</div>
<div class="txt">
加州整合大学连续15年蝉联美国加州心理咨询师资格考试通过率第1名，每年约有500名专业心理咨询师在这里持证。
</div>
</li>
</ul>
<!-- <div class="cap-xx animate__animated animate__fadeInUp animate__delay-0.2s">
......@@ -102,8 +103,12 @@
<vue-lazy-component>
<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">
......@@ -180,7 +185,7 @@
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/mesbk.png')"
:leavheight=" heightdy - 60"
:leavheight="heightdy - 60"
/>
</div>
<vue-lazy-component>
......@@ -250,7 +255,7 @@ export default {
}
},
watch: {
num1: function (newValue, oldValue) {
num1: function(newValue, oldValue) {
var vm = this
function animate(time) {
window.requestAnimationFrame(animate)
......@@ -259,13 +264,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)
......@@ -274,13 +279,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)
......@@ -289,13 +294,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)
......@@ -304,9 +309,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()
......@@ -373,10 +377,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() {
......@@ -412,7 +413,7 @@ export default {
</script>
<style lang="scss" scoped>
.color-fff{
.color-fff {
background: #fff;
}
.homepage-banner {
......@@ -445,13 +446,13 @@ export default {
background-size: 100% 100%;
cursor: pointer;
}
.video-img-pop{
.video-img-pop {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
background: rgba(0, 0, 0, 0.3);
z-index: 4;
}
}
......@@ -484,7 +485,7 @@ export default {
}
.ts-bu {
width: 138px;
background: #E27F4D;
background: #e27f4d;
border: 0px;
span {
padding-right: 10px;
......@@ -501,19 +502,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: #faa634;
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;
}
}
}
......@@ -521,8 +521,8 @@ export default {
width: 100%;
position: relative;
overflow: hidden;
background: url(https://zws-imgs-pub.ezijing.com/static/public/0b231f6b83983243fd13e2911c371b40.png)
no-repeat center center;
background: url(https://zws-imgs-pub.ezijing.com/static/public/0b231f6b83983243fd13e2911c371b40.png) no-repeat center
center;
background-size: cover;
display: flex;
justify-content: center;
......@@ -562,11 +562,11 @@ export default {
position: absolute;
bottom: -4px;
height: 3px;
background: #E27F4D;
background: #e27f4d;
width: 100%;
}
.red {
color: #E27F4D;
color: #e27f4d;
}
.black {
color: #222;
......@@ -852,47 +852,47 @@ export default {
.no_mar {
padding-bottom: 5px !important;
}
.cap-item-box{
.cap-item-box {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 40px;
li{
li {
position: relative;
width: 320px;
height: 254px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/907e29cdca94fd79c2725cc0b2161028.png);
background-size: 100% 100%;
.title{
.title {
position: absolute;
top: 10px;
left: 30px;
color: #fff;
font-size: 18px;
}
.txt{
.txt {
padding-top: 60px;
width: 260px;
margin: 0 auto;
font-size: 18px;
color: #AF1B40;
color: #af1b40;
line-height: 30px;
}
}
}
.rz-new-mar{
.rz-new-mar {
margin-top: 60px;
}
.cap-more{
::v-deep .el-button--primary{
background: #E27F4D;
.cap-more {
::v-deep .el-button--primary {
background: #e27f4d;
border: none;
}
}
.demo-ruleForm{
::v-deep .el-button--primary{
background: #E27F4D;
.demo-ruleForm {
::v-deep .el-button--primary {
background: #e27f4d;
border: none;
}
}
......
src/pages/major-set/index.vue
浏览文件 @ 9b681f1d
<template>
<div class="layout_com_page">
<vue-lazy-component>
<div class="layout_com_page_banner" :style="{height: heightdy + 'px'}">
<div
class="major-banner"
v-for="(item, index) in bannerList"
:key="index"
@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">
应用心理学硕士
<!-- <small>-</small>蒙台梭利教育硕士 -->
</span>
</div>
<div class="banner">
<div class="mask"></div>
<div class="banner-inner">
<h1>加州整合大学-应用心理学硕士</h1>
<p>
引领你进入一段逐步深入的学习旅程——从探索自我的起点出发，延伸至对伴侣关系、婚姻家庭的触碰和理解，递进到对团体、组织和领导力的洞察与挖掘，同时收获心理教练技能。
</p>
</div>
</vue-lazy-component>
</div>
<vue-lazy-component>
<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" 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}"
>
<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}"
: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">
......@@ -67,59 +41,67 @@
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class='pics'>
<div class='left'>
<img src="@/assets/images/major-set/left.png" alt="">
<div class="pics">
<div class="left">
<img src="@/assets/images/major-set/left.png" alt="" />
</div>
<div class='mid'>
<div class='p1' >
<div class="mid">
<div class="p1">
<div class="txt">CIIS终身教授、与马斯洛等人共同创建后人本心理学 斯坦·葛罗夫</div>
<img src="@/assets/images/major-set/mid-1.png" alt="">
<img src="@/assets/images/major-set/mid-1.png" alt="" />
</div>
<div class='p2'>
<div class="p2">
<div class="txt top-n">正念之父 乔·卡巴金</div>
<img src="@/assets/images/major-set/mid-2.png" alt="">
<img src="@/assets/images/major-set/mid-2.png" alt="" />
</div>
<div class='p3'>
<!-- <div class="p3">
<div class="txt">《狂喜之后》《踏上心灵幽静》作者、正念导师 杰克·康菲尔德</div>
<img src="@/assets/images/major-set/mid-3.png" alt="">
</div>
<div class='p7'>
<img src="@/assets/images/major-set/mid-3.png" alt="" />
</div> -->
<div class="p7">
<div class="txt2">国内外心理界大咖联袂推荐</div>
<img src="@/assets/images/major-set/mid-7.png" alt="">
<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 class="p3">
<div class="txt">《狂喜之后》《踏上心灵幽静》作者、正念导师 杰克·康菲尔德</div>
<img src="@/assets/images/major-set/mid-3.png" alt="" />
</div>
<div class='p5'>
<div class="p5">
<div class="txt">澳门城市大学教授、华南师范大学教授 申荷永</div>
<img src="@/assets/images/major-set/mid-new2.png" alt="">
<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 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='p8'>
<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>
<img src="@/assets/images/major-set/mid-new4.png" alt="" />
</div> -->
</div>
<div class='right'>
<div class="right">
<div>
<img src="@/assets/images/major-set/right-1.png" alt="">
<img src="@/assets/images/major-set/right-1.png" alt="" />
</div>
<div>
<img src="@/assets/images/major-set/right-2.png" alt="">
<img src="@/assets/images/major-set/right-2.png" alt="" />
</div>
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="layout_com_page_banner major-kc-bg" :style="{'height': 700 + 'px'}">
<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>
<button @mouseover="buhover(1)" :class="{ 'hover-bt': course === 1 }">第一学年</button>
<button @mouseover="buhover(2)" :class="{ 'hover-bt': course === 2 }">第二学年</button>
</div>
<div class="major-kc-right">
<div class="major-kc-svg">
......@@ -128,10 +110,10 @@
<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]"
: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}"
:style="{ top: item.top1, right: item.right1 }"
>
<div class="div-son"></div>
</li>
......@@ -139,40 +121,40 @@
<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]"
:class="[{ show_anima_li_left: item.li1stateLeft, show_anima_li_right: item.li1stateRight }, item.class2]"
:key="index"
:style="{top: item.top2, right: item.right2}"
:style="{ top: item.top2, right: item.right2 }"
>
<span class="yw">{{item.span}}</span>
<span>{{item.span1}}</span>
<span class="yw">{{ item.span }}</span>
<span>{{ item.span1 }}</span>
</li>
</ul>
</div>
</div>
</vue-lazy-component>
<vue-lazy-component>
<div class="layout_com_page_banner major-kc-sy" :style="{'min-height':700 + 'px'}">
<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}"
: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>
<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>
<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>
......@@ -184,31 +166,31 @@
</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 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>
</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">
</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>
......@@ -220,35 +202,35 @@
</template>
</div>
</div> -->
</div>
</div>
</div>
</vue-lazy-component>
<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 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>
<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">
</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>
......@@ -260,8 +242,8 @@
</template>
</div>
</div> -->
</div>
</div>
</div>
</vue-lazy-component>
<!-- <vue-lazy-component>
<swiper ref="mySwiper" :options="swiperOptions">
......@@ -278,7 +260,7 @@
<leavex
:imgUrl="require('@/assets/images/mes1.png')"
:imgUrlBg="require('@/assets/images/major-set/mz.png')"
:leavheight=" heightdy - 60"
:leavheight="heightdy - 60"
/>
</div>
</vue-lazy-component>
......@@ -347,7 +329,7 @@ export default {
main: [
'美国俄勒冈大学哲学博士（教育心理学与咨询心理学）',
'现任浙江师范大学教师教育学院特聘专家',
'曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
'曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长，台湾辅导与咨询学会理事长、心理学会理事'
]
},
{
......@@ -356,10 +338,9 @@ export default {
label: '博士',
main: [
'著名性学家，性与性别学者专家',
'北京林业大学性与性别研究所所长',
'中国白丝带志愿者网络召集人',
'湾树德科技大学人类性学研究所兼职教授',
'世界华人性学家协会执委，中国性学会理事'
'台湾树德科技大学人类性学研究所兼职教授',
'中国妇女研究会理事',
'中国性学会理事'
]
},
{
......@@ -367,11 +348,9 @@ export default {
title: '许育光',
label: '博士',
main: [
'美国马里兰大学(UMD) 咨商与人事服务学系博士后',
'彰化师范大学辅导与咨商博士',
' 美国马里兰大学(UMD) 咨商与人事服务学系博士后',
'台湾清华大学教育心理与咨商学系教授兼任系主任',
'辅导季刊主编（华人地区创刊 56 年之咨商辅导经典学术期刊） ',
'台湾学校心理与咨商辅导协会发起专家暨理事长'
'辅导季刊主编（华人地区创刊 56 年之咨商辅导经典学术期刊）'
]
},
{
......@@ -381,8 +360,8 @@ export default {
main: [
'武汉大学心理学硕士、哲学博士',
'香港精神分析学会会员、副主席',
'武汉大学现代心理学研究中心 特约研究员',
'中国心理卫生协会会员 精神分析专委会委员 青年工作委员会委员'
'武汉大学现代心理学研究中心特约研究员',
'中国心理卫生协会会员、精神分析专委会委员、青年工作委员会委员'
]
},
{
......@@ -395,45 +374,54 @@ export default {
'英国心理学会特许心理学家',
'美国宾夕法尼亚大学医学院精神病学系临床心理学博士后'
]
}
// ,
// {
// img: require('@/assets/images/wm/wm_26.png'),
// title: '陈华',
// label: 'Eadie Chen',
// main: [
// '哥伦比亚大学心理学硕士',
// '哈佛大学公共管理硕士',
// '北京大学传播学中国人民大学政治学双学士',
// 'ICF认证教练'
// ]
// }
],
wmList: [
},
{
img: require('@/assets/images/wm/wm_01.png'),
title: 'Nicolle Zapien',
img: require('@/assets/images/wm/wm_26.png'),
title: '徐凯文',
label: '博士',
main: [
'CIIS人类性学博士专业 教授',
'国际教练学会ICF 认证教练',
'哈佛大学教育学院硕士、塞布鲁克大学临床心理学博士',
'临床心理学研究、教学以及治疗领域拥有十余年丰富经验'
'副教授',
'和睦家医院执业精神科医师',
'中国心理学会临床心理学注册工作委员会注册督导师',
'心理咨询师工作委员会委员'
]
},
{
img: require('@/assets/images/wm/wm_02.png'),
title: 'Luna Yue Ren',
label: '博士候选人',
img: require('@/assets/images/wm/wm_27.png'),
title: '王继堃',
label: '博士',
main: ['华东师范大学应用心理学副教授', '医学博士', '心理学博士后', '中国社会心理学会婚姻家庭专委会委员']
},
{
img: require('@/assets/images/wm/wm_28.png'),
title: '鲁华章',
label: '博士',
main: ['中国地质大学(北京）副教授', '应用心理学、安全管理专业硕士导师', '国际教练联盟认证专业级别教练（PCC）']
},
{
img: require('@/assets/images/wm/wm_29.png'),
title: '牟惊雷',
label: '博士',
main: [
'CIIS中国项目办公室负责人',
'中国社会心理学会下属整合心理学专业委员会委员',
'加州整合大学东西方心理学专业博士候选人',
'拥有十年以上政府及跨国公司人力资源测评及咨询经验'
'北京大学心理学博士候选人',
'北大“危机干预热线”主要建设者',
'树洞网络危机干预负责人',
'北京字节跳动科技有限公司签约心理专家'
]
},
{
img: require('@/assets/images/wm/wm_03.png'),
img: require('@/assets/images/wm/wm_30.png'),
title: '梁冠琼',
label: '硕士',
main: [
'美国宾夕法尼亚大学心理咨询(Counseling and Mental Health Services)硕士',
'中国心理学会临床与咨询心理学注册系统注册心理师'
]
}
],
wmList: [
{
img: require('@/assets/images/wm/wm_01.png'),
title: 'Glenn Hartelius',
label: '博士',
main: [
......@@ -444,7 +432,7 @@ export default {
]
},
{
img: require('@/assets/images/wm/wm_04.png'),
img: require('@/assets/images/wm/wm_02.png'),
title: 'Rachael Vaughan',
label: '执业心理咨询师',
main: [
......@@ -455,29 +443,20 @@ export default {
]
},
{
img: require('@/assets/images/wm/wm_05.png'),
title: 'Michelle Marzullo',
img: require('@/assets/images/wm/wm_03.png'),
title: 'Will Sol',
label: '博士',
main: [
'CIIS人类性学博士专业系主任',
'美国国家性心理与性教育协会常任委员',
'人类学研究博士',
'曾多年担任安永国际特约顾问，为多家财富前100的机构和企业提供管理咨询服务'
]
main: ['CIIS整合与后人本主义心理学博士', '社区精神卫生与儿童关爱工作者、儿童领养人']
},
{
img: require('@/assets/images/wm/wm_06.png'),
title: 'Daniela Loenig',
label: '执业心理咨询师',
main: [
'CIIS临床心理咨询专业 核心教授',
'加州认证执业MFT临床心理咨询师',
'美国性教育与心理健康委员会认证成员',
'出生成长于欧洲，求学执业于美国，现与家人长驻瑞士，在自身经验实证中发展了对临床理论与治疗的体悟'
]
img: require('@/assets/images/wm/wm_04.png'),
title: 'Elliott Kronenfeld',
label: '博士',
main: ['CIIS人类性学博士', '畅销书"Couple by Intentions"作者', 'TEDx演讲者']
},
{
img: require('@/assets/images/wm/wm_07.png'),
img: require('@/assets/images/wm/wm_05.png'),
title: 'Meg Jordan',
label: '博士',
main: [
......@@ -489,20 +468,16 @@ export default {
]
},
{
img: require('@/assets/images/wm/wm_08.png'),
title: 'Courtenay Crouch',
label: '博士',
main: [
'CIIS整合心理博士专业 讲师',
'杜克大学硕士、CIIS整合与后人本主义心理学博士',
'美国国家心理学会 APA 国际心理学分会主管',
'《整合心理学》《人本心理学与现象学》等国际学术期刊评委'
]
img: require('@/assets/images/wm/wm_06.png'),
title: 'Julie Viellieu',
label: 'MA',
main: ['综合营养协会认证健康教练', '美国抗衰老医学学会认证生活方式教练']
},
{
img: require('@/assets/images/wm/wm_09.png'),
title: 'Clark Hsu, MFT',
label: '博士候选人',
title: 'Clark Hsu',
label: 'MFT',
main: [
'CIIS表达艺术临床心理咨询专业 副教授',
'加州认证执业MFT 临床心理咨询师',
......@@ -523,7 +498,8 @@ export default {
{
img: require('@/assets/images/major-set/ma03.png'),
bgShow: true,
title: '应用心理学是心理学中迅速发展的一个重要学科分支。应用心理学研究心理学基本原理在各种实际领域的应用，包括工业、工程、组织管理、市场消费、社会生活、医疗保健、体育运动以及军事、司法、环境等各个领域，通过运用心理学的原则及理论来解决领域内的实际问题。随着经济、科技、社会和文化迅速发展，应用心理学有着日益广阔的前景。'
title:
'应用心理学是心理学中迅速发展的一个重要学科分支。应用心理学研究心理学基本原理在各种实际领域的应用，包括工业、工程、组织管理、市场消费、社会生活、医疗保健、体育运动以及军事、司法、环境等各个领域，通过运用心理学的原则及理论来解决领域内的实际问题。随着经济、科技、社会和文化迅速发展，应用心理学有着日益广阔的前景。'
// label:
// ' 一百多年来，蒙台梭利教育法经由美国上流社会的推崇，进而风靡全球，得到世界各地教育界的认同和推崇。全球蒙氏幼儿园28000所，而康博斯威尔大学是为数不多的拥有蒙台梭利专业学位教育的高等学府。'
},
......@@ -646,6 +622,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/ciis/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%;
......@@ -732,8 +750,8 @@ export default {
font-size: 32px;
font-weight: 600;
color: rgba(34, 34, 34, 1);
i{
color: #E68851;
i {
color: #e68851;
font-size: 40px;
font-style: normal;
}
......@@ -759,13 +777,13 @@ export default {
font-weight: 400;
color: rgba(34, 34, 34, 1);
}
.new-font{
.new-font {
font-size: 32px;
font-weight: bold;
i{
i {
font-size: 40px;
font-style: normal;
color: #E68851;
color: #e68851;
}
}
}
......@@ -780,13 +798,13 @@ export default {
flex-direction: column;
padding-left: 10px;
white-space: nowrap;
.new-font{
.new-font {
font-size: 32px;
font-weight: bold;
i{
i {
font-style: normal;
font-size: 40px;
color: #E68851;
color: #e68851;
}
}
}
......@@ -917,16 +935,16 @@ export default {
width: 270px;
height: 84px;
line-height: 84px;
color: #E27F4D;
color: #e27f4d;
background: #fff;
border-radius: 4px;
cursor: pointer;
margin: 30px 0px;
border: 2px solid #E27F4D;
border: 2px solid #e27f4d;
font-size: 22px;
}
.hover-bt {
background-color: #E27F4D;
background-color: #e27f4d;
color: #fff;
}
}
......@@ -964,7 +982,7 @@ export default {
.div-son {
width: 20px;
height: 20px;
background: #E27F4D;
background: #e27f4d;
border-radius: 50%;
}
}
......@@ -999,14 +1017,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;
}
}
......@@ -1021,8 +1039,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;
......@@ -1079,13 +1096,13 @@ export default {
padding: 40px 0px 10px 0px;
width: 40px;
height: 118px;
img{
img {
width: 100%;
display: block;
}
}
}
.swiper-container{
.swiper-container {
padding-top: 70px;
padding-bottom: 40px;
}
......@@ -1095,7 +1112,7 @@ export default {
position: relative;
align-items: center;
flex-wrap: wrap;
&.bg2{
&.bg2 {
background: url('~@/assets/images/wm/wmbg2.png') no-repeat center top;
background-size: cover;
}
......@@ -1145,6 +1162,10 @@ export default {
overflow: hidden;
transform: translate(-50%, -50%);
img {
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.5s;
transform: scale(0.9);
cursor: pointer;
......@@ -1172,27 +1193,27 @@ export default {
color: #222222ff;
line-height: 20px;
}
.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 #E27F4D;
border: 2px solid #e27f4d;
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%;
......@@ -1221,7 +1242,7 @@ export default {
overflow: hidden;
}
.wm-red {
color: #E27F4D !important;
color: #e27f4d !important;
}
.nowrap {
white-space: nowrap;
......@@ -1238,17 +1259,17 @@ export default {
transform: scale(1.03);
}
.pics img:hover{
.pics img:hover {
cursor: pointer;
transform: scale(1.15);
}
.pics .mid div{
.pics .mid div {
position: relative;
display: inline-block;
width: 100%;
overflow: hidden;
.txt{
.txt {
position: absolute;
bottom: 10px;
left: 50%;
......@@ -1258,11 +1279,11 @@ export default {
width: 90%;
text-align: center;
z-index: 9;
&.top-n{
&.top-n {
bottom: 23px;
}
}
.txt2{
.txt2 {
text-align: center;
position: absolute;
top: 50%;
......@@ -1276,35 +1297,36 @@ export default {
.pics .left {
display: inline-block;
width: 14.2857%;
width: 15.95%;
overflow: hidden;
}
.pics .right {
display: inline-block;
width: 14.2857%;
width: 15.95%;
overflow: hidden;
}
.pics .right div{
.pics .right div {
overflow: hidden;
}
.pics .mid {
display: inline-block;
width: 71.4286%;
width: 68.1%;
overflow: hidden;
}
.pics .mid .p1 {
width: 30.5%;
width: 33.2%;
}
.pics .mid .p2 {
width: 41%;
width: 66.8%;
}
.pics .mid .p3 {
width: 28.5%;
width: 62.3%;
}
.pics .mid .p4 {
......@@ -1312,14 +1334,18 @@ export default {
}
.pics .mid .p5 {
width: 28.4%;
// width: 28.4%;
width: 37.7%;
}
.pics .mid .p6 {
width: 21.6%;
}
.pics .mid .p8{
width: 21.6%;
// .pics .mid .p6 {
// // width: 21.6%;
// height: 350px;
// width: 33%;
// }
.pics .mid .p8 {
// width: 21.6%;
width: 34%;
}
.pics .mid .p7 {
width: 100%;
......@@ -1328,14 +1354,14 @@ export default {
.right img {
width: 100%;
}
.major-kc-wm-body{
::v-deep .swiper-container{
.swiper-pagination-bullet{
opacity:1;
.major-kc-wm-body {
::v-deep .swiper-container {
.swiper-pagination-bullet {
opacity: 1;
background: #fff;
}
.swiper-pagination-bullet-active{
background: #FF8340;
.swiper-pagination-bullet-active {
background: #ff8340;
}
}
}
......@@ -1343,19 +1369,19 @@ export default {
// opacity:1;
// background: #fff;
// }
.new-pop{
.new-pop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.6);
.txt{
background: rgba(255, 255, 255, 0.6);
.txt {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%, -50%);
font-size: 18px;
line-height: 1.5;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论