<template>
|
<div class="main">
|
<div class="banner">
|
<img :src="url" alt="">
|
</div>
|
|
<div class="wrapper caseDetail" :class="item.TypeCharOne === 'Wico' && !item.Title1 && 'nomargin'" v-for="(item, index) in details" :key="index">
|
<div v-if="item.TypeCharOne === 'WLongText'">
|
<div class="content_title"><span v-if="item.Title1" v-text="item.Title1"></span></div>
|
<div v-for="(cell, i) in item.subs" :key="i">
|
<div class="content_title_p" v-if="cell.type === 'text'" style="margin: .1rem auto .1rem;" :style="!i && 'margin-top: 0.4rem;'" v-text="cell.value"></div>
|
<div class="content-img" v-else-if="cell.type === 'img'"><img :src="cell.value" alt=""></div>
|
</div>
|
</div>
|
<div class="p_backg" v-if="item.TypeCharOne === 'Wico'">
|
<div class="wrapper">
|
<div class="project">
|
<h3 :class="!item.Title1 && 'noborder'"><span v-if="item.Title1" v-text="item.Title1"></span></h3>
|
<div class="program">
|
<dl v-for="(cell, i) in item.DOne" :key="i">
|
<dt><img :src="cell.Images" alt=""></dt>
|
<dd class="m_hide" v-text="cell.Title1"></dd>
|
<dd class="p_hide">
|
<p v-for="(title, t) in cell.Title1.split('、')" :key="t" v-text="title"></p>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="wrapper" v-if="item.TypeCharOne === 'Wcontent'">
|
<div class="content-box">
|
<h3><span v-if="item.Title1" v-text="item.Title1"></span></h3>
|
<ul class="scene">
|
<li style="margin-bottom: 0.2rem;" v-for="(cell, i) in item.DOne" :key="i">
|
<img :src="cell.Images" alt="">
|
<p v-text="cell.Title1"></p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="wrapper" style="margin-bottom: 0.3rem;" v-if="item.TypeCharOne === 'Wimages'">
|
<div class="content-bottom">
|
<h3 class="h3"><span v-if="item.Title1" v-text="item.Title1"></span></h3>
|
</div>
|
<div class="partner">
|
<div v-for="(cell, i) in item.DOne" :key="i">
|
<img :src="cell.Images" alt="">
|
</div>
|
</div>
|
</div>
|
<!-- <div class="title">
|
<a class="m_hide" style="visibility: hidden;">了解更多</a>
|
<a class="title-m">查看更多</a>
|
</div> -->
|
</div>
|
<div class="wrapper other" v-if="otherlist">
|
<div class="content_title"><span v-text="othertype.name"></span></div>
|
<div class="content_skill">
|
<div class="content_skill_item" v-for="(other, index) in otherlist" :key="index">
|
<img :src="other.Image2" alt="" @click="jumpmenu(other)">
|
<p v-text="other.Title1"></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
menuId: null,
|
url: null,
|
details: null,
|
otherlist: null
|
}
|
},
|
watch: {
|
$route () {
|
this.menuId = this.$route.params.menuId
|
this.load()
|
}
|
},
|
methods: {
|
jumpmenu (menu) {
|
this.$router.push({name: menu.PageType.toLowerCase(), params: {menuId: menu.ID}})
|
},
|
load () {
|
let param = {
|
func: 'Web_productCenter_GetData',
|
ID: this.menuId
|
}
|
this.Service.getParamData(param).then(res => {
|
this.url = res.Image1
|
this.details = res.Detail.map(item => {
|
if (item.TypeCharOne === 'WLongText') {
|
item.subs = []
|
item.DOne.forEach(cell => {
|
if (cell.LongText) {
|
item.subs.push({
|
type: 'text',
|
value: cell.LongText
|
})
|
} else if (cell.Images) {
|
item.subs.push({
|
type: 'img',
|
value: cell.Images
|
})
|
}
|
})
|
}
|
return item
|
})
|
this.othertype = {
|
type: res.Type,
|
name: res.TypeName
|
}
|
this.otherlist = res.LinkDetail
|
})
|
}
|
},
|
created () {
|
this.menuId = this.$route.params.menuId
|
},
|
mounted () {
|
this.load()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.main {
|
min-height: 60vh;
|
}
|
.other {
|
margin-top: 0.7rem;
|
.content_skill {
|
display: flex;
|
.content_skill_item {
|
padding: 0.4rem 0.2rem;
|
flex: 1;
|
img {
|
cursor: pointer;
|
}
|
p {
|
color: #3A3A3C;
|
margin: 0.2rem 0;
|
text-align: center;
|
font-size: 0.16rem;
|
}
|
}
|
}
|
}
|
.warpper {
|
width: 100%;
|
}
|
|
.caseDetail {
|
margin: 0;
|
width: 100%;
|
}
|
.project {
|
padding: 0.2rem 0 0.3rem;
|
}
|
h3 {
|
font-size: 0.16rem;
|
color: #3A3A3C;
|
padding-left: .06rem;
|
margin-top: 0.2rem;
|
position: relative;
|
}
|
h3::after {
|
content: '';
|
width:0.09rem;
|
height:0.45rem;
|
background:rgba(0,112,192,1);
|
position: absolute;
|
top: 0.05rem;
|
left: 0;
|
}
|
.content-img{
|
box-sizing: border-box;
|
margin: .4rem auto 0;
|
}
|
@media (max-width: 750px) and (min-width: 0){
|
.banner {
|
margin-top: 1.13rem;
|
img {
|
max-width: none;
|
width: 140%;
|
margin-left: -20%;
|
}
|
}
|
.three_box{
|
margin: 0.4rem 0.3rem 0.8rem;
|
display: flex;
|
|
div{
|
flex: 1;
|
padding-right: 0.3rem;
|
}
|
div:last-child{
|
padding-right: 0;
|
}
|
}
|
.wrapper {
|
h3 {
|
font-size: 0.36rem;
|
}
|
h3:after {
|
width: 0.07rem;
|
height: 0.42rem;
|
}
|
}
|
h3 {
|
font-size: .4rem;
|
padding-left: 0.2rem;
|
}
|
.h3::after{
|
width:1.15rem;
|
height:0.06rem;
|
background:rgba(0,112,192,1);
|
position: absolute;
|
top: 0.05rem;
|
left: calc(50% - 0.85rem);
|
}
|
h3.noborder::after {
|
content: none;
|
}
|
h3.noborder {
|
margin: 0;
|
}
|
.content_title_p {
|
color: #3e3e3e;
|
margin: 0 auto !important;
|
font-size: 0.26rem;
|
font-family: PingFang-SC-Regular;
|
font-weight: 400;
|
color: rgba(62,62,62,1);
|
line-height: 0.44rem;
|
}
|
.content_title,.content_title_p{
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0.2rem .43rem 0;
|
}
|
.content-img {
|
width: 100%;
|
}
|
.project{
|
background: #f9f9f9;
|
box-sizing: border-box;
|
margin: .1rem auto;
|
padding: .1rem 0;
|
.program {
|
width: 100%;
|
height: auto;
|
display: flex;
|
padding: .34rem 0;
|
dl {
|
flex: 1;
|
dt {
|
width: .8rem;
|
height: .8rem;
|
margin: 0 auto;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
dd {
|
text-align: center;
|
padding-top: .07rem;
|
p {
|
font-size: 0.26rem;
|
}
|
}
|
}
|
}
|
}
|
.caseDetail.nomargin {
|
margin-top: 0;
|
.project {
|
padding-top: 0;
|
margin-top: -0.1rem;
|
.program {
|
margin-top: 0;
|
}
|
}
|
}
|
.content-box {
|
background: #f9f9f9;
|
box-sizing: border-box;
|
margin: .4rem auto;
|
padding: .1rem 0;
|
ul {
|
width: 100%;
|
height: auto;
|
display: flex;
|
flex-wrap: wrap;
|
margin: .2rem 0;
|
li {
|
width: 50%;
|
padding: .08rem .18rem;
|
img {
|
display: block;
|
width: 100%;
|
height: 1.8rem;
|
background: #747474;
|
}
|
p {
|
text-align: center;
|
margin: .1rem 0;
|
}
|
}
|
}
|
}
|
.content-bottom {
|
width: 94%;
|
box-sizing: border-box;
|
margin: .4rem auto 0;
|
padding: .1rem 0;
|
h3 {
|
text-align: center;
|
border:none;
|
margin-bottom: .3rem;
|
}
|
ul {
|
width: 100%;
|
height: auto;
|
display: flex;
|
flex-wrap: wrap;
|
li {
|
width: 33.3%;
|
padding: .08rem .1rem;
|
img {
|
display: block;
|
width: 100%;
|
height: .98rem;
|
background: #747474;
|
border: 1px #000 dashed;
|
}
|
}
|
}
|
}
|
.title{
|
text-align: center;
|
margin-bottom: 1.05rem;
|
a:first-child {
|
display: none;
|
}
|
.title-m {
|
display: inline-block;
|
width: 3.38rem;
|
height: 1.04rem;
|
line-height: 1.04rem;
|
border: 1px solid #52B6E7;
|
color: #52B6E7;
|
}
|
}
|
.partner {
|
display: flex;
|
margin-top: 0.1rem;
|
}
|
.partner div {
|
flex: 1;
|
text-align: center;
|
padding-right: 0.3rem;
|
}
|
.partner div:last-child {
|
padding-right: 0;
|
}
|
.scene {
|
li p {
|
font-size: 0.26rem;
|
}
|
}
|
}
|
@media (min-width: 751px){
|
h3 {
|
span {
|
padding-left: 0.2rem;
|
}
|
}
|
h3.noborder::after {
|
content: none;
|
}
|
h3.noborder {
|
margin: 0;
|
}
|
.partner {
|
display: flex;
|
margin-top: 0.4rem;
|
}
|
.partner div {
|
flex: 1;
|
text-align: center;
|
}
|
h3::after {
|
content: '';
|
width: 0.06rem;
|
height: 0.3rem;
|
background: #0070c0;
|
position: absolute;
|
top: -0.03rem;
|
left: 0.1rem;
|
}
|
.content-bottom {
|
.h3 {
|
padding-left: 0.05rem;
|
span {
|
padding-left: 0.15rem;
|
}
|
}
|
.h3::after {
|
width: 0.06rem;
|
height: 0.3rem;
|
left: 0.05rem;
|
top: -0.02rem;
|
}
|
}
|
.p_backg {
|
background-color: #f9fbfd;
|
}
|
.caseDetail {
|
margin-top: 0.35rem;
|
.content_title {
|
margin: 0 auto;
|
}
|
.content_title_p {
|
font-size: 0.16rem;
|
color: #747474;
|
line-height: .22rem;
|
width: 11.92rem;
|
margin: 0 auto;
|
}
|
}
|
.caseDetail.nomargin {
|
margin-top: 0rem;
|
.project {
|
padding-top: 0px;
|
.program {
|
margin-top: 0;
|
}
|
}
|
}
|
.project {
|
width: 100%;
|
background: #f9fbfd;
|
}
|
.content-box {
|
width: 100%;
|
padding: .15rem 0 .15rem;
|
ul {
|
width: 100%;
|
height: auto;
|
display: flex;
|
flex-wrap: wrap;
|
li {
|
width: 33.3%;
|
padding: .08rem .1rem;
|
img {
|
display: block;
|
width: 100%;
|
background: #747474;
|
}
|
p {
|
text-align: center;
|
margin: .1rem 0;
|
}
|
}
|
}
|
}
|
// .content-bottom {
|
// width: 100%;
|
// ul {
|
// width: 100%;
|
// height: auto;
|
// display: flex;
|
// flex-wrap: wrap;
|
// li {
|
// width: 33.3%;
|
// padding: .08rem .1rem;
|
// img {
|
// display: block;
|
// width: 100%;
|
// height: .8rem;
|
// background: #747474;
|
// }
|
// p {
|
// text-align: center;
|
// margin: .1rem 0;
|
// }
|
// }
|
// }
|
// }
|
.title {
|
width: 100%;
|
text-align: center;
|
a {
|
display: inline-block;
|
margin: 0 auto .8rem;
|
border-bottom: 1px solid #0070c0;
|
color: #0070c0;
|
}
|
.title-m {
|
display: none;
|
}
|
}
|
.content-img {
|
width: 12.32rem;
|
height: auto;
|
margin-top: 0.4rem;
|
}
|
.program {
|
width: 100%;
|
height: auto;
|
display: flex;
|
margin: .2rem 0;
|
dl {
|
flex: 1;
|
dt {
|
width: .94rem;
|
height: .94rem;
|
margin: 0 auto;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
dd {
|
text-align: center;
|
padding-top: .07rem;
|
}
|
}
|
}
|
.program:first-child {
|
margin-left: -0.55rem;
|
}
|
.scene {
|
width: 100%;
|
height: 4.82rem;
|
margin: .2rem 0;
|
}
|
// .partner {
|
// width: 100%;
|
// height: auto;
|
// box-sizing: border-box;
|
// margin: .2rem 0 .4rem 0;
|
// }
|
}
|
</style>
|
