提交 e01ca946 authored 作者: pengxiaohui's avatar pengxiaohui

修改图片

上级 8959fd2e
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
title: '玛丽伍德大学校长致词', title: '玛丽伍德大学校长致词',
desc: 'Address from the President of Marywood University', desc: 'Address from the President of Marywood University',
src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4', src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4',
poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png' poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster2.png'
}, },
{ {
title: '玛丽伍德介绍', title: '玛丽伍德介绍',
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<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 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">
...@@ -25,6 +25,17 @@ ...@@ -25,6 +25,17 @@
<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">
<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>
</card> </card>
<div v-else> <div v-else>
...@@ -253,27 +264,86 @@ export default { ...@@ -253,27 +264,86 @@ export default {
} }
} }
} }
.prev-button { }
position: absolute; .card-list{
top: 28%; width: 1200px;
left: 30px; position: relative;
width: 50px; margin-top: 17px;
height: 50px; display: flex;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-l.png); justify-content: space-around;
background-size: 100% 100%; .card-item {
z-index: 999; width: 232px;
cursor: pointer; 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 {
position:absolute;
left:0;
top:170px;
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;
margin-top: 34px;
}
.item_desc_con {
font-size: 16px;
font-weight: 300;
color: #fff;
margin-top: 34px;
line-height: 32px;
transform: translateY(270px);
transition:0.3s;
}
}
} }
.next-button { .card-item:hover{
position: absolute; .item_media{
top: 28%; img{
right: 30px; transform:scale(1.1);
width: 50px; }
height: 50px; }
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-r.png); .item_desc {
background-size: 100% 100%; // background-color: #fff;
z-index: 999; .item_desc_tit {
cursor: pointer; border-bottom: 1px solid #f3f4f4;
}
.item_desc_con {
transform: translateY(0);
}
}
} }
} }
.service-content { .service-content {
......
<template> <template>
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'"> <div>
<img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" width="100%" /> <div v-if="!isMobile" class="is-pc">
<div class="main_content"> <img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" width="100%" />
<!-- <el-image :src="url1"> </el-image> --> <div class="main_content">
<div class="img_english"> <!-- <el-image :src="url1"> </el-image> -->
<el-image :src="url1" class="img1"></el-image> <div class="img_english">
<div class="item_english_name">玛丽伍德大学(英文)</div> <el-image :src="url1" class="img1"></el-image>
</div> <!-- <div class="item_english_name">玛丽伍德大学(英文)</div> -->
<div class="img_english"> </div>
<el-image :src="url2" class="img2"></el-image> <div class="img_english">
<div class="item_english_name">玛丽伍德大学(中文)</div> <el-image :src="url2" class="img2"></el-image>
<!-- <div class="item_english_name">玛丽伍德大学(中文)</div> -->
</div>
</div> </div>
</div> </div>
</app-frame> <app-frame v-else :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" width="100%" />
<div class="main_content">
<!-- <el-image :src="url1"> </el-image> -->
<div class="img_english">
<el-image :src="url1" class="img1"></el-image>
<div class="item_english_name">玛丽伍德大学(英文)</div>
</div>
<div class="img_english">
<el-image :src="url2" class="img2"></el-image>
<div class="item_english_name">玛丽伍德大学(中文)</div>
</div>
</div>
</app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -22,15 +38,11 @@ export default { ...@@ -22,15 +38,11 @@ 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',
url1: 'https://webapp-pub.ezijing.com/project/marywood/academic_1.png', url1: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-cert-en.png',
url2: 'https://webapp-pub.ezijing.com/project/marywood/academic_5.png', url2: 'https://webapp-pub.ezijing.com/project/marywood-plus/pc-cert-cn.png',
frameParams: { frameParams: {
slider: [ slider: [
{
name: this.$t('menu.academic'),
path: '/academic/academic'
}
] ]
} }
} }
...@@ -44,6 +56,8 @@ export default { ...@@ -44,6 +56,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
width:1200px;
margin:56px auto 0;
.main_content { .main_content {
padding: 70px 64px 80px 48px; padding: 70px 64px 80px 48px;
display: flex; display: flex;
...@@ -62,12 +76,12 @@ export default { ...@@ -62,12 +76,12 @@ export default {
margin-top: 20px; margin-top: 20px;
} }
.img1 { .img1 {
width: 506px; width: 678px;
height: 290px; height: 495px;
} }
.img2 { .img2 {
width: 350px; width: 350px;
height: 549px; height: 513px;
margin-left: 32px; margin-left: 32px;
} }
} }
......
...@@ -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-plus/pc-college-intro-img1.png" /> <img class="img22" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-college-intro-img1.png?v=1" />
</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">
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论