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

修改图片

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