Skip to content

P
project-online-pc
提交 4663da9c authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update:修改页面

上级 c0cdf655
隐藏空白字符变更
内嵌 并排
正在显示 包含 175 行增加 和 246 行删除
pages/enroll/process.vue
浏览文件 @ 4663da9c
<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" alt="" /> <img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" alt="" />
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_content1.png" alt="" class="img_bottom" /> <img v-if="!isMobile" src="https://webapp-pub.ezijing.com/project/marywood/sign_content1.png" alt="" class="img_bottom" />
<img v-else src="https://webapp-pub.ezijing.com/project/marywood/h5/%E7%BB%84%20286%20(1).png" alt="" class="img_bottom" />
</app-frame> </app-frame>
</template> </template>
<script> <script>
...@@ -42,7 +43,7 @@ export default { ...@@ -42,7 +43,7 @@ export default {
height: 100%; height: 100%;
} }
.img_bottom { .img_bottom {
padding: 1rem 0.49rem 1rem 0.49rem; padding: .4rem 0.14rem 1rem 0.25rem;
} }
} }
</style> </style>
pages/project-intro/introduce.vue
浏览文件 @ 4663da9c
<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/introduce_banner.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project/marywood/introduce_banner.png" alt="" class="banner"/>
<div class="part_content"> <div class="part_content">
<div class="part_item"> <div class="part_item">
国际硕士1+1项目是针对在读本科生或往届生提供的研究生学历晋升通道。第一个“1”是在被美国大学有条件录取为硕士后，第1年在国内就读。对在校大学生可以在大三和大四完成，对已经工作的人士可以边工作边就读，主要是语言学习并完成硕士项目所需的部分学分课程（一般不超过总学分的40%）。若语言学习顺利，一般用时12-15个月。这个“1”是由美国大学认可的国内大学或者有实力的教育机构实施录取和教学。第二个“1”是在完成第一个“1”之后，获得美国大学的无条件录取，签证通过后赴美留学。时间安排合理的在校大学生，一般就是在大四本科毕业后，直接衔接上。对已经工作的人士，须脱产学习，完成剩余60%左右的学分，毕业后获得美国大学的硕士学位，回国后可获得中留服认证为研究生学历。 国际硕士1+1项目是针对在读本科生或往届生提供的研究生学历晋升通道。第一个“1”是在被美国大学有条件录取为硕士后，第1年在国内就读。对在校大学生可以在大三和大四完成，对已经工作的人士可以边工作边就读，主要是语言学习并完成硕士项目所需的部分学分课程（一般不超过总学分的40%）。若语言学习顺利，一般用时12-15个月。这个“1”是由美国大学认可的国内大学或者有实力的教育机构实施录取和教学。第二个“1”是在完成第一个“1”之后，获得美国大学的无条件录取，签证通过后赴美留学。时间安排合理的在校大学生，一般就是在大四本科毕业后，直接衔接上。对已经工作的人士，须脱产学习，完成剩余60%左右的学分，毕业后获得美国大学的硕士学位，回国后可获得中留服认证为研究生学历。
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
<div class="part_item"> <div class="part_item">
此类国际硕士1+1项目基于美国大学对中国教育机构或者大学的充分认证和授权，使得学生申请起来更加方便，同毕业后申请出国留学相比，节省了1-2年的时间，节约了可观的留学花费，已经成为越来越多优秀大学生的升硕选择。 此类国际硕士1+1项目基于美国大学对中国教育机构或者大学的充分认证和授权，使得学生申请起来更加方便，同毕业后申请出国留学相比，节省了1-2年的时间，节约了可观的留学花费，已经成为越来越多优秀大学生的升硕选择。
</div> </div>
<img class="part_img" src="https://webapp-pub.ezijing.com/project/marywood/intro_bottom111.png" alt="" /> <img v-if="!isMobile" class="part_img" src="https://webapp-pub.ezijing.com/project/marywood/intro_bottom111.png" alt="" />
<img v-else class="part_img" src="https://webapp-pub.ezijing.com/project/marywood/h5/%E7%BB%84%202850%20(1).png" alt="">
</div> </div>
</app-frame> </app-frame>
</template> </template>
...@@ -67,28 +68,44 @@ export default { ...@@ -67,28 +68,44 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.part_content { .is_pc{
padding: 62px 59px 62px 68px; .part_content {
.part_item { padding: 62px 59px 62px 68px;
font-size: 16px; .part_item {
font-weight: 300; font-size: 16px;
line-height: 34px; font-weight: 300;
color: #424242; line-height: 34px;
padding-bottom: 20px; color: #424242;
} padding-bottom: 20px;
.part_img { }
width: 100%; .part_img {
height: 100%; width: 100%;
margin-top: 45px; height: 100%;
margin-top: 45px;
}
} }
} }
.is-h5 { .is-h5 {
// &.main-layout{
// background-color: rgba(249, 248, 248, 1) !important;
// }
::v-deep{
.main-page-content{
background-color: rgba(249, 248, 248, 1) !important;
}
}
.banner{
width: 100%;
}
.part_content{
padding: .2rem .15rem
}
.img { .img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.part_item { .part_item {
width: 80%; // width: 80%;
margin: auto; margin: auto;
font-size: 0.14rem; font-size: 0.14rem;
font-weight: 300; font-weight: 300;
...@@ -98,8 +115,8 @@ export default { ...@@ -98,8 +115,8 @@ export default {
} }
.part_img { .part_img {
width: 100%; width: 100%;
height: 100%; // height: 100%;
padding: 0.5rem 0.3rem 0.3rem 0.3rem; // padding: 0.5rem 0.3rem 0.3rem 0.3rem;
} }
} }
</style> </style>
pages/school/school3.vue
浏览文件 @ 4663da9c
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div>
<div class="banner"> <div v-if="!isMobile" class="is-pc">
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" /> <div class="banner">
<div class="btn"> <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" />
<button class="btn1" @click="$router.push('/my/account')">报名申请</button> <div class="btn">
<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" />
</div>
<div class="content">
<div class="img-box">
<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/marywood322.png" /> <div class="content">
</div> <div class="img-box">
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood33.png" /> <img class="img2" src="https://webapp-pub.ezijing.com/project/marywood/marywood321.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood341.png" />
</div>
<div class="content_tit">
<div class="line"></div>
<div class="tit_desc">学制安排</div>
</div>
<!-- <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3611.png" alt="" /> -->
<div class="content">
<div class="img5 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail"><span class="num">16</span><span class="fen">个月</span></div>
<div class="desc_tit">学制安排</div>
</div> </div>
<img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/marywood322.png" />
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood33.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood341.png" />
</div> </div>
<div class="img6 img55"> <div class="content_tit">
<div class="mask"></div> <div class="line"></div>
<div class="tit_desc">学制安排</div>
</div>
<!-- <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3611.png" alt="" /> -->
<div class="content">
<div class="img5 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail"><span class="num">16</span><span class="fen">个月</span></div>
<div class="desc_tit">学制安排</div>
</div>
</div>
<div class="img6 img55">
<div class="mask"></div>
<div class="desc"> <div class="desc">
<div class="desc_detail"><span class="num">36</span><span class="fen">学分</span></div> <div class="desc_detail"><span class="num">36</span><span class="fen">学分</span></div>
<div class="desc_tit">学分设置</div> <div class="desc_tit">学分设置</div>
</div>
</div> </div>
</div> <div class="img7 img55">
<div class="img7 img55"> <div class="mask"></div>
<div class="mask"></div> <div class="desc">
<div class="desc"> <div class="desc_detail">
<div class="desc_detail"> <span class="num">4</span><span class="fen fen1">门课</span><span class="num">12</span
<span class="num">4</span><span class="fen fen1">门课</span><span class="num">12</span ><span class="fen">学分</span>
><span class="fen">学分</span> </div>
<div class="desc_tit">国内授课</div>
</div>
</div>
<div class="img8 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail">
<span class="num">8</span><span class="fen fen1">门课</span><span class="num">24</span
><span class="fen">学分</span>
</div>
<div class="desc_tit">国外授课</div>
</div> </div>
<div class="desc_tit">国内授课</div>
</div> </div>
</div> </div>
<div class="img8 img55"> <div class="content">
<div class="mask"></div> <img src="https://webapp-pub.ezijing.com/project/marywood/marywood36.png" />
<div class="desc"> </div>
<div class="desc_detail"> <div class="content_tit">
<span class="num">8</span><span class="fen fen1">门课</span><span class="num">24</span <div class="line"></div>
><span class="fen">学分</span> <div class="tit_desc">校园风光</div>
</div>
<div class="swiper-content" @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>
</div> </div>
<div class="desc_tit">国外授课</div>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div v-else class="is-h5">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood36.png" /> <div class="banner">
</div> <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" />
<div class="content_tit"> </div>
<div class="line"></div> <div class="h5-content">
<div class="tit_desc">校园风光</div> <div class="h5-title">玛丽伍德大学介绍</div>
</div> <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img1.png" alt="">
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="h5-title m-t-10">专业介绍</div>
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img2.png" alt="">
<div class="swiper-wrapper"> <div class="h5-title m-t-10">合作院校</div>
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img3.png" alt="">
<img :src="item.web_img_uri" /> <div class="h5-title m-t-10">申请条件</div>
<div class="h5-list">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img4.png" alt="">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img5.png" alt="">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img6.png" alt="">
</div>
<div class="h5-title m-t-10">学制安排</div>
<div class="img-list">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-nimg1.png" alt="">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-nimg2.png" alt="">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-nimg3.png" alt="">
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-nimg4.png" alt="">
</div>
<div class="h5-title m-t-10">课程设置</div>
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img7.png" alt="">
<div class="h5-title m-t-10">校园风光</div>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listDataH5" :key="index">
<img :src="item.web_img_uri" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -94,6 +134,13 @@ export default { ...@@ -94,6 +134,13 @@ export default {
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_mary4.png' }, { web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_mary4.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_mary5.png' } { web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_mary5.png' }
], ],
listDataH5: [
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/h5/school-bimg1.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/h5/school-bimg2.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/h5/school-bimg3.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/h5/school-bimg4.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/h5/school-bimg5.png' }
],
swiperOption: { swiperOption: {
observer: true, observer: true,
observeParents: true, observeParents: true,
...@@ -327,182 +374,46 @@ export default { ...@@ -327,182 +374,46 @@ export default {
} }
} }
.is-h5 { .is-h5 {
.banner { .banner{
position: relative; img{
.img_banner {
width: 100%; width: 100%;
height: 100%; display: block;
}
.btn {
display: flex;
justify-content: center;
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
.btn1 {
width: 0.7rem;
height: 0.18rem;
border: 0.01rem solid #ffffff;
font-size: 0.1rem;
font-weight: 400;
line-height: 0.06rem;
text-align: center;
background: none;
color: #fff;
}
.btn1:hover {
background-color: #aa1941;
opacity: 1;
}
} }
} }
.content { .h5-content{
width: 90%; padding: 0 .15rem;
margin: auto; img{
text-align: center;
margin-top: 0.35rem;
display: flex;
img {
width: 100%; width: 100%;
height: 100%; display: block;
} }
.img-box { .h5-title{
position: relative; font-size: .14rem;
flex: 1; font-weight: bold;
color: #424242;
.img2 { line-height: .36rem;
width: 4.8rem; &.m-t-10{
position: absolute; margin-top: .1rem;
top: 0;
right: 0.6rem;
} }
} }
.img22 { .h5-list{
width: 1.35rem; display: flex;
margin-top: 0.3px; justify-content: space-between;
} img{
width: 1.08rem;
.img55 { display: block;
width: 0.8rem;
height: 1.7rem;
margin-right: 0.05rem;
cursor: pointer;
position: relative;
.mask {
position: absolute;
background: rgba(0, 0, 0, 0.16862745098039217);
color: #ffffff;
opacity: 0.7;
top: 0;
right: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.desc {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 0.6rem;
transition: all 0.15s ease-in;
.desc_tit {
font-size: 0.12rem;
font-weight: 500;
color: #ffffff;
// margin-top: -0.25rem;
}
.desc_detail {
color: #ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
// visibility: hidden;
.num {
font-size: 0.2rem;
font-weight: bold;
}
.fen {
font-size: 0.12rem;
font-weight: 400;
white-space: nowrap;
// padding-top: 0.1rem;
}
}
} }
} }
// .img55:hover .mask { .img-list{
// opacity: 1; overflow-x: scroll;
// background: rgba(0, 0, 0, 0.41568627450980394); display: flex;
// } img{
// .img55:hover .desc { width: 1.46rem;
// transform: translateY(-30px); margin-right: .05rem;
// }
// .img55:hover .desc .desc_detail {
// visibility: visible;
// }
.img5 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational1.png');
}
.img6 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational2.png');
}
.img7 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational3.png');
}
.img8 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational4.png');
}
}
.img4 {
width: 100%;
height: 100%;
margin-top: 0.34rem;
}
.content_tit {
width: 90%;
margin: auto;
text-align: center;
display: flex;
justify-content: flex-start;
margin-top: 0.32rem;
.line {
width: 0.03rem;
height: 0.15rem;
background: #aa1941;
margin-right: 0.05rem;
margin-top: 0.03rem;
}
.tit_desc {
color: #333333;
font-size: 0.17rem;
font-weight: bold;
}
}
.swiper-content {
padding-top: 0.37rem;
padding-bottom: 0.32rem;
.swiper-slide {
position: relative;
width: 1.9rem;
height: 1.2rem;
margin-top: 0.1rem;
img {
width: 100%;
height: 100%;
line-height: 100%;
} }
} }
.swiper-slide-active { .swiper-content{
width: 2.1rem; padding-bottom: .5rem;
height: 1.3rem;
margin-top: 0;
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论