Skip to content

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

代码提交

上级 3a854bf9
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 773 行增加 和 379 行删除
components/base/h5/Menu.vue
浏览文件 @ c0cdf655
......@@ -17,42 +17,43 @@ export default {
{
name: '项目介绍',
children: [
{ name: '项目背景', path: '/project-intro/bg' },
{ name: '项目特色', path: '/project-intro/charac' },
{ name: '证书授权', path: '/project-intro/certificate' }
{ name: '项目介绍', path: '/project-intro/introduce' },
{ name: '最近动态', path: '/news/hot' }
]
},
{
name: '课程与师资',
name: '学校介绍',
children: [
{ name: '课程设置', path: '/about/course' },
{ name: '师资力量', path: '/about/teacher' }
{ name: '玛丽伍德大学', path: '/school/school3' },
{ name: '师资介绍', path: '/about/teacher' }
]
},
{
name: '最新动态',
children: [
{ name: '热点新闻', path: '/news/hot' },
{ name: '教授采访', path: '/news/interview' }
]
name: '学历认证',
children: [{ name: '学历认证', path: '/academic/academic' }]
},
{
name: '报名申请',
name: '报名流程',
children: [
{ name: '有关申请', path: '/apply/relevant' },
{ name: '费用资助', path: '/apply/support' },
{ name: '常见问题', path: '/apply/problem' }
{ name: '报名流程', path: '/enroll/process' },
{ name: '申请条件', path: '/enroll/apply' }
]
},
{
name: '校友风采',
children: [
{ name: '杰出校友', path: '/alumni/outstanding' },
{ name: '校友分享', path: '/alumni/sharing' }
]
name: '资料下载',
children: [{ name: '资料下载', path: '/dataDownload/dataDownload' }]
},
{
name: '我要报名',
name: '归国政策',
children: [{ name: '归国政策', path: '/returnPolicy/returnPolicy' }]
},
{
name: '常见问题',
children: [{ name: '常见问题', path: '/question/question' }]
},
{
name: '报名申请',
onClick: () => {
window.open('/my/account')
}
......
components/home/Video.vue
浏览文件 @ c0cdf655
<template>
<div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/video.png" alt="" />
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/video_logo.png" alt="" @click="open" />
<video
v-if="isShow === true"
class="video"
src="https://webapp-pub.ezijing.com/project/marywood/marywood.mp4"
controls="controls"
preload="none"
autoplay="autoplay"
></video>
<div class="overlay" v-if="isShow === true" @click="close"></div>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/video.png" alt="" />
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/video_logo.png" alt="" @click="open" />
<video
v-if="isShow === true"
class="video"
src="https://webapp-pub.ezijing.com/project/marywood/marywood.mp4"
controls="controls"
preload="none"
autoplay="autoplay"
></video>
<div class="overlay" v-if="isShow === true" @click="close"></div>
</div>
</div>
</template>
......@@ -21,7 +23,11 @@ export default {
isShow: false
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
open() {
this.isShow = true
......@@ -38,38 +44,77 @@ export default {
</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);
}
.banner-content {
position: relative;
width: 100%;
margin: 0 auto;
margin-top: 56px;
.img1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.is-pc {
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.img {
.banner-content {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
margin-top: 56px;
.img1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img {
width: 100%;
height: 100%;
}
.video {
width: 80%;
height: 100%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
}
.video {
width: 80%;
height: 100%;
}
.is-h5 {
.overlay {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.banner-content {
position: relative;
width: 100%;
margin: 0 auto;
margin-top: 0.56rem;
.img1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img {
width: 100%;
height: 100%;
}
.video {
width: 80%;
height: 100%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
}
}
</style>
components/home/banners.vue
浏览文件 @ c0cdf655
<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 :class="isMobile ? 'is-h5' : 'is-pc'">
<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 class="nav_tit">{{ item.tit }}</div>
</div>
</div>
</div>
......@@ -46,6 +47,11 @@ export default {
]
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
navClick(item) {
if (item.tag === '1') {
......@@ -65,64 +71,115 @@ export default {
</script>
<style lang="scss" scoped>
.banner-content {
position: relative;
width: 100%;
.img {
.is-pc {
.banner-content {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.banner_navList {
position: absolute;
bottom: -59px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
margin: 0;
padding: 0;
.banner_nav {
width: 239px;
height: 144px;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.banner_navList {
position: absolute;
bottom: -59px;
left: 50%;
transform: translateX(-50%);
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: 87px;
align-items: flex-end;
margin: 0;
padding: 0;
.banner_nav {
width: 239px;
height: 144px;
display: flex;
justify-content: center;
align-items: center;
border-right: 0.5px solid rgba(255, 255, 255, 0.30196078431372547);
}
.banner_nav:last-child {
border: none;
}
.nav_tit {
width: 100%;
height: 57px;
font-size: 14px;
line-height: 57px;
text-align: center;
color: #fefffe;
padding-bottom: 15px;
border-right: 1px solid #be0927;
}
&:hover {
height: 160px;
background-color: #aa1941;
border-right: 1px solid #be0927;
opacity: 0.78;
flex-direction: column;
background-color: #be0927;
// border-right: 1px solid #e64b77;
padding-right: 0;
opacity: 0.71;
.nav_top {
width: 100%;
height: 87px;
display: flex;
justify-content: center;
align-items: center;
border-right: 0.5px solid rgba(255, 255, 255, 0.30196078431372547);
}
.banner_nav:last-child {
border: none;
}
.nav_tit {
width: 100%;
height: 57px;
font-size: 14px;
line-height: 57px;
text-align: center;
color: #fefffe;
padding-bottom: 15px;
border-right: 1px solid #be0927;
}
&:hover {
height: 160px;
background-color: #aa1941;
border-right: 1px solid #be0927;
opacity: 0.78;
}
&:hover .nav_top {
border-right: none;
}
}
&:hover .nav_top {
border-right: none;
}
}
}
.is-h5 {
.banner-content {
position: relative;
width: 100%;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.banner_navList {
position: absolute;
bottom: -0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
margin: 0;
padding: 0;
.banner_nav {
width: 0.69rem;
height: 0.44rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #be0927;
border-right: 1px solid #e64b77;
opacity: 0.71;
.nav_top {
width: 0.2rem;
height: 0.2rem;
.nav_img {
width: 0.2rem;
height: 100%;
}
}
.nav_tit {
width: 100%;
height: 0.24rem;
line-height: 0.24rem;
font-size: 0.08rem;
text-align: center;
color: #fefffe;
}
}
}
}
......
components/home/projectFeatures.vue
浏览文件 @ c0cdf655
......@@ -31,27 +31,27 @@ export default {
{
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')
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT5') : 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')
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT7') : this.$t('home.project.pc.itemT7')
},
{
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')
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT7') : 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')
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT8') : 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')
text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT9') : this.$t('home.project.pc.itemT9')
}
]
}
......
components/home/projectPosition.vue
浏览文件 @ c0cdf655
<template>
<div class="service-content max-width-center">
<card title="项目定位">
<p class="desc">
清控紫荆教育与玛丽伍德大学等美国知名院校联合推出国际硕士1+1项目，针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向打造国际领先的人才培养体系，志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
</card>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="service-content max-width-center">
<card title="项目定位">
<p class="desc">
清控紫荆教育与玛丽伍德大学等美国知名院校联合推出国际硕士1+1项目，针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向打造国际领先的人才培养体系，志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
</card>
</div>
</div>
</template>
<script>
......@@ -50,6 +52,11 @@ export default {
// ]
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
goPage(path) {
if (path === '') {
......@@ -71,68 +78,33 @@ export default {
</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;
.is-pc {
.max-width-center {
width: 1212px;
margin: 0 auto;
padding-top: 168px;
.desc {
text-align: center;
padding-top: 15px;
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #666666;
padding: 48px 85px 0 78px;
}
}
}
.is-h5 {
.max-width-center {
margin: 0.8rem auto;
}
.desc {
text-align: center;
padding-top: 15px;
font-size: 20px;
line-height: 30px;
padding-top: 0.15rem;
font-size: 0.12rem;
line-height: 1.5;
font-weight: 400;
color: #666666;
padding: 48px 85px 0 78px;
}
}
</style>
components/home/schoolSenery.vue
浏览文件 @ c0cdf655
<template>
<div class="main-content">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery11.png" alt="" />
<div class="title">
<div class="line1"></div>
<div class="name">合作院校</div>
<div class="line2"></div>
</div>
<div class="part">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="main-content">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery11.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.ezijing.com/project/marywood/marwood_senery1.png"
alt=""
......@@ -18,61 +19,116 @@
@click="$router.push('/school/school1')"
/> -->
<img
class="part"
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery3.png"
alt=""
@click="$router.push('/school/school3')"
/>
<!-- </div> -->
</div>
</div>
</template>
<script>
export default {}
export default {
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.main-content {
margin-top: 65px;
position: relative;
width: 100%;
.img1 {
.is-pc {
.main-content {
margin-top: 65px;
position: relative;
width: 100%;
height: 100%;
.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: 1px solid #ffffff;
}
.name {
width: 144px;
margin-top: -25px;
margin-left: 72px;
margin-right: 72px;
}
.line2 {
width: 369px;
height: 1px;
border: 1px solid #ffffff;
}
}
.part {
position: absolute;
bottom: 226px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.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;
}
.is-h5 {
.main-content {
margin-top: 65px;
position: relative;
width: 100%;
.img1 {
width: 100%;
height: 100%;
}
.title {
font-size: 0.18rem;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.line1 {
width: 369px;
height: 1px;
border: 1px solid #ffffff;
width: 0.5rem;
height: 0.01rem;
border: 0.01px solid #ffffff;
}
.name {
width: 144px;
margin-top: -25px;
margin-left: 72px;
margin-right: 72px;
width: 1rem;
margin: -0.1rem 0.1rem 0 0.1rem;
text-align: center;
}
.line2 {
width: 369px;
height: 1px;
border: 1px solid #ffffff;
width: 0.5rem;
height: 0.01rem;
border: 0.01px solid #ffffff;
}
}
.part {
width: 1.5rem;
height: 0.8rem;
position: absolute;
bottom: 226px;
top: 50%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
transform: translateX(-50%);
}
}
</style>
components/layout/h5/Header.vue
浏览文件 @ c0cdf655
......@@ -5,7 +5,11 @@
<div class="logo-box">
<nuxt-link to="/" class="logo">
<img src="https://zws-imgs-pub.ezijing.com/static/ezijing/logo/ezijing-logo.svg" />
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood_logo.svg" />
<div class="line"></div>
<div class="title">
国际硕士1+1
</div>
<!-- <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" /> -->
</nuxt-link>
</div>
<!-- <nuxt-link to="/" class="logo"></nuxt-link> -->
......@@ -88,6 +92,20 @@ export default {
.logo {
flex: 1;
display: flex;
.line {
border: 0.01rem solid #aa1941;
height: 0.14rem;
margin-left: 0.2rem;
margin-top: 0.05rem;
}
.title {
font-size: 0.14rem;
font-weight: 500;
color: #aa1941;
padding-left: 0.2rem;
padding-top: 0.02rem;
box-sizing: border-box;
}
}
.logo-box {
flex: 1;
......
langs/zh-CN.js
浏览文件 @ c0cdf655
......@@ -56,7 +56,12 @@ export default {
itemT1: '百年历史<br />美国大学',
itemT2: '高排名<br />美国大学',
itemT3: 'ACBSP<br />商学院认证',
itemT4: '清北玛丽伍德<br />等权威师资'
itemT4: '清北玛丽伍德<br />等权威师资',
itemT5: '中国教育部认证大学<br/>安全可靠',
itemT6: '回国可做留服认证<br />享受学生福利',
itemT7: '顶配中外师资<br />权威专家教学',
itemT8: '线上线下结合<br/>授课方式灵活',
itemT9: '中外联合教研<br/>官方授权中国教学中心'
},
pc: {
itemT1: '百年历史美国大学',
......
pages/academic/academic.vue
浏览文件 @ c0cdf655
<template>
<app-frame :data="frameParams">
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" alt="" />
<div class="main_content">
<!-- <el-image :src="url1"> </el-image>
......@@ -28,18 +28,38 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
padding: 103px 64px 120px 48px;
display: flex;
justify-content: center;
align-items: center;
.is-pc {
.main_content {
padding: 103px 64px 120px 48px;
display: flex;
justify-content: center;
align-items: center;
}
}
.is-h5 {
img {
width: 100%;
height: 100%;
}
.main_content {
padding: 1.03rem 0.64rem 1.2rem 0.48rem;
display: flex;
justify-content: center;
align-items: center;
}
}
::v-deep .el-image {
display: block;
// margin-right: 20px;
width: 100%;
height: 100%;
}
</style>
pages/dataDownload/dataDownload.vue
浏览文件 @ c0cdf655
<template>
<app-frame :data="frameParams">
<img src="https://webapp-pub.ezijing.com/project/marywood/data_banner.png" alt="" />
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/data_banner.png" alt="" />
<div class="dataList">
<a
href="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf"
href="https://webapp-pub.ezijing.com/project/marywood/%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf"
class="part"
target="_blank"
>
......@@ -81,48 +81,97 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</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;
.is-pc {
.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;
}
}
}
}
.is-h5 {
.img {
width: 100%;
height: 100%;
}
.dataList {
width: 4rem;
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;
flex-wrap: wrap;
padding-bottom: 0.43rem;
.item {
// flex: 1;
width: 1.5rem;
height: 1rem;
margin-top: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 0.15rem;
background: #f9f8f8;
.doc {
font-size: 0.14rem;
font-weight: 400;
color: #333333;
}
.p1 {
font-size: 0.12rem;
font-weight: 400;
color: #999999;
}
.p2 {
font-size: 0.14rem;
font-weight: 500;
color: #aa1941;
}
}
}
}
......
pages/enroll/apply.vue
浏览文件 @ c0cdf655
差异被折叠。
pages/enroll/components/TabContent.vue
浏览文件 @ c0cdf655
<template>
<div class="tab-content">
<div class="tab-content" :class="isMobile ? 'is-h5' : 'is-pc'">
<li
v-for="(item, index) in items"
:key="index"
......@@ -18,6 +18,11 @@ export default {
activeIndex: 0
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
},
methods: {
tabChange(n) {
this.activeIndex = n
......@@ -27,33 +32,68 @@ export default {
}
</script>
<style lang="scss" scoped>
.tab-content {
padding: 42px 64px 0 64px;
display: flex;
justify-content: space-around;
li {
width: 278px;
height: 91px;
line-height: 91px;
background: #fbfbfb;
text-align: center;
font-size: 26px;
font-weight: bold;
color: #333333;
position: relative;
margin-right: 18px;
&.active {
color: #aa1941;
background: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #aa1941;
.is-pc {
.tab-content {
padding: 42px 64px 0 64px;
display: flex;
justify-content: space-around;
li {
width: 278px;
height: 91px;
line-height: 91px;
background: #fbfbfb;
text-align: center;
font-size: 26px;
font-weight: bold;
color: #333333;
position: relative;
margin-right: 18px;
&.active {
color: #aa1941;
background: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #aa1941;
}
}
}
}
}
.is-h5 {
.tab-content {
padding: 0.2rem 0.34rem 0 0.34rem;
display: flex;
justify-content: space-around;
li {
width: 2.78rem;
height: 0.41rem;
line-height: 0.41rem;
background: #fbfbfb;
text-align: center;
font-size: 0.14rem;
font-weight: bold;
color: #333333;
position: relative;
margin-right: 0.05rem;
&.active {
color: #aa1941;
background: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.16px;
background: #aa1941;
}
}
}
}
......
pages/enroll/process.vue
浏览文件 @ c0cdf655
<template>
<app-frame :data="frameParams">
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" alt="" />
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_content1.png" alt="" class="img_bottom" />
</app-frame>
......@@ -19,14 +19,30 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.img_bottom {
padding-left: 101px;
padding-right: 49px;
margin-top: 65px;
padding-bottom: 109px;
.is-pc {
.img_bottom {
padding-left: 101px;
padding-right: 49px;
margin-top: 65px;
padding-bottom: 109px;
}
}
.is-h5 {
img {
width: 100%;
height: 100%;
}
.img_bottom {
padding: 1rem 0.49rem 1rem 0.49rem;
}
}
</style>
pages/index.vue
浏览文件 @ c0cdf655
......@@ -13,7 +13,7 @@
<!-- 视频 -->
<Video style="padding-bottom:87px" />
<!-- 右侧功能栏 -->
<right-aside />
<right-aside v-if="!isMobile" />
</div>
</template>
......@@ -50,6 +50,11 @@ export default {
isScale: false,
popupVisible: false
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
......
pages/project-intro/introduce.vue
浏览文件 @ c0cdf655
<template>
<app-frame :data="frameParams">
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img src="https://webapp-pub.ezijing.com/project/marywood/introduce_banner.png" alt="" />
<div class="part_content">
<div class="part_item">
......@@ -82,4 +82,24 @@ export default {
margin-top: 45px;
}
}
.is-h5 {
.img {
width: 100%;
height: 100%;
}
.part_item {
width: 80%;
margin: auto;
font-size: 0.14rem;
font-weight: 300;
line-height: 0.28rem;
color: #424242;
padding-bottom: 0.2rem;
}
.part_img {
width: 100%;
height: 100%;
padding: 0.5rem 0.3rem 0.3rem 0.3rem;
}
}
</style>
pages/returnPolicy/returnPolicy.vue
浏览文件 @ c0cdf655
<template>
<app-frame :data="frameParams">
<app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
<img
style="width:100%;height:100%;"
src="https://webapp-pub.ezijing.com/project/marywood/return_banner.png"
......@@ -92,88 +92,178 @@ export default {
}
]
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.com_top {
padding: 82px 50px 0 50px;
box-sizing: border-box;
.com_title {
font-size: 22px;
font-weight: 500;
color: #333333;
}
.com_title_dec {
font-size: 20px;
font-weight: 400;
color: #424242;
margin-top: 20px;
}
.com_con {
font-size: 16px;
font-weight: 300;
color: #424242;
line-height: 32px;
margin-top: 52px;
.is-pc {
.com_top {
padding: 82px 50px 0 50px;
box-sizing: border-box;
.com_title {
font-size: 22px;
font-weight: 500;
color: #333333;
}
.com_title_dec {
font-size: 20px;
font-weight: 400;
color: #424242;
margin-top: 20px;
}
.com_con {
font-size: 16px;
font-weight: 300;
color: #424242;
line-height: 32px;
margin-top: 52px;
}
}
}
.com_bottom {
display: flex;
justify-content: center;
padding: 60px 60px 102px 60px;
.left_part {
.com_bottom {
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
.line {
width: 0px;
height: 930px;
border: 1px dashed #aa1941;
z-index: 10;
margin-top: -130px;
padding: 60px 60px 102px 60px;
.left_part {
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
.line {
width: 0px;
height: 930px;
border: 1px dashed #aa1941;
z-index: 10;
margin-top: -130px;
}
}
}
.right_part {
position: relative;
.item_title {
.item_id {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
background: #aa1941;
border-radius: 50%;
text-align: center;
margin-left: -14px;
margin-top: 5px;
position: absolute;
z-index: 1000000;
color: #fff;
.right_part {
position: relative;
.item_title {
.item_id {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
background: #aa1941;
border-radius: 50%;
text-align: center;
margin-left: -14px;
margin-top: 5px;
position: absolute;
z-index: 1000000;
color: #fff;
}
.item_tit {
font-size: 16px;
font-weight: bold;
line-height: 36px;
color: #666666;
padding-left: 30px;
}
}
.dash_line {
border-bottom: 1px dashed #d5d5d5;
width: 857px;
margin-left: 30px;
}
.item_tit {
.item_desc {
font-size: 16px;
font-weight: bold;
line-height: 36px;
color: #666666;
padding-left: 30px;
font-weight: 300;
line-height: 32px;
color: #424242;
padding-left: 29px;
margin: 20px 0 43px 0px;
}
}
.dash_line {
border-bottom: 1px dashed #d5d5d5;
width: 857px;
margin-left: 30px;
}
}
.is-h5 {
.com_top {
padding: 82px 50px 0 50px;
box-sizing: border-box;
.com_title {
font-size: 22px;
font-weight: 500;
color: #333333;
}
.com_title_dec {
font-size: 20px;
font-weight: 400;
color: #424242;
margin-top: 20px;
}
.item_desc {
.com_con {
font-size: 16px;
font-weight: 300;
line-height: 32px;
color: #424242;
padding-left: 29px;
margin: 20px 0 43px 0px;
line-height: 32px;
margin-top: 52px;
}
}
.com_bottom {
display: flex;
justify-content: center;
padding: 0.6rem 0.6rem 1.02rem 0.6rem;
.left_part {
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
.line {
width: 0px;
height: 16.3rem;
border: 1px dashed #aa1941;
z-index: 10;
margin-top: -3rem;
}
}
.right_part {
position: relative;
.item_title {
.item_id {
display: inline-block;
width: 0.24rem;
height: 0.24rem;
line-height: 0.24rem;
background: #aa1941;
border-radius: 50%;
text-align: center;
margin-left: -0.14rem;
margin-top: 0.05rem;
position: absolute;
z-index: 1000000;
color: #fff;
}
.item_tit {
font-size: 0.16rem;
font-weight: bold;
line-height: 0.36rem;
color: #666666;
padding-left: 0.3rem;
}
}
.dash_line {
border-bottom: 1px dashed #d5d5d5;
width: 2.5rem;
margin-left: 0.3rem;
}
.item_desc {
font-size: 0.16rem;
font-weight: 300;
line-height: 0.32rem;
color: #424242;
padding-left: 0.49rem;
margin: 0.2rem 0 0.43rem 0px;
}
}
}
}
......
pages/school/school3.vue
浏览文件 @ c0cdf655
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论