<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">
|
<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 :class="index % 2 === 1 ? 'left' : 'right'" style="text-align: center;">
|
<img :src="item.Images" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
product: null,
|
details: null
|
}
|
},
|
methods: {
|
load () {
|
let param = {
|
func: 'Web_SuccessCaseIndex_GetData',
|
ID: this.menuId
|
}
|
this.Service.getParamData(param).then(res => {
|
this.product = {
|
name: res.Title1,
|
place: res.Place,
|
industry: res.Industry,
|
time: res.CompletedTime
|
}
|
this.details = res.SuccessCase
|
})
|
}
|
},
|
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) {
|
.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: .1rem .2rem 0.3rem;
|
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;
|
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) {
|
.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>
|
