Skip to content

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

feat：新增marywood 1+1

上级 9b426d62
隐藏空白字符变更
内嵌 并排
正在显示 包含 1747 行增加 和 228 行删除
components/base/h5/ApplyForm.vue
浏览文件 @ 1b470dae
...@@ -126,7 +126,7 @@ export default { ...@@ -126,7 +126,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-apply-form { .app-apply-form {
min-width: 290px; width: 290px;
.title { .title {
padding: 30px 0; padding: 30px 0;
font-size: 20px; font-size: 20px;
......
components/consultingForm.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div class="popup" v-show="visible">
<div class="app-apply-form" @touchmove.prevent>
<h2 class="title">报名咨询</h2>
<div class="form">
<div class="form-item">
<input type="text" class="form-input" placeholder="请输入您的姓名" v-model="ruleForm.name" />
</div>
<div class="form-item">
<input
type="number"
class="form-input"
placeholder="请输入您的电话"
maxlength="11"
v-model="ruleForm.phone"
/>
</div>
<div class="form-item">
<select class="form-select" placeholder="请选择项目" v-model="ruleForm.project_id" disabled>
<option value="" disabled selected>请选择项目</option>
<option v-for="(item, index) in projectList" :value="item.value" :key="index">{{ item.label }}</option>
</select>
</div>
<div class="form-item">
<input type="text" class="form-input" placeholder="请输入短信验证码" maxlength="4" v-model="phoneCode" />
<input
type="button"
class="form-button"
:disabled="codeButtonDisabled"
:value="buttonText"
@click="onSendCode"
/>
</div>
<div class="form-item">
<input type="button" value="立即预约" class="form-button" @click="onSbumit" />
</div>
</div>
</div>
<div class="overlay" @click="closePop" @touchmove.prevent></div>
</div>
</template>
<script>
import * as api from '@/api'
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
ruleForm: { name: '', phone: '', project_id: '1016', channel: 19960 },
projectList: [
{ label: '金融工商管理硕士', value: '1000' },
{ label: '酒店及旅游业工商管理硕士', value: '1008' },
{ label: '工商管理硕士', value: '1012' },
{ label: '应用心理学硕士', value: '1006' },
{ label: '教育学硕士', value: '1005' },
{ label: '中国未来金融领袖计划', value: '1007' },
{ label: '1+1 国际硕士', value: '1016' }
],
phoneCode: '',
codeButtonDisabled: false,
timer: null,
disabledTime: 60
}
},
computed: {
buttonText() {
return this.codeButtonDisabled ? `${this.disabledTime}秒后重发` : '获取验证码'
}
},
methods: {
closePop() {
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
this.$emit('update:visible', false)
},
onSbumit() {
if (!this.ruleForm.name) {
this.$message('请输入您的姓名')
return
}
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$message('请输入正确的手机号')
return
}
if (!this.phoneCode) {
this.$message('请输入短信验证码')
return
}
this.checkPhoneCode().then(this.handleSubmit)
},
handleSubmit() {
api
.submit(this.ruleForm)
.then(response => {
this.$message('报名成功')
this.$emit('success')
})
.catch(err => {
if (err && err.type === 'checkcode') this.$message.error(err.msg)
else this.$message.error(err.msg || '报名提交失败')
})
},
// 校验短信验证码
checkPhoneCode() {
return api.checkCode({ account: this.ruleForm.phone, code: this.phoneCode })
},
onSendCode() {
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$message('请输入正确的手机号')
return
}
this.sendCode()
},
// 发送验证码
sendCode() {
this.setTimer()
api
.sendCode({ account: this.ruleForm.phone })
.then(() => {
this.$message({ type: 'success', message: '验证码发送成功，注意查收' })
})
.catch(() => {
this.clearTimer()
})
},
setTimer() {
this.codeButtonDisabled = true
this.disabledTime = 60
this.timer = setInterval(() => {
this.disabledTime--
if (this.disabledTime <= 0) {
this.clearTimer()
}
}, 1000)
},
clearTimer() {
this.codeButtonDisabled = false
this.timer && clearInterval(this.timer)
}
},
destroyed() {
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.app-apply-form {
height: 374px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2000;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4ae1f00a05a40fd10866ffe153fa82b0.png);
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
margin-right: 20px;
margin-left: 10px;
}
.form-input {
padding: 0 10px;
width: 100%;
height: 38px;
background-color: #fff;
box-sizing: border-box;
border: none;
}
.form-select {
appearance: none;
position: relative;
padding: 0 10px;
width: 100%;
height: 38px;
background: #fff url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png') no-repeat;
background-position: right 0.7em top 50%, 0 0;
background-size: 30px 30px;
box-sizing: border-box;
border: none;
}
.form-button {
padding: 0 10px;
width: 100%;
height: 38px;
font-size: 16px;
color: #aa1941;
background-color: #ffd61b;
border: none;
cursor: pointer;
}
.form-input + .form-button {
margin-left: 10px;
}
</style>
components/home/TopImage.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div class="banner-content">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/banner.png" alt="" />
<div class="btn">
<el-button class="btn1" @click="$router.push('/project-intro/introduce')">项目介绍</el-button>
<el-button class="btn1" @click="showApplyForm">报名申请</el-button>
</div>
<!-- <consultingForm :visible.sync="popupVisible" /> -->
</div>
</template>
<script>
// import consultingForm from '../consultingForm.vue'
export default {
props: {
popupVisible: {
default: false,
type: Boolean
}
},
components: {
// consultingForm
},
methods: {
showApplyForm() {
console.log('-----')
this.popupVisible = true
}
}
}
</script>
<style lang="scss" scoped>
.banner-content {
position: relative;
width: 100%;
img {
width: 100%;
height: 100%;
z-index: 1000;
}
.btn {
position: absolute;
top: 461px;
left: 850px;
}
.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;
}
}
</style>
components/home/Video.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div class="banner-content">
<video
class="video"
src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
controls="controls"
preload="none"
></video>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.banner-content {
position: relative;
width: 1200px;
margin: 0 auto;
padding: 56px 0 100px;
.video {
width: 100%;
height: 100%;
}
}
</style>
components/home/projectFeatures.vue
浏览文件 @ 1b470dae
...@@ -11,6 +11,11 @@ ...@@ -11,6 +11,11 @@
</ul> </ul>
</card> </card>
</div> </div>
<!-- <img
style="padding:56px 0 30px;position: relative;width: 1200px;margin: 0 auto;"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school.png"
alt=""
/> -->
</div> </div>
</template> </template>
<script> <script>
...@@ -29,30 +34,40 @@ export default { ...@@ -29,30 +34,40 @@ export default {
}, },
data: [ data: [
{ {
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon1.png', icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/img12.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon1_a.png', iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/img11.png',
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT1') text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT5')
}, },
{ {
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon2.png', icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/img22.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon2_a.png', iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/img21.png',
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT2') : this.$t('home.project.pc.itemT2') text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT6')
}, },
{ {
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon3.png', icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/img32.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon3_a.png', iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/img31.png',
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT3') : this.$t('home.project.pc.itemT3') text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT7')
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon4.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon4_a.png',
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT4') : this.$t('home.project.pc.itemT4')
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon5.png',
iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon5_a.png',
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT5') : this.$t('home.project.pc.itemT5')
} }
// {
// icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon2.png',
// iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon2_a.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT2') : this.$t('home.project.pc.itemT2')
// },
// {
// icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon3.png',
// iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon3_a.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT3') : this.$t('home.project.pc.itemT3')
// },
// {
// icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon4.png',
// iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon4_a.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT4') : this.$t('home.project.pc.itemT4')
// },
// {
// icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon5.png',
// iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_features_icon5_a.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT5') : this.$t('home.project.pc.itemT5')
// }
] ]
} }
}, },
...@@ -82,12 +97,14 @@ export default { ...@@ -82,12 +97,14 @@ export default {
padding-top: 68px; padding-top: 68px;
.nav-content { .nav-content {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
padding-top: 15px; padding-top: 15px;
li { li {
width: 224px; width: 224px;
height: 230px; height: 230px;
padding-top: 53px; padding-top: 53px;
margin-right: 20px;
box-sizing: border-box; box-sizing: border-box;
background: #f9f8f8; background: #f9f8f8;
// background: #fff; // background: #fff;
......
components/home/schoolSenery.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div class="main-content">
<img class="img1" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marwood_senery.png" alt="" />
<div class="title">
<div class="line1"></div>
<div class="name">合作院校</div>
<div class="line2"></div>
</div>
<div class="part">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marwood_senery1.png"
alt=""
@click="$router.push('/school/school2')"
/>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marwood_senery2.png"
alt=""
@click="$router.push('/school/school1')"
/>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marwood_senery3.png"
alt=""
@click="$router.push('/school/school3')"
/>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.main-content {
margin-top: 65px;
position: relative;
.img1 {
width: 100%;
height: 100%;
}
.title {
font-size: 36px;
font-weight: bold;
line-height: 65px;
color: #ffffff;
position: absolute;
top: 108px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
.line1 {
width: 369px;
height: 1px;
border: 3px solid #ffffff;
}
.name {
width: 144px;
margin-top: -25px;
margin-left: 72px;
margin-right: 72px;
}
.line2 {
width: 369px;
height: 1px;
border: 3px solid #ffffff;
}
}
.part {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
bottom: 226px;
left: 426px;
img {
margin-right: 39px;
}
}
}
</style>
components/layout/pc/Head.vue
浏览文件 @ 1b470dae
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
<nuxt-link to="/"> <nuxt-link to="/">
<div class="logo-box"> <div class="logo-box">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" /> <img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" /> <div style="font-weight: 400;font-size: 28px;color: #AF1941;margin-top:10px;margin-left:20px">
1+1 国际硕士
</div>
<!-- <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" /> -->
</div> </div>
</nuxt-link> </nuxt-link>
<div class="user" v-if="user.id"> <div class="user" v-if="user.id">
......
components/layout/pc/Menu.vue
浏览文件 @ 1b470dae
...@@ -47,15 +47,18 @@ export default { ...@@ -47,15 +47,18 @@ export default {
const _this = this const _this = this
return { return {
navData: [ navData: [
// 项目介绍
{ {
name: this.$t('menu.project'), name: this.$t('menu.project'),
path: '/project-intro/bg', path: '/project-intro/introduce',
childern: [ childern: [
{ name: this.$t('menu.projectChild.bg'), path: '/project-intro/bg' }, { name: this.$t('menu.projectChild.bg'), path: '/project-intro/introduce' },
{ name: this.$t('menu.projectChild.feature'), path: '/project-intro/charac' }, { name: this.$t('menu.newsChild.hot'), path: '/news/hot' }
{ name: this.$t('menu.projectChild.cert'), path: '/project-intro/certificate' } // { name: this.$t('menu.projectChild.feature'), path: '/project-intro/charac' },
// { name: this.$t('menu.projectChild.cert'), path: '/project-intro/certificate' }
] ]
}, },
// 项目优势
{ {
name: this.$t('menu.course'), name: this.$t('menu.course'),
path: '/about/course', path: '/about/course',
...@@ -64,34 +67,45 @@ export default { ...@@ -64,34 +67,45 @@ export default {
{ name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' } { name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
] ]
}, },
// 学校介绍
{ {
name: this.$t('menu.news'), name: this.$t('menu.school'),
path: '/news/hot', path: '/school/school1',
childern: [ childern: [
{ name: this.$t('menu.newsChild.hot'), path: '/news/hot' }, { name: this.$t('menu.schoolChild.school1'), path: '/school/school1' },
{ name: this.$t('menu.newsChild.interview'), path: '/news/interview' } { name: this.$t('menu.schoolChild.school2'), path: '/school/school2' },
{ name: this.$t('menu.schoolChild.school3'), path: '/school/school3' }
] ]
}, },
// 学历认证
{ {
name: this.$t('menu.recruit'), name: this.$t('menu.academic'),
path: '/apply/relevant', path: '/academic/academic'
childern: [
{ name: this.$t('menu.recruitChild.apply'), path: '/apply/relevant' },
{ name: this.$t('menu.recruitChild.cost'), path: '/apply/support' },
{ name: this.$t('menu.recruitChild.problem'), path: '/apply/problem' }
]
}, },
// 报名流程
{ {
name: this.$t('menu.alumni'), name: this.$t('menu.enroll'),
path: '/alumni/outstanding', path: '/enroll/process',
childern: [ childern: [
{ name: this.$t('menu.alumniChild.outstanding'), path: '/alumni/outstanding' }, { name: this.$t('menu.enrollChild.process'), path: '/enroll/process' },
{ name: this.$t('menu.alumniChild.share'), path: '/alumni/sharing' } { name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
{ name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' }
] ]
}, },
// 资料下载
{ {
name: this.$t('menu.enroll'), name: this.$t('menu.dataDownload'),
path: '/my/account' path: '/dataDownload/dataDownload'
},
// 归国政策
{
name: this.$t('menu.returnPolicy'),
path: '/returnPolicy/returnPolicy'
},
// 常见问题
{
name: this.$t('menu.question'),
path: '/question/question'
} }
], ],
time: null time: null
......
components/rightAside.vue
浏览文件 @ 1b470dae
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
<div class="right_bar"> <div class="right_bar">
<ul class="tab_btns"> <ul class="tab_btns">
<a href="/my/account"> <a href="/my/account">
<li <li class="service">
class="service"
>
<p>{{ $t('aside.apply') }}</p> <p>{{ $t('aside.apply') }}</p>
</li> </li>
</a> </a>
...@@ -56,11 +54,13 @@ ...@@ -56,11 +54,13 @@
</p> </p>
<p class="sendcode"> <p class="sendcode">
<el-input v-model="sendCode" :placeholder="$t('aside.code')" size="small"></el-input <el-input v-model="sendCode" :placeholder="$t('aside.code')" size="small"></el-input
><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode" ><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">{{
>{{ $t('aside.codeBtn') }}</el-button $t('aside.codeBtn')
> }}</el-button>
</p>
<p>
<el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button>
</p> </p>
<p><el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button></p>
</div> </div>
<div class="wx_cont" v-show="tabBtnTarget === 'wx'"> <div class="wx_cont" v-show="tabBtnTarget === 'wx'">
<h5>{{ $t('aside.follow') }}</h5> <h5>{{ $t('aside.follow') }}</h5>
...@@ -84,7 +84,7 @@ export default { ...@@ -84,7 +84,7 @@ export default {
formInfo: { formInfo: {
name: '', name: '',
phone: '', phone: '',
newProjectId: '1012' newProjectId: '1016'
}, },
projectList: [ projectList: [
{ label: '金融工商管理硕士', value: '1000' }, { label: '金融工商管理硕士', value: '1000' },
...@@ -92,7 +92,8 @@ export default { ...@@ -92,7 +92,8 @@ export default {
{ label: this.$t('aside.project4'), value: '1012' }, { label: this.$t('aside.project4'), value: '1012' },
{ label: '应用心理学硕士', value: '1006' }, { label: '应用心理学硕士', value: '1006' },
{ label: '教育学硕士', value: '1005' }, { label: '教育学硕士', value: '1005' },
{ label: '中国未来金融领袖计划', value: '1007' } { label: '中国未来金融领袖计划', value: '1007' },
{ label: '1+1 国际硕士', value: '1016' }
] ]
} }
}, },
...@@ -264,21 +265,21 @@ export default { ...@@ -264,21 +265,21 @@ export default {
li.enroll.active { li.enroll.active {
background-image: url(https://webapp-pub.ezijing.com/project/kelley/kefu11.png); background-image: url(https://webapp-pub.ezijing.com/project/kelley/kefu11.png);
} }
li.service{ li.service {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png); background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
} }
li.service{ li.service {
border-bottom: 1px solid #b8bcbf; border-bottom: 1px solid #b8bcbf;
cursor: pointer; cursor: pointer;
&:hover{ &:hover {
background-color: #af1b40; background-color: #af1b40;
p{ p {
color: #fff; color: #fff;
} }
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png); background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
} }
} }
li.service.acitve{ li.service.acitve {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png); background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
} }
li.wx { li.wx {
......
langs/zh-CN.js
浏览文件 @ 1b470dae
...@@ -5,23 +5,34 @@ export default { ...@@ -5,23 +5,34 @@ export default {
fastLogin: '快速登录', fastLogin: '快速登录',
register: '注册', register: '注册',
project: '项目介绍', project: '项目介绍',
course: '课程与师资', course: '项目优势',
news: '最新动态', school: '学校介绍',
recruit: '招生信息', recruit: '招生信息',
alumni: '校友风采', alumni: '校友风采',
enroll: '报名申请', academic: '学历认证',
enroll: '报名流程',
dataDownload: '资料下载',
returnPolicy: '归国政策',
question: '常见问题',
projectChild: { projectChild: {
bg: '项目背景', bg: '项目介绍',
feature: '项目特色', feature: '项目特色',
cert: '证书授予' cert: '证书授予',
news: '最新动态'
}, },
courseChild: { courseChild: {
set: '课程设置', set: '项目优势',
teachers: '师资力量' teachers: '师资介绍'
}, },
newsChild: { schoolChild: {
hot: '热点新闻', school1: '斯蒂文斯理工学院',
interview: '教授采访' school2: '纽约州立大学石溪分校',
school3: '玛丽伍德大学'
},
enrollChild: {
process: '报名流程',
brochure: '招生简章',
apply: '申请条件'
}, },
recruitChild: { recruitChild: {
apply: '有关申请', apply: '有关申请',
...@@ -31,6 +42,9 @@ export default { ...@@ -31,6 +42,9 @@ export default {
alumniChild: { alumniChild: {
outstanding: '杰出校友', outstanding: '杰出校友',
share: '校友分享' share: '校友分享'
},
newsChild: {
hot: '最新动态'
} }
}, },
// 首页 // 首页
...@@ -41,15 +55,17 @@ export default { ...@@ -41,15 +55,17 @@ export default {
itemT1: '百年历史<br />美国大学', itemT1: '百年历史<br />美国大学',
itemT2: '高排名<br />美国大学', itemT2: '高排名<br />美国大学',
itemT3: 'ACBSP<br />商学院认证', itemT3: 'ACBSP<br />商学院认证',
itemT4: '清北玛丽伍德<br />等权威师资', itemT4: '清北玛丽伍德<br />等权威师资'
itemT5: '16个月<br />精炼课程'
}, },
pc: { pc: {
itemT1: '百年历史美国大学', itemT1: '百年历史美国大学',
itemT2: '高排名美国大学', itemT2: '高排名美国大学',
itemT3: 'ACBSP商学院认证', itemT3: 'ACBSP商学院认证',
itemT4: '清北玛丽伍德等权威师资', itemT4: '清北玛丽伍德等权威师资',
itemT5: '16个月精炼课程' itemT5: '16个月精炼课程',
itemT5: '中国教育部认证大学<br/>安全可靠',
itemT6: '回国可留服认证<br />享受学生福利',
itemT7: '顶配中外师资<br />权威专家教学'
} }
}, },
ranking: { ranking: {
...@@ -267,6 +283,7 @@ export default { ...@@ -267,6 +283,7 @@ export default {
project5: '应用心理学硕士MAP', project5: '应用心理学硕士MAP',
project6: '教育学硕士MED（儿童心理与教育）', project6: '教育学硕士MED（儿童心理与教育）',
project7: '中国未来金融领袖计划', project7: '中国未来金融领袖计划',
project8: '1+1 国际硕士',
pay: '扫描关注微信公众号' pay: '扫描关注微信公众号'
} }
} }
pages/about/course.vue
浏览文件 @ 1b470dae
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="course-content-box" v-if="!isMobile"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/adva_banner.png" alt="" />
<div class="content-mian"> <img
<div class="border-box"> style="padding-left:101px;padding-right:49px;margin-top:65px;padding-bottom:109px"
<template v-for="(item, index) in courseData"> src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/adva_1.png"
<div class="item-box" :key="index"> alt=""
<div class="title">{{ item.title }}</div> />
<div class="right-content">
<ul>
<li v-for="(cItem, cIndex) in item.item" :key="cIndex + 'l'">
<div class="text">{{ cItem.name }}</div>
<div class="score" v-if="cItem.score">学分：{{ cItem.score }}</div>
</li>
</ul>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="course-content" v-else>
<div class="item-box" v-for="(item, index) in courseData" :key="index">
<div class="title">{{ item.title }}</div>
<ul>
<li v-for="(cItem, cIndex) in item.item" :key="cIndex + 'c'">
<div class="name">{{ cItem.name }}</div>
<div class="score" v-if="cItem.score">学分：{{ cItem.score }}</div>
</li>
</ul>
</div>
</div>
</app-frame> </app-frame>
</div> </div>
</template> </template>
...@@ -46,9 +22,7 @@ export default { ...@@ -46,9 +22,7 @@ export default {
courseData: [ courseData: [
{ {
title: '先修课程', title: '先修课程',
item: [ item: [{ name: '金融市场学', score: 0 }]
{ name: '金融市场学', score: 0 }
]
}, },
{ {
title: '必修课程', title: '必修课程',
...@@ -69,13 +43,11 @@ export default { ...@@ -69,13 +43,11 @@ export default {
}, },
{ {
title: '毕业环节', title: '毕业环节',
item: [ item: [{ name: '毕业典礼&美国游学（可选）' }]
{ name: '毕业典礼&美国游学（可选）' }
]
} }
], ],
frameParams: { frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg', // banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg',
slider: [ slider: [
{ {
name: this.$t('menu.courseChild.set'), name: this.$t('menu.courseChild.set'),
...@@ -98,7 +70,7 @@ export default { ...@@ -98,7 +70,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.course-content-box { .course-content-box {
// width: 1200px; // width: 1200px;
// margin: 0 auto; // margin: 0 auto;
...@@ -157,38 +129,38 @@ export default { ...@@ -157,38 +129,38 @@ export default {
} }
} }
} }
.is-h5{ .is-h5 {
.course-content{ .course-content {
background: #fff; background: #fff;
padding: .38rem .28rem .2rem; padding: 0.38rem 0.28rem 0.2rem;
.title{ .title {
font-size: 0.14rem; font-size: 0.14rem;
font-weight: bold; font-weight: bold;
line-height: 100%; line-height: 100%;
color: #AA1941; color: #aa1941;
} }
ul{ ul {
border-top: .01rem solid #E6E6E6; border-top: 0.01rem solid #e6e6e6;
padding-top: .1rem; padding-top: 0.1rem;
margin-top: .19rem; margin-top: 0.19rem;
margin-bottom: .24rem; margin-bottom: 0.24rem;
li{ li {
height: .21rem; height: 0.21rem;
box-sizing: border-box; box-sizing: border-box;
padding-left: .27rem; padding-left: 0.27rem;
display: flex; display: flex;
align-items: center; align-items: center;
&:nth-child(odd) { &:nth-child(odd) {
background: #F7F7F7; background: #f7f7f7;
} }
.name{ .name {
font-size: 0.1rem; font-size: 0.1rem;
color: #666666; color: #666666;
width: 2.17rem; width: 2.17rem;
font-size: 0.1rem; font-size: 0.1rem;
color: #666666; color: #666666;
} }
.score{ .score {
font-size: 0.1rem; font-size: 0.1rem;
color: #666666; color: #666666;
} }
......
pages/academic/academic.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic1.png" alt="" />
<div style="display:flex;justify-content:space-around;margin-top:103px;margin-bottom:102px">
<el-image style="width: 200px; height: 300px" :src="url1" :preview-src-list="srcList1"> </el-image>
<el-image style="width: 200px; height: 300px" :src="url2" :preview-src-list="srcList2"> </el-image>
<el-image style="width: 200px; height: 300px" :src="url3" :preview-src-list="srcList3"> </el-image>
</div>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
layout: 'normal',
components: { appFrame },
data() {
return {
url1: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic2.png',
url2: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic3.png',
url3: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic4.png',
srcList1: ['https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic2.png'],
srcList2: ['https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic3.png'],
srcList3: ['https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/academic4.png'],
frameParams: {
slider: [
{
name: this.$t('menu.academic'),
path: '/academic/academic'
}
]
}
}
}
}
</script>
pages/dataDownload/dataDownload.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/data_banner.png" alt="" />
<div class="dataList">
<a href="/public/WM_11_Vue3组件化开发（一）.pdf" download="111.pdf" class="part">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/pdf.png" alt="" />
<p class="doc">招生简章.pdf</p>
<p class="p1">最新更新</p>
<p class="p2">下载</p>
</div>
</a>
<a href="/public/WM_11_Vue3组件化开发（一）.pdf" download="111.pdf" class="part">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/doc.png" alt="" />
<p class="doc">常见问题.docx</p>
<p class="p1">最新更新</p>
<p class="p2">下载</p>
</div>
</a>
<a href="/public/WM_11_Vue3组件化开发（一）.pdf" download="111.pdf" class="part">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/doc.png" alt="" />
<p class="doc">推荐信要求.docx</p>
<p class="p1">最新更新</p>
<p class="p2">下载</p>
</div>
</a>
<a href="/public/WM_11_Vue3组件化开发（一）.pdf" download="111.pdf" class="part">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/doc.png" alt="" />
<p class="doc">申请材料清单.docx</p>
<p class="p1">最新更新</p>
<p class="p2">下载</p>
</div>
</a>
<a href="/public/WM_11_Vue3组件化开发（一）.pdf" download="111.pdf" class="part">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/doc.png" alt="" />
<p class="doc">英文简历模板.docx</p>
<p class="p1">最新更新</p>
<p class="p2">下载</p>
</div>
</a>
</div>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
layout: 'normal',
components: { appFrame },
data() {
return {
frameParams: {
slider: [
{
name: this.$t('menu.dataDownload'),
path: '/dataDownload/dataDownload'
}
]
}
}
}
}
</script>
<style lang="scss" scoped>
.dataList {
width: 900px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
margin-left: 50px;
padding-bottom: 73px;
.item {
flex: 1;
width: 424px;
height: 201px;
min-width: 424px;
max-width: 424px;
margin-right: 15px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #f9f8f8;
.doc {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
}
.p1 {
font-size: 14px;
font-weight: 400;
line-height: 34px;
color: #999999;
}
.p2 {
font-size: 16px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
}
}
}
</style>
pages/enroll/apply.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/apply_banner.png" alt="" />
<img
style="padding-left:101px;padding-right:49px;margin-top:65px;padding-bottom:109px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/apply_con.png"
alt=""
/>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
layout: 'normal',
components: { appFrame },
data() {
return {
frameParams: {
slider: [
{ name: this.$t('menu.enrollChild.process'), path: '/enroll/process' },
{ name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
{ name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' }
]
}
}
}
}
</script>
<style lang="scss" scoped>
ul {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-direction: column;
margin-top: 40px;
}
li {
padding: 10px;
}
p {
font-size: 16px;
color: #333;
}
.title {
font-weight: 400px;
}
.desc {
font-weight: 300;
}
.desc1 {
padding: 10px;
}
</style>
pages/enroll/brochure.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<el-card>
<h1 style="margin: 0 auto;text-align:center;">
报名流程
</h1>
<ul>
<li>
<p class="title">1.资格审核</p>
<p class="desc">
根据学生在线提交的报名材料审核学生录取资质，审通过预约面试
</p>
</li>
<li>
<p class="title">2.面试考核</p>
<p class="desc">
招生办的老师对学生个人背景、学习动机、学习能力、英语能力等方面综合考察
</p>
</li>
<li>
<p class="title">3.发放录取</p>
<p class="desc">
对面试合格的学生发放录取通知书
</p>
</li>
<li>
<p class="title">4.注册学籍</p>
<p class="desc">
学员完成缴费、材料提交等录取手续后，办理海外学籍注册
</p>
</li>
<li>
<p class="title">5.开学典礼</p>
<p class="desc">
全体学员参加线下开学典礼，与同学和老师见面，正式开始学习之旅
</p>
</li>
</ul>
</el-card>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
layout: 'normal',
components: { appFrame },
data() {
return {
frameParams: {
slider: [
{ name: this.$t('menu.enrollChild.process'), path: '/enroll/process' },
{ name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
{ name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' }
]
}
}
}
}
</script>
<style lang="scss" scoped>
ul {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-direction: column;
margin-top: 40px;
}
li {
padding: 20px;
}
p {
font-size: 16px;
color: #333;
}
.title {
font-weight: 400px;
}
.desc {
font-weight: 300;
}
</style>
pages/enroll/process.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/sign_banner.png" alt="" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/sign_content.png"
alt=""
style="padding-left:101px;padding-right:49px;margin-top:65px;padding-bottom:109px"
/>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
layout: 'normal',
components: { appFrame },
data() {
return {
frameParams: {
slider: [
{ name: this.$t('menu.enrollChild.process'), path: '/enroll/process' },
{ name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
{ name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' }
]
}
}
}
}
</script>
pages/index.vue
浏览文件 @ 1b470dae
<template> <template>
<div class="container"> <div class="container">
<!-- 轮播图 --> <div class="banner-content">
<banner /> <img class="img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/banner.png" alt="" />
<div class="btn">
<el-button class="btn1" @click="$router.push('/project-intro/introduce')">项目介绍</el-button>
<el-button class="btn1" @click="showApplyForm">报名申请</el-button>
</div>
</div>
<!-- 我要咨询弹框 -->
<consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
<!-- 项目特色 --> <!-- 项目特色 -->
<project-features /> <project-features />
<!-- 学校排名 --> <!-- 校园风光 -->
<school-ranking /> <school-senery />
<!-- 最新动态 --> <!-- 最新动态 -->
<news /> <news />
<!-- 师生风采 --> <!-- 视频 -->
<presence /> <Video style="padding-bottom:87px" />
<!-- 常见问题 -->
<common-problem />
<!-- 公开课 -->
<open-class />
<!-- 右侧功能栏 --> <!-- 右侧功能栏 -->
<!-- <right-aside /> --> <right-aside />
</div> </div>
</template> </template>
<script> <script>
import banner from '../components/home/banner' import consultingForm from '../components/consultingForm.vue'
import projectFeatures from '../components/home/projectFeatures' import projectFeatures from '../components/home/projectFeatures'
import schoolRanking from '../components/home/schoolRanking' 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'
import commonProblem from '../components/home/commonProblem' import commonProblem from '../components/home/commonProblem'
import openClass from '../components/home/openClass' import openClass from '../components/home/openClass'
import rightAside from '../components/rightAside' import rightAside from '../components/rightAside'
import Video from '../components/home/Video.vue'
export default { export default {
layout: 'normal', layout: 'normal',
components: { components: {
banner, consultingForm,
projectFeatures, projectFeatures,
schoolRanking, schoolSenery,
news, news,
presence, presence,
commonProblem, commonProblem,
openClass, openClass,
rightAside rightAside,
Video
}, },
data() { data() {
return { return {
isScale: false isScale: false,
popupVisible: false
} }
}, },
created() {},
mounted() {} methods: {
showApplyForm() {
this.popupVisible = true
document.getElementsByTagName('body')[0].style.height = '100%'
document.getElementsByTagName('body')[0].style.overflow = 'hidden'
},
close() {
this.popupVisible = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
},
hideApplyForm() {
this.popupVisible = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
}
}
} }
</script> </script>
<style> <style lang="scss" scoped>
.container { .container {
width: 100%; width: 100%;
/* padding-bottom: 50px; */ position: relative;
.banner-content {
position: relative;
width: 100%;
height: 652px;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.btn {
position: absolute;
top: 461px;
left: 850px;
}
.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;
}
}
} }
</style> </style>
pages/news/hot/_id.vue
浏览文件 @ 1b470dae
...@@ -31,12 +31,12 @@ export default { ...@@ -31,12 +31,12 @@ export default {
frameParams: { frameParams: {
slider: [ slider: [
{ {
name: this.$t('menu.newsChild.hot'), name: this.$t('menu.projectChild.bg'),
path: '/news/hot' path: '/project-intro/bg'
}, },
{ {
name: this.$t('menu.newsChild.interview'), name: this.$t('menu.newsChild.hot'),
path: '/news/interview' path: '/news/hot'
} }
] ]
}, },
...@@ -64,14 +64,14 @@ export default { ...@@ -64,14 +64,14 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep{ ::v-deep {
img{ img {
width: 100%; width: 100%;
height: auto !important; height: auto !important;
display: block; display: block;
} }
} }
.is-pc{ .is-pc {
.detail-content-box { .detail-content-box {
// background: #fff; // background: #fff;
// box-sizing: border-box; // box-sizing: border-box;
...@@ -175,13 +175,13 @@ export default { ...@@ -175,13 +175,13 @@ export default {
} }
} }
} }
.is-h5{ .is-h5 {
.detail-content-box { .detail-content-box {
// background: #fff; // background: #fff;
// box-sizing: border-box; // box-sizing: border-box;
// margin-bottom: 100px; // margin-bottom: 100px;
.content-box { .content-box {
padding: .25rem .25rem .47rem; padding: 0.25rem 0.25rem 0.47rem;
} }
.back-btn { .back-btn {
display: flex; display: flex;
...@@ -192,62 +192,62 @@ export default { ...@@ -192,62 +192,62 @@ export default {
font-size: 16px; font-size: 16px;
} }
.text { .text {
font-size: .14rem; font-size: 0.14rem;
color: #999999; color: #999999;
} }
} }
.times { .times {
font-size: .14rem; font-size: 0.14rem;
line-height: 100%; line-height: 100%;
margin: .17rem 0 .08rem; margin: 0.17rem 0 0.08rem;
color: #999999; color: #999999;
} }
.titles { .titles {
font-size: .18rem; font-size: 0.18rem;
font-weight: bold; font-weight: bold;
color: #141414; color: #141414;
// height: 62px; // height: 62px;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
padding-bottom: .05rem; padding-bottom: 0.05rem;
// line-height: 100%; // line-height: 100%;
} }
.article-content { .article-content {
padding-top: .13rem; padding-top: 0.13rem;
font-size: .12rem; font-size: 0.12rem;
line-height: .14rem; line-height: 0.14rem;
color: #333333; color: #333333;
img { img {
display: block; display: block;
width: 100%; width: 100%;
margin-top: .2rem; margin-top: 0.2rem;
} }
} }
.recommend-content { .recommend-content {
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
padding-top: .17rem; padding-top: 0.17rem;
.titles { .titles {
display: flex; display: flex;
align-items: center; align-items: center;
.line { .line {
width: .03rem; width: 0.03rem;
height: .11rem; height: 0.11rem;
background: #aa1941; background: #aa1941;
} }
.text { .text {
font-size: .16rem; font-size: 0.16rem;
color: #333333; color: #333333;
margin-left: .05rem; margin-left: 0.05rem;
} }
} }
.list-box { .list-box {
margin-top: .25rem; margin-top: 0.25rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
li { li {
width: 1.4rem; width: 1.4rem;
img { img {
width: 1.4rem; width: 1.4rem;
height: .92rem; height: 0.92rem;
display: block; display: block;
} }
.dec { .dec {
...@@ -255,10 +255,10 @@ export default { ...@@ -255,10 +255,10 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
font-size: .14rem; font-size: 0.14rem;
line-height: .13rem; line-height: 0.13rem;
color: #333333; color: #333333;
margin-top: .05rem; margin-top: 0.05rem;
} }
} }
} }
...@@ -266,15 +266,15 @@ export default { ...@@ -266,15 +266,15 @@ export default {
.more-btn { .more-btn {
position: relative; position: relative;
z-index: 999; z-index: 999;
width: .82rem; width: 0.82rem;
height: .2rem; height: 0.2rem;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
border-radius: .04rem; border-radius: 0.04rem;
line-height: .2re,; line-height: 0.2re;
text-align: center; text-align: center;
font-size: .14rem; font-size: 0.14rem;
color: #999999; color: #999999;
margin: .25rem auto 0; margin: 0.25rem auto 0;
cursor: pointer; cursor: pointer;
} }
} }
......
pages/news/hot/index.vue
浏览文件 @ 1b470dae
...@@ -16,13 +16,17 @@ export default { ...@@ -16,13 +16,17 @@ export default {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/new_banner.jpg', banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/new_banner.jpg',
slider: [ slider: [
{ {
name: this.$t('menu.newsChild.hot'), name: this.$t('menu.projectChild.bg'),
path: '/news/hot' path: '/project-intro/introduce'
}, },
{ {
name: this.$t('menu.newsChild.interview'), name: this.$t('menu.newsChild.hot'),
path: '/news/interview' path: '/news/hot'
} }
// {
// name: this.$t('menu.newsChild.interview'),
// path: '/news/interview'
// }
] ]
} }
} }
...@@ -41,4 +45,4 @@ export default { ...@@ -41,4 +45,4 @@ export default {
} }
} }
} }
</script> </script>
\ No newline at end of file
pages/project-intro/bg.vue
浏览文件 @ 1b470dae
...@@ -4,23 +4,32 @@ ...@@ -4,23 +4,32 @@
<div class="content-mian" v-if="isMobile"> <div class="content-mian" v-if="isMobile">
<tab-content @tabChange="tabChange"></tab-content> <tab-content @tabChange="tabChange"></tab-content>
<div class="content-mod1" v-if="showIndex === 0"> <div class="content-mod1" v-if="showIndex === 0">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-banner.png" class="main-banner"> <img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-banner.png"
class="main-banner"
/>
<div class="content-txt"> <div class="content-txt">
<div class="tit"></div> <div class="tit"></div>
<div class="text"> <div class="text">
<div class="p" v-html="$t('bg.con1Txt')"></div> <div class="p" v-html="$t('bg.con1Txt')"></div>
</div> </div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png" alt=""> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png" alt="" />
</div> </div>
</div> </div>
<div class="content-mod2" v-if="showIndex === 1"> <div class="content-mod2" v-if="showIndex === 1">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx.jpg" class="main-banner"> <img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx.jpg"
class="main-banner"
/>
<div class="content-txt"> <div class="content-txt">
<div class="p" v-html="$t('bg.con2Txt')"></div> <div class="p" v-html="$t('bg.con2Txt')"></div>
</div> </div>
</div> </div>
<div class="content-mod2" v-if="showIndex === 2"> <div class="content-mod2" v-if="showIndex === 2">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-new-tabimg.jpg" class="main-banner"> <img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-new-tabimg.jpg"
class="main-banner"
/>
<div class="content-txt"> <div class="content-txt">
<div class="p" v-html="$t('bg.con3Txt')"></div> <div class="p" v-html="$t('bg.con3Txt')"></div>
</div> </div>
...@@ -43,7 +52,11 @@ ...@@ -43,7 +52,11 @@
</div> </div>
<div class="text" v-html="$t('bg.con1Txt')"></div> <div class="text" v-html="$t('bg.con1Txt')"></div>
<div class="tags"> <div class="tags">
<div :class="{ 'tag-item': true, big: (index + 2) % 4 === 0 }" v-for="(item, index) in tags" :key="item.text"> <div
:class="{ 'tag-item': true, big: (index + 2) % 4 === 0 }"
v-for="(item, index) in tags"
:key="item.text"
>
<div class="tag-item-inner"> <div class="tag-item-inner">
<p> <p>
<span>{{ item.num }}</span <span>{{ item.num }}</span
...@@ -107,12 +120,8 @@ export default { ...@@ -107,12 +120,8 @@ export default {
path: '/project-intro/bg' path: '/project-intro/bg'
}, },
{ {
name: this.$t('menu.projectChild.feature'), name: this.$t('menu.newsChild.hot'),
path: '/project-intro/charac' path: '/news/hot'
},
{
name: this.$t('menu.projectChild.cert'),
path: '/project-intro/certificate'
} }
] ]
} }
...@@ -131,7 +140,7 @@ export default { ...@@ -131,7 +140,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.project-bg-main { .project-bg-main {
padding: 42px 64px 50px; padding: 42px 64px 50px;
.tabs { .tabs {
...@@ -212,64 +221,64 @@ export default { ...@@ -212,64 +221,64 @@ export default {
} }
} }
} }
::v-deep{ ::v-deep {
// .is-h5{ // .is-h5{
.main-page-content{ .main-page-content {
background-color: #eee !important; background-color: #eee !important;
// } // }
} }
} }
.is-h5{ .is-h5 {
.content-mian{ .content-mian {
padding: 0 .16rem; padding: 0 0.16rem;
.content-mod1{ .content-mod1 {
padding-top: .18rem; padding-top: 0.18rem;
img{ img {
width: 100%; width: 100%;
display: block; display: block;
} }
.content-txt{ .content-txt {
background: #fff; background: #fff;
padding: 0 .16rem .42rem; padding: 0 0.16rem 0.42rem;
margin-bottom: .36rem; margin-bottom: 0.36rem;
.tit{ .tit {
font-size: 0.14rem; font-size: 0.14rem;
font-weight: bold; font-weight: bold;
line-height: 100%; line-height: 100%;
color: #333333; color: #333333;
padding-top: .23rem; padding-top: 0.23rem;
padding-bottom: .1rem; padding-bottom: 0.1rem;
} }
.text{ .text {
.p{ .p {
font-size: 0.12rem; font-size: 0.12rem;
line-height: 0.24rem; line-height: 0.24rem;
color: #424242; color: #424242;
} }
} }
img{ img {
width: 2.59rem; width: 2.59rem;
margin-left: .08rem; margin-left: 0.08rem;
margin-top: .27rem; margin-top: 0.27rem;
display: block; display: block;
} }
} }
} }
.content-mod2{ .content-mod2 {
margin-top: .18rem; margin-top: 0.18rem;
background: #fff; background: #fff;
img{ img {
width: 100%; width: 100%;
} }
.content-txt{ .content-txt {
background: #fff; background: #fff;
padding: 0 .16rem .42rem; padding: 0 0.16rem 0.42rem;
margin-bottom: .36rem; margin-bottom: 0.36rem;
.p{ .p {
font-size: 0.12rem; font-size: 0.12rem;
line-height: 0.24rem; line-height: 0.24rem;
color: #424242; color: #424242;
margin-top: .35rem; margin-top: 0.35rem;
} }
} }
} }
......
pages/project-intro/components/TabNav.vue
浏览文件 @ 1b470dae
...@@ -18,5 +18,4 @@ export default { ...@@ -18,5 +18,4 @@ export default {
} }
</script> </script>
<style> <style></style>
</style>
pages/project-intro/introduce.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<el-card class="project-bg-main">
<!-- <h1>项目介绍</h1>
<h3>联合背景</h3> -->
<p>
紫荆教育联合纽约州立大学石溪分校、斯蒂文斯理工学院、玛丽伍德大学等美国知名院校引进海外优质的人才培养方案，结合自身优势和科研力量共同研发了硕士MBA，business
analysis和工程管理硕士等中方课程，依托清控紫荆教育多年来丰厚的教学资源，针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向，结合国际前沿专业知识和中国学生的需求，联合中外教学专家、一流院校教授和行业导师共同打造国际领先的人才培养体系，志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
<p>
项目采用中英双语授课，学制约16个月。共设有四大模块，分别为语言能力强化课、学术英语课、学术专业课、案例实践课。中方负责1/3的教学内容，美方负责2/3的教学内容。项目采用线上学习和线下面授的教学方式，项目学习结束后，满足毕业条件的学员将获得美国院校予的硕士学位证书，该证书与美国全日制两年就读学生所获得的学位证书具有完全相同的形式和效力。美国高排名优质院校与清华控股旗下紫荆教育紧密携手，依托清华大学五道口金融学院和美国院校优质教学资源，打造高效、高质的国际硕士课程。
</p>
<img
style="width:100%;height:100%"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/intro_bottom.png"
alt=""
/>
</el-card>
</app-frame>
</div>
</template>
<script>
import TabNav from './components/TabNav'
import TabContent from './components/TabContent'
export default {
components: {
TabNav,
TabContent
},
layout: 'normal',
data() {
return {
showIndex: 0,
tabActive: 'zjjy',
list: [
{ name: 'zjjy', label: this.$t('bg.tabBtn1') },
{ name: 'kelley', label: this.$t('bg.tabBtn2') },
{ name: 'lhbx', label: this.$t('bg.tabBtn3') }
],
tags: [
{ num: 12, unit: this.$t('bg.unit1'), text: this.$t('bg.con1ItemT1') },
{ num: 522, unit: this.$t('bg.unit2'), text: this.$t('bg.con1ItemT2') },
{ num: 600, unit: '+', text: this.$t('bg.con1ItemT3') },
{ num: 700, unit: '+', text: this.$t('bg.con1ItemT4') },
{ num: 1000, unit: '+', text: this.$t('bg.con1ItemT5') },
{ num: 4800, unit: '+', text: this.$t('bg.con1ItemT6') },
{ num: 5000, unit: '+', text: this.$t('bg.con1ItemT7') },
{ num: 500, unit: this.$t('bg.unit3'), text: this.$t('bg.con1ItemT8') }
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx3.jpg',
slider: [
{
name: this.$t('menu.projectChild.bg'),
path: '/project-intro/introduce'
},
{
name: this.$t('menu.newsChild.hot'),
path: '/news/hot'
}
]
}
}
},
methods: {
tabChange(n) {
this.showIndex = n
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.is-pc {
.project-bg-main {
padding: 42px 64px 50px;
h1 {
font-size: 32px;
font-weight: 700;
color: #333;
margin: 0 auto;
text-align: center;
}
h3 {
font-size: 20px;
font-weight: 400;
color: #333;
}
p {
font-weight: 300;
color: #555555;
font-size: 18px;
padding: 10px;
}
}
}
::v-deep .main-content-html {
width: 985px;
padding: 0px 64px 50px 0px;
}
::v-deep {
// .is-h5{
.main-page-content {
background-color: #eee !important;
// }
}
}
.is-h5 {
.content-mian {
padding: 0 0.16rem;
.content-mod1 {
padding-top: 0.18rem;
img {
width: 100%;
display: block;
}
.content-txt {
background: #fff;
padding: 0 0.16rem 0.42rem;
margin-bottom: 0.36rem;
.tit {
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding-top: 0.23rem;
padding-bottom: 0.1rem;
}
.text {
.p {
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
}
}
img {
width: 2.59rem;
margin-left: 0.08rem;
margin-top: 0.27rem;
display: block;
}
}
}
.content-mod2 {
margin-top: 0.18rem;
background: #fff;
img {
width: 100%;
}
.content-txt {
background: #fff;
padding: 0 0.16rem 0.42rem;
margin-bottom: 0.36rem;
.p {
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
margin-top: 0.35rem;
}
}
}
}
}
</style>
pages/question/question.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<el-card>
<h1 style="margin: 0 auto;text-align:center;">
常见问题
</h1>
<ul>
<li>
<p class="title">1.如何申请你们的硕士项目，流程是什么？</p>
<p class="desc">
本项目由中国招生办公室审核录取，流程是先在线提交报名申请、上传报名材料、初步审核、预约面试、面试通过发放录取、补交材料、缴费报名、注册学籍、开课学习
</p>
</li>
<li>
<p class="title">2.录取人数有没有限制？</p>
<p class="desc">
本项目名额有限，择优录取，每专业每期限招30人
</p>
</li>
<li>
<p class="title">3.大专生能否报考你们项目？专升本可以吗？</p>
<p class="desc">
本项目只接受本科学历申请，本科在读、本科毕业，专升本都是可以申请的。
</p>
</li>
<li>
<p class="title">4.本项目学制多久？获得的硕士学位证书与在美国全日制就读是否相同？</p>
<p class="desc">
本项目分为国内、国外两个学习阶段，不同项目课程时长会稍有区别，整体而言国内学习8个月左右，国外学习8个月左右。具体安排可参考开学课表。毕业获得的证书和在美全日制学习获得的证书完全一致，没有差别。
</p>
</li>
<li>
<p class="title">5.我的英语不好，我担忧英语过不了关，课程学习跟不上。怎么办？</p>
<p class="desc">
这您不用担忧，报名我们的硕士项目是没有硬性托福雅思成绩要求的，去美国的时候才需要提交语言成绩。我们在课程中专门配备了足够课时的雅思课，帮助您提升英语能力，掌握考试技巧，考到要求的语言分数。同时为学生提供学术英语课，帮助学生学习如何做英文演讲和写学术论文，具备充分的用英语学习的能力。国内阶段上课语言主要以中文为主，如是外籍老师上课，会有助教或是字幕翻译，课后作业可以纯中文提交。通常我们的学员经过课程学习，整体英语能力会有极大的提升，可以顺利衔接国外的学习。
</p>
</li>
<li>
<p class="title">6.你们的项目可以做留学认证吗？</p>
<p class="desc">
这个项目肯定是可以做中留服认证的。首先这是紫荆教育和美国大学联合培养的正规项目，合作的大学都是中国教育部认证的正规大学，可以通过教育部的涉外监管信息网查到相关信息。中国留服中心对学历认证的要求是在国外全日制学习一年以上并有往返签证记录，我们的项目符合时间要求。学员获得的毕业证书与在海外就读2年的学生无任何差异，不会有非全日制、在线、远程等字样。所以1+1项目的毕业学员，完全符合中留服学历认证的要求，获取的毕业证书可以进行留学认证。
</p>
</li>
<li>
7.为什么你们项目在中外合作办学里查不到？会影响学历认证吗？
<p class="desc">
我们的项目是统招计划之外，无需联考，报名后筛选条件，符合要求者择优录取，所以不需要去教育部或者中留服单独备案。合作的美国大学都是教育部认证备案的正规大学，所以不影响回国学历认证。
</p>
</li>
<li>
<p class="title">
8.为什么不是全程面授？我有充足的时间，可以申请面授吗？
</p>
<p class="desc">
正常的课程安排来说，确实是面授。但是疫情期间，美方老师不方便飞到中国来授课，而且各个院校防疫措施做的很规范也很严格，我们的专家教授来自国内不同的顶尖的院校，受疫情管控也很难进校上课。为了方便教学，选择线上课的形式进行。我们采用专业的授课平台，师生互动很方便,教学效果不会受到影响。而且线上课的时间灵活，随时随地都能看，省去了同学们奔波的时间。面授课授课仅仅是上课的那几十分钟，听不懂的地方很难一讲再讲，但是线上课的视频可以无限次观看,保证没有知识点的遗漏。我们还配备了助教和班主任，做好知识难点课下辅导和学生服务工作。总而言之，不会影响学生上课体验还增加了灵活性。师生互动、生生互动更便捷。
</p>
</li>
<li>
<p class="title">9.你们项目的学费是多少？能不能申请分期缴纳？</p>
<p class="desc">
本项目具有极高性价比，国内学费仅6.9万，包括语言学习费用、专业课学习费用和学分兑换费用。国外费用学员直接交给美方院校，根据各学校收费标准制定。部分项目会有代美方收取的2000-2500美金左右的服务费，具体请咨询顾问老师。学费需入学前一次性缴纳，无法分期。
</p>
</li>
</ul>
<!-- <div style="display:flex;justify-content:center">
<el-button
style="background-color:rgb(170, 25, 65);color:rgb(255, 255, 255);font-size:20px"
@click="showApplyForm"
>
更多问题，请联系我们</el-button
>
</div> -->
<consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
</el-card>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
import consultingForm from '../../components/consultingForm.vue'
export default {
layout: 'normal',
components: { appFrame, consultingForm },
data() {
return {
popupVisible: false,
frameParams: {
slider: [
{
name: this.$t('menu.question'),
path: '/question/question'
}
]
}
}
},
methods: {
showApplyForm() {
this.popupVisible = true
},
close() {
this.popupVisible = false
},
hideApplyForm() {
this.popupVisible = false
}
}
}
</script>
<style lang="scss" scoped>
ul {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-direction: column;
margin-top: 40px;
}
li {
padding: 20px;
}
p {
font-size: 16px;
color: #333;
}
.title {
font-weight: 400px;
}
.desc {
font-weight: 300;
}
</style>
pages/returnPolicy/returnPolicy.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<app-frame :data="frameParams">
<img
style="width:100%;height:100%;"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/return_banner.png"
alt=""
/>
<img
style="width:100%;height:100%;padding-left:90px;padding-top:53px;padding-bottom:146px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/return_con.png"
alt=""
/>
</app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
layout: 'normal',
components: { appFrame },
data() {
return {
frameParams: {
slider: [
{
name: this.$t('menu.returnPolicy'),
path: '/returnPolicy/returnPolicy'
}
]
}
}
}
}
</script>
pages/school/school1.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div>
<img
style="width:100%;height:100%"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school11.png"
alt=""
/>
<div class="content">
<img
style="width:1200px;height:661px;margin-top:10px;margin:auto;text-align:center"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school12.png"
alt=""
/>
</div>
<img
style="padding-right:364px;margin-top:68px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school13.png"
alt=""
/>
<img
style="margin-top:68px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school14.png"
alt=""
/>
<img
style="margin-top:68px;padding-left:368px;padding-right:368px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school15.png"
alt=""
/>
<img
style="margin-top:64px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school16.png"
alt=""
/>
<img
style="margin-top:68px;padding-left:368px;padding-right:368px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school17.png"
alt=""
/>
<div style="display:flex;justify-content:flex-start;margin-left:360px;margin-top:64px;">
<div style="width: 6px;height: 34px;background: #AA1941;margin-right:9px;margin-top:6px"></div>
<h1 style="color: #333333; font-size: 34px;font-weight: bold;">校园风光</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 {
listData: [
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_lg1.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_lg2.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_lg3.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_lg4.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_lg5.png' }
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 3,
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>
.content {
width: 1200px;
margin: auto;
text-align: center;
margin-top: 70px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
padding-bottom: 121px;
.swiper-slide {
position: relative;
width: 388px;
height: 244px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.swiper-slide-active {
width: 423px;
height: 266px;
margin-top: 0;
}
}
</style>
pages/school/school2.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div>
<img
style="width:100%;height:100%"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school21.png"
alt=""
/>
<div class="content">
<img
style="width:1200px;height:661px;margin-top:10px;margin:auto;text-align:center"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school22.png"
alt=""
/>
</div>
<img
style="padding-right:364px;margin-top:68px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school23.png"
alt=""
/>
<img
style="margin-top:68px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school24.png"
alt=""
/>
<img
style="margin-top:68px;padding-left:368px;padding-right:368px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school25.png"
alt=""
/>
<img
style="margin-top:64px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school26.png"
alt=""
/>
<img
style="margin-top:68px;padding-left:368px;padding-right:368px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school27.png"
alt=""
/>
<div style="display:flex;justify-content:flex-start;margin-left:360px;margin-top:64px">
<div style="width: 6px;height: 34px;background: #AA1941;margin-right:9px;margin-top:6px"></div>
<h1 style="color: #333333; font-size: 34px;font-weight: bold;">校园风光</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 {
listData: [
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl1.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl2.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl3.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl4.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl5.png' }
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 3,
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>
.content {
width: 1200px;
margin: auto;
text-align: center;
margin-top: 70px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
.swiper-slide {
position: relative;
width: 388px;
height: 244px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.swiper-slide-active {
width: 423px;
height: 266px;
margin-top: 0;
}
}
</style>
pages/school/school3.vue 0 → 100644
浏览文件 @ 1b470dae
<template>
<div>
<img
style="width:100%;height:100%"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywoo_banner.png"
alt=""
/>
<div class="content">
<img
style="width:1200px;height:661px;margin-top:10px;margin:auto;text-align:center"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood31.png"
alt=""
/>
</div>
<img
style="padding-right:364px;margin-top:68px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood32.png"
alt=""
/>
<img
style="margin-top:68px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood33.png"
alt=""
/>
<img
style="margin-top:68px;padding-left:368px;padding-right:368px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood34.png"
alt=""
/>
<img
style="margin-top:64px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood35.png"
alt=""
/>
<img
style="margin-top:68px;padding-left:368px;padding-right:368px"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood37.png"
alt=""
/>
<div style="display:flex;justify-content:flex-start;margin-left:360px;margin-top:64px">
<div style="width: 6px;height: 34px;background: #AA1941;margin-right:9px;margin-top:6px"></div>
<h1 style="color: #333333; font-size: 34px;font-weight: bold;">校园风光</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 {
listData: [
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_mary1.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_mary2.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_mary3.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_mary4.png' },
{ web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_mary5.png' }
],
swiperOption: {
observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 3,
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>
.content {
width: 1200px;
margin: auto;
text-align: center;
margin-top: 70px;
}
.swiper-content {
padding-top: 37px;
// width: 100%;
.swiper-slide {
position: relative;
width: 388px;
height: 244px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.swiper-slide-active {
width: 423px;
height: 266px;
margin-top: 0;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论