Skip to content

P
project-online-pc
提交 8959fd2e authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

修改首页交互

上级 fa4c3791
隐藏空白字符变更
内嵌 并排
正在显示 包含 128 行增加 和 33 行删除
components/home/Video.vue
浏览文件 @ 8959fd2e
<template> <template>
<div class="video-wrapper" :class="className"> <div class="video-wrapper" :class="className">
<div class="content"> <div class="content" @mouseenter="handleMouseEnter" @mouseleave="showType = ''" @mousemove="handleMouseEnter" @click="handleClick" ref="target" :style="{ color: activeColor, cursor: mouseCursor }">
<ul class="video-list"> <ul class="video-list">
<li class="video-item" v-for="(item, index) in list" :key="index"> <li class="video-item" v-for="(item, index) in list" :key="index">
<div class="video-poster"> <div class="video-poster">
<img :src="item.poster" /> <img :src="item.poster" />
<div class="video-play" @click="open(item)" v-if="isMobile || index === 0"></div> <div class="video-play" @click="open(item)" @mouseenter.stop="handleVideoMouseEnter" @mousemove.stop="handleVideoMouseEnter" v-if="isMobile || index === 0"></div>
</div> </div>
<div class="video-content"> <div class="video-content">
<div class="video-title">{{ item.title }}</div> <div class="video-title">{{ item.title }}</div>
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="video-next" @click="handleNext"></div> <!-- <div v-if="showType === 'left' && showIndex > 0" class="video-btn video-prev" @click="handlePrev"></div>
<div v-if="showType === 'right' && showIndex < list.length - 1" class="video-btn video-next" @click="handleNext"></div> -->
</div> </div>
<video <video
v-if="isShow === true" v-if="isShow === true"
...@@ -51,7 +52,10 @@ export default { ...@@ -51,7 +52,10 @@ export default {
} }
], ],
// 当前播放的视频 // 当前播放的视频
playVideo: {} playVideo: {},
showType: '',
showIndex: 0,
mouseCursor: 'pointer'
} }
}, },
computed: { computed: {
...@@ -66,10 +70,53 @@ export default { ...@@ -66,10 +70,53 @@ export default {
} }
}, },
methods: { methods: {
handleMouseEnter(e) {
const target = this.$refs.target.getBoundingClientRect()
if((e.clientX - target.left) < ((target.right - target.left) / 2)) {
if (this.showIndex > 0) {
this.mouseCursor = 'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-left-dark.svg) 30 30, e-resize'
this.showType = 'left'
} else {
this.mouseCursor = 'default'
this.showType = ''
}
} else {
if (this.showIndex < this.list.length - 1) {
this.mouseCursor = 'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-right-dark.svg) 30 30, e-resize'
this.showType = 'right'
} else {
this.mouseCursor = 'default'
this.showType = ''
}
}
},
handleVideoMouseEnter() {},
handleClick() {
if (this.showType === 'left') {
this.handlePrev()
} else if (this.showType === 'right'){
this.handleNext()
}
},
handlePrev() {
// 末尾的视频放到前面
const deleteVideo = this.list.splice(this.list.length - 1, 1)
this.list.unshift(deleteVideo[0])
this.showIndex--
if (this.showIndex === 0) {
this.mouseCursor = 'default'
this.showType = ''
}
},
handleNext() { handleNext() {
// 第一个视频放到最后 // 第一个视频放到最后
const deleteVideo = this.list.splice(0, 1) const deleteVideo = this.list.splice(0, 1)
this.list = this.list.concat(deleteVideo) this.list = this.list.concat(deleteVideo)
this.showIndex++
if (this.showIndex === this.list.length - 1) {
this.mouseCursor = 'default'
this.showType = ''
}
}, },
open(item) { open(item) {
this.playVideo = item this.playVideo = item
...@@ -157,18 +204,23 @@ export default { ...@@ -157,18 +204,23 @@ export default {
line-height: 28px; line-height: 28px;
color: #ffffff; color: #ffffff;
} }
.video-next { .video-btn {
position: absolute; position: absolute;
right: -40px; left: -40px;
top: 50%; top: 50%;
width: 79px; width: 79px;
height: 79px; height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center; background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-l.png) no-repeat center center;
background-size: contain; background-size: contain;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; cursor: pointer;
z-index: 10; z-index: 10;
} }
.video-next {
left:unset;
right: -40px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
}
.overlay { .overlay {
position: fixed; position: fixed;
left: 0; left: 0;
......
components/home/banners.vue
浏览文件 @ 8959fd2e
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="banner-content"> <div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/banner.png" /> <img class="img" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-banner.png" />
<div class="banner_navList"> <div class="banner_navList">
<div class="banner_nav" v-for="(item, index) in navList" :key="index" @click="navClick(item)"> <div class="banner_nav" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
<div class="nav_top"> <div class="nav_top">
......
components/home/projectFeatures.vue
浏览文件 @ 8959fd2e
...@@ -13,7 +13,9 @@ ...@@ -13,7 +13,9 @@
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<img :src="item.web_img_uri" /> <div class="item_media">
<img :src="item.web_img_uri" />
</div>
<div class="item_desc"> <div class="item_desc">
<div class="item_desc_tit">{{ item.item_desc_tit }}</div> <div class="item_desc_tit">{{ item.item_desc_tit }}</div>
<div class="item_desc_con">{{ item.item_desc_con }}</div> <div class="item_desc_con">{{ item.item_desc_con }}</div>
...@@ -60,34 +62,34 @@ export default { ...@@ -60,34 +62,34 @@ export default {
return { return {
listData: [ listData: [
{ {
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper1.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-01.png',
item_desc_tit: '国际名校、权威可靠', item_desc_tit: '国际名校、权威可靠',
item_desc_con: item_desc_con:
'清控紫荆教育是以清华五道口相关知识产权创设而成，自成立以来和世界多所国际名校合作，实现与国外著名大学课程和学分互认，具有很强的国际化办学经验和教学水平。与清控紫荆合作的海外院校均为中美两国教育部认可的正规大学，所获文凭均受中国教育部与国际认证。' '清控紫荆教育是以清华五道口相关知识产权创设而成，自成立以来与多所国际名校合作且实现课程学分互认，所获文凭均受中国教育部与国际认证，具有很强的国际化办学经验和教学水平。'
}, },
{ {
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper2.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-02.png',
item_desc_tit: '无需联考、灵活录取', item_desc_tit: '无需联考、灵活录取',
item_desc_con: item_desc_con:
'无需参加国内竞争激烈的研究生入学考试、没有托福成绩的优秀学生可以完成ZIEP（Zijing Intensive English Program）即紫荆语言强化课程项目替代语言课程，且该课程以及考核成绩被众多美国大学认可，达到录取标准即可直接入读硕士课程。' '无需参加国内竞争激烈的研究生联考，没有托福成绩的学生可以完成紫荆英语强化项目替代语言成绩。该课程以及考核成绩被美国大学认可，达到录取标准即可直接入读相应硕士课程。'
}, },
{ {
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper3.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-03.png',
item_desc_tit: '国际视野、本土实践', item_desc_tit: '前沿专业、就业广阔',
item_desc_con: item_desc_con:
'本项目全部采用英文原版教材，双语教学、小班授课，充分发挥学生学习的自主性，帮助学生提前适应美国教学模式；授课师资由清北人资深教授和优秀外教组成，强强合作，保证国际化同时，兼具本土实践，为留学归国工作建立无缝连接。' '项目提供当前数字经济领域前沿专业，使毕业生具有国际背景和全球化竞争力。此外毕业生享受国家为留学归国人员提供的落户指标、创业支持、购买免税汽车等待遇。'
}, },
{ {
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper4.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-04.png',
item_desc_tit: '省时省费、性价比优', item_desc_tit: '省时省费、性价比优',
item_desc_con: item_desc_con:
'经过在国内学习一年，学生只需在国外学习一年即可获得中国教育部和国际认可的硕士学位，节省时间和成本。' '经过在国内学习一年后，学生只需再在国外学习一年即可获得中国教育部和国际认可的硕士学历学位，既节省时间成本又节约经济花销。'
}, },
{ {
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper5.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-05.png',
item_desc_tit: '前沿专业、就业广阔', item_desc_tit: '国际视野、本土实践',
item_desc_con: item_desc_con:
'专业皆为当前数字经济领域前沿专业，毕业生具有国际背景、全球化竞争力。并且毕业生可在回国后进行《国外学位学历认证》申请，享受国家为留学归国人员提供的干部身份、创业支持、购买免税汽车、落户指标等待遇。' '本项目全部采用双语教学、小班授课，帮助学生提前适应美国教学模式；授课师资由清北人资深教授和优秀外教组成，保证国际化同时兼具本土实践，为留学归国工作建立无缝连接。'
} }
], ],
swiperOption: { swiperOption: {
...@@ -179,36 +181,74 @@ export default { ...@@ -179,36 +181,74 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
.swiper-slide { .swiper-slide {
width: 386px; width: 250px;
height: 569px; height: 569px;
overflow:hidden;
position:relative;
.item_media{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
img{
transition:0.3s;
width:100%;
height:100%;
}
&:after{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,.45);
}
}
.item_desc { .item_desc {
width: 386px; position:absolute;
left:0;
top:0;
width: 250px;
height: 349px; height: 349px;
background-color: #ededed; // background-color: #ededed;
opacity: 1; opacity: 1;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
padding: 34px 37px 53px 33px; padding: 34px 37px 53px 33px;
// transform-origin: bottom;
transform: translateY(450px);
transition:0.3s;
.item_desc_tit { .item_desc_tit {
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
color: #333333; color: #fff;
margin-top: 34px; margin-top: 34px;
} }
.item_desc_con { .item_desc_con {
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
color: #666666; color: #fff;
margin-top: 34px; margin-top: 34px;
line-height: 32px; line-height: 32px;
} }
} }
.item_desc:hover { }
background-color: #fff; .swiper-slide:hover{
.item_media{
img{
transform:scale(1.1);
}
}
.item_desc {
// background-color: #fff;
transform: translateY(160px);
.item_desc_tit { .item_desc_tit {
border-bottom: 1px solid #434343; border-bottom: 1px solid #f3f4f4;
} }
} }
} }
......
pages/academic/academic.vue
浏览文件 @ 8959fd2e
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
.main_content { .main_content {
padding: 103px 64px 120px 48px; padding: 70px 64px 80px 48px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
......
pages/project-intro/introduce.vue
浏览文件 @ 8959fd2e
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
<div class="part_item"> <div class="part_item">
国际硕士1+1项目基于美国大学对中国教育机构或者大学的充分认证与授权，使得学生申请过程更加便捷。同其他赴美硕士留学项目相比，节省了国内备考与海外学习时间的同时也节约了可观的留学花费，已经成为越来越多优秀大学生的升硕选择。 国际硕士1+1项目基于美国大学对中国教育机构或者大学的充分认证与授权，使得学生申请过程更加便捷。同其他赴美硕士留学项目相比，节省了国内备考与海外学习时间的同时也节约了可观的留学花费，已经成为越来越多优秀大学生的升硕选择。
</div> </div>
<div class="part_item">
清控紫荆教育联合美国多所知名院校联合推出国际硕士1+1项目，聚焦商业数据分析、金融科技、大数据、人工智能等数字经济领域前沿专业，以“能力导向一体化”教学体系为指引，建立“通识教育、专业教育、实践教育和创新教育”四位一体的国际化创新人才培养体系，致力于培养具有卓越的创新实践能力和国际竞争力的行业领军人才。
</div>
<!-- <img <!-- <img
v-if="!isMobile" v-if="!isMobile"
class="part_img" class="part_img"
......
pages/school/school3.vue
浏览文件 @ 8959fd2e
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div class="img-box"> <div class="img-box">
<img class="img2" src="https://webapp-pub.ezijing.com/project/marywood/marywood321.png" /> <img class="img2" src="https://webapp-pub.ezijing.com/project/marywood/marywood321.png" />
</div> </div>
<img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/marywood3222.png" /> <img class="img22" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-college-intro-img1.png" />
</div> </div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood33.png" /> <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood33.png" />
<div class="content"> <div class="content">
...@@ -82,8 +82,8 @@ ...@@ -82,8 +82,8 @@
</div> </div>
</div> </div>
<div style="padding: 40px"> <div style="padding: 40px">
<img v-if="!courseSetTab" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-curriculum.png" /> <img v-if="!courseSetTab" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-college-intro-img2.png" />
<img v-else src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-curriculum2.png" /> <img v-else src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-college-intro-img3.png" />
</div> </div>
</div> </div>
<div class="content_tit"> <div class="content_tit">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论