Skip to content

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

修改样式文字

上级 45a875e7
显示空白字符变更
内嵌 并排
正在显示 包含 196 行增加 和 51 行删除
components/home/Video.vue
浏览文件 @ 0c9a2a48
<template> <template>
<div class="video-wrapper" :class="className"> <div class="video-wrapper" :class="className">
<div class="content" @mouseenter="handleMouseEnter" @mouseleave="showType = ''" @mousemove="handleMouseEnter" @click="handleClick" ref="target" :style="{ color: activeColor, cursor: mouseCursor }"> <div v-if="!isMobile" class="content" @mouseenter="handleMouseEnter" @mouseleave="showType = ''" @mousemove="handleMouseEnter" @click="handleClick" ref="target" :style="{ 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">
...@@ -31,6 +31,23 @@ ...@@ -31,6 +31,23 @@
<!-- <div v-if="showType === 'left' && showIndex > 0" class="video-btn video-prev" @click="handlePrev"></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 v-if="showType === 'right' && showIndex < list.length - 1" class="video-btn video-next" @click="handleNext"></div> -->
</div> </div>
<div v-else>
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list" :key="index">
<div class="item-media">
<img :src="item.poster">
<div class="video-play" @click.stop="open(item)" @mouseenter.stop="handleVideoMouseEnter" @mousemove.stop="handleVideoMouseEnter"></div>
</div>
<div class="item-text">
<div class="item-text-tit">{{ item.title }}</div>
<div class="item-text-desc">{{ item.desc }}</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</div>
<video <video
v-if="isShow === true" v-if="isShow === true"
class="video" class="video"
...@@ -116,6 +133,7 @@ export default { ...@@ -116,6 +133,7 @@ export default {
}, },
handleVideoMouseEnter() {}, handleVideoMouseEnter() {},
handleClick() { handleClick() {
console.log(this.showIndex)
if (this.showType === 'left') { if (this.showType === 'left') {
this.handlePrev() this.handlePrev()
} else if (this.showType === 'right'){ } else if (this.showType === 'right'){
...@@ -127,22 +145,24 @@ export default { ...@@ -127,22 +145,24 @@ export default {
// const deleteVideo = this.list.splice(this.list.length - 1, 1) // const deleteVideo = this.list.splice(this.list.length - 1, 1)
// this.list.unshift(deleteVideo[0]) // this.list.unshift(deleteVideo[0])
this.showIndex-- this.showIndex--
this.$refs.mySwiper.swiper.slideTo(this.showIndex) if (this.showIndex <= 0) {
if (this.showIndex === 0) {
this.mouseCursor = 'default' this.mouseCursor = 'default'
this.showType = '' this.showType = ''
this.showIndex = 0
} }
this.$refs.mySwiper.swiper.slideTo(this.showIndex)
}, },
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++ this.showIndex++
this.$refs.mySwiper.swiper.slideTo(this.showIndex) if (this.showIndex >= this.list.length - 1) {
if (this.showIndex === this.list.length - 1) {
this.mouseCursor = 'default' this.mouseCursor = 'default'
this.showType = '' this.showType = ''
this.showIndex = this.list.length - 1
} }
this.$refs.mySwiper.swiper.slideTo(this.showIndex)
}, },
open(item) { open(item) {
this.playVideo = item this.playVideo = item
...@@ -268,11 +288,10 @@ export default { ...@@ -268,11 +288,10 @@ export default {
} }
.swiper-container{ .swiper-container{
height: 550px; height: 550px;
// overflow:unset; // .swiper-wrapper{
.swiper-wrapper{ // }
}
.swiper-slide{ .swiper-slide{
// width:1000px !important; width:1000px !important;
position:relative; position:relative;
display:flex; display:flex;
align-items: center; align-items: center;
...@@ -399,5 +418,46 @@ export default { ...@@ -399,5 +418,46 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
z-index: 10000; z-index: 10000;
} }
.swiper-container{
height: 5rem;
// .swiper-wrapper{
// }
.swiper-slide{
width:3.2rem;
position:relative;
.item-media{
width:3.2rem;
position:relative;
img{
width:100%;
height:3.2rem;
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
background-size: contain;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2200;
}
}
.item-text{
flex:1;
color:#454545;
padding:0 40px;
.item-text-tit{
font-size:0.24rem;
line-height:0.6rem;
}
.item-text-desc{
font-size:0.16rem
}
}
}
}
} }
</style> </style>
components/home/projectFeatures.vue
浏览文件 @ 0c9a2a48
...@@ -40,8 +40,7 @@ ...@@ -40,8 +40,7 @@
</card> </card>
<div v-else> <div v-else>
<div class="tit" v-if="isMobile">合作院校</div> <div class="tit" v-if="isMobile">合作院校</div>
<!-- <div class="swiperOptions" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div class="swiperOptions" @mouseenter="swiperStop" @mouseleave="swiperStart">
<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">
...@@ -55,6 +54,19 @@ ...@@ -55,6 +54,19 @@
<div class="prev-button" v-if="!isMobile"></div> <div class="prev-button" v-if="!isMobile"></div>
<div class="next-button" v-if="!isMobile"></div> <div class="next-button" v-if="!isMobile"></div>
</div> </div>
</div> -->
<div class="card-list-outer">
<div class="card-list">
<div class="card-item" v-for="(item, index) in listData" :key="index">
<div class="item_media">
<img :src="item.web_img_uri" />
</div>
<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> </div>
</div> </div>
</div> </div>
...@@ -73,31 +85,31 @@ export default { ...@@ -73,31 +85,31 @@ export default {
return { return {
listData: [ listData: [
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-01.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-01.png?v=1',
item_desc_tit: '国际名校、权威可靠', item_desc_tit: '国际名校、权威可靠',
item_desc_con: item_desc_con:
'清控紫荆教育是以清华五道口相关知识产权创设而成，自成立以来与多所国际名校合作且实现课程学分互认，所获文凭均受中国教育部与国际认证，具有很强的国际化办学经验和教学水平。' '清控紫荆教育是以清华五道口相关知识产权创设而成，自成立以来与多所国际名校合作且实现课程学分互认，所获文凭均受中国教育部与国际认证，具有很强的国际化办学经验和教学水平。'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-02.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-02.png?v=1',
item_desc_tit: '无需联考、灵活录取', item_desc_tit: '无需联考、灵活录取',
item_desc_con: item_desc_con:
'无需参加国内竞争激烈的研究生联考，没有托福成绩的学生可以完成紫荆英语强化项目替代语言成绩。该课程以及考核成绩被美国大学认可，达到录取标准即可直接入读相应硕士课程。' '无需参加国内竞争激烈的研究生联考，没有托福成绩的学生可以完成紫荆英语强化项目替代语言成绩。该课程以及考核成绩被美国大学认可，达到录取标准即可直接入读相应硕士课程。'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-03.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-03.png?v=1',
item_desc_tit: '前沿专业、就业广阔', item_desc_tit: '前沿专业、就业广阔',
item_desc_con: item_desc_con:
'项目提供当前数字经济领域前沿专业，使毕业生具有国际背景和全球化竞争力。此外毕业生享受国家为留学归国人员提供的落户指标、创业支持、购买免税汽车等待遇。' '项目提供当前数字经济领域前沿专业，使毕业生具有国际背景和全球化竞争力。此外毕业生享受国家为留学归国人员提供的落户指标、创业支持、购买免税汽车等待遇。'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-04.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-04.png?v=1',
item_desc_tit: '省时省费、性价比优', item_desc_tit: '省时省费、性价比优',
item_desc_con: item_desc_con:
'经过在国内学习一年后，学生只需再在国外学习一年即可获得中国教育部和国际认可的硕士学历学位，既节省时间成本又节约经济花销。' '经过在国内学习一年后，学生只需再在国外学习一年即可获得中国教育部和国际认可的硕士学历学位，既节省时间成本又节约经济花销。'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-05.png', web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-index-project-intro-05.png?v=1',
item_desc_tit: '国际视野、本土实践', item_desc_tit: '国际视野、本土实践',
item_desc_con: item_desc_con:
'本项目全部采用双语教学、小班授课，帮助学生提前适应美国教学模式；授课师资由清北人资深教授和优秀外教组成，保证国际化同时兼具本土实践，为留学归国工作建立无缝连接。' '本项目全部采用双语教学、小班授课，帮助学生提前适应美国教学模式；授课师资由清北人资深教授和优秀外教组成，保证国际化同时兼具本土实践，为留学归国工作建立无缝连接。'
...@@ -215,7 +227,7 @@ export default { ...@@ -215,7 +227,7 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: rgba(0,0,0,.45); background: rgba(0,0,0,.7);
} }
} }
.item_desc { .item_desc {
...@@ -295,7 +307,7 @@ export default { ...@@ -295,7 +307,7 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: rgba(0,0,0,.6); background: rgba(0,0,0,.8);
} }
} }
.item_desc { .item_desc {
...@@ -453,6 +465,73 @@ export default { ...@@ -453,6 +465,73 @@ export default {
} }
} }
} }
.card-list-outer{
overflow-x: auto;
}
.card-list{
width: 12.6rem;
position: relative;
margin-top: 17px;
display: flex;
justify-content: space-around;
.card-item {
width: 2.4rem;
height: 4rem;
overflow:hidden;
position:relative;
float:left;
.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,.8);
}
}
.item_desc {
position:absolute;
left:0;
top:80px;
width: 232px;
height: 349px;
// background-color: #ededed;
opacity: 1;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
padding: 34px 20px 53px;
// transform-origin: bottom;
.item_desc_tit {
font-size: 21px;
font-weight: 600;
color: #fff;
line-height:36px;
}
.item_desc_con {
font-size: 16px;
font-weight: 400;
color: #fff;
margin-top: 34px;
line-height: 32px;
}
}
}
}
.service-content { .service-content {
padding-left: 0.32rem; padding-left: 0.32rem;
padding-right: 0.32rem; padding-right: 0.32rem;
......
components/home/projectPosition.vue
浏览文件 @ 0c9a2a48
...@@ -112,6 +112,7 @@ export default { ...@@ -112,6 +112,7 @@ export default {
color: #424242; color: #424242;
} }
.desc { .desc {
text-align: justify;
font-size: 0.12rem; font-size: 0.12rem;
font-weight: 400; font-weight: 400;
line-height: 0.2rem; line-height: 0.2rem;
......
pages/academic/academic.vue
浏览文件 @ 0c9a2a48
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
<!-- <el-image :src="url1"> </el-image> --> <!-- <el-image :src="url1"> </el-image> -->
<div class="img_english"> <div class="img_english">
<el-image :src="url1" class="img1"></el-image> <el-image :src="url1" class="img1"></el-image>
<div class="item_english_name">玛丽伍德大学（英文）</div> <div class="item_english_name">硕士学位证书</div>
</div> </div>
<div class="img_english"> <div class="img_english">
<el-image :src="url2" class="img2"></el-image> <el-image :src="url2" class="img2"></el-image>
<div class="item_english_name">玛丽伍德大学（中文）</div> <div class="item_english_name">学历学位认证</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
<!-- <el-image :src="url1"> </el-image> --> <!-- <el-image :src="url1"> </el-image> -->
<div class="img_english"> <div class="img_english">
<el-image :src="url1" class="img1"></el-image> <el-image :src="url1" class="img1"></el-image>
<div class="item_english_name">玛丽伍德大学（英文）</div> <div class="item_english_name">硕士学位证书</div>
</div> </div>
<div class="img_english"> <div class="img_english">
<el-image :src="url2" class="img2"></el-image> <el-image :src="url2" class="img2"></el-image>
<div class="item_english_name">玛丽伍德大学（中文）</div> <div class="item_english_name">学历学位认证</div>
</div> </div>
</div> </div>
</app-frame> </app-frame>
......
pages/school/school3.vue
浏览文件 @ 0c9a2a48
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
<div class="tit_desc">课程设置</div> <div class="tit_desc">课程设置</div>
</div> </div>
<div class="course-set"> <div class="course-set">
<div class="head-tab"> <!-- <div class="head-tab">
<div @click="courseTab(0)" :class="!courseSetTab ? 'btn active' : 'btn'"> <div @click="courseTab(0)" :class="!courseSetTab ? 'btn active' : 'btn'">
<p>工商管理硕士</p> <p>工商管理硕士</p>
<p>Master of Business Administration</p> <p>Master of Business Administration</p>
...@@ -84,7 +84,8 @@ ...@@ -84,7 +84,8 @@
<div style="padding: 40px"> <div style="padding: 40px">
<img v-if="!courseSetTab" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-school-img2.png" /> <img v-if="!courseSetTab" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-school-img2.png" />
<img v-else src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-school-img3.png" /> <img v-else src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-school-img3.png" />
</div> </div> -->
<img src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-school-course.png">
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
...@@ -111,9 +112,9 @@ ...@@ -111,9 +112,9 @@
</div> </div>
<div class="h5-content"> <div class="h5-content">
<div class="h5-title">玛丽伍德大学介绍</div> <div class="h5-title">玛丽伍德大学介绍</div>
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img11.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood-plus/h5/school-img1.png" />
<div class="h5-title m-t-10">专业介绍</div> <div class="h5-title m-t-10">专业介绍</div>
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img22.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood-plus/h5/school-img2.png" />
<div class="h5-title m-t-10">院校荣誉</div> <div class="h5-title m-t-10">院校荣誉</div>
<img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img3.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img3.png" />
<div class="h5-title m-t-10">申请条件</div> <div class="h5-title m-t-10">申请条件</div>
...@@ -276,31 +277,35 @@ export default { ...@@ -276,31 +277,35 @@ export default {
background: #fff; background: #fff;
width: 1200px; width: 1200px;
margin: 30px auto 0; margin: 30px auto 0;
.head-tab { padding:50px 30px;
height: 120px; img{
border-bottom: 1px solid #bebebe; width:1140px;
display: flex; }
justify-content: space-evenly; // .head-tab {
.btn { // height: 120px;
p { // border-bottom: 1px solid #bebebe;
font-size: 26px; // display: flex;
font-weight: 400; // justify-content: space-evenly;
color: #959595; // .btn {
text-align: center; // p {
line-height: 100%; // font-size: 26px;
// -webkit-background-clip: text; // font-weight: 400;
// -webkit-text-fill-color: transparent; // color: #959595;
} // text-align: center;
padding-top: 60px; // line-height: 100%;
cursor: pointer; // // -webkit-background-clip: text;
&.active { // // -webkit-text-fill-color: transparent;
border-bottom: 1px solid #aa1941; // }
p { // padding-top: 60px;
color: #aa1941; // cursor: pointer;
} // &.active {
} // border-bottom: 1px solid #aa1941;
} // p {
} // color: #aa1941;
// }
// }
// }
// }
} }
.banner { .banner {
position: relative; position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论