<template>
|
<div id="wrap">
|
<div class="banner" style="margin-bottom: 1rem;">
|
<img src="../../img/solve.jpg" alt="">
|
</div>
|
<div class="wrapper">
|
<div class="content_title" v-if="title"><span v-text="title"></span></div>
|
<p class="p_txt" v-text="description"></p>
|
<div class="content_solution">
|
<dl class="solution_box" v-for="(item, index) in datalist" :key="index">
|
<dt class="solution_box_in">
|
<h3><span v-text="item.SubjClasName"></span></h3>
|
<p style="line-height: 0.22rem; margin-right: 0.3rem;font-size: 0.16rem;" v-text="item.Remark"></p>
|
<div class="title">
|
<a href="javascript:;" style="margin-right: 0.3rem;" v-for="(menu, i) in item.Subject" :key="i"
|
v-text="menu.Title1" @click="jumpmenu(menu)"></a>
|
</div>
|
</dt>
|
<dd>
|
<img style="width: 100%;" :src="item.Images" alt="">
|
</dd>
|
</dl>
|
|
<!-- 移动端样式 -->
|
<div class="wrapper industry" style="width: 100%;">
|
<div class="content_industry_card" v-for="(item, index) in datalist" :key="index">
|
<h3 v-text="item.SubjClasName"></h3>
|
<p v-text="item.Remark"></p>
|
<div class="content_industry_list">
|
<ul>
|
<li style="font-size: 0.26rem;" v-for="(menu, i) in item.Subject" :key="i" @click="jumpmenu(menu)" v-text="menu.Title1"></li>
|
</ul>
|
<img :src="item.Images" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 0.3rem;clear: both;"></div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
title: null,
|
description: null,
|
datalist: null
|
}
|
},
|
methods: {
|
jumpmenu (menu) {
|
this.$router.push({name: menu.PageType.toLowerCase(), params: {menuId: menu.ID}})
|
},
|
load () {
|
let param = {
|
func: 'Web_Center_GetData',
|
Centertype: 'Solution'
|
}
|
this.Service.getParamData(param).then(res => {
|
this.title = res.HeadField
|
this.description = res.LongText
|
this.datalist = res.data
|
})
|
}
|
},
|
mounted () {
|
this.load()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.wrap {
|
min-height: 80vh;
|
}
|
@media (min-width: 751px) {
|
.banner_txt {
|
font-size: 0.6rem;
|
font-family: SourceHanSansCN-Bold;
|
font-weight: bold;
|
color: rgba(255,255,255,1);
|
position: absolute;
|
top: 41%;
|
left: 42%;
|
}
|
.p_hide {
|
display: none;
|
}
|
.industry {
|
display: none;
|
}
|
.content_title {
|
margin-top: .5rem
|
}
|
p {
|
padding: .4rem .4rem 0;
|
color: #676767;
|
font-size: .16rem;
|
line-height: 0.26rem;
|
}
|
.solution_box-m {
|
display: none;
|
}
|
.content_solution {
|
margin-top: 1rem;
|
}
|
.solution_box {
|
float: left;
|
padding: .3rem .4rem;
|
margin-bottom: .4rem;
|
background: #F9F9F9;
|
|
dt {
|
float: left;
|
width: 60%;
|
|
h3 {
|
span {
|
width: 100%;
|
height: auto;
|
position: relative;
|
padding-left: .1rem;
|
font-size:0.2rem;
|
font-family:MicrosoftYaHei-Bold;
|
font-weight:bold;
|
color:rgba(59,59,60,1);
|
}
|
}
|
p {
|
padding: .3rem 0;
|
color: #3E3E3E;
|
}
|
.title {
|
width: 100%;
|
|
a {
|
display: inline-block;
|
color: #0070c0;
|
border-bottom: 1px solid #0070c0;
|
}
|
}
|
}
|
dd {
|
width: 30%;
|
height: 80%;
|
float: right;
|
}
|
}
|
|
.solution_box:nth-child(2n) {
|
background: #fff;
|
|
dd {
|
float: left;
|
}
|
dt {
|
float: right;
|
}
|
}
|
.solution_box_in>h3>span:after {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: 0;
|
border-radius: 2px;
|
width: 3px;
|
height: 100%;
|
background: #0070c0;
|
}
|
}
|
|
@media (max-width: 750px) and (min-width: 0) {
|
.banner {
|
margin-top: 1.13rem;
|
img {
|
max-width: 150%;
|
margin-left: -19%;
|
}
|
}
|
.p_txt {
|
font-size:0.24rem;
|
font-family:PingFang-SC-Regular;
|
font-weight:400;
|
color:rgba(62,62,62,1);
|
line-height:0.44rem;
|
}
|
.content_industry_card {
|
background: #f4f4f4;
|
padding: 0.3rem;
|
margin-top: 0.4rem;
|
|
h3{
|
font-size: 0.36rem;
|
font-family:PingFang-SC-Bold;
|
font-weight:bold;
|
color:rgba(59,59,60,1);
|
text-align: center;
|
position: relative;
|
}
|
h3::after{
|
content: '';
|
width: 1.15rem;
|
height: 0.06rem;
|
display: inline-block;
|
background-color: #0070C0;
|
position: absolute;
|
top: 0.56rem;
|
left: calc(50% - 0.57rem);
|
}
|
|
p {
|
margin: 0.32rem 0;
|
color: #676767;
|
}
|
.content_industry_list {
|
display: flex;
|
font-size: 0.24rem;
|
|
ul {
|
flex: 1;
|
margin-top: 0.3rem;
|
li {
|
color: #676767;
|
margin-bottom: 0.4rem;
|
font-size:0.24rem;
|
font-family:PingFang-SC-Regular;
|
font-weight:400;
|
text-decoration:underline;
|
color:rgba(0,112,192,1);
|
text-align: center;
|
}
|
}
|
img {
|
width: 3.6rem;
|
height: 2rem;
|
margin: auto 0;
|
}
|
}
|
}
|
.center {
|
padding-top: .6rem;
|
}
|
.solution_box {
|
display: none;
|
}
|
.content_solution {
|
margin-top: .6rem;
|
|
.solution_box-m {
|
background: #F4F4F4;
|
padding: .4rem .3rem;
|
margin-bottom: .4rem;
|
|
h3 {
|
span {
|
display: block;
|
font-family: PingFang-SC-Bold;
|
font-weight: bold;
|
color: rgba(59, 59, 60, 1);
|
font-size: .4rem;
|
margin: .2rem 0 .4rem 0;
|
text-align: center;
|
position: relative;
|
}
|
}
|
|
p {
|
font-size: .24rem;
|
font-family: PingFang-SC-Regular;
|
font-weight: 400;
|
color: rgba(62, 62, 62, 1);
|
}
|
|
dd {
|
display: flex;
|
margin: .4rem 0 0 0;
|
|
.dd-img {
|
width: 70%;
|
}
|
.title {
|
width: 30%;
|
text-align: center;
|
font-size: .24rem;
|
padding: .2rem 0;
|
|
a {
|
display: block;
|
width: 1.2rem;
|
color: #0070c0;
|
border-bottom: 1px solid #0070c0;
|
padding-bottom: .08rem;
|
margin: 0 auto;
|
}
|
}
|
}
|
}
|
}
|
.content_title {
|
margin: 1rem 0 .3rem 0;
|
}
|
.solution_box_in>h3>span:after {
|
content: '';
|
position: absolute;
|
left: 2.3rem;
|
top: .6rem;
|
border-radius: 2px;
|
width: 1.8rem;
|
height: 2px;
|
background: #0070c0;
|
}
|
}
|
</style>
|
