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 {
{
name: '项目介绍',
children: [
{ name: '项目背景', path: '/project/bg' },
{ name: '项目特色', path: '/project/charac' },
{ name: '证书授权', path: '/project/certificate' }
{ name: '项目背景', path: '/project-intro/bg' },
{ name: '项目特色', path: '/project-intro/charac' },
{ name: '证书授权', path: '/project-intro/certificate' }
]
},
{
......
pages/about/course.vue
浏览文件 @ 5057a4d1
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="course-content-box">
<div class="course-content-box" v-if="!isMobile">
<div class="content-mian">
<div class="border-box">
<template v-for="(item, index) in courseData">
......@@ -19,7 +20,19 @@
</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>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -92,60 +105,67 @@ export default {
}
}
},
mounted() {}
mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.course-content-box {
width: 1200px;
margin: 0 auto;
.content-mian {
padding: 106px 141px 110px 96px;
.border-box {
padding: 35px 0 51px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
.item-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
ul {
padding-bottom: 37px;
border-bottom: 1px solid #e6e6e6;
}
&:last-child {
border-bottom: none;
margin-bottom: 0;
.is-pc{
.course-content-box {
width: 1200px;
margin: 0 auto;
.content-mian {
padding: 106px 141px 110px 96px;
.border-box {
padding: 35px 0 51px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
.item-box {
// display: flex;
// justify-content: space-between;
margin-bottom: 40px;
ul {
padding-bottom: 37px;
border-bottom: none;
border-bottom: 1px solid #e6e6e6;
}
}
.title {
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;
&:last-child {
border-bottom: none;
margin-bottom: 0;
ul {
padding-bottom: 37px;
border-bottom: none;
}
.score {
font-size: 16px;
color: #424242;
}
.title {
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 {
}
}
}
.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>
pages/about/teacher.vue
浏览文件 @ 5057a4d1
<template>
<app-frame :data="frameParams">
<div class="teacher-content-box">
<div class="content-box">
<div class="teacher-box">
<div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
<div class="title">{{ item.title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.list">
<li :key="cIndex + '='">
<img :src="cItem.image" alt="" />
<div class="name">{{ cItem.name }}</div>
<div class="p" v-html="cItem.intr"></div>
</li>
</template>
</ul>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="teacher-content-box">
<div class="content-box">
<div class="teacher-box">
<div class="mar-t-box" v-for="(item, index) in teacherList" :key="index">
<div class="title">{{ item.title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.list">
<li :key="cIndex + '='">
<img :src="cItem.image" alt="" />
<div class="name">{{ cItem.name }}</div>
<div class="p" v-html="cItem.intr"></div>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
</app-frame>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -116,50 +118,102 @@ export default {
}
}
},
mounted() {}
mounted() {},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.teacher-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding: 60px 75px 61px;
.teacher-box {
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
li {
width: 180px;
margin-right: 140px;
margin-bottom: 40px;
&:nth-child(3n + 3) {
margin-right: 0;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 18px;
color: #aa1941;
line-height: 100%;
margin-top: 20px;
margin-bottom: 10px;
.is-pc{
.teacher-content-box {
width: 1200px;
margin: 0 auto;
.content-box {
padding: 60px 75px 61px;
.teacher-box {
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
li {
width: 180px;
margin-right: 140px;
margin-bottom: 40px;
&:nth-child(3n + 3) {
margin-right: 0;
}
img {
display: block;
width: 100%;
}
.name {
font-size: 18px;
color: #aa1941;
line-height: 100%;
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>
<app-frame :data="frameParams">
<div class="outstanding">
<div class="alumni">
<h5>{{ $t('outstanding.title1') }}</h5>
<ul class="card-list">
<li v-for="(item, index) in alumniList" :key="index">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.post" :key="it">{{ it }}</p>
</div>
</li>
</ul>
<h5>{{ $t('outstanding.title2') }}</h5>
<ul class="card-list">
<li v-for="item in studentList" :key="item.name">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.education" :key="it">{{ it }}</p>
<div v-for="it in item.post" :key="it">{{ it }}</div>
</div>
</li>
</ul>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="outstanding">
<div class="alumni">
<h5>{{ $t('outstanding.title1') }}</h5>
<ul class="card-list">
<li v-for="(item, index) in alumniList" :key="index">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.post" :key="it">{{ it }}</p>
</div>
</li>
</ul>
<h5>{{ $t('outstanding.title2') }}</h5>
<ul class="card-list">
<li v-for="item in studentList" :key="item.name">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.education" :key="it">{{ it }}</p>
<div v-for="it in item.post" :key="it">{{ it }}</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</app-frame>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -146,75 +148,155 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.alumni {
padding: 30px 74px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 74px;
color: #333333;
}
.card-list {
margin-bottom: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
.is-pc{
.alumni {
padding: 30px 74px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 74px;
color: #333333;
}
.card-list {
margin-bottom: 30px;
display: flex;
margin: 0 20px 21px 0;
transition: 0.5s ease-in-out;
.avatar {
width: 204px;
height: 100%;
img {
width: 157px;
height: 157px;
margin: 20px 0 0 23px;
}
}
.text {
margin-top: 72px;
h6 {
font-size: 18px;
font-family: HelveticaNeueLTPro-Md;
line-height: 18px;
color: #aa1941;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
display: flex;
margin: 0 20px 21px 0;
transition: 0.5s ease-in-out;
.avatar {
width: 204px;
height: 100%;
img {
width: 157px;
height: 157px;
margin: 20px 0 0 23px;
}
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 22px;
color: #666;
.text {
margin-top: 72px;
h6 {
font-size: 18px;
font-family: HelveticaNeueLTPro-Md;
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;
font-family: Source Han Sans CN;
font-weight: 300;
line-height: 18px;
color: #666;
}
li:nth-child(even) {
margin-right: 0;
}
li:hover {
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 {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
.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;
}
}
}
}
......
pages/apply/problem.vue
浏览文件 @ 5057a4d1
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="problem-content-box">
<div class="content-box">
......@@ -18,6 +19,7 @@
</div>
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
......@@ -87,36 +89,77 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.problem-content-box {
.content-box {
padding: 54px 104px 90px 87px;
.problem-item-box {
margin-bottom: 80px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
padding-top: 30px;
li {
margin-bottom: 15px;
.pro-tit {
font-size: 16px;
font-weight: bold;
line-height: 32px;
color: #666666;
border-bottom: 1px solid #e6e6e6;
.is-pc{
.problem-content-box {
.content-box {
padding: 54px 104px 90px 87px;
.problem-item-box {
margin-bottom: 80px;
.title {
font-size: 22px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
ul {
padding-top: 30px;
li {
margin-bottom: 15px;
.pro-tit {
font-size: 16px;
font-weight: bold;
line-height: 32px;
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 {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
......@@ -78,7 +83,7 @@ export default {
padding: .3rem .2rem;
.content-box {
.text-content {
padding-left: .4rem;
padding-left: .2rem;
.title {
font-size: 0.14rem;
font-weight: bold;
......
pages/project-intro/bg.vue
浏览文件 @ 5057a4d1
<template>
<app-frame :data="frameParams">
<div class="project-bg-main">
<ul class="tabs">
<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 :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<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>
<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 class="kelley" v-if="tabActive === 'kelley'">
<div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" />
<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="text">
<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 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="lhbx" v-if="tabActive === 'lhbx'">
<div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" />
<div class="project-bg-main" v-else>
<ul class="tabs">
<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 class="text">
<p>
本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目，同时结合Kelley商学院金融学硕士的全球领先地位，引领中国金融教育实践，旨在培养具有国际视野、具备金融专业能力与实践创新能力，通晓国际金融规则和行业实践经验的金融专业人才。
</p>
<p>
项目采用中英双语授课，学制为在职15个月（学籍最长可保留5年）。共设有三大模块近20余门学位课程，并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式，学习期间安排一次集中强化式赴美访学。
</p>
<p>
项目学习结束后，满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书，该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。
</p>
<p>
世界最发达经济体与世界最大新兴经济体互相合作与学习，美国顶级商学院Kelley School of
Business与清华控股旗下紫荆教育紧密携手，依托清华大学五道口金融学院和美国印第安纳大学Kelley商学院的优质教学资源，打造最原汁原味、最接近实战的金融学硕士学位课程。
</p>
<div class="kelley" v-if="tabActive === 'kelley'">
<div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png" />
</div>
<div class="text" v-html="$t('bg.con2Txt')"></div>
</div>
<div class="lhbx" v-if="tabActive === 'lhbx'">
<div class="sub-banner">
<img src="https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png" />
</div>
<div class="text" v-html="$t('bg.con3Txt')"></div>
</div>
</div>
</div>
</app-frame>
</app-frame>
</div>
</template>
<script>
import TabNav from './components/TabNav'
import TabContent from './components/TabContent'
export default {
layout: 'normal',
components: {
TabNav,
TabContent
},
data() {
return {
showIndex: 0,
tabActive: 'zjjy',
list: [
{ name: 'zjjy', label: this.$t('bg.tabBtn1') },
......@@ -110,86 +117,161 @@ export default {
]
}
}
},
methods: {
tabChange(n) {
this.showIndex = n
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.project-bg-main {
padding: 42px 64px 50px;
.tabs {
margin-top: 42px;
display: flex;
justify-content: space-between;
li {
background: #fbfbfb;
width: 32%;
height: 83px;
line-height: 83px;
border-top: 8px solid #fbfbfb;
font-size: 26px;
font-family: Source Han Sans CN;
color: #333;
text-align: center;
cursor: pointer;
.is-pc{
.project-bg-main {
padding: 42px 64px 50px;
.tabs {
margin-top: 42px;
display: flex;
justify-content: space-between;
li {
background: #fbfbfb;
width: 32%;
height: 83px;
line-height: 83px;
border-top: 8px solid #fbfbfb;
font-size: 26px;
font-family: Source Han Sans CN;
color: #333;
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 {
border-color: #aa1941;
color: #aa1941;
background-color: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
.sub-banner {
margin-top: 18px;
height: 302px;
img {
width: 100%;
height: 100%;
}
}
}
.sub-banner {
margin-top: 18px;
height: 302px;
img {
width: 100%;
height: 100%;
.text {
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 32px;
color: #424242;
letter-spacing: 1px;
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;
font-family: Source Han Sans CN;
line-height: 32px;
color: #424242;
letter-spacing: 1px;
margin-top: 40px;
}
::v-deep{
// .is-h5{
.main-page-content{
background-color: #eee !important;
// }
}
.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;
}
.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;
}
}
> span {
font-size: 16px;
line-height: 34px;
color: #666666;
img{
width: 2.59rem;
margin-left: .08rem;
margin-top: .27rem;
display: block;
}
}
.el-divider {
height: 100%;
float: right;
}
}
.tag-item.big {
width: 240px;
.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;
}
}
}
}
}
......
pages/project-intro/certificate.vue
浏览文件 @ 5057a4d1
<template>
<app-frame :data="frameParams">
<div class="certificate">
<div class="checkbox">
<p><i></i>{{ $t('cert.txt1') }}</p>
<p><i></i>{{ $t('cert.txt2') }}</p>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="certificate">
<div class="checkbox">
<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>
<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>
</app-frame>
</app-frame>
</div>
</template>
<script>
export default {
......@@ -35,65 +37,122 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.certificate {
padding: 40px;
text-align: center;
.checkbox {
display: flex;
width: 450px;
margin: 0 auto;
p {
width: 50%;
.is-pc{
.certificate {
padding: 40px;
text-align: center;
.checkbox {
display: flex;
width: 450px;
margin: 0 auto;
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;
font-size: 22px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
font-weight: 400;
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;
}
margin-top: 40px;
}
img {
display: block;
width: 376px;
height: 291px;
margin: 40px auto;
}
.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;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #424242;
margin-top: 40px;
}
img {
display: block;
width: 376px;
height: 291px;
margin: 40px auto;
}
.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;
.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>
\ No newline at end of file
pages/project-intro/charac.vue
浏览文件 @ 5057a4d1
<template>
<app-frame :data="frameParams">
<ul class="card">
<li v-for="item in list" :key="item.title">
<div class="left">
<img :src="item.img" />
</div>
<div class="right">
<h5>{{ item.title }}</h5>
<p v-for="text in item.texts" :key="text">{{ text }}</p>
</div>
</li>
</ul>
</app-frame>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<ul class="card">
<li v-for="item in list" :key="item.title">
<div class="left">
<img :src="item.img" />
</div>
<div class="right">
<h5>{{ item.title }}</h5>
<p v-for="text in item.texts" :key="text">{{ text }}</p>
</div>
</li>
</ul>
</app-frame>
</div>
</template>
<script>
export default {
......@@ -53,44 +55,90 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.card {
width: 763px;
margin: 0 auto 0;
padding: 80px 0 30px;
li {
height: 205px;
background: #f9f8f8;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
margin-bottom: 50px;
display: flex;
.left {
width: 212px;
// background:#fcfcfc;
img {
width: 120px;
height: 120px;
margin: 43px 0 0 47px;
.is-pc{
.card {
width: 763px;
margin: 0 auto 0;
padding: 80px 0 30px;
li {
height: 205px;
background: #f9f8f8;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
margin-bottom: 50px;
display: flex;
.left {
width: 212px;
// background:#fcfcfc;
img {
width: 120px;
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;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 44px;
color: #333333;
}
}
.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;
}
}
p {
color: #424242;
font-size: 16px;
font-family: Source Han Sans CN;
line-height: 36px;
.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;
}
}
}
}
......
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论