| | |
| | | <img :src="url" alt=""> |
| | | </div> |
| | | |
| | | <div class="wrapper caseDetail" v-for="(item, index) in details" :key="index"> |
| | | <div class="wrapper caseDetail" :class="item.TypeCharOne === 'Wico' && !item.Title1 && 'nomargin'" v-for="(item, index) in details" :key="index"> |
| | | <div v-if="item.TypeCharOne === 'WLongText'"> |
| | | <div class="content_title"><span v-if="item.Title1" v-text="item.Title1"></span></div> |
| | | <div v-for="(cell, i) in item.subs" :key="i"> |
| | | <div class="content_title_p" v-if="cell.type === 'text'" style="margin: .4rem auto .1rem;" v-text="cell.value"></div> |
| | | <div class="content_title_p" v-if="cell.type === 'text'" style="margin: .1rem auto .1rem;" :style="!i && 'margin-top: 0.4rem;'" v-text="cell.value"></div> |
| | | <div class="content-img" v-else-if="cell.type === 'img'"><img :src="cell.value" alt=""></div> |
| | | </div> |
| | | </div> |
| | | <div class="p_backg" v-if="item.TypeCharOne === 'Wico'"> |
| | | <div class="wrapper"> |
| | | <div class="project" style="padding: 0.2rem 0 0.3rem;"> |
| | | <h3><span v-text="item.Title1"></span></h3> |
| | | <div class="project"> |
| | | <h3 :class="!item.Title1 && 'noborder'"><span v-if="item.Title1" v-text="item.Title1"></span></h3> |
| | | <div class="program"> |
| | | <dl v-for="(cell, i) in item.DOne" :key="i"> |
| | | <dt><img :src="cell.Images" alt=""></dt> |
| | |
| | | }, |
| | | methods: { |
| | | jumpmenu (menu) { |
| | | this.$router.push({name: menu.PageType.toLowerCase(), params: {menuId: menu.ID}}) |
| | | let _menuId = menu.ID |
| | | _menuId = _menuId + '.html' |
| | | |
| | | this.$router.push({name: menu.PageType.toLowerCase(), params: {menuId: _menuId}}) |
| | | }, |
| | | load () { |
| | | let param = { |
| | | func: 'Web_productCenter_GetData', |
| | | ID: this.menuId |
| | | ID: this.menuId.replace('.html', '') |
| | | } |
| | | this.Service.getParamData(param).then(res => { |
| | | this.url = res.Image1 |
| | |
| | | margin: 0; |
| | | width: 100%; |
| | | } |
| | | .project { |
| | | padding: 0.2rem 0 0.3rem; |
| | | } |
| | | h3 { |
| | | font-size: 0.16rem; |
| | | color: #3A3A3C; |
| | |
| | | margin: .4rem auto 0; |
| | | } |
| | | @media (max-width: 750px) and (min-width: 0){ |
| | | .banner img { |
| | | max-width: none; |
| | | width: 140%; |
| | | margin-left: -20%; |
| | | .banner { |
| | | margin-top: 1.13rem; |
| | | img { |
| | | max-width: none; |
| | | width: 140%; |
| | | margin-left: -20%; |
| | | } |
| | | } |
| | | .three_box{ |
| | | margin: 0.4rem 0.3rem 0.8rem; |
| | |
| | | top: 0.05rem; |
| | | left: calc(50% - 0.85rem); |
| | | } |
| | | |
| | | h3.noborder::after { |
| | | content: none; |
| | | } |
| | | h3.noborder { |
| | | margin: 0; |
| | | } |
| | | .content_title_p { |
| | | color: #3e3e3e; |
| | | font-size: .16rem; |
| | | margin: 0 auto !important; |
| | | font-size:0.24rem; |
| | | font-family:PingFang-SC-Regular; |
| | | font-weight:400; |
| | | color:rgba(62,62,62,1); |
| | | line-height:0.44rem; |
| | | font-size: 0.26rem; |
| | | font-family: PingFang-SC-Regular; |
| | | font-weight: 400; |
| | | color: rgba(62,62,62,1); |
| | | line-height: 0.44rem; |
| | | } |
| | | .content_title,.content_title_p{ |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | padding: 0.6rem .43rem 0; |
| | | padding: 0.2rem .43rem 0; |
| | | } |
| | | .content-img{ |
| | | .content-img { |
| | | width: 100%; |
| | | height: 3.5rem; |
| | | } |
| | | .project{ |
| | | background: #f9f9f9; |
| | |
| | | display: flex; |
| | | padding: .34rem 0; |
| | | dl { |
| | | width: 25%; |
| | | flex: 1; |
| | | dt { |
| | | width: .94rem; |
| | | height: .94rem; |
| | | width: .8rem; |
| | | height: .8rem; |
| | | margin: 0 auto; |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | dd { |
| | | text-align: center; |
| | | padding-top: .07rem; |
| | | p { |
| | | font-size: 0.26rem; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .caseDetail.nomargin { |
| | | margin-top: 0; |
| | | .project { |
| | | padding-top: 0; |
| | | margin-top: -0.1rem; |
| | | .program { |
| | | margin-top: 0; |
| | | } |
| | | } |
| | | } |
| | |
| | | .partner div:last-child { |
| | | padding-right: 0; |
| | | } |
| | | .scene { |
| | | li p { |
| | | font-size: 0.26rem; |
| | | } |
| | | } |
| | | } |
| | | @media (min-width: 751px){ |
| | | h3 { |
| | | span { |
| | | padding-left: 0.2rem; |
| | | } |
| | | } |
| | | h3.noborder::after { |
| | | content: none; |
| | | } |
| | | h3.noborder { |
| | | margin: 0; |
| | | } |
| | | .partner { |
| | | display: flex; |
| | |
| | | line-height: .22rem; |
| | | width: 11.92rem; |
| | | margin: 0 auto; |
| | | } |
| | | } |
| | | .caseDetail.nomargin { |
| | | margin-top: 0rem; |
| | | .project { |
| | | padding-top: 0px; |
| | | .program { |
| | | margin-top: 0; |
| | | } |
| | | } |
| | | } |
| | | .project { |
| | |
| | | display: flex; |
| | | margin: .2rem 0; |
| | | dl { |
| | | margin-right: .8rem; |
| | | flex: 1; |
| | | dt { |
| | | width: .94rem; |
| | | height: .94rem; |
| | | margin: 0 auto; |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | dd { |
| | | width: 1.8rem; |
| | | text-align: center; |
| | | padding-top: .07rem; |
| | | } |