Skip to content

P
project-online-pc
提交 40aed6b3 authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 984521f3
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 213 行增加 和 463 行删除
components/Link.vue
浏览文件 @ 40aed6b3
...@@ -16,7 +16,7 @@ export default { ...@@ -16,7 +16,7 @@ export default {
props: { props: {
data: { type: Object, default: () => ({}) }, data: { type: Object, default: () => ({}) },
to: [String, Object, Function], to: [String, Object, Function],
target: { type: String, default: '_blnak' } target: { type: String, default: '_blank' }
}, },
computed: { computed: {
href() { href() {
......
components/home/banners.vue
浏览文件 @ 40aed6b3
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="banner-content"> <div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-banner.png?v=4" /> <img class="img" src="https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-banner.png" />
<div class="banner_navList"> <div class="banner_navList">
<div class="banner_nav" v-for="(item, index) in navList" :key="index" @click="navClick(item)"> <div class="banner_nav" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
<div class="nav_top"> <div class="nav_top">
......
components/home/projectFeatures.vue
浏览文件 @ 40aed6b3
...@@ -28,33 +28,33 @@ export default { ...@@ -28,33 +28,33 @@ export default {
return { return {
listData: [ listData: [
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-01.png?v=4', web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-01.png',
item_desc_tit: '公立常春藤大学', item_desc_tit: '公立常春藤大学',
item_desc_con: '全球大学排名前1%<br/>2021QS全美排名39<br/>US.NEWS.全美88' item_desc_con: '全球大学排名前1%<br/>2021QS全美排名39<br/>US.NEWS.全美88'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-02.png?v=4', web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-02.png',
item_desc_tit: '师资雄厚', item_desc_tit: '师资雄厚',
item_desc_con: '7位诺贝尔奖得主<br/>37位科学院院士<br/>1位图灵奖得主' item_desc_con: '7位诺贝尔奖得主<br/>37位科学院院士<br/>1位图灵奖得主'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-03.png?v=4', web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-03.png',
item_desc_tit: '精英辈出', item_desc_tit: '精英辈出',
item_desc_con: '斯坦福大学校长<br/>纽约时报CEO <br/>瑞士银行CTO等' item_desc_con: '斯坦福大学校长<br/>纽约时报CEO <br/>瑞士银行CTO等'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-04.png?v=4', web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-04.png',
item_desc_tit: '校方直录', item_desc_tit: '校方直录',
item_desc_con: '点对点直录<br/>硕士学分<br/>国内提前修' item_desc_con: '点对点直录<br/>硕士学分<br/>国内提前修'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-05.png?v=4', web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-05.png',
item_desc_tit: '免标准化考试', item_desc_tit: '免标准化考试',
item_desc_con: '美国校方考试<br/>替代托福/GMAT' item_desc_con: '美国校方考试<br/>替代托福/GMAT'
}, },
{ {
web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-06.png?v=4', web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-06.png',
item_desc_tit: '位置优越', item_desc_tit: '位置优越',
item_desc_con: '位于纽约长岛，紧邻华尔街' item_desc_con: '位于纽约长岛，紧邻华尔街'
} }
......
components/home/projectPosition.vue
浏览文件 @ 40aed6b3
...@@ -36,6 +36,8 @@ ...@@ -36,6 +36,8 @@
<p> <p>
通过学习包含《投资学》在内的四门硕士先修课程，可为跨专业申请金融硕士的同学提供适应金融专业学习的基础，也帮助本科金融专业的同学更好地衔接本、硕学习。学习《金融概率与统计》与《金融学》两门石溪大学金融硕士学分课程。在本科期间提前修读硕士学分，减轻金融硕士的学业负担。 通过学习包含《投资学》在内的四门硕士先修课程，可为跨专业申请金融硕士的同学提供适应金融专业学习的基础，也帮助本科金融专业的同学更好地衔接本、硕学习。学习《金融概率与统计》与《金融学》两门石溪大学金融硕士学分课程。在本科期间提前修读硕士学分，减轻金融硕士的学业负担。
</p> </p>
</div>
<div class="remark">
<p> <p>
石溪大学商学院官方唯一授权清控紫荆教育负责CEF项目在中国的招生与教学，详见<a 石溪大学商学院官方唯一授权清控紫荆教育负责CEF项目在中国的招生与教学，详见<a
href="https://www.stonybrook.edu/commcms/cef/CEF-Workshop/Collaboration" href="https://www.stonybrook.edu/commcms/cef/CEF-Workshop/Collaboration"
...@@ -77,6 +79,14 @@ export default { ...@@ -77,6 +79,14 @@ export default {
line-height: 36px; line-height: 36px;
} }
} }
.remark {
text-align: left;
font-size: 20px;
line-height: 30px;
color: #666666;
padding: 28px 30px 0 30px;
font-weight: 400;
}
} }
.is-h5 { .is-h5 {
.max-width-center { .max-width-center {
...@@ -90,5 +100,12 @@ export default { ...@@ -90,5 +100,12 @@ export default {
line-height: 0.2rem; line-height: 0.2rem;
color: #666666; color: #666666;
} }
.remark {
text-align: left;
font-size: 0.12rem;
font-weight: 400;
line-height: 0.2rem;
color: #666666;
}
} }
</style> </style>
components/home/videoList.vue 0 → 100644
浏览文件 @ 40aed6b3
<template>
<section class="section">
<div class="swiper-content1" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div v-swiper:mySwiper1="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in videoData" :key="index">
<video :src="item.web_img_uri" />
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
layout: 'normal',
data() {
const _this = this
return {
popupVisible: false,
videoData: [
{
web_img_uri:
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/1.%20%E7%9F%B3%E6%BA%AA%E5%A4%A7%E5%AD%A6%E8%AE%A9%E5%AD%A6%E7%94%9F%E6%8B%A5%E6%9C%89%E6%9B%B4%E5%A5%BD%E6%9C%AA%E6%9D%A5.mp4'
},
{
web_img_uri:
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/%E6%A0%A1%E5%9B%AD%E6%8E%A2%E6%AD%A5.mp4'
},
{
web_img_uri:
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/%E7%A7%91%E7%A0%94%E4%BC%98%E5%8A%BF.mp4'
},
{
web_img_uri:
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/%E7%9F%B3%E6%BA%AA%E6%95%99%E6%8E%88.mp4'
},
{
web_img_uri:
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/%E5%90%91%E5%BE%80%E7%9A%84%E7%94%9F%E6%B4%BB.mp4'
}
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
on: {
init() {
_this.swiper.slideNext()
}
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
}
}
}
</script>
<style lang="scss" scoped>
.section {
max-width: 1212px;
margin: 83px auto;
.swiper-content1 {
width: 1200px;
.swiper-slide {
width: 360px;
height: 574px;
video {
width: 100%;
height: 100%;
line-height: 100%;
}
}
}
}
</style>
components/layout/pc/Menu.vue
浏览文件 @ 40aed6b3
...@@ -47,9 +47,13 @@ export default { ...@@ -47,9 +47,13 @@ export default {
const _this = this const _this = this
return { return {
navData: [ navData: [
{
name: '学校介绍',
path: '/school/school'
},
// 项目介绍 // 项目介绍
{ {
name: this.$t('menu.project'), name: '项目介绍',
path: '/about/school', path: '/about/school',
children: [ children: [
{ name: this.$t('menu.schoolChild.school3'), path: '/about/school' }, { name: this.$t('menu.schoolChild.school3'), path: '/about/school' },
...@@ -85,7 +89,7 @@ export default { ...@@ -85,7 +89,7 @@ export default {
}, },
// 报名流程 // 报名流程
{ {
name: this.$t('menu.enroll'), name: '录取流程',
path: '/enroll/process', path: '/enroll/process',
children: [ children: [
{ name: this.$t('menu.enrollChild.process'), path: '/enroll/process' }, { name: this.$t('menu.enrollChild.process'), path: '/enroll/process' },
...@@ -93,25 +97,34 @@ export default { ...@@ -93,25 +97,34 @@ export default {
{ name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' } { name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' }
] ]
}, },
{
name: '就业福利',
path: '/returnPolicy/returnPolicy',
children: [
{
name: '高薪就业',
path: '/news/hot/74805116510687232'
},
{
name: '就业指导',
path: '/returnPolicy/guidance'
},
{
name: this.$t('menu.returnPolicy'),
path: '/returnPolicy/returnPolicy'
}
]
},
// 资料下载 // 资料下载
{ {
name: this.$t('menu.dataDownload'), name: this.$t('menu.dataDownload'),
path: '/dataDownload/dataDownload' path: '/dataDownload/dataDownload'
}, },
// 归国政策
{
name: this.$t('menu.returnPolicy'),
path: '/returnPolicy/returnPolicy'
},
// 常见问题
// {
// name: this.$t('menu.question'),
// path: '/question/question'
// },
// 报名申请 // 报名申请
{ {
name: this.$t('menu.apply'), name: '马上报名',
path: '/my' path: '/my/account'
} }
], ],
time: null time: null
......
pages/dataDownload/dataDownload.vue
浏览文件 @ 40aed6b3
...@@ -3,8 +3,18 @@ ...@@ -3,8 +3,18 @@
<div class="dataList"> <div class="dataList">
<a target="_blank" :href="item.url" v-for="(item, index) in fileList" :key="index"> <a target="_blank" :href="item.url" v-for="(item, index) in fileList" :key="index">
<div class="item" @click="download($event, item)"> <div class="item" @click="download($event, item)">
<img class="item_top" src="https://webapp-pub.ezijing.com/project/sit-plus/download_bg1.png" alt="" /> <div class="item_left">
<div class="doc">{{ item.name }}</div> <img
class="item_left_img"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/icon_download.png"
alt=""
/>
<div class="item_left_line"></div>
<div class="item_left_doc">{{ item.name }}</div>
</div>
<div class="item_right">
<div class="btn" @click="download($event, item)">立即下载</div>
</div>
</div> </div>
</a> </a>
</div> </div>
...@@ -31,26 +41,8 @@ export default { ...@@ -31,26 +41,8 @@ export default {
{ {
name: '招生简章', name: '招生简章',
url: url:
'https://webapp-pub.ezijing.com/project/sbu-plus/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2-%E7%BA%BD%E7%BA%A6%E5%B7%9E%E7%AB%8B%E5%A4%A7%E5%AD%A6%E7%9F%B3%E6%BA%AA%E5%88%86%E6%A0%A1%E9%87%91%E8%9E%8D%E7%A1%95%E5%A3%AB%E4%BF%9D%E7%A0%94%E9%A1%B9%E7%9B%AE%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf', 'https://webapp-pub.ezijing.com/project/sbu-plus/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2-%E7%BA%BD%E7%BA%A6%E5%B7%9E%E7%AB%8B%E5%A4%A7%E5%AD%A6%E7%9F%B3%E6%BA%AA%E5%88%86%E6%A0%A1%E9%87%91%E8%9E%8D%E7%A1%95%E5%A3%AB%E4%BF%9D%E7%A0%94%E9%A1%B9%E7%9B%AE%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf'
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
} }
// {
// name: '常见问题',
// url: 'https://webapp-pub.ezijing.com/project/sbu-plus/SBU%E9%87%91%E8%9E%8D%E5%AD%A6%E7%A1%95%E5%A3%AB%20Q%26A.pdf',
// icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
// }
// {
// name: '申请材料清单.docx',
// url:
// 'https://webapp-pub.ezijing.com/project/marywood/%E7%94%B3%E8%AF%B7%E6%9D%90%E6%96%99%E6%B8%85%E5%8D%95.docx',
// icon: 'https://webapp-pub.ezijing.com/project/marywood/doc.png'
// },
// {
// name: '英文简历模板.doc',
// url:
// 'https://webapp-pub.ezijing.com/project/marywood/%E8%8B%B1%E6%96%87%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.doc',
// icon: 'https://webapp-pub.ezijing.com/project/marywood/doc.png'
// }
] ]
} }
}, },
...@@ -81,29 +73,50 @@ export default { ...@@ -81,29 +73,50 @@ export default {
padding: 96px 0 108px 0; padding: 96px 0 108px 0;
.item { .item {
width: 336px; width: 790px;
height: 488px; height: 110px;
opacity: 1; opacity: 1;
display: flex; display: flex;
justify-content: flex-start; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: column;
cursor: pointer; cursor: pointer;
background: #f6f6f6; border-top: 1px solid #dedede;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.38); border-bottom: 1px solid #dedede;
padding: 0 46px 0 21px;
.item_left {
display: flex;
justify-content: space-between;
align-items: center;
.item_top { .item_left_img {
width: 100%; width: 47.36px;
height: 348px; height: 47.36px;
}
.item_left_line {
width: 0px;
height: 59px;
border: 1px solid #dedede;
opacity: 1;
margin-left: 52px;
}
.item_left_doc {
font-size: 18px;
font-weight: 400;
margin-left: 48px;
color: #666666;
}
} }
.doc { .item_right {
width: 100%; .btn {
height: 140px; width: 78px;
font-size: 22px; height: 27px;
font-weight: 400; background: #aa1941;
line-height: 141px; border-radius: 4px;
text-align: center; line-height: 27px;
color: #333333; text-align: center;
font-size: 14px;
color: #ffffff;
}
} }
} }
} }
......
pages/index.vue
浏览文件 @ 40aed6b3
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<banners /> <banners />
<!-- 项目定位 --> <!-- 项目定位 -->
<project-position /> <project-position />
<video-list />
<!-- 项目优势 --> <!-- 项目优势 -->
<project-features /> <project-features />
<!-- 校园风光 --> <!-- 校园风光 -->
...@@ -20,7 +21,8 @@ ...@@ -20,7 +21,8 @@
<script> <script>
import banners from '../components/home/banners.vue' import banners from '../components/home/banners.vue'
import projectPosition from '../components/home/projectPosition.vue' import projectPosition from '../components/home/projectPosition.vue'
import projectFeatures from '../components/home/projectFeatures' import projectFeatures from '../components/home/projectFeatures.vue'
import videoList from '../components/home/videoList.vue'
// import schoolSenery from '../components/home/schoolSenery.vue' // import schoolSenery from '../components/home/schoolSenery.vue'
import news from '../components/home/news' import news from '../components/home/news'
import presence from '../components/home/presence' import presence from '../components/home/presence'
...@@ -35,6 +37,7 @@ export default { ...@@ -35,6 +37,7 @@ export default {
components: { components: {
banners, banners,
projectPosition, projectPosition,
videoList,
projectFeatures, projectFeatures,
// schoolSenery, // schoolSenery,
news, news,
......
pages/returnPolicy/guidance.vue 0 → 100644
浏览文件 @ 40aed6b3
This source diff could not be displayed because it is too large. You can view the blob instead.
pages/returnPolicy/returnPolicy.vue
浏览文件 @ 40aed6b3
...@@ -72,6 +72,10 @@ export default { ...@@ -72,6 +72,10 @@ export default {
return { return {
frameParams: { frameParams: {
slider: [ slider: [
{
name: '就业指导',
path: '/returnPolicy/guidance'
},
{ {
name: this.$t('menu.returnPolicy'), name: this.$t('menu.returnPolicy'),
path: '/returnPolicy/returnPolicy' path: '/returnPolicy/returnPolicy'
......
pages/school/school.vue 0 → 100644
浏览文件 @ 40aed6b3
差异被折叠。
pages/school/school1.vue deleted 100644 → 0
浏览文件 @ 984521f3
<template>
<div>
<div class="banner">
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/school1111.png" />
<div class="btn">
<el-button class="btn1" @click="$router.push('/my/account')">报名申请</el-button>
</div>
</div>
<div class="content">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/school121.png" />
</div>
<div class="content">
<div class="img-box">
<img class="img2" src="https://webapp-pub.ezijing.com/project/marywood/school131.png" />
</div>
<img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/school132.png" />
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school2411.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/school251.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/school1611.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/school17.png" />
</div>
<div class="content_tit">
<div class="line"></div>
<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>
</div>
</template>
<script>
export default {
layout: 'normal',
data() {
const _this = this
return {
popupVisible: false,
listData: [
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_lg1.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_lg2.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_lg3.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_lg4.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_lg5.png' }
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
on: {
init() {
_this.swiper.slideNext()
}
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
}
}
}
</script>
<style lang="scss" scoped>
.banner {
position: relative;
.img_banner {
width: 100%;
height: 100%;
}
.btn {
display: flex;
justify-content: center;
position: absolute;
bottom: 109px;
left: 50%;
transform: translateX(-50%);
}
.btn1 {
width: 104px;
height: 32px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 8px;
background: none;
color: #fff;
}
.btn1:hover {
background-color: #aa1941;
opacity: 1;
}
}
.content {
width: 1200px;
margin: auto;
text-align: center;
margin-top: 70px;
display: flex;
img {
width: 100%;
height: 100%;
}
.img-box {
position: relative;
flex: 1;
.img2 {
width: 956px;
position: absolute;
top: 0;
right: 60px;
}
}
.img22 {
width: 540px;
margin-top: 65px;
}
}
.img4 {
width: 100%;
height: 100%;
margin-top: 68px;
}
.content_tit {
width: 1200px;
margin: auto;
text-align: center;
display: flex;
justify-content: flex-start;
margin-top: 64px;
.line {
width: 6px;
height: 34px;
background: #aa1941;
margin-right: 9px;
margin-top: 6px;
}
.tit_desc {
color: #333333;
font-size: 34px;
font-weight: bold;
}
}
.swiper-content {
padding-top: 37px;
padding-bottom: 132px;
.swiper-slide {
position: relative;
width: 388px;
height: 244px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
line-height: 100%;
}
}
.swiper-slide-active {
width: 423px;
height: 266px;
margin-top: 0;
}
}
</style>
pages/school/school2.vue deleted 100644 → 0
浏览文件 @ 984521f3
<template>
<div>
<div class="banner">
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/school2111.png" />
<div class="btn">
<el-button class="btn1" @click="$router.push('/my/account')">报名申请</el-button>
</div>
</div>
<div class="content">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/school22.png" />
</div>
<div class="content">
<div class="img-box">
<img class="img2" src="https://webapp-pub.ezijing.com/project/marywood/school231.png" />
</div>
<img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/school232.png" />
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school2412.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/school25.png" />
</div>
<div class="content_tit">
<div class="line"></div>
<h1 class="tit_desc">学制安排</h1>
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school2611.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/school27.png" />
</div>
<div class="content_tit">
<div class="line"></div>
<h1 class="tit_desc">校园风光</h1>
</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>
</div>
</template>
<script>
export default {
layout: 'normal',
data() {
const _this = this
return {
popupVisible: false,
listData: [
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_zl1.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_zl2.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_zl3.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_zl4.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_zl5.png' }
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
on: {
init() {
_this.swiper.slideNext()
}
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
}
}
}
</script>
<style lang="scss" scoped>
.banner {
position: relative;
.img_banner {
width: 100%;
height: 100%;
}
.btn {
display: flex;
justify-content: center;
position: absolute;
bottom: 109px;
left: 50%;
transform: translateX(-50%);
}
.btn1 {
width: 104px;
height: 32px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 8px;
background: none;
color: #fff;
}
.btn1:hover {
background-color: #aa1941;
opacity: 1;
}
}
.content {
width: 1200px;
margin: auto;
text-align: center;
margin-top: 70px;
display: flex;
img {
width: 100%;
height: 100%;
}
.img-box {
position: relative;
flex: 1;
.img2 {
width: 956px;
position: absolute;
top: 0;
right: 60px;
}
}
.img22 {
width: 540px;
margin-top: 65px;
}
}
.img4 {
width: 100%;
height: 100%;
margin-top: 68px;
}
.content_tit {
width: 1200px;
margin: auto;
text-align: center;
display: flex;
justify-content: flex-start;
margin-top: 64px;
.line {
width: 6px;
height: 34px;
background: #aa1941;
margin-right: 9px;
margin-top: 6px;
}
.tit_desc {
color: #333333;
font-size: 34px;
font-weight: bold;
}
}
.swiper-content {
padding-top: 37px;
padding-bottom: 132px;
.swiper-slide {
position: relative;
width: 388px;
height: 244px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
line-height: 100%;
}
}
.swiper-slide-active {
width: 423px;
height: 266px;
margin-top: 0;
}
}
</style>
pages/school/school3.vue deleted 100644 → 0
浏览文件 @ 984521f3
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论