Skip to content

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

pc，h5合并

上级 fabe72b6
隐藏空白字符变更
内嵌 并排
正在显示 包含 416 行增加 和 155 行删除
components/appFrame.vue
浏览文件 @ 68ff2cad
......@@ -91,8 +91,9 @@ export default {
}
.main-page-banner {
display: block;
height: 1.2rem;
object-fit: cover;
width: 100%;
// height: 1.2rem;
// object-fit: cover;
}
.main-page-content {
background-color: #fff;
......
pages/apply/support.vue
浏览文件 @ 68ff2cad
......@@ -42,6 +42,11 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
......
pages/project-intro/bg.vue
浏览文件 @ 68ff2cad
<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.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx.jpg" />
<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 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.oss-cn-beijing.aliyuncs.com/project/marywood/mary-new-tabimg.jpg" />
<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="kelley" v-if="tabActive === 'kelley'">
<div class="sub-banner">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx.jpg" />
</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.oss-cn-beijing.aliyuncs.com/project/marywood/mary-new-tabimg.jpg" />
</div>
<div class="text" v-html="$t('bg.con3Txt')"></div>
</div>
<div class="text" v-html="$t('bg.con3Txt')"></div>
</div>
</div>
</app-frame>
</app-frame>
</div>
</template>
<script>
import TabNav from './components/TabNav'
import TabContent from './components/TabContent'
export default {
components: {
TabNav,
TabContent
},
layout: 'normal',
data() {
return {
showIndex: 0,
tabActive: 'zjjy',
list: [
{ name: 'zjjy', label: this.$t('bg.tabBtn1') },
......@@ -83,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
浏览文件 @ 68ff2cad
<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="certificate">
<app-frame :data="frameParams">
<div class="certificate-main">
<img
class="cert-img"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood-cert-new2.png"
/>
</div>
</app-frame>
</div>
</div>
</template>
<script>
export default {
......@@ -32,10 +35,31 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.is-pc{
.cert-img{
display: block;
width: 600px;
// height: 291px;
margin: 40px auto;
}
}
.is-h5{
.cert-img{
display: block;
width: 100%;
// height: 291px;
margin: 40px auto;
}
}
.certificate-main {
padding: 40px;
text-align: center;
......@@ -71,12 +95,6 @@ export default {
color: #424242;
margin-top: 40px;
}
img {
display: block;
width: 600px;
// height: 291px;
margin: 40px auto;
}
.certificate-title {
font-size: 16px;
font-family: Source Han Sans CN;
......
pages/project-intro/charac.vue
浏览文件 @ 68ff2cad
<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
浏览文件 @ 68ff2cad
<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
浏览文件 @ 68ff2cad
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论