提交 e0f1481b authored 作者: matian's avatar matian

项目优化

上级 11a2239b
...@@ -131,6 +131,7 @@ export default { ...@@ -131,6 +131,7 @@ export default {
color: #fefffe; color: #fefffe;
padding-bottom: 15px; padding-bottom: 15px;
border-right: 1px solid #be0927; border-right: 1px solid #be0927;
font-size: 20px;
} }
&:hover { &:hover {
height: 160px; height: 160px;
......
...@@ -2,16 +2,30 @@ ...@@ -2,16 +2,30 @@
<div class="service-content max-width-center"> <div class="service-content max-width-center">
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<card :title="$t('home.project.title')" v-if="!isMobile"> <card :title="$t('home.project.title')" v-if="!isMobile">
<ul class="nav-content"> <!-- <ul class="nav-content">
<li v-for="(item, index) in data" :key="index"> <li v-for="(item, index) in data" :key="index">
<img :src="item.icon" class="icon" /> <img :src="item.icon" class="icon" />
<img v-if="!isMobile" :src="item.iconActive" class="icon-active" /> <img v-if="!isMobile" :src="item.iconActive" class="icon-active" />
<div class="text" v-html="item.text"></div> <div class="text" v-html="item.text"></div>
</li> </li>
</ul> </ul> -->
<div class="swiperOptions" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<img :src="item.web_img_uri" />
<div class="item_desc">
<div class="item_desc_tit">{{ item.item_desc_tit }}</div>
<div class="item_desc_con">{{ item.item_desc_con }}</div>
</div>
</div>
</div>
<div class="prev-button"></div>
<div class="next-button"></div>
</div>
</div>
</card> </card>
<div v-else> <div v-else>
<div class="tit">项目特色</div>
<ul class="nav-content"> <ul class="nav-content">
<li v-for="(item, index) in data" :key="index"> <li v-for="(item, index) in data" :key="index">
<img :src="item.icon" class="icon" /> <img :src="item.icon" class="icon" />
...@@ -34,6 +48,53 @@ export default { ...@@ -34,6 +48,53 @@ export default {
}, },
data() { data() {
return { return {
listData: [
{
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper1.png',
item_desc_tit: '国际名校、权威可靠',
item_desc_con:
'清控紫荆教育是以清华五道口相关知识产权创设而成,自成立以来和世界多所国际名校合作,实现与国外著名大学课程和学分互认,具有很强的国际化办学经验和教学水平。与清控紫荆合作的海外院校均为中美两国教育部认可的正规大学,所获文凭均受中国教育部与国际认证。'
},
{
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper2.png',
item_desc_tit: '无需联考、灵活录取',
item_desc_con:
'无需参加国内竞争激烈的研究生入学考试、没有托福成绩的优秀学生可以完成ZIEP(Zijing Intensive English Program)即紫荆语言强化课程项目替代语言课程,且该课程以及考核成绩被众多美国大学认可,达到录取标准即可直接入读硕士课程。'
},
{
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper3.png',
item_desc_tit: '国际视野、本土实践',
item_desc_con:
'本项目全部采用英文原版教材,双语教学、小班授课,充分发挥学生学习的自主性,帮助学生提前适应美国教学模式;授课师资由清北人资深教授和优秀外教组成,强强合作,保证国际化同时,兼具本土实践,为留学归国工作建立无缝连接。'
},
{
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper4.png',
item_desc_tit: '省时省费、性价比优',
item_desc_con:
'经过在国内学习一年,学生只需在国外学习一年即可获得中国教育部和国际认可的硕士学位,节省时间和成本。'
},
{
web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/swiper5.png',
item_desc_tit: '前沿专业、就业广阔',
item_desc_con:
'专业皆为当前数字经济领域前沿专业,毕业生具有国际背景、全球化竞争力。并且毕业生可在回国后进行《国外学位学历认证》申请,享受国家为留学归国人员提供的干部身份、创业支持、购买免税汽车、落户指标等待遇。'
}
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
navigation: {
nextEl: '.next-button',
prevEl: '.prev-button'
}
},
titleParams: { titleParams: {
name: this.$t('home.project.title') name: this.$t('home.project.title')
}, },
...@@ -81,6 +142,18 @@ export default { ...@@ -81,6 +142,18 @@ export default {
computed: { computed: {
isMobile() { isMobile() {
return this.$store.state.isMobile return this.$store.state.isMobile
},
swiper() {
return this.$refs.mySwiper.swiper
}
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
} }
} }
} }
...@@ -88,6 +161,71 @@ export default { ...@@ -88,6 +161,71 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
.swiperOptions {
width: 1200px;
position: relative;
margin-top: 17px;
.swiper-wrapper {
width: 100%;
display: flex;
.swiper-slide {
width: 386px;
height: 569px;
.item_desc {
width: 386px;
height: 349px;
background-color: #ededed;
opacity: 1;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
padding: 34px 37px 53px 33px;
.item_desc_tit {
font-size: 20px;
font-weight: 400;
color: #333333;
margin-top: 34px;
}
.item_desc_con {
font-size: 16px;
font-weight: 300;
color: #666666;
margin-top: 34px;
line-height: 32px;
}
}
.item_desc:hover {
background-color: #fff;
.item_desc_tit {
border-bottom: 1px solid #434343;
}
}
}
}
.prev-button {
position: absolute;
top: 30%;
left: 30px;
width: 20px;
height: 35px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/beb733466e5ab0168b459a55d198b084.png);
background-size: 100% 100%;
z-index: 999;
cursor: pointer;
}
.next-button {
position: absolute;
top: 30%;
right: 30px;
width: 20px;
height: 35px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e97f45b23a3e5ec4913f0069cc714baf.png);
background-size: 100% 100%;
z-index: 999;
cursor: pointer;
}
}
.service-content { .service-content {
padding-top: 64px; padding-top: 64px;
.nav-content { .nav-content {
......
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
margin: 0 auto; margin: 0 auto;
padding-top: 168px; padding-top: 168px;
.desc { .desc {
text-align: center; text-align: left;
padding-top: 15px; padding-top: 15px;
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
......
...@@ -341,9 +341,9 @@ export default { ...@@ -341,9 +341,9 @@ export default {
background-image: url(https://webapp-pub.ezijing.com/project/marywood/aside31.png); background-image: url(https://webapp-pub.ezijing.com/project/marywood/aside31.png);
} }
li.top { li.top {
background-image: url(https://webapp-pub.ezijing.com/project/marywood/aside4.png); background-image: url(https://webapp-pub.ezijing.com/project/marywood/aside40.png);
&:hover { &:hover {
background-image: url(https://webapp-pub.ezijing.com/project/marywood/aside41.png); background-image: url(https://webapp-pub.ezijing.com/project/marywood/aside42.png);
} }
} }
// li.top.active { // li.top.active {
......
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'"> <app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" width="100%" /> <img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" width="100%" />
<div class="main_content"> <div class="main_content">
<!-- <el-image :src="url1"> </el-image> <!-- <el-image :src="url1"> </el-image> -->
<el-image :src="url2"> </el-image> --> <el-image :src="url1" style="width:100%;height:100%;margin-right:73px;"> </el-image>
<el-image :src="url3"></el-image> <div class="img_english">
<el-image :src="url2"></el-image>
<div class="item_english_name">玛丽伍德大学(英文)</div>
</div>
</div> </div>
</app-frame> </app-frame>
</template> </template>
...@@ -16,8 +19,8 @@ export default { ...@@ -16,8 +19,8 @@ export default {
data() { data() {
return { return {
// url1: 'https://webapp-pub.ezijing.com/project/marywood/academic21.png', // url1: 'https://webapp-pub.ezijing.com/project/marywood/academic21.png',
// url2: 'https://webapp-pub.ezijing.com/project/marywood/academic31.png', url1: 'https://webapp-pub.ezijing.com/project/marywood/academic_2.png',
url3: 'https://webapp-pub.ezijing.com/project/marywood/academic_01.jpg', url2: 'https://webapp-pub.ezijing.com/project/marywood/academic_1.png',
frameParams: { frameParams: {
slider: [ slider: [
...@@ -43,6 +46,18 @@ export default { ...@@ -43,6 +46,18 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.img_english {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.item_english_name {
font-weight: 400;
color: #424242;
font-size: 16px;
margin-top: 20px;
}
}
} }
} }
.is-h5 { .is-h5 {
......
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<div class="item" @click="download($event, item)"> <div class="item" @click="download($event, item)">
<img :src="item.icon" /> <img :src="item.icon" />
<p class="doc">{{ item.name }}</p> <p class="doc">{{ item.name }}</p>
<p class="p1">最新更新</p> <!-- <p class="p1">最新更新</p>
<p class="p2">下载</p> <p class="p2">下载</p> -->
</div> </div>
</a> </a>
</div> </div>
...@@ -32,12 +32,12 @@ export default { ...@@ -32,12 +32,12 @@ export default {
}, },
fileList: [ fileList: [
{ {
name: '招生简章.pdf', name: '招生简章',
url: 'https://webapp-pub.ezijing.com/project/marywood/%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf?v=2', url: 'https://webapp-pub.ezijing.com/project/marywood/%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf?v=2',
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png' icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
}, },
{ {
name: '常见问题.pdf', name: '常见问题',
url: 'https://webapp-pub.ezijing.com/project/marywood/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98.pdf?v=3', url: 'https://webapp-pub.ezijing.com/project/marywood/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98.pdf?v=3',
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png' icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
} }
......
...@@ -3,7 +3,25 @@ ...@@ -3,7 +3,25 @@
<img src="https://webapp-pub.ezijing.com/project/marywood/apply_banner.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood/apply_banner.png" />
<div class="content-mian"> <div class="content-mian">
<tab-content @tabChange="tabChange"></tab-content> <ul>
<li class="applyList_con">
<div class="apply_name">学历要求</div>
<div class="apply_desc">本科学历及以上或者本科在读</div>
</li>
<li class="applyList_con">
<div class="apply_name">GPA要求</div>
<div class="apply_desc">在校GPA不低于2.5</div>
</li>
<li class="applyList_con">
<div class="apply_name">语言要求</div>
<div class="apply_desc">
托福不低于79分,或者通过ZIEP测试。<br />
ZIEP(Zijing Intensive English
Program)即紫荆语言强化课程项目,是紫荆教育针对没有托福成绩的优秀学生提供的替代语言课程,该课程及考核成绩被众多美国大学认可。
</div>
</li>
</ul>
<!-- <tab-content @tabChange="tabChange"></tab-content>
<div class="content-mod1" v-if="showIndex === 0"> <div class="content-mod1" v-if="showIndex === 0">
<div class="content-txt"> <div class="content-txt">
<div class="content_tit"> <div class="content_tit">
...@@ -51,7 +69,7 @@ ...@@ -51,7 +69,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div> -->
</div> </div>
</app-frame> </app-frame>
</template> </template>
...@@ -117,6 +135,27 @@ export default { ...@@ -117,6 +135,27 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
.content-mian { .content-mian {
ul {
padding: 56px 65px 67px 56px;
.applyList_con {
.apply_name {
font-size: 20px;
font-weight: 500;
color: #333333;
margin-top: 51px;
}
.apply_desc {
font-size: 16px;
font-weight: 400;
color: #666666;
margin-top: 20px;
}
}
li {
list-style-type: disc;
color: #aa1941;
}
}
// padding: 0 0.16rem; // padding: 0 0.16rem;
.content-mod1 { .content-mod1 {
// padding-top: 18px; // padding-top: 18px;
......
<template> <template>
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'"> <app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" />
<img v-if="!isMobile" src="https://webapp-pub.ezijing.com/project/marywood/sign_content1.png" class="img_bottom" /> <img v-if="!isMobile" src="https://webapp-pub.ezijing.com/project/marywood/sign_content.png" class="img_bottom" />
<img v-else src="https://webapp-pub.ezijing.com/project/marywood/h5/%E7%BB%84%20286%20(1).png" class="img_bottom" /> <img v-else src="https://webapp-pub.ezijing.com/project/marywood/h5/%E7%BB%84%20286%20(1).png" class="img_bottom" />
</app-frame> </app-frame>
</template> </template>
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<div class="banner"> <div class="banner">
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner_02.jpg" /> <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner_02.jpg" />
<!-- <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" /> --> <!-- <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" /> -->
<div class="btn"> <!-- <div class="btn">
<button class="btn1" @click="$router.push('/my/account')">报名申请</button> <button class="btn1" @click="$router.push('/my/account')">报名申请</button>
</div> </div> -->
</div> </div>
<div class="content"> <div class="content">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/marywood31.png" /> <img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/marywood31.png" />
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</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">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood341.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood/marywood34.png" />
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
...@@ -83,7 +83,11 @@ ...@@ -83,7 +83,11 @@
<div v-else class="is-h5"> <div v-else class="is-h5">
<div class="banner"> <div class="banner">
<!-- <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/banner.jpg" width="100%" /> --> <!-- <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/banner.jpg" width="100%" /> -->
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner_02.jpg" width="100%" /> <img
class="img_banner"
src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner_02.jpg"
width="100%"
/>
</div> </div>
<div class="h5-content"> <div class="h5-content">
<div class="h5-title">玛丽伍德大学介绍</div> <div class="h5-title">玛丽伍德大学介绍</div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论