<template>
|
<div class="main">
|
<div class="banner"><img :src="url" alt=""></div>
|
<div v-for="(item, index) in details" :key="index">
|
<div v-if="item.type === 'WLongText'" class="wrapper platform">
|
<div class="content_title"><span v-if="item.title" v-text="item.title"></span></div>
|
<p v-text="item.longText"></p>
|
</div>
|
<div v-else-if="item.type === 'Wimages'" class="wrapper scene">
|
<div class="content_title"><span v-if="item.title" v-text="item.title"></span></div>
|
<div class="content_scene">
|
<span class="scene scene-img" v-for="(img, index) in item.imglist" :key="index">
|
<img :src="img.url" alt="">
|
<span class="txt" :class="'txt' + img.position" :style="'color:' + img.color">
|
<p v-text="img.title"></p>
|
<p v-text="img.tip"></p>
|
</span>
|
</span>
|
</div>
|
</div>
|
<div v-else-if="item.type === 'Wico'" class="wrapper skill">
|
<div class="content_title"><span v-if="item.title" v-text="item.title"></span></div>
|
<div class="content_skill">
|
<div class="content_skill_item" v-for="(icon, index) in item.iconlist" :key="index">
|
<div><img :src="icon.url" alt=""></div>
|
<p v-text="icon.title"></p>
|
</div>
|
</div>
|
</div>
|
<div v-else-if="item.type === 'Wcontent'" class="wrapper industry">
|
<div class="content_title"><span v-if="item.title" v-text="item.title"></span></div>
|
<div class="content_industry" v-for="(m, n) in Math.ceil(item.sublist.length / 2)" :key="n">
|
<div class="content_industry_card" v-if="index >= n * 2 && index < (n + 1) * 2" v-for="(cell, index) in item.sublist" :key="index">
|
<h3 v-text="cell.title"></h3>
|
<p v-text="cell.tip"></p>
|
<div class="content_industry_list">
|
<ul>
|
<li v-for="(text, i) in cell.details" :key="i">· <span v-text="text"></span></li>
|
</ul>
|
<img :src="cell.url" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="wrapper industry 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 class="wrapper joinBtnBox" v-if="details">
|
<router-link to="/partner#4" tag="el-button">申请加入</router-link>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
menuId: null,
|
url: null,
|
details: null,
|
othertype: 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(det => {
|
let item = {
|
type: det.TypeCharOne,
|
title: det.Title1
|
}
|
if (item.type === 'WLongText') {
|
item.longText = det.DOne[0].LongText
|
} else if (item.type === 'Wimages') {
|
item.imglist = det.DOne.map(cell => {
|
return {
|
title: cell.CDefine1,
|
tip: cell.CDefine2,
|
url: cell.Images,
|
position: cell.TypeCharThree,
|
color: cell.TypeCharTwo
|
}
|
})
|
} else if (item.type === 'Wico') {
|
item.iconlist = det.DOne.map(cell => {
|
return {
|
url: cell.Images,
|
title: cell.Title1
|
}
|
})
|
} else if (item.type === 'Wcontent') {
|
item.sublist = det.DOne.map(cell => {
|
return {
|
url: cell.Images,
|
title: cell.Title1,
|
tip: cell.LongText,
|
details: cell.DTwo.map(two => {
|
return two.Title1
|
})
|
}
|
})
|
}
|
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;
|
}
|
@media (min-width: 751px){
|
.banner {
|
margin-bottom: 0.5rem;
|
}
|
.m_img {
|
display: none;
|
}
|
.platform {
|
.content_title {
|
margin: 0.1rem 0 0.38rem;
|
}
|
p {
|
font-size: 0.14rem;
|
color: #676767;
|
line-height: .22rem;
|
}
|
}
|
.scene {
|
margin: 0 auto;
|
position: relative;
|
cursor: pointer;
|
|
.txt {
|
position: absolute;
|
width: 33%;
|
height: 33%;
|
left: 0;
|
top: 0;
|
font-size: 18px;
|
font-family: MicrosoftYaHei-Bold;
|
font-weight: bold;
|
text-align: center;
|
padding: 0.1rem;
|
white-space:nowrap;
|
}
|
.txt2 {
|
top: 0;
|
left: 33%;
|
white-space: normal;
|
}
|
.txt3 {
|
left: auto;
|
top: 0;
|
right: 0;
|
white-space: normal;
|
}
|
.txt4 {
|
top: 33%;
|
}
|
.txt5 {
|
left: 33%;
|
top: 33%;
|
white-space: normal;
|
}
|
.txt6 {
|
left: auto;
|
top: 33%;
|
right: 0;
|
white-space: normal;
|
}
|
.txt7 {
|
height: auto;
|
top: auto;
|
bottom: 0;
|
}
|
.txt8 {
|
height: auto;
|
top: auto;
|
bottom: 0;
|
left: 33%;
|
white-space: normal;
|
}
|
.txt9 {
|
height: auto;
|
top: auto;
|
left: auto;
|
bottom: 0;
|
right: 0;
|
white-space: normal;
|
}
|
.content_title {
|
margin: .53rem 0 0.52rem;
|
}
|
.content_scene {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
span {
|
display: inline-block;
|
margin-bottom: .15rem;
|
}
|
}
|
}
|
.scene-img {
|
z-index: 1;
|
transform: scale(1);
|
transition: all 0.5s;
|
}
|
.scene-img:hover {
|
transform: scale(1.1);
|
z-index: 10;
|
}
|
.center .skill {
|
.content_title {
|
margin: 0.69rem 0 0.63rem;
|
}
|
}
|
.industry {
|
.content_title {
|
margin: 1.06rem 0 0.69rem;
|
}
|
.content_industry {
|
display: flex;
|
.content_industry_card {
|
width: 50%;
|
background: rgba(244,244,244,1);
|
margin-right: 0.33rem;
|
padding: 0.19rem 0.22rem 0.35rem;
|
position: relative;
|
h3 {
|
margin-bottom: 0.16rem;
|
a {
|
font-size: 0.22rem;
|
color: #3A3A3C;
|
text-decoration: underline;
|
}
|
}
|
p {
|
min-height:1rem;
|
font-size:0.14rem;
|
font-family:MicrosoftYaHei;
|
font-weight:400;
|
color:rgba(103,103,103,1);
|
line-height:0.25rem;
|
}
|
.content_industry_list {
|
position: relative;
|
display: flex;
|
margin-top: 0.27rem;
|
min-height: 150px;
|
ul {
|
margin-right: .4rem;
|
li {
|
font-size: 0.14rem;
|
line-height: 0.25rem;
|
}
|
}
|
img {
|
position: absolute;
|
right: 0rem;
|
top: 0rem;
|
max-width: 356px;
|
max-height: 150px;
|
}
|
}
|
}
|
}
|
.content_industry:last-child {
|
margin-top: 0.3rem;
|
}
|
}
|
.wrapper.other .content_skill_item {
|
padding: 0 0.5rem;
|
|
img {
|
cursor: pointer;
|
}
|
p {
|
font-size: 0.16rem;
|
}
|
}
|
.join {
|
.content_title {
|
margin: 0.85rem 0 0.53rem;
|
}
|
}
|
.el-button {
|
padding:0.2rem 0.8rem;
|
background: #3A3A3C;
|
color: #fff;
|
font-size: 0.2rem;
|
span {
|
font-size: 0.3rem;
|
color: #fff;
|
font-weight: bold;
|
}
|
}
|
}
|
.joinBtnBox {
|
text-align: center;
|
margin: 1.08rem auto 1rem;
|
}
|
.content_agent {
|
display: flex;
|
}
|
.content_skill {
|
width: 100%;
|
overflow: hidden;
|
display: flex;
|
.content_skill_item {
|
text-align: center;
|
flex: 1;
|
font-size: .1rem;
|
div {
|
width: 1.2rem;
|
height: 1.2rem;
|
display: inline-block;
|
}
|
p {
|
font-size: 0.13rem;
|
color:#3A3A3C;
|
margin: 0.2rem 0;
|
text-align: center;
|
}
|
}
|
}
|
@media (max-width: 750px) and (min-width: 0) {
|
.joinBtnBox {
|
margin: 0.6rem auto 1rem;
|
}
|
.content_skill .content_skill_item div {
|
width: 0.75rem;
|
height: 0.75rem;
|
}
|
.wrapper.other .content_skill_item {
|
padding: 0 0.2rem;
|
|
p {
|
font-size: 0.16rem;
|
}
|
}
|
.main, .banner {
|
margin-top: 1.13rem;
|
}
|
.banner {
|
margin-bottom: 0.5rem;
|
img {
|
width: 140%;
|
max-width: none;
|
margin-left: -20%;
|
}
|
}
|
.content_scene {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.scene {
|
display: inline-block;
|
width: 48%;
|
height: 2.48rem;
|
margin: 1%;
|
position: relative;
|
img {
|
width: 100%;
|
height: 2.4rem;
|
}
|
.p_img {
|
display: none;
|
}
|
.txt {
|
position: absolute;
|
bottom: 10%;
|
color: #fff;
|
text-align: center;
|
padding: 0 0.04rem;
|
width: 100%;
|
}
|
}
|
}
|
.content_title {
|
margin: 0.5rem 0 0.38rem;
|
}
|
.content_industry_card {
|
width: 100%;
|
height: auto;
|
background: #f4f4f4;
|
padding: 0.3rem .2rem;
|
h3 {
|
// width:1.2rem;
|
display: inline-block;
|
font-size: .28rem;
|
font-family: PingFang-SC-Bold;
|
font-weight: bold;
|
color:#3A3A3C;
|
border-bottom: 1px solid #3A3A3C;
|
}
|
p {
|
margin: .32rem 0;
|
color: #676767;
|
}
|
.content_industry_list {
|
width: 100%;
|
height: auto;
|
display: flex;
|
justify-content: space-between;
|
font-size: .24rem;
|
ul {
|
flex: 1;
|
}
|
li {
|
width: 100%;
|
color: #676767;
|
margin: .1rem 0 .1rem .2rem;
|
}
|
img {
|
width: 3.6rem;
|
height: 2rem;
|
margin: auto 0;
|
}
|
}
|
}
|
.el-button {
|
padding: 0.2rem 0.8rem;
|
background: #6395ff;
|
color: #fff;
|
span {
|
font-size: 0.3rem;
|
color: #fff;
|
font-weight: bold;
|
}
|
}
|
.content_title > span::before {
|
display: none;
|
}
|
.content_title > span::after {
|
content: '';
|
position: absolute;
|
top: 102%;
|
left: 29%;
|
width: 1.1rem;
|
height: 2px;
|
background: #000000;
|
}
|
.content_industry div:nth-child(2n) {
|
background: #ffff;
|
}
|
}
|
</style>
|
