From bae56a147be85be57ad1c64e9766c9aca750d187 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 04 三月 2025 16:04:12 +0800 Subject: [PATCH] 2025-03-04 --- src/views/successCase/caseDetail.vue | 125 ++++++++++++++++++++++++++++++----------- 1 files changed, 92 insertions(+), 33 deletions(-) diff --git a/src/views/successCase/caseDetail.vue b/src/views/successCase/caseDetail.vue index 919d048..561133a 100644 --- a/src/views/successCase/caseDetail.vue +++ b/src/views/successCase/caseDetail.vue @@ -4,17 +4,18 @@ <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-text="item.Title1"></span></div> - <div class="content_title_p" style="margin: .4rem auto .1rem;" v-for="(text, i) in item.texts" :key="i" v-text="text"> + <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: .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 class="content-img"><img :src="item.url" alt=""></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> @@ -29,7 +30,7 @@ </div> <div class="wrapper" v-if="item.TypeCharOne === 'Wcontent'"> <div class="content-box"> - <h3><span v-text="item.Title1"></span></h3> + <h3><span v-if="item.Title1" v-text="item.Title1"></span></h3> <ul class="scene"> <li style="margin-bottom: 0.2rem;" v-for="(cell, i) in item.DOne" :key="i"> <img :src="cell.Images" alt=""> @@ -40,7 +41,7 @@ </div> <div class="wrapper" style="margin-bottom: 0.3rem;" v-if="item.TypeCharOne === 'Wimages'"> <div class="content-bottom"> - <h3 class="h3"><span v-text="item.Title1"></span></h3> + <h3 class="h3"><span v-if="item.Title1" v-text="item.Title1"></span></h3> </div> <div class="partner"> <div v-for="(cell, i) in item.DOne" :key="i"> @@ -83,23 +84,32 @@ }, 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 this.details = res.Detail.map(item => { if (item.TypeCharOne === 'WLongText') { - item.texts = [] + item.subs = [] item.DOne.forEach(cell => { if (cell.LongText) { - item.texts.push(cell.LongText) + item.subs.push({ + type: 'text', + value: cell.LongText + }) } else if (cell.Images) { - item.url = cell.Images + item.subs.push({ + type: 'img', + value: cell.Images + }) } }) } @@ -153,6 +163,9 @@ margin: 0; width: 100%; } +.project { + padding: 0.2rem 0 0.3rem; +} h3 { font-size: 0.16rem; color: #3A3A3C; @@ -174,10 +187,13 @@ 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; @@ -212,25 +228,28 @@ 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; @@ -243,16 +262,33 @@ 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; } } } @@ -338,12 +374,23 @@ .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; @@ -390,6 +437,15 @@ line-height: .22rem; width: 11.92rem; margin: 0 auto; + } + } + .caseDetail.nomargin { + margin-top: 0rem; + .project { + padding-top: 0px; + .program { + margin-top: 0; + } } } .project { @@ -458,7 +514,7 @@ .content-img { width: 12.32rem; height: auto; - margin-top: 0.8rem; + margin-top: 0.4rem; } .program { width: 100%; @@ -466,14 +522,17 @@ 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; } -- Gitblit v1.8.0