<template>
|
<div class="main">
|
<div class="banner m_hide">
|
<img src="../../img/cheng.jpg" alt="">
|
<div class="txt">
|
成功案例 | CASE <div class="txt_s">每一个经典案例都是明科与伙伴们的沥心之作</div>
|
</div>
|
</div>
|
<div class="banner p_hide">
|
<img src="../../img/anli2.jpg" alt="">
|
</div>
|
<div class="wrapper">
|
<div class="content_title" v-if="product">
|
<span v-text="product.name"></span>
|
<p>
|
<label v-if="product.place">项目实施落地: {{product.place}} </label>
|
<label style="margin:0 0.05rem;" v-if="product.industry">行业: {{product.industry}}行业</label>
|
<label v-if="product.time"> 时间: {{product.time}}</label>
|
</p>
|
</div>
|
<div v-for="(item, index) in details" :key="index">
|
<div class="content_title" v-if="item.dTitle1">
|
<span v-text="item.dTitle1"></span>
|
</div>
|
<div class="content">
|
<div class="contnt-describe" :id="index + 'box'">
|
<div :class="index % 2 === 0 ? 'left' : 'right'" style="padding-top: 0.2rem;">
|
<p v-for="(cell, i) in item.SuccessCaseDetail" :key="i" :class="cell.oTitle1 && 'h3'" v-text="cell.oTitle1 || cell.LongText"></p>
|
</div>
|
<div :id="index + 'box' + 'img'" :class="index % 2 === 1 ? 'left' : 'right'" style="text-align: center;">
|
<img :src="item.Images" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="wrapper dynamic_b" v-if="data">
|
<p v-if="data.LastTitle">
|
<span :style="data.LastID && 'cursor:pointer;'" @click="jumpmenu(data.LastID)">
|
上一篇：{{data.LastTitle}}
|
<span class="tip" v-text="data.lastTip"></span>
|
</span>
|
</p>
|
<p v-if="data.NextTitle">
|
<span :style="data.NextID && 'cursor:pointer;'" @click="jumpmenu(data.NextID)">
|
下一篇：{{data.NextTitle}}
|
<span class="tip" v-text="data.nextTip"></span>
|
</span>
|
</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
product: null,
|
details: null,
|
data: null
|
}
|
},
|
watch: {
|
$route () {
|
this.menuId = this.$route.params.menuId
|
this.load()
|
}
|
},
|
methods: {
|
jumpmenu (menuId) {
|
if (!menuId || !this.data.PageType) return
|
|
menuId = menuId + '.html'
|
|
this.$router.push({name: this.data.PageType.toLowerCase(), params: {menuId: menuId}})
|
},
|
load () {
|
let param = {
|
func: 'Web_SuccessCaseIndex_GetData',
|
ID: this.menuId.replace('.html', '')
|
}
|
this.Service.getParamData(param).then(res => {
|
this.product = {
|
name: res.Title1,
|
place: res.Place,
|
industry: res.Industry,
|
time: res.CompletedTime
|
}
|
let lastTip = res.LastIndustry
|
if (lastTip && res.LastPlace) {
|
lastTip += ' | ' + res.LastPlace
|
} else {
|
lastTip += res.LastPlace
|
}
|
if (lastTip && res.LastCompletedTime) {
|
lastTip += ' | ' + res.LastCompletedTime
|
} else {
|
lastTip += res.LastCompletedTime
|
}
|
|
let nextTip = res.NextIndustry
|
if (nextTip && res.NextPlace) {
|
nextTip += ' | ' + res.NextPlace
|
} else {
|
nextTip += res.NextPlace
|
}
|
if (nextTip && res.NextCompletedTime) {
|
nextTip += ' | ' + res.NextCompletedTime
|
} else {
|
nextTip += res.NextCompletedTime
|
}
|
|
this.data = {
|
lastTip: lastTip,
|
LastID: res.LastID,
|
LastTitle: res.LastTitle,
|
NextID: res.NextID,
|
NextTitle: res.NextTitle,
|
nextTip: nextTip,
|
PageType: res.PageType
|
}
|
this.details = res.SuccessCase
|
|
this.$nextTick(() => {
|
if (document.body.clientWidth < 750) return
|
this.details.forEach((item, index) => {
|
let boxheight = document.getElementById(index + 'box').offsetHeight - 40
|
document.getElementById(index + 'boximg').style['line-height'] = boxheight + 'px'
|
})
|
})
|
})
|
}
|
},
|
mounted () {
|
this.menuId = this.$route.params.menuId
|
this.load()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.content_title {
|
margin: 0.6rem 0 0.5rem;
|
p {
|
color: #838383;
|
font-size: .24rem;
|
text-align: center;
|
margin-top: .26rem;
|
}
|
}
|
h3 {
|
font-family:MicrosoftYaHei;
|
font-weight:400;
|
font-size: .3rem;
|
color:rgba(58,58,60,1);
|
text-align: left;
|
margin:.2rem 4%;
|
}
|
.contnt-describe {
|
width: 100%;
|
height: auto;
|
margin: 0 auto;
|
padding: .3rem 0;
|
background: #f9f9f9;
|
p {
|
text-align: left;
|
font-size: .16rem;
|
line-height: 0.25rem;
|
margin-bottom: .1rem;
|
margin-left: 0.25rem;
|
}
|
p.h3 {
|
font-size: 0.3rem;
|
margin: 0rem 4% 0.2rem;
|
}
|
}
|
.content:nth-child(2) {
|
text-align: center;
|
a {
|
color:#3B3B3C;
|
padding: 0.06rem 0.2rem;
|
display: inline-block;
|
font-size: 0.16rem;
|
margin: 0.21rem 0.1rem;
|
}
|
}
|
.case_list > li {
|
width: 19%;
|
float: none;
|
text-align: center;
|
margin: 0.48rem 3% 0;
|
display: inline-block;
|
border:1px solid #C0C0C0;
|
span {
|
display: inline-block;
|
background: rgba(0,0,0,1);
|
opacity: 0.56;
|
width: 100%;
|
padding: 0.12rem 0;
|
color: #fff;
|
}
|
}
|
.content:nth-child(3) {
|
margin:0.72rem 0 2.88rem;
|
}
|
@media (min-width: 751px) {
|
.wrapper {
|
margin-bottom: 0.4rem;
|
}
|
.dynamic_b {
|
padding: 0;
|
margin-bottom: 0.5rem;
|
p {
|
margin: .1rem 0;
|
span.tip {
|
font-family: MicrosoftYaHei;
|
font-weight: 400;
|
color: rgba(175,173,173,1);
|
margin-left: 0.2rem;
|
}
|
}
|
}
|
.content22 {
|
margin-bottom: 0.5rem;
|
}
|
.p_txt {
|
margin-left: 1.55rem;
|
font-size: 0.2rem;
|
}
|
.p_txt2 {
|
width: 3rem;
|
margin:0.1rem 0 0 0.7rem;
|
font-size: 0.2rem;
|
|
label {
|
float: left;
|
}
|
}
|
.p_img {
|
margin-left: 1rem;
|
}
|
.banner {
|
position: relative;
|
.txt {
|
position: absolute;
|
left: 33%;
|
top: 35%;
|
text-align: center;
|
line-height: 0.8rem;
|
font-size: 0.7rem;
|
font-family: SourceHanSansCN-Bold;
|
font-weight: bold;
|
color: #fff;
|
.txt_s {
|
font-size: 0.3rem;
|
font-weight: 400;
|
}
|
}
|
}
|
.contnt-describe {
|
float: left;
|
padding: .2rem .2rem;
|
margin-bottom: .2rem;
|
.left {
|
float: left;
|
width: 50%;
|
|
span {
|
display: inline-block;
|
padding-top: .3rem;
|
}
|
img {
|
// width: 85%;
|
max-width: 85%;
|
}
|
}
|
.right {
|
float: right;
|
width: 50%;
|
img {
|
// width: 85%;
|
max-width: 85%;
|
}
|
}
|
}
|
.content_title {
|
text-align: center;
|
margin: .4rem 0 .5rem;
|
span {
|
display: inline-block;
|
border-bottom: 0.02rem solid;
|
}
|
p {
|
font-size: .16rem;
|
}
|
}
|
.content_title > span::after {
|
display: none;
|
}
|
.content_title > span::before {
|
display: none;
|
}
|
h3 {
|
font-size: .3rem;
|
}
|
.contnt-describe img {
|
display: inline-block;
|
// margin-top: 0.1rem;
|
}
|
}
|
@media (max-width: 750px) and (min-width: 0) {
|
.dynamic_b {
|
padding: 0.6rem 0.32rem 0.4rem;
|
p {
|
margin-bottom: 0.2rem;
|
}
|
span.tip {
|
display: none;
|
}
|
}
|
.p_txt2 {
|
width: 4rem;
|
margin: 0 auto;
|
padding-bottom: 0.4rem;
|
|
label {
|
float: left;
|
}
|
}
|
.left_img {
|
width: 3rem;
|
height: 2.1rem;
|
margin-top: 0.4rem;
|
}
|
.right_img {
|
width: 3.6rem;
|
height: 2.1rem;
|
float: right;
|
margin-top: 0.4rem;
|
}
|
h3 {
|
font-size:0.38rem;
|
font-family:PingFang-SC-Medium;
|
font-weight:500;
|
color:rgba(58,58,60,1);
|
margin: 0.2rem 0;
|
}
|
.contnt-describe {
|
padding: 0rem 0.32rem 0.8rem;
|
p {
|
font-size: 0.24rem;
|
font-family: PingFang-SC-Regular;
|
font-weight: 400;
|
color: rgba(62,62,62,1);
|
line-height: 0.44rem;
|
margin-left: 0rem;
|
}
|
.left {
|
padding-top: 0.2rem;
|
}
|
.right {
|
padding-right: 0 !important;
|
padding-top: 0.2rem;
|
}
|
p.h3 {
|
font-size: 0.3rem;
|
margin-left: 0;
|
}
|
}
|
.header {
|
padding: 0 2%;
|
}
|
.wrapper {
|
width: 100%;
|
}
|
.content_title > span::after ,.content_title > span::before {
|
display: none;
|
}
|
.content_title {
|
text-align: center;
|
}
|
.content_title > span {
|
display: inline-block;
|
border-bottom: 1px solid #3B3B3C;
|
}
|
.contnt-describe {
|
width: 100%;
|
.left, .right {
|
width: 100% !important;
|
}
|
}
|
.left {
|
text-align: center;
|
.p_img {
|
width: 2.36rem;
|
margin: 0.2rem 0;
|
}
|
}
|
}
|
</style>
|
