Skip to content

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

pc和h5整合

上级 e4d13bf2
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 756 行增加 和 325 行删除
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
差异被折叠。
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论