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/index.vue | 173 ++++++++++++++++++++------------------------------------- 1 files changed, 62 insertions(+), 111 deletions(-) diff --git a/src/views/successCase/index.vue b/src/views/successCase/index.vue index 8df90d8..5dcca9b 100644 --- a/src/views/successCase/index.vue +++ b/src/views/successCase/index.vue @@ -9,51 +9,19 @@ <div class="content_title"> <span>妗堜緥璇︽儏</span> </div> - <div class="content"> - <div class="left_border">浠撳偍鐗╂祦</div> + <div class="content" v-for="(_case, index) in caselist" :key="index" :class="(index % 2) && 'f-right'"> + <div class="left_border" :style="(index % 2) && 'float: right;'" v-text="_case.SubjClasName"></div> <div class="contnt-describe"> - <div class="left" style="float: left;padding-top: 0.1rem;"> - <ul> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s1.png" alt=""></li> - </router-link> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s2.png" alt=""></li> - </router-link> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s3.png" alt=""></li> - </router-link> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s4.png" alt=""></li> - </router-link> + <div class="left" style="padding-top: 0.1rem;" :style="!(index % 2) && 'float: left;'"> + <ul :style="(index % 2) && 'padding-left: 0.7rem;'"> + <li v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)"> + <img :src="sub.Image3" alt=""> + </li> </ul> </div> <div class="right" style="position: relative;"> - <img src="../../img/s5.png" alt="" > - <span v-if="isShow1" class="txt">鏄庣涓轰腑鐭虫补瀹炴柦浜嗙墿璧勬潯鐮佺鐞嗙郴缁燂紝瀹炵幇浜嗛渶姹傞儴闂ㄥ湪绾胯鍒掓姤鎵广�佷緵搴斿晢鍗忓悓閫佽揣銆侀」鐩幇鍦烘敹銆佸彂銆佺洏銆佸瓨绛夊姛鑳姐�傜郴缁熼噰鐢ㄤ簡浜掕仈缃戙�佹棤绾挎妧鏈潯鐮佹妧鏈浉缁撳悎鐨勬柟妗堣繘琛屽疄鏂斤紝涓轰腑鐭虫补鑺傜渷澶ч噺浜哄姏銆佺墿鍔涖��</span> - </div> - </div> - <div class="left_border" style="float: right;margin-top: 0.5rem;">鏅鸿兘鍒堕��</div> - <div class="contnt-describe" style="margin-bottom: 1.48rem;"> - <div class="left"> - <ul style="margin-left: 1rem;"> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s7.png" alt=""></li> - </router-link> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s8.png" alt=""></li> - </router-link> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s9.png" alt=""></li> - </router-link> - <router-link to="/successCaseIndex" style="padding: 0;"> - <li><img src="../../img/s10.png" alt=""></li> - </router-link> - </ul> - </div> - <div class="right" style="position: relative;"> - <img src="../../img/s6.png" alt=""> - <span v-if="isShow2" class="txt">鏄庣涓轰腑骞挎牳瀹炴柦浜嗙墿璧勬潯鐮佽拷婧郴缁燂紝璇ョ郴缁熷熀浜庢槑绉戝彲閰嶇疆骞冲彴K9 1.0瀹炴柦锛屼粠鏉ユ枡楠屾敹寮�濮嬶紝缁忚繃閿�鍞嚭搴撱�佺敓浜ц閰嶇瓑鐜妭锛屽畬鎴愯拷婧暟鎹殑閲囬泦骞舵彁渚涗骇鍝佺敓鍛藉懆鏈熺殑鏁版嵁杩芥函鏌ヨ</span> + <img :src="_case.Images" alt="" > + <!-- <span class="txt"></span> --> </div> </div> </div> @@ -62,40 +30,13 @@ <!-- 绉诲姩绔牱寮� --> <div class="webapp p_hide"> <h3 class="content_title2 fadeInUp zoomIn animated"><span>妗堜緥璇︽儏</span></h3> - <div class="project" style="padding: 0.2rem 0 0.3rem;"> - <h3 class="content_title3"><span>浠撳偍鐗╂祦</span></h3> - <div class="img_box"><img src="../../img/an2.png" alt=""></div> + <div class="project" v-for="(_case, index) in caselist" :key="index" style="padding: 0.1rem 0 0.3rem;"> + <h3 class="content_title3"><span v-text="_case.SubjClasName"></span></h3> + <div class="img_box"><img :src="_case.Images" alt=""></div> <div class="three_box"> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an3.png" alt=""> - </router-link> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an4.png" alt=""> - </router-link> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an5.png" alt=""> - </router-link> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an6.png" alt=""> - </router-link> - </div> - </div> - <div class="project" style="padding: 0.2rem 0 0.3rem;margin-bottom: 0.8rem;"> - <h3 class="content_title3"><span>鏅鸿兘鍒堕��</span></h3> - <div class="img_box"><img src="../../img/an7.png" alt=""></div> - <div class="three_box"> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an8.png" alt=""> - </router-link> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an9.png" alt=""> - </router-link> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an10.png" alt=""> - </router-link> - <router-link tag="div" to="/successCaseIndex"> - <img src="../../img/an11.png" alt=""> - </router-link> + <div v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)"> + <img :src="sub.Image3" alt=""> + </div> </div> </div> </div> @@ -106,20 +47,35 @@ export default { data () { return { - isShow1: false, - isShow2: true + caselist: null } - }, + }, + methods: { + jumpmenu (menu) { + this.$router.push({name: menu.PageType, params: {menuId: menu.ID}}) + }, + load () { + this.Service.getBaseData('Web_Case_GetData').then(res => { + this.caselist = res.Case + }) + let param = { + func: 'Web_Center_GetData', + Centertype: 'Product' + } + this.Service.getParamData(param).then(res => { + + }) + } + }, mounted () { - document.body.scrollTop = 0 - document.documentElement.scrollTop = 0 + this.load() } } </script> <style lang="less" scoped> .content_title { - padding: 0.94rem 0 1.03rem; + padding: 0.94rem 0 0.2rem; p { color: #838383; font-size: .16rem; @@ -150,15 +106,11 @@ margin-bottom: .2rem; } } - .content:nth-child(2) { - text-align: center; - a { - color:#3B3B3C; - padding: 0.06rem 0.2rem; - display: inline-block; - font-size: 0.16rem; - margin: 0.21rem 0.1rem; - } + .content { + padding-top: 0.4rem; + } + .content:last-child { + padding-bottom: 0.5rem; } @media (min-width: 751px) { .contnt-describe { @@ -184,22 +136,18 @@ .right { margin-top: .3rem; float: right; - // width: 3.85rem; - // height: 2.38rem; - background: url(../../img/shiyou.png); - background-size: 100% 100%; position: relative; .txt { position: absolute; left: 0.12rem; top: 2.65rem; - width:545px; - height:67px; - font-size:16px; - font-family:MicrosoftYaHei; - font-weight:400; - color:rgba(255,255,255,1); - line-height:25px; + width: 545px; + height: 67px; + font-size: 16px; + font-family: MicrosoftYaHei; + font-weight: 400; + color: rgba(255,255,255,1); + line-height: 25px; text-align: left; } p { @@ -225,15 +173,17 @@ } } } - .contnt-describe:nth-child(2n) { - .right { - float: left; - } - .left { - float: right; - span { - text-align: right; + .content.f-right { + .contnt-describe { + .right { + float: left; + } + .left { float: right; + span { + text-align: right; + float: right; + } } } } @@ -244,6 +194,7 @@ position: relative; padding-left: .2rem; margin-bottom: 0.3rem; + font-size: 0.16rem; float: none; } .left_border::after { @@ -267,7 +218,7 @@ margin-top: 0.2rem; position: relative; span { - font-size: 0.36rem; + font-size: 0.30rem; margin-left: 0.18rem; margin-top: 0.02rem; display: inline-block; @@ -275,8 +226,8 @@ } .content_title3::after { content: ''; - width:0.09rem; - height:0.45rem; + width: 0.08rem; + height:0.36rem; background:rgba(0,112,192,1); position: absolute; top: 0.05rem; -- Gitblit v1.8.0