<template>
|
<div class="main">
|
<div class="banner">
|
<img src="../../img/successBanner.png" alt="" class="m_hide">
|
<img src="../../img/an1.png" alt="" class="p_hide">
|
</div>
|
<div style="background-color: #f9f9f9;" class="m_hide">
|
<div class="wrapper">
|
<div class="content_title">
|
<span>案例详情</span>
|
</div>
|
<div class="content" v-for="(_case, index) in caselist" :key="index" :class="(index % 2) && 'f-right'">
|
<div class="left_border" :style="(index % 2) && 'float: right;'" v-text="_case.SubjClasName"></div>
|
<div class="contnt-describe">
|
<div class="left" style="padding-top: 0.1rem;" :style="!(index % 2) && 'float: left;'">
|
<ul :style="(index % 2) && 'padding-left: 0.7rem;'">
|
<li v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)">
|
<img :src="sub.Image3" alt="">
|
</li>
|
</ul>
|
</div>
|
<div class="right" style="position: relative;">
|
<img :src="_case.Images" alt="" >
|
<!-- <span class="txt"></span> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 移动端样式 -->
|
<div class="webapp p_hide">
|
<h3 class="content_title2 fadeInUp zoomIn animated"><span>案例详情</span></h3>
|
<div class="project" v-for="(_case, index) in caselist" :key="index" style="padding: 0.1rem 0 0.3rem;">
|
<h3 class="content_title3"><span v-text="_case.SubjClasName"></span></h3>
|
<div class="img_box"><img :src="_case.Images" alt=""></div>
|
<div class="three_box">
|
<div v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)">
|
<img :src="sub.Image3" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
caselist: null
|
}
|
},
|
methods: {
|
jumpmenu (menu) {
|
this.$router.push({name: menu.PageType, params: {menuId: menu.ID}})
|
},
|
load () {
|
this.Service.getBaseData('Web_Case_GetData').then(res => {
|
this.caselist = res.Case
|
})
|
let param = {
|
func: 'Web_Center_GetData',
|
Centertype: 'Product'
|
}
|
this.Service.getParamData(param).then(res => {
|
|
})
|
}
|
},
|
mounted () {
|
this.load()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.content_title {
|
padding: 0.94rem 0 0.2rem;
|
p {
|
color: #838383;
|
font-size: .16rem;
|
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: 0.1rem 0.3rem 0.3rem;
|
border: 1px solid gainsboro;
|
// background: #f9f9f9;
|
p {
|
width: 92%;
|
margin: 0 auto;
|
text-align-last: left;
|
font-size: .16rem;
|
margin-bottom: .2rem;
|
}
|
}
|
.content {
|
padding-top: 0.4rem;
|
}
|
.content:last-child {
|
padding-bottom: 0.5rem;
|
}
|
@media (min-width: 751px) {
|
.contnt-describe {
|
float: left;
|
margin-bottom: .2rem;
|
.left {
|
float: left;
|
width: 50%;
|
span {
|
display: inline-block;
|
padding-top: .3rem;
|
}
|
}
|
.right {
|
float: right;
|
width: 50%;
|
}
|
}
|
h3 {
|
font-size: .3rem;
|
}
|
.contnt-describe {
|
.right {
|
margin-top: .3rem;
|
float: right;
|
position: relative;
|
.txt {
|
position: absolute;
|
left: 0.12rem;
|
top: 2.65rem;
|
width: 545px;
|
height: 67px;
|
font-size: 16px;
|
font-family: MicrosoftYaHei;
|
font-weight: 400;
|
color: rgba(255,255,255,1);
|
line-height: 25px;
|
text-align: left;
|
}
|
p {
|
font-size: .08rem;
|
color:#fff;
|
position: absolute;;
|
bottom: -.1rem;
|
}
|
}
|
.left {
|
float: left;
|
ul {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0.4rem 0.1rem;
|
li {
|
width: 2rem;
|
height: 1rem;
|
padding: .2rem;
|
margin-top: 0.15rem;
|
}
|
}
|
}
|
}
|
.content.f-right {
|
.contnt-describe {
|
.right {
|
float: left;
|
}
|
.left {
|
float: right;
|
span {
|
text-align: right;
|
float: right;
|
}
|
}
|
}
|
}
|
.left_border {
|
display: inline-block;
|
width: 1rem;
|
text-align: left;
|
position: relative;
|
padding-left: .2rem;
|
margin-bottom: 0.3rem;
|
font-size: 0.16rem;
|
float: none;
|
}
|
.left_border::after {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: .02rem;
|
width: 0.04rem;
|
height: 80%;
|
background: #0070c0;
|
}
|
}
|
@media (max-width: 750px) and (min-width: 0) {
|
.webapp {
|
width: 94%;
|
margin: 0 auto;
|
.content_title3 {
|
font-size: 0.16rem;
|
color: #3A3A3C;
|
padding-left: .06rem;
|
margin-top: 0.2rem;
|
position: relative;
|
span {
|
font-size: 0.30rem;
|
margin-left: 0.18rem;
|
margin-top: 0.02rem;
|
display: inline-block;
|
}
|
}
|
.content_title3::after {
|
content: '';
|
width: 0.08rem;
|
height:0.36rem;
|
background:rgba(0,112,192,1);
|
position: absolute;
|
top: 0.05rem;
|
left: 0;
|
}
|
.content_title2 {
|
font-size: 0.36rem;
|
font-family: PingFang-SC-Bold;
|
font-weight: bold;
|
color: rgba(59,59,60,1);
|
padding: 0.55rem 0 0.25rem;
|
position: relative;
|
text-align: center;
|
span {
|
border: 0;
|
}
|
}
|
.content_title2:before {
|
content: '';
|
position: absolute;
|
left: 0.9rem;
|
top: 0.82rem;
|
width: 1.4rem;
|
height: 0.02rem;
|
background: #999999;
|
}
|
.content_title2:after {
|
content: '';
|
position: absolute;
|
right: 0.9rem;
|
top: 0.82rem;
|
width: 1.4rem;
|
height: 0.02rem;
|
background: #999999;
|
}
|
.img_box {
|
margin: 0.3rem 0.3rem 0.4rem;
|
}
|
.project {
|
background: #f9f9f9;
|
box-sizing: border-box;
|
margin: .4rem auto;
|
padding: .1rem 0;
|
.program {
|
width: 100%;
|
height: auto;
|
display: flex;
|
padding: .34rem 0;
|
dl {
|
width: 25%;
|
dt {
|
width: .94rem;
|
height: .94rem;
|
margin: 0 auto;
|
}
|
dd {
|
text-align: center;
|
padding-top: .07rem;
|
}
|
}
|
}
|
.three_box {
|
margin: 0.4rem 0.3rem 0;
|
display: flex;
|
div {
|
flex: 1;
|
padding-right: 0.3rem;
|
}
|
div:last-child {
|
padding-right: 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%;
|
}
|
}
|
.contnt-describe img {
|
display: inline-block;
|
margin: .6rem 1.6rem;
|
width: 3.85rem;
|
height: 2.38rem;
|
border:1px solid #000;
|
}
|
}
|
</style>
|
