From 68cbb649c933776838e937446ce9ed384916a5e8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 14 八月 2019 14:20:59 +0800
Subject: [PATCH] 2019-08-14update
---
src/views/successCase/caseDetail.vue | 696 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 381 insertions(+), 315 deletions(-)
diff --git a/src/views/successCase/caseDetail.vue b/src/views/successCase/caseDetail.vue
index cb05cc1..9ff434c 100644
--- a/src/views/successCase/caseDetail.vue
+++ b/src/views/successCase/caseDetail.vue
@@ -39,114 +39,181 @@
</div>
</div>
</div>
-
- <div class="wrapper">
- <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>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="wrapper" style="margin-bottom: 0.3rem;">
- <div class="content-bottom">
- <h3 class="h3"><span>鍚堜綔浼欎即</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="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>
+ </li>
+ </ul>
</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">
- <a class="m_hide" style="visibility: hidden;">浜嗚В鏇村</a>
- <a class="title-m">鏌ョ湅鏇村</a>
+
+ <div class="wrapper" style="margin-bottom: 0.3rem;">
+ <div class="content-bottom">
+ <h3 class="h3"><span>鍚堜綔浼欎即</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>
- </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">
+ <a class="m_hide" style="visibility: hidden;">浜嗚В鏇村</a>
+ <a class="title-m">鏌ョ湅鏇村</a>
+ </div>
+ </div>
</div>
</template>
<script>
export default {
+ data () {
+ return {
+ menuId: null,
+ url: null,
+ details: null
+ }
+ },
+ watch: {
+ $route () {
+ this.menuId = this.$route.params.menuId
+ this.load()
+ }
+ },
+ methods: {
+ load () {
+ let param = {
+ func: 'Web_productCenter_GetData',
+ ID: this.menuId
+ }
+ 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
+ })
+ }
+ })
+ }
+ return item
+ })
+ })
+ }
+ },
+ created () {
+ this.menuId = this.$route.params.menuId
+ },
+ mounted () {
+ this.load()
+ }
}
</script>
<style lang="less" scoped>
-.warpper{
- width: 100%;
+.warpper {
+ width: 100%;
}
-.caseDetail{
- margin: 0;
- width: 100%;
+.caseDetail {
+ margin: 0;
+ width: 100%;
}
-h3{
- font-size: 0.16rem;
- color: #3A3A3C;
- padding-left: .06rem;
+h3 {
+ font-size: 0.16rem;
+ color: #3A3A3C;
+ padding-left: .06rem;
margin-top: 0.2rem;
position: relative;
}
-h3::after{
+h3::after {
content: '';
width:0.09rem;
height:0.45rem;
@@ -156,8 +223,8 @@
left: 0;
}
.content-img{
- box-sizing: border-box;
- margin: .4rem auto 0;
+ box-sizing: border-box;
+ margin: .4rem auto 0;
}
@media (max-width: 750px) and (min-width: 0){
.three_box{
@@ -173,10 +240,10 @@
}
}
- h3{
- font-size: .4rem;
+ h3 {
+ font-size: .4rem;
padding-left: 0.2rem;
- }
+ }
.h3::after{
width:1.15rem;
height:0.06rem;
@@ -186,127 +253,127 @@
left: calc(50% - 0.45rem);
}
- .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;
- }
- .content_title,.content_title_p{
- width: 100%;
- box-sizing: border-box;
- padding: 0.6rem .43rem 0;
- }
- .content-img{
- width: 100%;
- height: 3.5rem;
- }
- .project{
- background: #f9f9f9;
- box-sizing: border-box;
- margin: .1rem 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;
- }
- }
+ .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;
+ }
+ .content_title,.content_title_p{
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0.6rem .43rem 0;
+ }
+ .content-img{
+ width: 100%;
+ height: 3.5rem;
+ }
+ .project{
+ background: #f9f9f9;
+ box-sizing: border-box;
+ margin: .1rem 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;
+ }
+ }
}
- .content-box{
- background: #f9f9f9;
- box-sizing: border-box;
- margin: .4rem auto;
- padding: .1rem 0;
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- margin: .2rem 0;
- li{
- width: 50%;
- padding: .08rem .18rem;
- img{
- display: block;
- width: 100%;
- height: 1.8rem;
- background: #747474;
- }
- p{
- text-align: center;
- margin: .1rem 0;
- }
- }
+ }
+ .content-box {
+ background: #f9f9f9;
+ box-sizing: border-box;
+ margin: .4rem auto;
+ padding: .1rem 0;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ margin: .2rem 0;
+ li {
+ width: 50%;
+ padding: .08rem .18rem;
+ img {
+ display: block;
+ width: 100%;
+ height: 1.8rem;
+ background: #747474;
}
+ p {
+ text-align: center;
+ margin: .1rem 0;
+ }
+ }
}
- .content-bottom{
- width: 94%;
- box-sizing: border-box;
- margin: .4rem auto;
- padding: .1rem 0;
- h3{
- text-align: center;
- border:none;
- margin-bottom: .57rem;
- }
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- li{
- width: 33.3%;
- padding: .08rem .1rem;
- img{
- display: block;
- width: 100%;
- height: .98rem;
- background: #747474;
- border: 1px #000 dashed;
- }
- }
- }
+ }
+ .content-bottom {
+ width: 94%;
+ box-sizing: border-box;
+ margin: .4rem auto;
+ padding: .1rem 0;
+ h3 {
+ text-align: center;
+ border:none;
+ margin-bottom: .57rem;
}
- .title{
- text-align: center;
- margin-bottom: 1.05rem;
- a:first-child{
- display: none;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ li {
+ width: 33.3%;
+ padding: .08rem .1rem;
+ img {
+ display: block;
+ width: 100%;
+ height: .98rem;
+ background: #747474;
+ border: 1px #000 dashed;
}
- .title-m{
- display: inline-block;
- width: 3.38rem;
- height: 1.04rem;
- line-height: 1.04rem;
- border: 1px solid #52B6E7;
- color: #52B6E7;
- }
+ }
}
+ }
+ .title{
+ text-align: center;
+ margin-bottom: 1.05rem;
+ a:first-child {
+ display: none;
+ }
+ .title-m {
+ display: inline-block;
+ width: 3.38rem;
+ height: 1.04rem;
+ line-height: 1.04rem;
+ border: 1px solid #52B6E7;
+ color: #52B6E7;
+ }
+ }
}
@media (min-width: 751px){
- h3{
- span{
+ h3 {
+ span {
padding-left: 0.2rem;
}
}
- h3::after{
+ h3::after {
content: '';
width: 0.06rem;
height: 0.3rem;
@@ -315,137 +382,136 @@
top: -0.03rem;
left: 0.1rem;
}
- .content-bottom{
- .h3{
+ .content-bottom {
+ .h3 {
padding-left: 0.05rem;
- span{
+ span {
padding-left: 0.15rem;
}
}
- .h3::after{
+ .h3::after {
width: 0.06rem;
height: 0.3rem;
left: 0.05rem;
top: -0.02rem;
}
}
- .p_backg{
+ .p_backg {
background-color: #f9fbfd;
}
- .caseDetail{
- margin-top: 0.91rem;
- .content_title{
- margin: 0 auto;
- }
- .content_title_p{
- font-size: 0.16rem;
- color: #747474;
- line-height: .22rem;
- width: 11.92rem;
- margin: 0 auto;
- }
+ .caseDetail {
+ margin-top: 0.91rem;
+ .content_title {
+ margin: 0 auto;
}
- .project{
- width: 100%;
- background: #f9fbfd;
+ .content_title_p {
+ font-size: 0.16rem;
+ color: #747474;
+ line-height: .22rem;
+ width: 11.92rem;
+ margin: 0 auto;
}
- .content-box{
- width: 100%;
- padding: .15rem 0 .15rem;
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- li{
- width: 33.3%;
- padding: .08rem .1rem;
- img{
- display: block;
- width: 100%;
- background: #747474;
- }
- p{
- text-align: center;
- margin: .1rem 0;
- }
- }
+ }
+ .project {
+ width: 100%;
+ background: #f9fbfd;
+ }
+ .content-box {
+ width: 100%;
+ padding: .15rem 0 .15rem;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ li {
+ width: 33.3%;
+ padding: .08rem .1rem;
+ img {
+ display: block;
+ width: 100%;
+ background: #747474;
}
- }
- .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;
- }
- }
+ p {
+ text-align: center;
+ margin: .1rem 0;
}
+ }
}
- .title{
- width: 100%;
+ }
+ .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;
+ a {
+ display: inline-block;
+ margin: 0 auto .8rem;
+ border-bottom: 1px solid #0070c0;
+ color: #0070c0;
+ }
+ .title-m {
+ display: none;
+ }
+ }
+ .content-img {
+ width: 12.32rem;
+ height: auto;
+ margin-top: 0.8rem;
+ }
+ .program {
+ width: 100%;
+ height: auto;
+ display: flex;
+ margin: .2rem 0;
+ dl {
+ margin-right: .8rem;
+ dt {
+ width: .94rem;
+ height: .94rem;
+ margin: 0 auto;
+ }
+ dd {
+ width: 1.8rem;
text-align: center;
- a{
- display: inline-block;
- margin: 0 auto .8rem;
- border-bottom: 1px solid #0070c0;
- color: #0070c0;
- }
- .title-m{
- display: none;
- }
+ padding-top: .07rem;
+ }
}
- .content-img{
- width: 12.32rem;
- height: auto;
- margin-top: 0.8rem;
- }
- .program{
- width: 100%;
- height: auto;
- display: flex;
- margin: .2rem 0;
- dl{
- margin-right: .8rem;
- dt{
- width: .94rem;
- height: .94rem;
- margin: 0 auto;
- }
- dd{
- width: 1.8rem;
- text-align: center;
- padding-top: .07rem;
- }
- }
-
- }
- .program:first-child{
+ }
+ .program:first-child {
margin-left: -0.55rem;
}
- .scene{
- width: 100%;
- height: 4.82rem;
- margin: .2rem 0;
- }
- .partner{
- width: 100%;
- height: auto;
- box-sizing: border-box;
- margin: .2rem 0 .4rem 0;
- }
+ .scene {
+ width: 100%;
+ height: 4.82rem;
+ margin: .2rem 0;
+ }
+ .partner {
+ width: 100%;
+ height: auto;
+ box-sizing: border-box;
+ margin: .2rem 0 .4rem 0;
+ }
}
</style>
--
Gitblit v1.8.0