Skip to content

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

pc和h5整合

上级 e4d13bf2
隐藏空白字符变更
内嵌 并排
正在显示 包含 966 行增加 和 453 行删除
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,60 +105,67 @@ export default { ...@@ -92,60 +105,67 @@ 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{
width: 1200px; .course-content-box {
margin: 0 auto; width: 1200px;
.content-mian { margin: 0 auto;
padding: 106px 141px 110px 96px; .content-mian {
.border-box { padding: 106px 141px 110px 96px;
padding: 35px 0 51px; .border-box {
border-top: 1px solid #e6e6e6; padding: 35px 0 51px;
border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
.item-box { border-bottom: 1px solid #e6e6e6;
display: flex; .item-box {
justify-content: space-between; // display: flex;
margin-bottom: 40px; // justify-content: space-between;
ul { margin-bottom: 40px;
padding-bottom: 37px;
border-bottom: 1px solid #e6e6e6;
}
&:last-child {
border-bottom: none;
margin-bottom: 0;
ul { ul {
padding-bottom: 37px; padding-bottom: 37px;
border-bottom: none; border-bottom: 1px solid #e6e6e6;
} }
} &:last-child {
.title { border-bottom: none;
font-size: 26px; margin-bottom: 0;
font-weight: bold; ul {
line-height: 100%; padding-bottom: 37px;
color: #aa1941; border-bottom: none;
}
.right-content {
width: 562px;
li {
height: 32px;
background: #f7f7f7;
display: flex;
align-items: center;
&:nth-child(even) {
background: none;
}
.text {
width: 397px;
padding-left: 30px;
font-size: 16px;
color: #333333;
} }
.score { }
font-size: 16px; .title {
color: #424242; font-size: 26px;
font-weight: bold;
line-height: 100%;
color: #aa1941;
}
.right-content {
width: 562px;
li {
height: 32px;
background: #f7f7f7;
display: flex;
align-items: center;
&:nth-child(even) {
background: none;
}
.text {
width: 397px;
padding-left: 30px;
font-size: 16px;
color: #333333;
}
.score {
font-size: 16px;
color: #424242;
}
} }
} }
} }
...@@ -153,4 +173,43 @@ export default { ...@@ -153,4 +173,43 @@ 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>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="teacher-content-box"> <app-frame :data="frameParams">
<div class="content-box"> <div class="teacher-content-box">
<div class="teacher-box"> <div class="content-box">
<div class="mar-t-box" v-for="(item, index) in teacherList" :key="index"> <div class="teacher-box">
<div class="title">{{ item.title }}</div> <div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
<ul> <div class="title">{{ item.title }}</div>
<template v-for="(cItem, cIndex) in item.list"> <ul>
<li :key="cIndex + '='"> <template v-for="(cItem, cIndex) in item.list">
<img :src="cItem.image" alt="" /> <li :key="cIndex + '='">
<div class="name">{{ cItem.name }}</div> <img :src="cItem.image" alt="" />
<div class="p" v-html="cItem.intr"></div> <div class="name">{{ cItem.name }}</div>
</li> <div class="p" v-html="cItem.intr"></div>
</template> </li>
</ul> </template>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </app-frame>
</app-frame> </div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -116,50 +118,102 @@ export default { ...@@ -116,50 +118,102 @@ 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{
width: 1200px; .teacher-content-box {
margin: 0 auto; width: 1200px;
.content-box { margin: 0 auto;
padding: 60px 75px 61px; .content-box {
.teacher-box { padding: 60px 75px 61px;
.title { .teacher-box {
font-size: 22px; .title {
font-weight: bold; font-size: 22px;
line-height: 100%; font-weight: bold;
color: #333333; line-height: 100%;
} color: #333333;
ul { }
display: flex; ul {
flex-wrap: wrap; display: flex;
padding-top: 30px; flex-wrap: wrap;
li { padding-top: 30px;
width: 180px; li {
margin-right: 140px; width: 180px;
margin-bottom: 40px; margin-right: 140px;
&:nth-child(3n + 3) { margin-bottom: 40px;
margin-right: 0; &:nth-child(3n + 3) {
} margin-right: 0;
img { }
display: block; img {
width: 100%; display: block;
} width: 100%;
.name { }
font-size: 18px; .name {
color: #aa1941; font-size: 18px;
line-height: 100%; color: #aa1941;
margin-top: 20px; line-height: 100%;
margin-bottom: 10px; margin-top: 20px;
margin-bottom: 10px;
}
.p {
font-size: 14px;
// line-height: 100%;
color: #666666;
white-space: nowrap;
margin-bottom: 5px;
}
} }
.p { }
font-size: 14px; }
// line-height: 100%; }
color: #666666; }
white-space: nowrap; }
margin-bottom: 5px; .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;
}
} }
} }
} }
......
pages/alumni/outstanding.vue
浏览文件 @ 5057a4d1
<template> <template>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="outstanding"> <app-frame :data="frameParams">
<div class="alumni"> <div class="outstanding">
<h5>{{ $t('outstanding.title1') }}</h5> <div class="alumni">
<ul class="card-list"> <h5>{{ $t('outstanding.title1') }}</h5>
<li v-for="(item, index) in alumniList" :key="index"> <ul class="card-list">
<div class="avatar"> <li v-for="(item, index) in alumniList" :key="index">
<img :src="item.avatar" /> <div class="avatar">
</div> <img :src="item.avatar" />
<div class="text"> </div>
<h6>{{ item.name }}</h6> <div class="text">
<p v-for="it in item.post" :key="it">{{ it }}</p> <h6>{{ item.name }}</h6>
</div> <p v-for="it in item.post" :key="it">{{ it }}</p>
</li> </div>
</ul> </li>
<h5>{{ $t('outstanding.title2') }}</h5> </ul>
<ul class="card-list"> <h5>{{ $t('outstanding.title2') }}</h5>
<li v-for="item in studentList" :key="item.name"> <ul class="card-list">
<div class="avatar"> <li v-for="item in studentList" :key="item.name">
<img :src="item.avatar" /> <div class="avatar">
</div> <img :src="item.avatar" />
<div class="text"> </div>
<h6>{{ item.name }}</h6> <div class="text">
<p v-for="it in item.education" :key="it">{{ it }}</p> <h6>{{ item.name }}</h6>
<div v-for="it in item.post" :key="it">{{ it }}</div> <p v-for="it in item.education" :key="it">{{ it }}</p>
</div> <div v-for="it in item.post" :key="it">{{ it }}</div>
</li> </div>
</ul> </li>
</ul>
</div>
</div> </div>
</div> </app-frame>
</app-frame> </div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -146,75 +148,155 @@ export default { ...@@ -146,75 +148,155 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alumni { .is-pc{
padding: 30px 74px; .alumni {
h5 { padding: 30px 74px;
font-size: 22px; h5 {
font-family: Source Han Sans CN; font-size: 22px;
font-weight: 500; font-family: Source Han Sans CN;
line-height: 74px; font-weight: 500;
color: #333333; line-height: 74px;
} color: #333333;
.card-list { }
margin-bottom: 30px; .card-list {
display: flex; margin-bottom: 30px;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
display: flex; display: flex;
margin: 0 20px 21px 0; flex-direction: row;
transition: 0.5s ease-in-out; flex-wrap: wrap;
.avatar { li {
width: 204px; width: 410px;
height: 100%; height: 195px;
img { background: #ebebeb;
width: 157px; display: flex;
height: 157px; margin: 0 20px 21px 0;
margin: 20px 0 0 23px; transition: 0.5s ease-in-out;
} .avatar {
} width: 204px;
.text { height: 100%;
margin-top: 72px; img {
h6 { width: 157px;
font-size: 18px; height: 157px;
font-family: HelveticaNeueLTPro-Md; margin: 20px 0 0 23px;
line-height: 18px; }
color: #aa1941;
margin-bottom: 10px;
} }
p { .text {
font-size: 14px; margin-top: 72px;
font-family: Source Han Sans CN; h6 {
font-weight: 400; font-size: 18px;
line-height: 22px; font-family: HelveticaNeueLTPro-Md;
color: #666; line-height: 18px;
color: #aa1941;
margin-bottom: 10px;
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 22px;
color: #666;
}
div {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 300;
line-height: 18px;
color: #666;
}
} }
div { }
font-size: 12px; li:nth-child(even) {
font-family: Source Han Sans CN; margin-right: 0;
font-weight: 300; }
line-height: 18px; li:hover {
color: #666; background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
}
} }
} }
} }
li:nth-child(even) { }
margin-right: 0; }
.is-h5{
.alumni {
padding: 0 .16rem .35rem;
h5 {
font-size: .14rem;
font-weight: 700;
line-height: 100%;
padding: .2rem 0;
color: #333;
} }
li:hover { .card-list {
background: #aa1941; margin-bottom: .15rem;
.text { display: flex;
h6, flex-direction: row;
p, flex-wrap: wrap;
div { li {
color: #fff; 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;
}
} }
} }
} }
......
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,36 +89,77 @@ export default { ...@@ -87,36 +89,77 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.problem-content-box { .is-pc{
.content-box { .problem-content-box {
padding: 54px 104px 90px 87px; .content-box {
.problem-item-box { padding: 54px 104px 90px 87px;
margin-bottom: 80px; .problem-item-box {
.title { margin-bottom: 80px;
font-size: 22px; .title {
font-weight: bold; font-size: 22px;
line-height: 100%; font-weight: bold;
color: #333333; line-height: 100%;
} color: #333333;
ul { }
padding-top: 30px; ul {
li { padding-top: 30px;
margin-bottom: 15px; li {
.pro-tit { margin-bottom: 15px;
font-size: 16px; .pro-tit {
font-weight: bold; font-size: 16px;
line-height: 32px; font-weight: bold;
color: #666666; line-height: 32px;
border-bottom: 1px solid #e6e6e6; color: #666666;
border-bottom: 1px solid #e6e6e6;
}
.answer {
font-size: 16px;
line-height: 32px;
color: #424242;
}
} }
.answer { }
font-size: 16px; }
line-height: 32px; }
color: #424242; }
}
.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;
}
} }
} }
} }
......
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>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="project-bg-main"> <app-frame :data="frameParams">
<ul class="tabs"> <div class="content-mian" v-if="isMobile">
<li <tab-content @tabChange="tabChange"></tab-content>
v-for="item in list" <div class="content-mod1" v-if="showIndex === 0">
:key="item.name" <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-banner.png" class="main-banner">
:class="{ 'is-active': tabActive === item.name }" <div class="content-txt">
@click="tabActive = item.name" <div class="tit">{{ $t('bg.brief') }}</div>
> <div class="text">
{{ item.label }} <div class="p" v-html="$t('bg.con1Txt')"></div>
</li>
</ul>
<div class="zjjy" v-if="tabActive === 'zjjy'">
<div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-zjjy.png" />
</div>
<div class="text" v-html="$t('bg.con1Txt')"></div>
<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-inner">
<p>
<span>{{ item.num }}</span
>{{ item.unit }}
</p>
<span>{{ item.text }}</span>
</div> </div>
<el-divider direction="vertical" v-if="(index + 1) % 4 !== 0"></el-divider> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png" alt="">
</div> </div>
</div> </div>
</div> <div class="content-mod2" v-if="showIndex === 1">
<div class="kelley" v-if="tabActive === 'kelley'"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod2-banner.png" class="main-banner">
<div class="sub-banner"> <div class="content-txt">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" /> <div class="p" v-html="$t('bg.con2Txt')"></div>
</div>
</div> </div>
<div class="text"> <div class="content-mod2" v-if="showIndex === 2">
<p> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod3-banner.png" class="main-banner">
印第安纳大学伯明顿分校是美国公立常春藤院校，成立于1820年，有200多年历史，是著名的研究型大学，拥有9位诺贝尔奖得主。 <div class="content-txt">
</p> <div class="p" v-html="$t('bg.con3Txt')"></div>
<p> </div>
印第安纳大学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>
<div class="lhbx" v-if="tabActive === 'lhbx'"> <div class="project-bg-main" v-else>
<div class="sub-banner"> <ul class="tabs">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" /> <li
v-for="item in list"
:key="item.name"
:class="{ 'is-active': tabActive === item.name }"
@click="tabActive = item.name"
>
{{ item.label }}
</li>
</ul>
<div class="zjjy" v-if="tabActive === 'zjjy'">
<div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-zjjy.png" />
</div>
<div class="text" v-html="$t('bg.con1Txt')"></div>
<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-inner">
<p>
<span>{{ item.num }}</span
>{{ item.unit }}
</p>
<span>{{ item.text }}</span>
</div>
<el-divider direction="vertical" v-if="(index + 1) % 4 !== 0"></el-divider>
</div>
</div>
</div> </div>
<div class="text"> <div class="kelley" v-if="tabActive === 'kelley'">
<p> <div class="sub-banner">
本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目，同时结合Kelley商学院金融学硕士的全球领先地位，引领中国金融教育实践，旨在培养具有国际视野、具备金融专业能力与实践创新能力，通晓国际金融规则和行业实践经验的金融专业人才。 <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" />
</p> </div>
<p> <div class="text" v-html="$t('bg.con2Txt')"></div>
项目采用中英双语授课，学制为在职15个月（学籍最长可保留5年）。共设有三大模块近20余门学位课程，并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式，学习期间安排一次集中强化式赴美访学。 </div>
</p> <div class="lhbx" v-if="tabActive === 'lhbx'">
<p> <div class="sub-banner">
项目学习结束后，满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书，该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。 <img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" />
</p> </div>
<p> <div class="text" v-html="$t('bg.con3Txt')"></div>
世界最发达经济体与世界最大新兴经济体互相合作与学习，美国顶级商学院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,86 +117,161 @@ export default { ...@@ -110,86 +117,161 @@ 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{
padding: 42px 64px 50px; .project-bg-main {
.tabs { padding: 42px 64px 50px;
margin-top: 42px; .tabs {
display: flex; margin-top: 42px;
justify-content: space-between; display: flex;
li { justify-content: space-between;
background: #fbfbfb; li {
width: 32%; background: #fbfbfb;
height: 83px; width: 32%;
line-height: 83px; height: 83px;
border-top: 8px solid #fbfbfb; line-height: 83px;
font-size: 26px; border-top: 8px solid #fbfbfb;
font-family: Source Han Sans CN; font-size: 26px;
color: #333; font-family: Source Han Sans CN;
text-align: center; color: #333;
cursor: pointer; text-align: center;
cursor: pointer;
}
li.is-active {
border-color: #aa1941;
color: #aa1941;
background-color: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
}
} }
li.is-active { .sub-banner {
border-color: #aa1941; margin-top: 18px;
color: #aa1941; height: 302px;
background-color: #fff; img {
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06); width: 100%;
height: 100%;
}
} }
} .text {
.sub-banner { font-size: 16px;
margin-top: 18px; font-family: Source Han Sans CN;
height: 302px; line-height: 32px;
img { color: #424242;
width: 100%; letter-spacing: 1px;
height: 100%; margin-top: 40px;
}
.tags {
width: 780px;
margin: 40px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// justify-content: space-between;
.tag-item {
width: 180px;
margin-bottom: 10px;
.tag-item-inner {
display: inline-block;
text-align: center;
width: calc(100% - 17px);
p {
font-size: 20px;
color: #aa1941;
span {
font-size: 28px;
font-weight: bold;
}
}
> span {
font-size: 16px;
line-height: 34px;
color: #666666;
}
}
.el-divider {
height: 100%;
float: right;
}
}
.tag-item.big {
width: 240px;
}
} }
} }
.text { }
font-size: 16px; ::v-deep{
font-family: Source Han Sans CN; // .is-h5{
line-height: 32px; .main-page-content{
color: #424242; background-color: #eee !important;
letter-spacing: 1px; // }
margin-top: 40px;
} }
.tags { }
width: 780px; .is-h5{
margin: 40px auto 0; .content-mian{
display: flex; padding: 0 .16rem;
flex-direction: row; .content-mod1{
flex-wrap: wrap; padding-top: .18rem;
// justify-content: space-between; img{
.tag-item { width: 100%;
width: 180px; display: block;
margin-bottom: 10px; }
.tag-item-inner { .content-txt{
display: inline-block; background: #fff;
text-align: center; padding: 0 .16rem .42rem;
width: calc(100% - 17px); margin-bottom: .36rem;
p { .tit{
font-size: 20px; font-size: 0.14rem;
color: #aa1941; font-weight: bold;
span { line-height: 100%;
font-size: 28px; color: #333333;
font-weight: bold; padding-top: .23rem;
padding-bottom: .1rem;
}
.text{
.p{
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
} }
} }
> span { img{
font-size: 16px; width: 2.59rem;
line-height: 34px; margin-left: .08rem;
color: #666666; margin-top: .27rem;
display: block;
} }
} }
.el-divider {
height: 100%;
float: right;
}
} }
.tag-item.big { .content-mod2{
width: 240px; 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;
}
}
} }
} }
} }
......
pages/project-intro/certificate.vue
浏览文件 @ 5057a4d1
<template> <template>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="certificate"> <app-frame :data="frameParams">
<div class="checkbox"> <div class="certificate">
<p><i></i>{{ $t('cert.txt1') }}</p> <div class="checkbox">
<p><i></i>{{ $t('cert.txt2') }}</p> <p><i></i>{{ $t('cert.txt1') }}</p>
<p><i></i>{{ $t('cert.txt2') }}</p>
</div>
<p class="text">{{ $t('cert.txt3') }}</p>
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-pic.png" />
<p class="certificate-title">{{ $t('cert.txt4') }}</p>
<p class="certificate-des">{{ $t('cert.txt5') }}</p>
</div> </div>
<p class="text">{{ $t('cert.txt3') }}</p> </app-frame>
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-pic.png" /> </div>
<p class="certificate-title">{{ $t('cert.txt4') }}</p>
<p class="certificate-des">{{ $t('cert.txt5') }}</p>
</div>
</app-frame>
</template> </template>
<script> <script>
export default { export default {
...@@ -35,65 +37,122 @@ export default { ...@@ -35,65 +37,122 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.certificate { .is-pc{
padding: 40px; .certificate {
text-align: center; padding: 40px;
.checkbox { text-align: center;
display: flex; .checkbox {
width: 450px; display: flex;
margin: 0 auto; width: 450px;
p { margin: 0 auto;
width: 50%; p {
width: 50%;
text-align: center;
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 34px;
color: #424242;
i {
display: inline-block;
width: 22px;
height: 22px;
background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
background-size: 22px 22px;
margin-right: 10px;
vertical-align: middle;
}
}
}
.text {
text-align: center; text-align: center;
font-size: 22px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 400;
line-height: 34px; line-height: 34px;
color: #424242; color: #424242;
i { margin-top: 40px;
display: inline-block; }
width: 22px; img {
height: 22px; display: block;
background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png'); width: 376px;
background-size: 22px 22px; height: 291px;
margin-right: 10px; margin: 40px auto;
vertical-align: middle; }
} .certificate-title {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #424242;
margin-top: 26px;
}
.certificate-des {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #aa1941;
} }
} }
.text { }
.is-h5{
.certificate {
padding: .3rem .52rem;
text-align: center; text-align: center;
font-size: 16px; .checkbox {
font-family: Source Han Sans CN; display: flex;
font-weight: 400; // width: 450px;
line-height: 34px; margin: 0 auto;
color: #424242; p {
margin-top: 40px; width: 50%;
} text-align: center;
img { // font-size: .12rem;
display: block; font-family: Source Han Sans CN;
width: 376px; font-weight: 500;
height: 291px; line-height: .17rem;
margin: 40px auto; color: #424242;
} i {
.certificate-title { display: inline-block;
font-size: 16px; width: .18rem;
font-family: Source Han Sans CN; height: .18rem;
font-weight: 400; background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
line-height: 34px; background-size: .18rem .18rem;
color: #424242; margin-right: .05rem;
margin-top: 26px; vertical-align: middle;
} }
.certificate-des { }
font-size: 14px; }
font-family: Source Han Sans CN; .text {
font-weight: 400; text-align: center;
line-height: 34px; font-size: .12rem;
color: #aa1941; 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>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<ul class="card"> <app-frame :data="frameParams">
<li v-for="item in list" :key="item.title"> <ul class="card">
<div class="left"> <li v-for="item in list" :key="item.title">
<img :src="item.img" /> <div class="left">
</div> <img :src="item.img" />
<div class="right"> </div>
<h5>{{ item.title }}</h5> <div class="right">
<p v-for="text in item.texts" :key="text">{{ text }}</p> <h5>{{ item.title }}</h5>
</div> <p v-for="text in item.texts" :key="text">{{ text }}</p>
</li> </div>
</ul> </li>
</app-frame> </ul>
</app-frame>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -53,44 +55,90 @@ export default { ...@@ -53,44 +55,90 @@ export default {
] ]
} }
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .is-pc{
width: 763px; .card {
margin: 0 auto 0; width: 763px;
padding: 80px 0 30px; margin: 0 auto 0;
li { padding: 80px 0 30px;
height: 205px; li {
background: #f9f8f8; height: 205px;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09); background: #f9f8f8;
margin-bottom: 50px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
display: flex; margin-bottom: 50px;
.left { display: flex;
width: 212px; .left {
// background:#fcfcfc; width: 212px;
img { // background:#fcfcfc;
width: 120px; img {
height: 120px; width: 120px;
margin: 43px 0 0 47px; height: 120px;
margin: 43px 0 0 47px;
}
}
.right {
width: calc(100% - 212px);
padding-top: 20px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 44px;
color: #333333;
}
p {
color: #424242;
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 36px;
}
} }
} }
.right { }
width: calc(100% - 212px); }
padding-top: 20px; .is-h5{
h5 { .card {
font-size: 22px; background: #fff;
font-family: Source Han Sans CN; // padding: .24rem .15rem .56rem;
font-weight: 500; li {
line-height: 44px; background: #f9f8f8;
color: #333333; 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;
}
} }
p { .right {
color: #424242; margin-left: .23rem;
font-size: 16px; h5 {
font-family: Source Han Sans CN; font-size: .12rem;
line-height: 36px; 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;
}
} }
} }
} }
......
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论