Skip to content

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

项目优化

上级 761fd944
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 89 行增加 和 425 行删除
components/home/banners.vue
浏览文件 @ 76d45ab4
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
<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/sit-plus/pc-index-banner.png" /> <img class="img" src="https://webapp-pub.ezijing.com/project/sit-plus/pc-index-banner.png" />
<div class="content_desc">
<div class="desc_cn">斯蒂文斯理工学院工程管理硕士保研项目</div>
<div class="desc_en">Stevens Institute of Technology Master of Engineering in Engineering Management</div>
</div>
<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">
...@@ -92,6 +96,29 @@ export default { ...@@ -92,6 +96,29 @@ export default {
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
} }
.content_desc {
position: absolute;
top: 255px;
left: 50%;
transform: translate(-50%, -50%);
.desc_cn {
font-size: 60px;
font-weight: 500;
color: #ffffff;
text-shadow: -1.8369701465288538e-16px 3px 6px rgba(0, 0, 0, 0.3);
white-space: nowrap;
letter-spacing: 5.5px;
}
.desc_en {
font-size: 30px;
font-weight: 400;
color: #ffffff;
text-shadow: -1.8369701465288538e-1 3px 6px rgba(0, 0, 0, 0.3);
white-space: nowrap;
margin-top: 5px;
}
}
.banner_navList { .banner_navList {
position: absolute; position: absolute;
bottom: -59px; bottom: -59px;
...@@ -156,7 +183,31 @@ export default { ...@@ -156,7 +183,31 @@ export default {
.img { .img {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1000; // z-index: 1000;
}
.content_desc {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
text-align: center;
.desc_cn {
font-size: 0.15rem;
font-weight: 500;
color: #ffffff;
text-shadow: -1.8369701465288538e-16px 3px 6px rgba(0, 0, 0, 0.3);
white-space: nowrap;
// text-align: center;
}
.desc_en {
font-size: 0.1rem;
font-weight: 400;
color: #ffffff;
text-shadow: -1.8369701465288538e-1 3px 6px rgba(0, 0, 0, 0.3);
// white-space: nowrap;
margin-top: 0.02rem;
}
} }
.banner_navList { .banner_navList {
padding: 0.43rem 0.33rem 0 0.35rem; padding: 0.43rem 0.33rem 0 0.35rem;
......
components/layout/pc/Menu.vue
浏览文件 @ 76d45ab4
...@@ -47,6 +47,10 @@ export default { ...@@ -47,6 +47,10 @@ export default {
const _this = this const _this = this
return { return {
navData: [ navData: [
{
name: '学校介绍',
path: '/school/school'
},
// 项目介绍 // 项目介绍
{ {
name: this.$t('menu.project'), name: this.$t('menu.project'),
...@@ -100,12 +104,12 @@ export default { ...@@ -100,12 +104,12 @@ export default {
}, },
// 归国政策 // 归国政策
{ {
name:'就业福利', name: '就业福利',
path: '/returnPolicy/returnPolicy', path: '/returnPolicy/returnPolicy',
children: [ children: [
{ name: '高薪就业', path: '/returnPolicy/salary' }, { name: '高薪就业', path: '/returnPolicy/salary' },
// { name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' }, // { name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
{ name:'归国政策', path: '/returnPolicy/returnPolicy' } { name: '归国政策', path: '/returnPolicy/returnPolicy' }
] ]
}, },
// 常见问题 // 常见问题
......
pages/about/school.vue
浏览文件 @ 76d45ab4
...@@ -8,9 +8,10 @@ ...@@ -8,9 +8,10 @@
<h2 class="title">项目介绍</h2> <h2 class="title">项目介绍</h2>
<div class="content_list"> <div class="content_list">
<p> <p>
该保研项目是斯蒂文斯理工学院工程管理硕士项目的特别录取通道。项目通过对学生的全面个性化评估和科研主题课程训练，鼓励学生以增强科研能力替代应试，减少研究生入学考试对学生学习和科研的干扰。项目给予大三、大四在读的优秀本科生或往届生提前获得斯蒂文斯理工学院工程管理硕士的机会，包含三大内容： 该保研项目是斯蒂文斯理工学院工程管理硕士项目的特别录取通道。项目通过对学生的全面个性化评估和科研主题课程训练，鼓励学生以增强科研能力替代应试，减少研究生入学考试对学生学习和科研的干扰。
</p> </p>
<br /> <br />
<!--
<h4>1、校方直录</h4> <h4>1、校方直录</h4>
<p> <p>
...@@ -32,10 +33,10 @@ ...@@ -32,10 +33,10 @@
<p> <p>
通过学习《复杂系统的项目管理》、《营销管理和数字营销》与《沟通管理》三门斯蒂文斯理工学院工程管理硕士学分课程。在本科期间提前修读硕士学分，减轻工程管理硕士的学业负担。 通过学习《复杂系统的项目管理》、《营销管理和数字营销》与《沟通管理》三门斯蒂文斯理工学院工程管理硕士学分课程。在本科期间提前修读硕士学分，减轻工程管理硕士的学业负担。
</p> </p>
<br /> <br /> -->
<p> <p>
斯蒂文斯理工学院官方唯一授权清控紫荆教育负责工程管理硕士保研项目在中国的招生与教学，详情请见斯蒂文斯理工学院官网项目说明：<a 斯蒂文斯理工学院官方唯一授权清控紫荆教育负责工程管理硕士保研项目在中国的招生与教学，详见斯蒂文斯理工学院官网项目说明：<a
href="https://www.stevens.edu/zijingpartnership" href="https://www.stevens.edu/zijingpartnership"
style="color:#aa1941" style="color:#aa1941"
>https://www.stevens.edu/zijingpartnership</a >https://www.stevens.edu/zijingpartnership</a
...@@ -172,9 +173,9 @@ ...@@ -172,9 +173,9 @@
<div class="h5-content"> <div class="h5-content">
<div class="h5-title">项目介绍</div> <div class="h5-title">项目介绍</div>
<p> <p>
该保研项目是斯蒂文斯理工学院工程管理硕士项目的特别录取通道。项目通过对学生的全面个性化评估和科研主题课程训练，鼓励学生以增强科研能力替代应试，减少研究生入学考试对学生学习和科研的干扰。项目给予大三、大四在读的优秀本科生或往届生提前获得斯蒂文斯理工学院工程管理硕士的机会，包含三大内容： 该保研项目是斯蒂文斯理工学院工程管理硕士项目的特别录取通道。项目通过对学生的全面个性化评估和科研主题课程训练，鼓励学生以增强科研能力替代应试，减少研究生入学考试对学生学习和科研的干扰。
</p> </p>
<br /> <!-- <br />
<h4>1、校方直录</h4> <h4>1、校方直录</h4>
<p> <p>
经报名材料审核与面试通过后，将直接收到校方（stevens.edu）保研项目录取通知书。 经报名材料审核与面试通过后，将直接收到校方（stevens.edu）保研项目录取通知书。
...@@ -192,10 +193,10 @@ ...@@ -192,10 +193,10 @@
</h4> </h4>
<p> <p>
通过学习《复杂系统的项目管理》、《营销管理和数字营销》与《沟通管理》三门斯蒂文斯理工学院工程管理硕士学分课程。在本科期间提前修读硕士学分，减轻工程管理硕士的学业负担。 通过学习《复杂系统的项目管理》、《营销管理和数字营销》与《沟通管理》三门斯蒂文斯理工学院工程管理硕士学分课程。在本科期间提前修读硕士学分，减轻工程管理硕士的学业负担。
</p> </p> -->
<br /> <br />
<p> <p>
斯蒂文斯理工学院官方唯一授权清控紫荆教育负责工程管理硕士保研项目在中国的招生与教学，详情请见斯蒂文斯理工学院官网项目说明：<a 斯蒂文斯理工学院官方唯一授权清控紫荆教育负责工程管理硕士保研项目在中国的招生与教学，详见斯蒂文斯理工学院官网项目说明：<a
href="https://www.stevens.edu/zijingpartnership" href="https://www.stevens.edu/zijingpartnership"
style="color:#aa1941" style="color:#aa1941"
>https://www.stevens.edu/zijingpartnership</a >https://www.stevens.edu/zijingpartnership</a
......
pages/returnPolicy/salary.vue
浏览文件 @ 76d45ab4
...@@ -5,17 +5,17 @@ ...@@ -5,17 +5,17 @@
工程管理专业是一门包含了工程和管理两个方面的交叉学科，一般是由工程学院和商学院联合授课，旨在拓展学生在商业、技术管理等方面的技能。 工程管理专业是一门包含了工程和管理两个方面的交叉学科，一般是由工程学院和商学院联合授课，旨在拓展学生在商业、技术管理等方面的技能。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>工程管理MEM就业前景</p> <p class="title">工程管理MEM就业前景</p>
<p> <p>
本专业学生毕业后可在工程、管理、科研和咨询等领域获得广阔的就业机会，能在制作业、服务业、公共事业、科研院所、政府部门和事业单位从事教学、科研、管理及设计开发工作。 本专业学生毕业后可在工程、管理、科研和咨询等领域获得广阔的就业机会，能在制作业、服务业、公共事业、科研院所、政府部门和事业单位从事教学、科研、管理及设计开发工作。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>1.精打细算的经济师</p> <p class="title">1.精打细算的经济师</p>
<p> <p>
MEM=工程+管理，旨在运用系统分析、工程设计、建模仿真等方法，改进效率、提高质量、降低成本，使项目最快、最经济地执行落地。 MEM=工程+管理，旨在运用系统分析、工程设计、建模仿真等方法，改进效率、提高质量、降低成本，使项目最快、最经济地执行落地。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>2.术业专攻的技术将才&mdash;&mdash;CTO</p> <p class="title">2.术业专攻的技术将才&mdash;&mdash;CTO</p>
<p>CTO需要技术有前瞻性，对产业格局有判断，对管理有心得。</p> <p>CTO需要技术有前瞻性，对产业格局有判断，对管理有心得。</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p> <p>
...@@ -24,53 +24,60 @@ ...@@ -24,53 +24,60 @@
<p>&nbsp;</p> <p>&nbsp;</p>
<p>而以上所提及的技能和能力，可通过领域方向课程和工程管理核心课程学得。</p> <p>而以上所提及的技能和能力，可通过领域方向课程和工程管理核心课程学得。</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>3.挥斥方琼的掌舵帅才&mdash;&mdash;CEO</p> <p class="title">3.挥斥方琼的掌舵帅才&mdash;&mdash;CEO</p>
<p> <p>
与MEM相关性，其中的经典管理内容：如质量管理、生产管理、产品开发管理、过程管理、项目管理等，以及工程管理核心课程中的领导力、战略管理、市场营销等。驱动着一个项目单元乃至一个企业的命脉。 与MEM相关性，其中的经典管理内容：如质量管理、生产管理、产品开发管理、过程管理、项目管理等，以及工程管理核心课程中的领导力、战略管理、市场营销等。驱动着一个项目单元乃至一个企业的命脉。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>4.精益运维的全才&mdash;&mdash;COO</p> <p class="title">4.精益运维的全才&mdash;&mdash;COO</p>
<p> <p>
在某些公司中COO会同时兼任总裁，首席运营官是经总经理授权负责统管公司经营工作，建立统一的经营管理方针政策，行使对公司经营工作的指导、指挥、监督、管理的权力，并承担执行各项规章、工作指令的义务。 在某些公司中COO会同时兼任总裁，首席运营官是经总经理授权负责统管公司经营工作，建立统一的经营管理方针政策，行使对公司经营工作的指导、指挥、监督、管理的权力，并承担执行各项规章、工作指令的义务。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>5.强矩阵组织架构中的项目总监&mdash;&mdash;PML</p> <p class="title">5.强矩阵组织架构中的项目总监&mdash;&mdash;PML</p>
<p> <p>
强调项目经理为核心角色的公司，就属于强矩阵的组织架构。在项目管理新潮流下，MEM助攻技术基层-项目经理-项目总监的成长路径，足够明晰。 强调项目经理为核心角色的公司，就属于强矩阵的组织架构。在项目管理新潮流下，MEM助攻技术基层-项目经理-项目总监的成长路径，足够明晰。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>6.把控产品战略和走向&mdash;&mdash;产品总监</p> <p class="title">6.把控产品战略和走向&mdash;&mdash;产品总监</p>
<p> <p>
如质量管理、生产管理、产品开发管理、过程管理、项目管理等，以及工程管理核心课程中的领导力、战略管理、市场营销等。也同样决定着产品的走向和全生命周期的形态。 如质量管理、生产管理、产品开发管理、过程管理、项目管理等，以及工程管理核心课程中的领导力、战略管理、市场营销等。也同样决定着产品的走向和全生命周期的形态。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>7.科学严谨的工程师&mdash;&mdash;Engineer</p> <p class="title">7.科学严谨的工程师&mdash;&mdash;Engineer</p>
<p> <p>
整个工程的全过程所要涉及的各个环节，工程师都紧密的参与其中对工程的科学有效的管理如果缺少了这些知识作为底蕴，则很难&ldquo;驾驭&rdquo;一项完整的工程。 整个工程的全过程所要涉及的各个环节，工程师都紧密的参与其中对工程的科学有效的管理如果缺少了这些知识作为底蕴，则很难&ldquo;驾驭&rdquo;一项完整的工程。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>8.统筹全局的架构师&mdash;&mdash;chief software architect</p> <p class="title">8.统筹全局的架构师&mdash;&mdash;chief software architect</p>
<p> <p>
架构师，顾名思义，要负责整个系统的架构，尤其是涉及到一个系统（或子系统）全局的整体设计，所以往往需要高层、上层（high-level）的战略（strategic）层面的思考，这样就必然需要架构师经常进行建模（Modeling），对代码、模块、子系统和系统中的各种静态结构、关系和动态行为、交互等等进行抽象。 架构师，顾名思义，要负责整个系统的架构，尤其是涉及到一个系统（或子系统）全局的整体设计，所以往往需要高层、上层（high-level）的战略（strategic）层面的思考，这样就必然需要架构师经常进行建模（Modeling），对代码、模块、子系统和系统中的各种静态结构、关系和动态行为、交互等等进行抽象。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>就业薪资水平</p> <p class="title">就业薪资水平</p>
<p> <p>
美国大学和雇主协会（National Association of Colleges and 美国大学和雇主协会（National Association of Colleges and
Employers）发布了2021毕业生薪资最高的美国大学排名，美国大学毕业生薪资最高的十所院校中，斯蒂文斯理工学院位列第七位。 Employers）发布了2021毕业生薪资最高的美国大学排名，美国大学毕业生薪资最高的十所院校中，<span class="title"
>斯蒂文斯理工学院位列第七位</span
>。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>U.S. News 综合大学排名: 83&nbsp;</p> <p>U.S. News 综合大学排名: 83&nbsp;</p>
<p>起薪中位数: $67,000&nbsp;</p> <p>起薪中位数: $67,000&nbsp;</p>
<p>2021-2022学费: $56,920</p> <p>2021-2022学费: $56,920</p>
<p> <p>
斯蒂文斯理工学院坐落于新泽西州的霍博肯市，属于纽约大都会区，与世界500强企业聚集的纽约曼哈顿岛隔河相望，是世界上地理位置最佳的学校之一。USA 斯蒂文斯理工学院坐落于新泽西州的霍博肯市，属于纽约大都会区，<span class="title"
>与世界500强企业聚集的纽约曼哈顿岛隔河相望</span
>，是世界上地理位置最佳的学校之一。USA
Today将其评选全美TOP七工程学院之一。作为一所理工院校，自然非常重视工程，其是设计中心Maker Today将其评选全美TOP七工程学院之一。作为一所理工院校，自然非常重视工程，其是设计中心Maker
Center的所在地，其中包括3D打印、激光切割和焊接设施。该学院最受欢迎的专业是机械工程、工程管理、工商管理、计算机科学、计算机工程和化学工程，毕业生享有极高声誉。 Center的所在地，其中包括3D打印、激光切割和焊接设施。该学院最受欢迎的专业是机械工程、工程管理、工商管理、计算机科学、计算机工程和化学工程，毕业生享有极高声誉。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p> <p>
在就业方面，得益于SIT严格的的课程以及与实际生活中相结合的教育方式，学生可以在当今复杂多样、高技术性的市场中占据优势。根据数据显示，96%的斯蒂文斯大学毕业生在毕业后6个月内达到了他们预期薪水。 在就业方面，得益于SIT严格的的课程以及与实际生活中相结合的教育方式，学生可以在当今复杂多样、高技术性的市场中占据优势。根据数据显示，<span
class="title"
>96%的斯蒂文斯大学毕业生在毕业后6个月内达到了他们预期薪水</span
>。
</p> </p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p> <p>
...@@ -112,4 +119,7 @@ export default { ...@@ -112,4 +119,7 @@ export default {
p { p {
font-size: 20px; font-size: 20px;
} }
.title {
font-weight: bold;
}
</style> </style>
pages/school/school.vue 0 → 100644
浏览文件 @ 76d45ab4
差异被折叠。
pages/school/school1.vue deleted 100644 → 0
浏览文件 @ 761fd944
<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
浏览文件 @ 761fd944
<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
浏览文件 @ 761fd944
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论