Skip to content

P
project-online-pc
提交 5057a4d1 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

pc和h5整合

上级 e4d13bf2
显示空白字符变更
内嵌 并排
正在显示 包含 560 行增加 和 46 行删除
components/base/h5/Menu.vue
浏览文件 @ 5057a4d1
...@@ -16,9 +16,9 @@ export default { ...@@ -16,9 +16,9 @@ export default {
{ {
name: '项目介绍', name: '项目介绍',
children: [ children: [
{ name: '项目背景', path: '/project/bg' }, { name: '项目背景', path: '/project-intro/bg' },
{ name: '项目特色', path: '/project/charac' }, { name: '项目特色', path: '/project-intro/charac' },
{ name: '证书授权', path: '/project/certificate' } { name: '证书授权', path: '/project-intro/certificate' }
] ]
}, },
{ {
......
pages/about/course.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="course-content-box"> <div class="course-content-box" v-if="!isMobile">
<div class="content-mian"> <div class="content-mian">
<div class="border-box"> <div class="border-box">
<template v-for="(item, index) in courseData"> <template v-for="(item, index) in courseData">
...@@ -19,7 +20,19 @@ ...@@ -19,7 +20,19 @@
</div> </div>
</div> </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">学分：{{ cItem.score }}</div>
</li>
</ul>
</div>
</div>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -92,11 +105,17 @@ export default { ...@@ -92,11 +105,17 @@ export default {
} }
} }
}, },
mounted() {} mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.course-content-box { .is-pc{
.course-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
.content-mian { .content-mian {
...@@ -106,8 +125,8 @@ export default { ...@@ -106,8 +125,8 @@ export default {
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
.item-box { .item-box {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
margin-bottom: 40px; margin-bottom: 40px;
ul { ul {
padding-bottom: 37px; padding-bottom: 37px;
...@@ -152,5 +171,45 @@ export default { ...@@ -152,5 +171,45 @@ export default {
} }
} }
} }
}
}
.is-h5{
.course-content{
background: #fff;
padding: .38rem .28rem .2rem;
.title{
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #AA1941;
}
ul{
border-top: .01rem solid #E6E6E6;
padding-top: .1rem;
margin-top: .19rem;
margin-bottom: .24rem;
li{
height: .21rem;
box-sizing: border-box;
padding-left: .27rem;
display: flex;
align-items: center;
&:nth-child(odd) {
background: #F7F7F7;
}
.name{
font-size: 0.1rem;
color: #666666;
width: 2.17rem;
font-size: 0.1rem;
color: #666666;
}
.score{
font-size: 0.1rem;
color: #666666;
}
}
}
}
} }
</style> </style>
pages/about/teacher.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="teacher-content-box"> <div class="teacher-content-box">
<div class="content-box"> <div class="content-box">
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
</div> </div>
</div> </div>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -116,11 +118,17 @@ export default { ...@@ -116,11 +118,17 @@ export default {
} }
} }
}, },
mounted() {} mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.teacher-content-box { .is-pc{
.teacher-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
.content-box { .content-box {
...@@ -165,5 +173,51 @@ export default { ...@@ -165,5 +173,51 @@ export default {
} }
} }
} }
}
}
.is-h5{
.teacher-content-box {
.content-box {
padding: .3rem .32rem .3rem;
.teacher-box {
.title {
font-size: .14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
display: flex;
flex-wrap: wrap;
padding-top: .15rem;
li {
width: 1.32rem;
margin-left: .3rem;
margin-bottom: .13rem;
&:nth-child(odd){
margin-left: 0;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 0.14rem;
line-height: 100%;
color: #AA1941;
margin-top: .1rem;
margin-bottom: .03rem;
}
.p {
font-size: 0.1rem;
line-height: 0.13rem;
color: #666666;
margin-top: .03rem;
}
}
}
}
}
}
} }
</style> </style>
pages/alumni/outstanding.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="outstanding"> <div class="outstanding">
<div class="alumni"> <div class="alumni">
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
</div> </div>
</div> </div>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -146,11 +148,17 @@ export default { ...@@ -146,11 +148,17 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alumni { .is-pc{
.alumni {
padding: 30px 74px; padding: 30px 74px;
h5 { h5 {
font-size: 22px; font-size: 22px;
...@@ -219,5 +227,79 @@ export default { ...@@ -219,5 +227,79 @@ export default {
} }
} }
} }
}
}
.is-h5{
.alumni {
padding: 0 .16rem .35rem;
h5 {
font-size: .14rem;
font-weight: 700;
line-height: 100%;
padding: .2rem 0;
color: #333;
}
.card-list {
margin-bottom: .15rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
box-sizing: border-box;
width: 1.68rem;
background: #ebebeb;
padding: .11rem .05rem;
display: flex;
margin-bottom: .06rem;
margin-left: .06rem;
&:nth-child(odd){
margin-left: 0;
}
.avatar {
// width: 204px;
// height: 100%;
img {
width: .63rem;
height: .63rem;
display: block;
}
}
.text {
// margin-top: .3rem;
margin-left: .1rem;
h6 {
font-size: .11rem;
color: #aa1941;
font-weight: 700;
white-space: nowrap;
}
p {
font-size: .1rem;
line-height: .15rem;
color: #666;
}
div {
font-size: .07rem;
line-height: .15rem;
color: #666;
margin-top: .02rem;
}
}
}
li:nth-child(even) {
margin-right: 0;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
}
}
}
}
}
} }
</style> </style>
pages/apply/problem.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="problem-content-box"> <div class="problem-content-box">
<div class="content-box"> <div class="content-box">
...@@ -18,6 +19,7 @@ ...@@ -18,6 +19,7 @@
</div> </div>
</div> </div>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -87,11 +89,17 @@ export default { ...@@ -87,11 +89,17 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.problem-content-box { .is-pc{
.problem-content-box {
.content-box { .content-box {
padding: 54px 104px 90px 87px; padding: 54px 104px 90px 87px;
.problem-item-box { .problem-item-box {
...@@ -122,5 +130,40 @@ export default { ...@@ -122,5 +130,40 @@ export default {
} }
} }
} }
}
}
.is-h5{
.problem-content-box {
.content-box {
padding: .22rem;
.problem-item-box {
margin-bottom: .4rem;
.title {
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
padding-top: .15rem;
li {
margin-bottom: .08rem;
.pro-tit {
font-size: .12rem;
font-weight: bold;
line-height: .17rem;
color: #666666;
border-bottom: 1px solid #e6e6e6;
}
.answer {
font-size: .12rem;
line-height: .17rem;
color: #424242;
}
}
}
}
}
}
} }
</style> </style>
pages/apply/support.vue
浏览文件 @ 5057a4d1
...@@ -42,6 +42,11 @@ export default { ...@@ -42,6 +42,11 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
...@@ -78,7 +83,7 @@ export default { ...@@ -78,7 +83,7 @@ export default {
padding: .3rem .2rem; padding: .3rem .2rem;
.content-box { .content-box {
.text-content { .text-content {
padding-left: .4rem; padding-left: .2rem;
.title { .title {
font-size: 0.14rem; font-size: 0.14rem;
font-weight: bold; font-weight: bold;
......
pages/project-intro/bg.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="project-bg-main"> <div class="content-mian" v-if="isMobile">
<tab-content @tabChange="tabChange"></tab-content>
<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">
<div class="content-txt">
<div class="tit">{{ $t('bg.brief') }}</div>
<div class="text">
<div class="p" v-html="$t('bg.con1Txt')"></div>
</div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png" alt="">
</div>
</div>
<div class="content-mod2" v-if="showIndex === 1">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod2-banner.png" class="main-banner">
<div class="content-txt">
<div class="p" v-html="$t('bg.con2Txt')"></div>
</div>
</div>
<div class="content-mod2" v-if="showIndex === 2">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod3-banner.png" class="main-banner">
<div class="content-txt">
<div class="p" v-html="$t('bg.con3Txt')"></div>
</div>
</div>
</div>
<div class="project-bg-main" v-else>
<ul class="tabs"> <ul class="tabs">
<li <li
v-for="item in list" v-for="item in list"
...@@ -33,49 +59,30 @@ ...@@ -33,49 +59,30 @@
<div class="sub-banner"> <div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" /> <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" />
</div> </div>
<div class="text"> <div class="text" v-html="$t('bg.con2Txt')"></div>
<p>
印第安纳大学伯明顿分校是美国公立常春藤院校，成立于1820年，有200多年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。
</p>
<p>
印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院，也是世界上历史最悠久和领先的商学院之一，成立于1920年，有100对年历史。
</p>
<p>
Kelley商学院是印第安纳大学的商科研究生院，前身为Indiana University School of Commerce and Finance。
Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一，在Business Week, U.S.News & World Report, 和The
Economist Intelligence
Unit等权威杂志的商学院排名中更是名列前茅，Kelley的校友在世界各地的企业，非盈利性组织，政府和学术机构中扮演着领导者的角色。
</p>
</div>
</div> </div>
<div class="lhbx" v-if="tabActive === 'lhbx'"> <div class="lhbx" v-if="tabActive === 'lhbx'">
<div class="sub-banner"> <div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" /> <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" />
</div> </div>
<div class="text"> <div class="text" v-html="$t('bg.con3Txt')"></div>
<p>
本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目，同时结合Kelley商学院金融学硕士的全球领先地位，引领中国金融教育实践，旨在培养具有国际视野、具备金融专业能力与实践创新能力，通晓国际金融规则和行业实践经验的金融专业人才。
</p>
<p>
项目采用中英双语授课，学制为在职15个月（学籍最长可保留5年）。共设有三大模块近20余门学位课程，并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式，学习期间安排一次集中强化式赴美访学。
</p>
<p>
项目学习结束后，满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书，该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。
</p>
<p>
世界最发达经济体与世界最大新兴经济体互相合作与学习，美国顶级商学院Kelley School of
Business与清华控股旗下紫荆教育紧密携手，依托清华大学五道口金融学院和美国印第安纳大学Kelley商学院的优质教学资源，打造最原汁原味、最接近实战的金融学硕士学位课程。
</p>
</div>
</div> </div>
</div> </div>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
import TabNav from './components/TabNav'
import TabContent from './components/TabContent'
export default { export default {
layout: 'normal', layout: 'normal',
components: {
TabNav,
TabContent
},
data() { data() {
return { return {
showIndex: 0,
tabActive: 'zjjy', tabActive: 'zjjy',
list: [ list: [
{ name: 'zjjy', label: this.$t('bg.tabBtn1') }, { name: 'zjjy', label: this.$t('bg.tabBtn1') },
...@@ -110,11 +117,22 @@ export default { ...@@ -110,11 +117,22 @@ export default {
] ]
} }
} }
},
methods: {
tabChange(n) {
this.showIndex = n
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.project-bg-main { .is-pc{
.project-bg-main {
padding: 42px 64px 50px; padding: 42px 64px 50px;
.tabs { .tabs {
margin-top: 42px; margin-top: 42px;
...@@ -192,5 +210,69 @@ export default { ...@@ -192,5 +210,69 @@ export default {
width: 240px; width: 240px;
} }
} }
}
}
::v-deep{
// .is-h5{
.main-page-content{
background-color: #eee !important;
// }
}
}
.is-h5{
.content-mian{
padding: 0 .16rem;
.content-mod1{
padding-top: .18rem;
img{
width: 100%;
display: block;
}
.content-txt{
background: #fff;
padding: 0 .16rem .42rem;
margin-bottom: .36rem;
.tit{
font-size: 0.14rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding-top: .23rem;
padding-bottom: .1rem;
}
.text{
.p{
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
}
}
img{
width: 2.59rem;
margin-left: .08rem;
margin-top: .27rem;
display: block;
}
}
}
.content-mod2{
margin-top: .18rem;
background: #fff;
img{
width: 100%;
}
.content-txt{
background: #fff;
padding: 0 .16rem .42rem;
margin-bottom: .36rem;
.p{
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
margin-top: .35rem;
}
}
}
}
} }
</style> </style>
pages/project-intro/certificate.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<div class="certificate"> <div class="certificate">
<div class="checkbox"> <div class="checkbox">
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
<p class="certificate-des">{{ $t('cert.txt5') }}</p> <p class="certificate-des">{{ $t('cert.txt5') }}</p>
</div> </div>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -35,11 +37,17 @@ export default { ...@@ -35,11 +37,17 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.certificate { .is-pc{
.certificate {
padding: 40px; padding: 40px;
text-align: center; text-align: center;
.checkbox { .checkbox {
...@@ -95,5 +103,56 @@ export default { ...@@ -95,5 +103,56 @@ export default {
line-height: 34px; line-height: 34px;
color: #aa1941; color: #aa1941;
} }
}
}
.is-h5{
.certificate {
padding: .3rem .52rem;
text-align: center;
.checkbox {
display: flex;
// width: 450px;
margin: 0 auto;
p {
width: 50%;
text-align: center;
// font-size: .12rem;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: .17rem;
color: #424242;
i {
display: inline-block;
width: .18rem;
height: .18rem;
background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
background-size: .18rem .18rem;
margin-right: .05rem;
vertical-align: middle;
}
}
}
.text {
text-align: center;
font-size: .12rem;
color: #424242;
margin-top: .2rem;
}
img {
display: block;
width: 100%;
display: block;
// height: 291px;
margin: .2rem auto;
}
.certificate-title {
font-size: .12rem;
color: #424242;
margin-top: .13rem;
}
.certificate-des {
color: #aa1941;
}
}
} }
</style> </style>
\ No newline at end of file
pages/project-intro/charac.vue
浏览文件 @ 5057a4d1
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams"> <app-frame :data="frameParams">
<ul class="card"> <ul class="card">
<li v-for="item in list" :key="item.title"> <li v-for="item in list" :key="item.title">
...@@ -12,6 +13,7 @@ ...@@ -12,6 +13,7 @@
</li> </li>
</ul> </ul>
</app-frame> </app-frame>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -53,11 +55,17 @@ export default { ...@@ -53,11 +55,17 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .is-pc{
.card {
width: 763px; width: 763px;
margin: 0 auto 0; margin: 0 auto 0;
padding: 80px 0 30px; padding: 80px 0 30px;
...@@ -94,5 +102,45 @@ export default { ...@@ -94,5 +102,45 @@ export default {
} }
} }
} }
}
}
.is-h5{
.card {
background: #fff;
// padding: .24rem .15rem .56rem;
li {
background: #f9f8f8;
box-shadow: 0 0 0 rgb(0 0 0 / 9%);
margin-bottom: .16rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding: .16rem .14rem .1rem;
.left {
img {
width: .72rem;
height: .72rem;
display: block;
}
}
.right {
margin-left: .23rem;
h5 {
font-size: .12rem;
font-weight: 700;
line-height: 100%;
color: #333;
margin-bottom: .16rem;
}
p {
font-size: .1rem;
font-family: Source Han Sans CN;
line-height: 100%;
color: #424242;
margin-bottom: .1rem;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
pages/project-intro/components/TabContent.vue 0 → 100644
浏览文件 @ 5057a4d1
<template>
<ul class="tab-content">
<li
v-for="(item, index) in items"
:key="index"
:class="activeIndex === index && 'active'"
@click="tabChange(index)"
>
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [this.$t('bg.tabBtn1'), this.$t('bg.tabBtn2'), this.$t('bg.tabBtn3')],
activeIndex: 0
}
},
methods: {
tabChange(n) {
this.activeIndex = n
this.$emit('tabChange', n)
}
}
}
</script>
<style lang="scss" scoped>
.tab-content{
padding-top: .2rem;
display: flex;
justify-content: space-between;
li{
width: 1.1rem;
height: 0.75rem;
line-height: .75rem;
background: #FFFFFF;
text-align: center;
font-size: 0.13rem;
font-weight: bold;
color: #333333;
position: relative;
&.active{
color: #AA1941;
&::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.04rem;
background: #AA1941
}
}
}
}
</style>
pages/project-intro/components/TabNav.vue 0 → 100644
浏览文件 @ 5057a4d1
<template>
<tab-nav :list="list" v-bind="$attrs"></tab-nav>
</template>
<script>
import TabNav from '@/components/base/h5/TabNav'
export default {
components: { TabNav },
data() {
return {
list: [
{ name: this.$t('menu.projectChild.bg'), path: '/project/bg', value: '1' },
{ name: this.$t('menu.projectChild.feature'), path: '/project/charac', value: '2' },
{ name: this.$t('menu.projectChild.cert'), path: '/project/certificate', value: '3' }
]
}
}
}
</script>
<style>
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论