Skip to content

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

1+1国际项目优化

上级 3707f813
隐藏空白字符变更
内嵌 并排
正在显示 包含 488 行增加 和 140 行删除
components/home/banners.vue 0 → 100644
浏览文件 @ 94af3457
<template>
<div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/banner.png" alt="" />
<div class="banner_navList">
<div class="banner_nav" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
<div class="nav_top">
<img class="nav_img" :src="item.img" alt="" />
</div>
<div class="nav_tit">{{ item.tit }}</div>
</div>
</div>
<!-- 我要咨询弹框 -->
<consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
</div>
</template>
<script>
import consultingForm from '../consultingForm.vue'
export default {
components: { consultingForm },
data() {
return {
popupVisible: false,
navList: [
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon1.png',
tit: '报名申请',
tag: '1'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon2.png',
tit: '招生简章',
tag: '2'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon3.png',
tit: '项目介绍',
tag: '2'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon4.png',
tit: '资料下载',
tag: '2'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon5.png',
tit: '常见问题',
tag: '2'
}
]
}
},
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 = ''
},
navClick(item) {
if (item.tag === '1') {
// this.showApplyForm()
this.$router.push('/my/account')
} else if (item.tag === '2') {
this.$router.push('/project-intro/introduce')
} else if (item.tag === '3') {
this.$router.push('/project-intro/introduce')
} else if (item.tag === '4') {
this.$router.push('/dataDownload/dataDownload')
} else if (item.tag === '5') {
this.$router.push('/question/question')
}
}
}
}
</script>
<style lang="scss" scoped>
.banner-content {
position: relative;
width: 100%;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.banner_navList {
position: absolute;
bottom: -76px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
margin: 0;
padding: 0;
.banner_nav {
width: 239px;
height: 144px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #be0927;
// border-right: 1px solid #e64b77;
padding-right: 0;
opacity: 0.71;
.nav_top {
width: 100%;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
border-right: 0.5px solid rgba(255, 255, 255, 0.30196078431372547);
&:hover {
border: none;
}
}
.banner_nav:last-child {
border: none;
}
.nav_tit {
width: 100%;
height: 56px;
font-size: 14px;
line-height: 18px;
text-align: center;
color: #fefffe;
padding-bottom: 15px;
border-right: 1px solid #be0927;
}
&:hover {
height: 160px;
background-color: #aa1941;
opacity: 0.78;
}
}
}
}
</style>
components/home/projectFeatures.vue
浏览文件 @ 94af3457
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
.service-content { .service-content {
padding-top: 168px; padding-top: 64px;
.nav-content { .nav-content {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -119,11 +119,11 @@ export default { ...@@ -119,11 +119,11 @@ export default {
} }
} }
.text { .text {
font-size: 14px; font-size: 18px;
line-height: 18px;
color: #666666; color: #666666;
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
font-weight: 400;
} }
} }
} }
......
components/home/projectPosition.vue 0 → 100644
浏览文件 @ 94af3457
<template>
<div class="service-content max-width-center">
<card title="项目定位">
<p class="desc">
紫荆教育与玛丽伍德大学等美国知名院校联合推出国际硕士1+1项目，针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向打造国际领先的人才培养体系，志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
</card>
</div>
</template>
<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'projectFeatures',
components: {
AppLink,
Card
},
data() {
return {
titleParams: {
name: this.$t('home.project.title')
}
// data: [
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img12.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img11.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT5')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img22.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img21.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT6')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img32.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img31.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT7')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img42.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img411.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT2') : this.$t('home.project.pc.itemT8')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img52.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img51.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT3') : this.$t('home.project.pc.itemT9')
// }
// ]
}
},
methods: {
goPage(path) {
if (path === '') {
// this.$message('暂未开通，尽请期待。')
return
}
window.open(path)
}
},
mounted() {
console.log(this.isMobile)
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
// .service-content {
// padding-top: 168px;
// .nav-content {
// display: flex;
// justify-content: flex-start;
// padding-top: 15px;
// li {
// width: 224px;
// height: 230px;
// padding-top: 53px;
// margin-right: 20px;
// box-sizing: border-box;
// background: #f9f8f8;
// // background: #fff;
// // box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
// cursor: pointer;
// transition: all 0.3s;
// img {
// width: 80px;
// height: 80px;
// display: block;
// margin: 0 auto;
// }
// .icon-active {
// display: none;
// }
// &:hover {
// background: #aa1941;
// box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
// .text {
// color: #fff;
// }
// .icon {
// display: none;
// }
// .icon-active {
// display: block;
// }
// }
// .text {
// font-size: 14px;
// line-height: 18px;
// color: #666666;
// margin-top: 20px;
// text-align: center;
// }
// }
// }
// }
.max-width-center {
width: 1212px;
margin: 0 auto;
padding-top: 168px;
.desc {
text-align: center;
padding-top: 15px;
font-size: 20px;
font-weight: 400;
color: #666666;
padding: 48px 85px 0 78px;
}
}
</style>
components/home/schoolSenery.vue
浏览文件 @ 94af3457
...@@ -7,16 +7,16 @@ ...@@ -7,16 +7,16 @@
<div class="line2"></div> <div class="line2"></div>
</div> </div>
<div class="part"> <div class="part">
<img <!-- <img
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery1.png" src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery1.png"
alt="" alt=""
@click="$router.push('/school/school2')" @click="$router.push('/school/school2')"
/> /> -->
<img <!-- <img
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery2.png" src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery2.png"
alt="" alt=""
@click="$router.push('/school/school1')" @click="$router.push('/school/school1')"
/> /> -->
<img <img
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery3.png" src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery3.png"
alt="" alt=""
...@@ -68,17 +68,11 @@ export default {} ...@@ -68,17 +68,11 @@ export default {}
} }
} }
.part { .part {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute; position: absolute;
bottom: 226px; bottom: 226px;
top: 256px; top: 256px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
img {
margin-right: 39px;
}
} }
} }
</style> </style>
components/layout/pc/Head.vue
浏览文件 @ 94af3457
...@@ -9,8 +9,11 @@ ...@@ -9,8 +9,11 @@
<nuxt-link to="/"> <nuxt-link to="/">
<div class="logo-box"> <div class="logo-box">
<img src="http://zws-imgs-pub.ezijing.com/static/ezijing/logo/ezijing-logo.svg" /> <img src="http://zws-imgs-pub.ezijing.com/static/ezijing/logo/ezijing-logo.svg" />
<div style="font-weight: 400;font-size: 28px;color: #AF1941;margin-top:10px;margin-left:20px"> <div
1+1 国际硕士 style="font-size: 30px;color: #AF1941;padding-top:5px;margin-left:28px;
margin-bottom:12px;font-weight:500"
>
国际硕士1+1
</div> </div>
<!-- <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" /> --> <!-- <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" /> -->
</div> </div>
......
components/layout/pc/Menu.vue
浏览文件 @ 94af3457
...@@ -72,8 +72,8 @@ export default { ...@@ -72,8 +72,8 @@ export default {
name: this.$t('menu.school'), name: this.$t('menu.school'),
path: '/school/school1', path: '/school/school1',
childern: [ childern: [
{ name: this.$t('menu.schoolChild.school1'), path: '/school/school1' }, // { name: this.$t('menu.schoolChild.school1'), path: '/school/school1' },
{ name: this.$t('menu.schoolChild.school2'), path: '/school/school2' }, // { name: this.$t('menu.schoolChild.school2'), path: '/school/school2' },
{ name: this.$t('menu.schoolChild.school3'), path: '/school/school3' } { name: this.$t('menu.schoolChild.school3'), path: '/school/school3' }
] ]
}, },
......
components/rightAside.vue
浏览文件 @ 94af3457
<template> <template>
<div class="right_bar"> <div class="right_bar" id="right_bar">
<ul class="tab_btns"> <ul class="tab_btns">
<a href="/my/account"> <a href="/my/account">
<li class="service"> <li class="service">
...@@ -20,6 +20,14 @@ ...@@ -20,6 +20,14 @@
> >
<p>{{ $t('aside.follow') }}</p> <p>{{ $t('aside.follow') }}</p>
</li> </li>
<li
:class="{ top: true, active: tabBtnActive && tabBtnTarget === 'top' }"
@mouseenter="handleMsOver('top')"
@mouseleave="handleMsOut"
@click="backToTop"
>
<p>^</p>
</li>
</ul> </ul>
<transition <transition
name="custom-classes-transition" name="custom-classes-transition"
...@@ -97,7 +105,28 @@ export default { ...@@ -97,7 +105,28 @@ export default {
] ]
} }
}, },
mounted() {
// this.isShow = false
window.onscroll = function() {
undefined
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var node = document.getElementById('right_bar')
if (top > 100) {
//500就是滚动条滚动到的位置，大于100(500指500px)才显示
node.style.display = 'block'
} else {
node.style.display = 'none'
}
}
},
methods: { methods: {
backToTop() {
window.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})
},
handleMsOver(type) { handleMsOver(type) {
this.tabBtnActive = true this.tabBtnActive = true
if (type !== '') { if (type !== '') {
...@@ -233,6 +262,9 @@ export default { ...@@ -233,6 +262,9 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#right_bar {
display: none;
}
.right_bar { .right_bar {
position: fixed; position: fixed;
top: 50%; top: 50%;
...@@ -240,14 +272,14 @@ export default { ...@@ -240,14 +272,14 @@ export default {
z-index: 2000; z-index: 2000;
transform: translateY(-50%); transform: translateY(-50%);
.tab_btns { .tab_btns {
width: 100px; width: 50px;
// height: 136px; // height: 136px;
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
li { li {
padding: 70px 0 18px; padding: 60px 0 18px;
color: #999; color: #999;
background-position: center 18px; background-position: center 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -396,24 +428,3 @@ export default { ...@@ -396,24 +428,3 @@ export default {
} }
} }
</style> </style>
<style>
/* .right_bar .enroll_cont .el-input__inner {
border: 1px solid #ccc;
line-height: 44px;
height: 44px;
}
.right_bar .sendcode .el-input {
width: 170px;
}
.right_bar .el-button{
background: #ff8e1a;
border:#ff8e1a 1px solid;
color:rgba(255,255,255,.9);
}
.sendcode .el-button {
width: 94px;
margin-right: 2px;
padding: 12px 0;
text-align: center;
} */
</style>
pages/academic/academic.vue
浏览文件 @ 94af3457
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" alt="" />
<div class="main_content"> <div class="main_content">
<el-image :src="url1"> </el-image> <!-- <el-image :src="url1"> </el-image>
<el-image :src="url2"> </el-image> <el-image :src="url2"> </el-image> -->
<el-image :src="url3"> </el-image> <el-image :src="url3"> </el-image>
</div> </div>
</app-frame> </app-frame>
...@@ -15,8 +15,8 @@ export default { ...@@ -15,8 +15,8 @@ export default {
components: { appFrame }, components: { appFrame },
data() { data() {
return { return {
url1: 'https://webapp-pub.ezijing.com/project/marywood/academic21.png', // url1: 'https://webapp-pub.ezijing.com/project/marywood/academic21.png',
url2: 'https://webapp-pub.ezijing.com/project/marywood/academic31.png', // url2: 'https://webapp-pub.ezijing.com/project/marywood/academic31.png',
url3: 'https://webapp-pub.ezijing.com/project/marywood/academic4.png', url3: 'https://webapp-pub.ezijing.com/project/marywood/academic4.png',
frameParams: { frameParams: {
...@@ -35,11 +35,11 @@ export default { ...@@ -35,11 +35,11 @@ export default {
.main_content { .main_content {
padding: 103px 64px 120px 48px; padding: 103px 64px 120px 48px;
display: flex; display: flex;
justify-content: space-around; justify-content: center;
align-items: center; align-items: center;
} }
::v-deep .el-image { ::v-deep .el-image {
display: block; display: block;
margin-right: 20px; // margin-right: 20px;
} }
</style> </style>
pages/enroll/apply.vue
浏览文件 @ 94af3457
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div class="admissionList"> <div class="admissionList">
<div class="list_tit">录取条件</div> <div class="list_tit">录取条件</div>
<div class="admission_desc"> <div class="admission_desc">
<div class="admission_part"> <!-- <div class="admission_part">
<div class="part_tit"><div class="tit1">纽约州立大学石溪分校 金融硕士</div></div> <div class="part_tit"><div class="tit1">纽约州立大学石溪分校 金融硕士</div></div>
<div class="part_desc"> <div class="part_desc">
<div class="item_desc">本科GPA成绩≥3.0；</div> <div class="item_desc">本科GPA成绩≥3.0；</div>
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,9 @@
<div class="item_desc">通过初审资料审核（详见申请材料）</div> <div class="item_desc">通过初审资料审核（详见申请材料）</div>
<div class="item_desc">通过项目中英文面试</div> <div class="item_desc">通过项目中英文面试</div>
</div> </div>
</div> </div> -->
<div class="admission_part"> <!-- <div class="admission_part">
<div class="part_tit"> <div class="part_tit">
<div class="tit2"> <div class="tit2">
斯蒂文斯理工学院学院<br /> 斯蒂文斯理工学院学院<br />
...@@ -48,11 +48,11 @@ ...@@ -48,11 +48,11 @@
<div class="item_desc">通过初审资料审核（详见申请材料）</div> <div class="item_desc">通过初审资料审核（详见申请材料）</div>
<div class="item_desc">通过项目中英文面试</div> <div class="item_desc">通过项目中英文面试</div>
</div> </div>
</div> </div> -->
<div class="admission_part"> <div class="admission_part">
<div class="part_tit"><div class="tit1">玛丽伍德大学 工商管理硕士</div></div> <div class="part_tit"><div class="tit1">玛丽伍德大学 工商管理硕士</div></div>
<div class="part_desc"> <div class="part_desc">
<div class="item_desc">本科GPA成绩≥3.0；</div> <div class="item_desc">本科GPA成绩≥2.8；</div>
<div class="item_desc">通过初审资料审核（详见申请材料）</div> <div class="item_desc">通过初审资料审核（详见申请材料）</div>
<div class="item_desc">通过项目中英文面试</div> <div class="item_desc">通过项目中英文面试</div>
</div> </div>
...@@ -220,13 +220,13 @@ export default { ...@@ -220,13 +220,13 @@ export default {
} }
.admission_desc { .admission_desc {
display: flex; display: flex;
justify-content: space-around; justify-content: center;
align-items: flex-start; align-items: center;
.admission_part { .admission_part {
padding-right: 10px; padding-right: 10px;
.part_tit { .part_tit {
width: 286px; width: 369px;
height: 75px; height: 75px;
background: #880126; background: #880126;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
...@@ -243,7 +243,7 @@ export default { ...@@ -243,7 +243,7 @@ export default {
} }
} }
.part_desc { .part_desc {
width: 286px; width: 369px;
.item_desc { .item_desc {
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
......
pages/enroll/process.vue
浏览文件 @ 94af3457
<template> <template>
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" alt="" />
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_content.png" alt="" class="img_bottom" /> <img src="https://webapp-pub.ezijing.com/project/marywood/sign_content1.png" alt="" class="img_bottom" />
</app-frame> </app-frame>
</template> </template>
<script> <script>
......
pages/index.vue
浏览文件 @ 94af3457
<template> <template>
<div class="container"> <div class="container">
<div class="banner-content"> <!-- banner图 -->
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/banner11.png" alt="" /> <banners />
<div class="btn"> <!-- 项目定位 -->
<el-button class="btn1" @click="$router.push('/project-intro/introduce')">项目介绍</el-button> <project-position />
<el-button class="btn1" @click="showApplyForm">报名咨询</el-button>
</div>
</div>
<p class="desc">
紫荆教育与纽约州立大学石溪分校、斯蒂文斯理工学院、玛丽伍德大学等美国知名院校联合推出国际硕士1+1项目，针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向打造国际领先的人才培养体系，志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
<!-- 我要咨询弹框 -->
<consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
<!-- 项目特色 --> <!-- 项目特色 -->
<project-features /> <project-features />
<!-- 校园风光 --> <!-- 校园风光 -->
...@@ -26,7 +18,8 @@ ...@@ -26,7 +18,8 @@
</template> </template>
<script> <script>
import consultingForm from '../components/consultingForm.vue' import banners from '../components/home/banners.vue'
import projectPosition from '../components/home/projectPosition.vue'
import projectFeatures from '../components/home/projectFeatures' import projectFeatures from '../components/home/projectFeatures'
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'
...@@ -35,11 +28,13 @@ import commonProblem from '../components/home/commonProblem' ...@@ -35,11 +28,13 @@ 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' import Video from '../components/home/Video.vue'
import Banners from '../components/home/banners.vue'
export default { export default {
layout: 'normal', layout: 'normal',
components: { components: {
consultingForm, banners,
projectPosition,
projectFeatures, projectFeatures,
schoolSenery, schoolSenery,
news, news,
...@@ -47,31 +42,14 @@ export default { ...@@ -47,31 +42,14 @@ export default {
commonProblem, commonProblem,
openClass, openClass,
rightAside, rightAside,
Video Video,
Banners
}, },
data() { data() {
return { return {
isScale: false, isScale: false,
popupVisible: false popupVisible: false
} }
},
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>
...@@ -79,47 +57,5 @@ export default { ...@@ -79,47 +57,5 @@ export default {
.container { .container {
width: 100%; width: 100%;
position: relative; position: relative;
.banner-content {
position: relative;
width: 100%;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.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;
}
}
.desc {
width: 1200px;
font-size: 16px;
font-weight: 400;
color: #666666;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top: 79px;
text-align: center;
}
} }
</style> </style>
pages/school/school1.vue
浏览文件 @ 94af3457
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
<div class="tit_desc">项目设置</div> <div class="tit_desc">学制安排</div>
</div> </div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school1611.png" /> <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school1611.png" />
<div class="content"> <div class="content">
......
pages/school/school2.vue
浏览文件 @ 94af3457
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
<h1 class="tit_desc">项目设置</h1> <h1 class="tit_desc">学制安排</h1>
</div> </div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school2611.png" /> <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school2611.png" />
<div class="content"> <div class="content">
......
pages/school/school3.vue
浏览文件 @ 94af3457
<template> <template>
<div> <div>
<div class="banner"> <div class="banner">
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner111.png" /> <img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" />
<div class="btn"> <div class="btn">
<el-button class="btn1" @click="$router.push('/my/account')">报名申请</el-button> <el-button class="btn1" @click="$router.push('/my/account')">报名申请</el-button>
</div> </div>
...@@ -15,17 +15,54 @@ ...@@ -15,17 +15,54 @@
</div> </div>
<img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/marywood322.png" /> <img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/marywood322.png" />
</div> </div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3311.png" /> <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood33.png" />
<div class="content"> <div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood34.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood/marywood341.png" />
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
<div class="tit_desc">项目设置</div> <div class="tit_desc">学制安排</div>
</div> </div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3611.png" alt="" /> <!-- <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3611.png" alt="" /> -->
<div class="content"> <div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood37.png" /> <div class="img5 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail"><span class="num">16</span><span class="fen">个月</span></div>
<div class="desc_tit">学制安排</div>
</div>
</div>
<div class="img6 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail"><span class="num">36</span><span class="fen">学分</span></div>
<div class="desc_tit">学分设置</div>
</div>
</div>
<div class="img7 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail">
<span class="num">4</span><span class="fen fen1">门课</span><span class="num">12</span
><span class="fen">学分</span>
</div>
<div class="desc_tit">国内授课</div>
</div>
</div>
<div class="img8 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail">
<span class="num">8</span><span class="fen fen1">门课</span><span class="num">24</span
><span class="fen">学分</span>
</div>
<div class="desc_tit">国外授课</div>
</div>
</div>
</div>
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood36.png" />
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
...@@ -150,6 +187,84 @@ export default { ...@@ -150,6 +187,84 @@ export default {
width: 540px; width: 540px;
margin-top: 65px; margin-top: 65px;
} }
.img55 {
width: 292px;
height: 345px;
margin-right: 11px;
cursor: pointer;
position: relative;
.mask {
position: absolute;
background: rgba(0, 0, 0, 0.16862745098039217);
color: #ffffff;
opacity: 0.7;
top: 0;
right: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.desc {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 137px;
transition: all 0.15s ease-in;
.desc_tit {
font-size: 20px;
font-weight: 500;
color: #ffffff;
margin-top: -10px;
}
.desc_detail {
color: #ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
visibility: hidden;
.num {
font-size: 55px;
font-weight: bold;
}
.fen {
font-size: 20px;
font-weight: 400;
padding-top: 20px;
}
.fen1 {
padding-right: 5px;
}
}
}
}
.img55:hover .mask {
opacity: 1;
background: rgba(0, 0, 0, 0.41568627450980394);
}
.img55:hover .desc {
transform: translateY(-30px);
}
.img55:hover .desc .desc_detail {
visibility: visible;
}
.img5 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational1.png');
}
.img6 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational2.png');
}
.img7 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational3.png');
}
.img8 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational4.png');
}
} }
.img4 { .img4 {
width: 100%; width: 100%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论