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 | 409 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 224 insertions(+), 185 deletions(-)
diff --git a/src/views/successCase/caseDetail.vue b/src/views/successCase/caseDetail.vue
index 9ff434c..561133a 100644
--- a/src/views/successCase/caseDetail.vue
+++ b/src/views/successCase/caseDetail.vue
@@ -1,127 +1,68 @@
<template>
<div class="main">
<div class="banner">
- <img src="../../img/Solutionbanner.png" alt="" class="m_hide">
- <img src="../../img/gongchang.png" alt="" class="p_hide">
+ <img :src="url" alt="">
</div>
- <div class="wrapper caseDetail">
- <div class="content_title"><span>鏅烘収浠撳偍WMS</span></div>
- <div class="content_title_p" style="margin:.4rem auto">
- 闅忕潃浜轰滑鐢熸椿姘村钩鐨勬彁楂橈紝娑堣垂鑰呯殑闇�姹備粠鍗曚竴鍖栥�佹爣鍑嗗寲閫愭笎鍚戜釜鎬у寲銆佸鏍峰寲杞彉锛岃繖瀵逛紶缁熷伐涓氬埗閫犵殑鐢熶骇鐗╂祦缁勭粐褰㈠紡甯︽潵宸ㄥぇ鐨勫啿鍑汇�傛槑绉戠Н鏋佸搷搴斺�滄櫤鑳�+鈥濇垬鐣ワ紝閫氳繃IoT鎶�鏈繛鎺ョ敓浜т晶鐗╂祦鍚勭幆鑺傜殑涓嶅悓绫诲瀷鏅鸿兘缁堢鍜屾墽琛屽崟鍏冿紝鍦ㄧ粺涓�鐨勫钩鍙拌皟搴︽帶鍒朵笅锛屽畬鎴愮墿鐞嗕笘鐣屼汉銆佹満銆佺墿銆佹枡銆佹硶銆佺幆鐨勫崗鍚屻�佷紭鍖栦笌鎺у埗锛屼粠鑰岄�傚簲澶ц妯′釜鎬у寲鐢熶骇妯″紡涓嬪鐗╂祦缁勭粐妯″紡鏌旀�у寲銆佹櫤鑳藉寲銆侀�忔槑鍖栫殑鍙戝睍瑕佹眰銆�
+
+ <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: .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="content_title_p" style="margin:.1rem auto">
- 鏄庣鍥寸粫鈥滈檷鏈�佸鏁堛�佹彁璐ㄣ�佸垱鏀垛�濈殑鏈川闇�姹傦紝鏁村悎璁よ瘉鐢熸�侀摼涓殑浼樼浼欎即锛屼负宸ヤ笟瀹㈡埛鎻愪緵娑电洊鍘熸枡鏀惰揣鍏ュ簱銆佸師鏂欒揣鍒颁汉鍙婂垎鎷ｄ笂绾裤�佸崐鎴愬搧鏆傚瓨鍙婅浆杩愪笂绾裤�佹垚鍝佷笅绾垮叆搴撱�佹垚鍝佽揣鍒颁汉浠撳偍绠＄悊銆佹垚鍝佹帓搴忓嚭搴撳彂杩愮瓑鍏ㄥ満鏅殑鏅烘収鐢熶骇鐗╂祦浜у搧銆佽В鍐虫柟妗堝強鏈嶅姟銆�
- </div>
- <div class="content-img"><img src="../../img/png2.png" alt=""></div>
- <div class="p_backg">
+ <div class="p_backg" v-if="item.TypeCharOne === 'Wico'">
<div class="wrapper">
- <div class="project" style="padding: 0.2rem 0 0.3rem;">
- <h3><span>鏂规鐗圭偣</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>
- <dt><img src="../../img/coverage4.png" alt=""></dt>
- <dd>鍙厤缃紑鍙�</dd>
- </dl>
- <dl>
- <dt><img src="../../img/f2.png" alt=""></dt>
- <dd>楂樻晥銆佷綆鎴愭湰闇�姹傚彉鏇�</dd>
- </dl>
- <dl>
- <dt><img src="../../img/f3.png" alt=""></dt>
- <dd>鏅鸿兘杩炴帴IoT璁惧</dd>
- </dl>
- <dl>
- <dt><img src="../../img/f4.png" alt=""></dt>
- <dd class="m_hide">鏁板瓧鍖栫敓鎬併�佸紑鏀惧紡铻嶅悎銆佸钩鍙板寲杩愯惀</dd>
- <dd class="p_hide">鏁板瓧鍖栫敓鎬�<br />寮�鏀惧紡铻嶅悎<br />骞冲彴鍖栬繍钀�</dd>
+ <dl v-for="(cell, i) in item.DOne" :key="i">
+ <dt><img :src="cell.Images" alt=""></dt>
+ <dd class="m_hide" v-text="cell.Title1"></dd>
+ <dd class="p_hide">
+ <p v-for="(title, t) in cell.Title1.split('銆�')" :key="t" v-text="title"></p>
+ </dd>
</dl>
</div>
</div>
</div>
</div>
- <div class="wrapper">
+ <div class="wrapper" v-if="item.TypeCharOne === 'Wcontent'">
<div class="content-box">
- <h3><span>搴旂敤鍦烘櫙</span></h3>
- <ul class="scene m_hide">
- <li>
- <img src="../../img/y1.png" alt="">
- <p>鍘熸枡鏀惰揣鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y2.png" alt="">
- <p>鍘熸枡璐у埌浜哄強鍒嗘嫞涓婄嚎</p>
- </li>
- <li>
- <img src="../../img/y3.png" alt="">
- <p>鍗婃垚鍝佹殏瀛樺強杞繍涓婄嚎</p>
- </li>
- </ul>
- <ul class="scene m_hide">
- <li>
- <img src="../../img/y4.png" alt="">
- <p>鎴愬搧涓嬬嚎鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y5.png" alt="">
- <p>鎴愬搧璐у埌浜轰粨鍌ㄧ鐞�</p>
- </li>
- <li>
- <img src="../../img/y6.png" alt="">
- <p>鎴愬搧鎺掑簭鍑哄簱鍙戣繍</p>
- </li>
- </ul>
-
- <ul class="scene p_hide">
- <li>
- <img src="../../img/y1.png" alt="">
- <p>鍘熸枡鏀惰揣鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y2.png" alt="">
- <p>鍘熸枡璐у埌浜哄強鍒嗘嫞涓婄嚎</p>
- </li>
- <li>
- <img src="../../img/y3.png" alt="">
- <p>鍗婃垚鍝佹殏瀛樺強杞繍涓婄嚎</p>
- </li>
- <li>
- <img src="../../img/y4.png" alt="">
- <p>鎴愬搧涓嬬嚎鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y5.png" alt="">
- <p>鎴愬搧璐у埌浜轰粨鍌ㄧ鐞�</p>
- </li>
- <li>
- <img src="../../img/y6.png" alt="">
- <p>鎴愬搧鎺掑簭鍑哄簱鍙戣繍</p>
+ <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="">
+ <p v-text="cell.Title1"></p>
</li>
</ul>
</div>
</div>
-
- <div class="wrapper" style="margin-bottom: 0.3rem;">
+ <div class="wrapper" style="margin-bottom: 0.3rem;" v-if="item.TypeCharOne === 'Wimages'">
<div class="content-bottom">
- <h3 class="h3"><span>鍚堜綔浼欎即</span></h3>
+ <h3 class="h3"><span v-if="item.Title1" v-text="item.Title1"></span></h3>
</div>
- </div>
- <div class="m_hide" style="background-color: #F9FBFD;">
- <div class="wrapper">
- <div class="content-bottom">
- <img src="../../img/c11.png" alt="">
+ <div class="partner">
+ <div v-for="(cell, i) in item.DOne" :key="i">
+ <img :src="cell.Images" alt="">
</div>
</div>
</div>
- <div class="three_box p_hide">
- <div><img src="../../img/he1.png" alt=""></div>
- <div><img src="../../img/he2.png" alt=""></div>
- <div><img src="../../img/he3.png" alt=""></div>
- </div>
- <div class="title">
+ <!-- <div class="title">
<a class="m_hide" style="visibility: hidden;">浜嗚В鏇村</a>
<a class="title-m">鏌ョ湅鏇村</a>
+ </div> -->
+ </div>
+ <div class="wrapper other" v-if="otherlist">
+ <div class="content_title"><span v-text="othertype.name"></span></div>
+ <div class="content_skill">
+ <div class="content_skill_item" v-for="(other, index) in otherlist" :key="index">
+ <img :src="other.Image2" alt="" @click="jumpmenu(other)">
+ <p v-text="other.Title1"></p>
+ </div>
</div>
- </div>
+ </div>
</div>
</template>
@@ -131,7 +72,8 @@
return {
menuId: null,
url: null,
- details: null
+ details: null,
+ otherlist: null
}
},
watch: {
@@ -141,51 +83,43 @@
}
},
methods: {
+ jumpmenu (menu) {
+ 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(det => {
- let item = {
- type: det.TypeCharOne,
- title: det.Title1
- }
- if (item.type === 'WLongText') {
- item.longText = det.DOne[0].LongText
- } else if (item.type === 'Wimages') {
- item.imglist = det.DOne.map(cell => {
- return {
- title: cell.CDefine1,
- tip: cell.CDefine2,
- url: cell.Images,
- position: cell.TypeCharThree,
- color: cell.TypeCharTwo
- }
- })
- } else if (item.type === 'Wico') {
- item.iconlist = det.DOne.map(cell => {
- return {
- url: cell.Images,
- title: cell.Title1
- }
- })
- } else if (item.type === 'Wcontent') {
- item.sublist = det.DOne.map(cell => {
- return {
- url: cell.Images,
- title: cell.Title1,
- tip: cell.LongText,
- details: cell.DTwo.map(two => {
- return two.Title1
+ this.details = res.Detail.map(item => {
+ if (item.TypeCharOne === 'WLongText') {
+ item.subs = []
+ item.DOne.forEach(cell => {
+ if (cell.LongText) {
+ item.subs.push({
+ type: 'text',
+ value: cell.LongText
+ })
+ } else if (cell.Images) {
+ item.subs.push({
+ type: 'img',
+ value: cell.Images
})
}
})
}
return item
})
+ this.othertype = {
+ type: res.Type,
+ name: res.TypeName
+ }
+ this.otherlist = res.LinkDetail
})
}
},
@@ -199,12 +133,38 @@
</script>
<style lang="less" scoped>
+.main {
+ min-height: 60vh;
+}
+.other {
+ margin-top: 0.7rem;
+ .content_skill {
+ display: flex;
+ .content_skill_item {
+ padding: 0.4rem 0.2rem;
+ flex: 1;
+ img {
+ cursor: pointer;
+ }
+ p {
+ color: #3A3A3C;
+ margin: 0.2rem 0;
+ text-align: center;
+ font-size: 0.16rem;
+ }
+ }
+ }
+}
.warpper {
width: 100%;
}
+
.caseDetail {
margin: 0;
width: 100%;
+}
+.project {
+ padding: 0.2rem 0 0.3rem;
}
h3 {
font-size: 0.16rem;
@@ -227,6 +187,14 @@
margin: .4rem auto 0;
}
@media (max-width: 750px) and (min-width: 0){
+ .banner {
+ margin-top: 1.13rem;
+ img {
+ max-width: none;
+ width: 140%;
+ margin-left: -20%;
+ }
+ }
.three_box{
margin: 0.4rem 0.3rem 0.8rem;
display: flex;
@@ -239,7 +207,15 @@
padding-right: 0;
}
}
-
+ .wrapper {
+ h3 {
+ font-size: 0.36rem;
+ }
+ h3:after {
+ width: 0.07rem;
+ height: 0.42rem;
+ }
+ }
h3 {
font-size: .4rem;
padding-left: 0.2rem;
@@ -249,28 +225,31 @@
height:0.06rem;
background:rgba(0,112,192,1);
position: absolute;
- top: 0.55rem;
- left: calc(50% - 0.45rem);
+ 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;
@@ -283,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;
}
}
}
@@ -326,12 +322,12 @@
.content-bottom {
width: 94%;
box-sizing: border-box;
- margin: .4rem auto;
+ margin: .4rem auto 0;
padding: .1rem 0;
h3 {
text-align: center;
border:none;
- margin-bottom: .57rem;
+ margin-bottom: .3rem;
}
ul {
width: 100%;
@@ -366,13 +362,44 @@
color: #52B6E7;
}
}
+ .partner {
+ display: flex;
+ margin-top: 0.1rem;
+ }
+ .partner div {
+ flex: 1;
+ text-align: center;
+ padding-right: 0.3rem;
+ }
+ .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;
+ margin-top: 0.4rem;
+ }
+ .partner div {
+ flex: 1;
+ text-align: center;
+ }
h3::after {
content: '';
width: 0.06rem;
@@ -400,7 +427,7 @@
background-color: #f9fbfd;
}
.caseDetail {
- margin-top: 0.91rem;
+ margin-top: 0.35rem;
.content_title {
margin: 0 auto;
}
@@ -410,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 {
@@ -439,29 +475,29 @@
}
}
}
- .content-bottom {
- width: 100%;
- ul {
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- li {
- width: 33.3%;
- padding: .08rem .1rem;
- img {
- display: block;
- width: 100%;
- height: .8rem;
- background: #747474;
- }
- p {
- text-align: center;
- margin: .1rem 0;
- }
- }
- }
- }
+ // .content-bottom {
+ // width: 100%;
+ // ul {
+ // width: 100%;
+ // height: auto;
+ // display: flex;
+ // flex-wrap: wrap;
+ // li {
+ // width: 33.3%;
+ // padding: .08rem .1rem;
+ // img {
+ // display: block;
+ // width: 100%;
+ // height: .8rem;
+ // background: #747474;
+ // }
+ // p {
+ // text-align: center;
+ // margin: .1rem 0;
+ // }
+ // }
+ // }
+ // }
.title {
width: 100%;
text-align: center;
@@ -478,7 +514,7 @@
.content-img {
width: 12.32rem;
height: auto;
- margin-top: 0.8rem;
+ margin-top: 0.4rem;
}
.program {
width: 100%;
@@ -486,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;
}
@@ -507,11 +546,11 @@
height: 4.82rem;
margin: .2rem 0;
}
- .partner {
- width: 100%;
- height: auto;
- box-sizing: border-box;
- margin: .2rem 0 .4rem 0;
- }
+ // .partner {
+ // width: 100%;
+ // height: auto;
+ // box-sizing: border-box;
+ // margin: .2rem 0 .4rem 0;
+ // }
}
</style>
--
Gitblit v1.8.0