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/productCenter/index.vue | 320 +++++++++++++++++++++++++++++++----------------------
1 files changed, 187 insertions(+), 133 deletions(-)
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index b90593c..fee86c0 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -1,133 +1,54 @@
<template>
<div class="main">
- <div class="banner m_hide" style="margin-bottom: 1rem;"><img src="../../img/ban.png" alt=""></div>
- <div class="banner p_hide" style="margin-bottom: 1rem;"><img src="../../img/m_ban.png" alt=""></div>
- <div class="wrapper platform">
- <div class="content_title"><span>鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</span></div>
- <p>鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�(MingKe Business聽Intelligen OS锛岀畝绉帮細MingKeOS)鏄敱鏄庣浜戣绠椾簨涓氶儴鐮斿彂鐨勫彲閰嶇疆浜哄伐鏅鸿兘寮�鍙戝钩鍙帮紝浣跨敤MingKeOS鍙互璁╃敤鎴烽�氳繃绠�鍗曢厤缃�佽嚜鐒惰瑷�瀵硅瘽鐨勪氦浜掓柟寮忥紝鍗冲彲瀹炵幇浼佷笟绠＄悊杩囩▼涓鏉傜殑涓氬姟閫昏緫澶勭悊锛屽钩鍙板唴缃噰璐�佺敓浜с�侀攢鍞�佹妧鏈�佸搧鎺с�佽拷婧�佸敭鍚庛�佷緵搴斿晢銆佺粡閿�鍟嗐�佸簱瀛樸�佽储鍔＄數鍟嗐�佹暟鎹腑蹇冦�佹帴鍙ｃ�佷汉宸ユ櫤鑳斤紙Kane锛夌瓑28澶т笟鍔￠鍩熸ā鍧楃殑鍔熻兘鎿嶄綔锛屾槑绉戜綔涓哄浗鍐呴瀹跺皢浜哄伐鏅鸿兘搴旂敤浜庝紒涓氱鐞嗛鍩熺殑浼佷笟锛屽�熷姪浜戣绠椾腑蹇冿紝Kane鍙互杩涜娣卞害瀛︿範锛屼細鎴愪负浼佷笟绠＄悊鐨勫ソ甯墜銆�</p>
- </div>
- <div class="wrapper scene">
- <div class="content_title"><span>搴旂敤鍦烘櫙</span></div>
- <div class="content_scene">
- <span class="scene scene-img"><img src="../../img/p1.png" alt=""><span class="txt">渚涘簲鍟嗗崗鍚�</span></span>
- <span class="scene scene-img"><img src="../../img/p2.png" alt=""><span class="txt txt2">WMS<br />浠撳簱绠＄悊绯荤粺</span></span>
- <span class="scene scene-img"><img src="../../img/p3.png" alt=""><span class="txt txt2">QTS<br />璐ㄩ噺杩芥函绯荤粺</span></span>
- <span class="scene scene-img"><img src="../../img/p4.png" alt=""><span class="txt">缁忛攢鍟嗙鐞�</span></span>
- <span class="scene scene-img"><img src="../../img/p5.png" alt=""><span class="txt txt2">MES<br />鏅鸿兘鍒堕��</span></span>
- <span class="scene scene-img">
- <img src="../../img/jing.png" alt="" class="m_img"><span class="txt m_img">缁忛攢鍟嗙鐞�</span>
- <img src="../../img/p6.png" alt="" class="p_img">
- <span class="txt p_img" style="color: black;bottom: 0;">缁忛攢鍟嗙鐞�</span>
- </span>
+ <div class="banner"><img :src="url" alt=""></div>
+ <div v-for="(item, index) in details" :key="index">
+ <div v-if="item.type === 'WLongText'" class="wrapper platform">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <p v-text="item.longText"></p>
</div>
- </div>
- <div class="wrapper skill">
- <div class="content_title"><span>鏍稿績鎶�鏈�</span></div>
- <div class="content_skill" >
- <div class="content_skill_item">
- <div><img src="../../img/p7.png" alt=""></div>
- <p>鍙厤缃紑鍙�</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p8.png" alt=""></div>
- <p>涓夊睆鍚堜竴</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p9.png" alt=""></div>
- <p>鎺ュ彛鎶�鏈�</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p10.png" alt=""></div>
- <p>璇█鍖�</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p11.png" alt=""></div>
- <p>IOT</p>
+ <div v-else-if="item.type === 'Wimages'" class="wrapper scene">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <div class="content_scene">
+ <span class="scene scene-img" v-for="(img, index) in item.imglist" :key="index">
+ <img :src="img.url" alt="">
+ <span class="txt" :class="'txt' + img.position" :style="'color:' + img.color">
+ <p v-text="img.title"></p>
+ <p v-text="img.tip"></p>
+ </span>
+ </span>
</div>
</div>
- </div>
- <div class="wrapper industry">
- <div class="content_title"><span>閫傜敤琛屼笟</span></div>
- <div class="content_industry">
- <div class="content_industry_card">
- <h3>瑁呭鍒堕��</h3>
- <p>涓浗姝ｅ湪鎴愪负鍏ㄧ悆鍒堕�犱笟鐨勪腑蹇冿紝涓浗鏄埗閫犱笟澶у浗锛屼絾杩樹笉鏄己鍥姐�傚洜姝わ紝鍥藉纭畾浜嗛�氳繃淇℃伅鍖栧甫鍔ㄥ伐涓氬寲鐨勫浗绛栵紝鎺ㄥ姩鍒堕�犱紒涓氬疄鏂藉埗閫犱笟淇℃伅鍖栵紝浜у搧璁捐鍒堕�犲拰浼佷笟绠＄悊鐨勪俊鎭寲銆佺敓浜ц繃绋嬫帶鍒剁殑鏅鸿兘鍖栥�佸埗閫犺澶囩殑鏁版帶鍖栦互鍙婂挩璇㈡湇鍔＄殑缃戠粶鍖栵紝鍏ㄩ潰鎻愬崌鍒堕�犱笟鐨勭珵浜夊姏銆�</p>
- <div class="content_industry_list">
- <ul>
- <li>路 渚涘簲鍟嗗崗鍚屽钩鍙�</li>
- <li>路 鐗╂枡浠撳簱绠＄悊绯荤粺</li>
- <li>路 鍒堕�犳墽琛岀郴缁�</li>
- <li>路 鎴愬搧浠撳簱绠＄悊绯荤粺</li>
- <li>路 璐ㄩ噺杩芥函绯荤粺</li>
- <li>路 缁忛攢鍟嗙鐞嗗钩鍙�</li>
- </ul>
- <img src="../../img/p12.png" alt="">
- </div>
- </div>
- <div class="content_industry_card">
- <h3>鍟嗕笟娴侀��</h3>
- <p>闅忕潃浜掕仈缃戠殑蹇�熷彂灞曪紝鐢靛瓙鍟嗗姟琛屼笟鍙戝睍杩呯寷锛屼綔涓轰簰鑱旂綉鍜岀浉鍏虫湇鍔′笟涓柊涓氭�侊紝涓嶄粎鍒涢�犱簡鏂扮殑娑堣垂闇�姹傦紝鍚屾椂涔熷紩鍙戜簡鏂扮殑鎶曡祫鏂版疆锛屽紑杈熶簡灏变笟澧炴敹鏂版笭閬擄紝涓哄ぇ浼椼�佷竾浼楀垱鏂版彁渚涗簡鏂扮┖闂淬��</p>
- <div class="content_industry_list">
- <ul>
- <li>路 鐢靛晢绯荤粺</li>
- <li>路 浠撳簱绠＄悊绯荤粺</li>
- </ul>
- <img src="../../img/p13.png" alt="">
+ <div v-else-if="item.type === 'Wico'" class="wrapper skill">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <div class="content_skill">
+ <div class="content_skill_item" v-for="(icon, index) in item.iconlist" :key="index">
+ <div><img :src="icon.url" alt=""></div>
+ <p v-text="icon.title"></p>
</div>
</div>
</div>
- <div class="content_industry">
- <div class="content_industry_card">
- <h3>瑁呭鍒堕��</h3>
- <p>涓浗姝ｅ湪鎴愪负鍏ㄧ悆鍒堕�犱笟鐨勪腑蹇冿紝涓浗鏄埗閫犱笟澶у浗锛屼絾杩樹笉鏄己鍥姐�傚洜姝わ紝鍥藉纭畾浜嗛�氳繃淇℃伅鍖栧甫鍔ㄥ伐涓氬寲鐨勫浗绛栵紝鎺ㄥ姩鍒堕�犱紒涓氬疄鏂藉埗閫犱笟淇℃伅鍖栵紝浜у搧璁捐鍒堕�犲拰浼佷笟绠＄悊鐨勪俊鎭寲銆佺敓浜ц繃绋嬫帶鍒剁殑鏅鸿兘鍖栥�佸埗閫犺澶囩殑鏁版帶鍖栦互鍙婂挩璇㈡湇鍔＄殑缃戠粶鍖栵紝鍏ㄩ潰鎻愬崌鍒堕�犱笟鐨勭珵浜夊姏銆�</p>
- <div class="content_industry_list">
- <ul>
- <li>路 渚涘簲鍟嗗崗鍚屽钩鍙�</li>
- <li>路 鐗╂枡浠撳簱绠＄悊绯荤粺</li>
- <li>路 鍒堕�犳墽琛岀郴缁�</li>
- <li>路 鎴愬搧浠撳簱绠＄悊绯荤粺</li>
- <li>路 璐ㄩ噺杩芥函绯荤粺</li>
- <li>路 缁忛攢鍟嗙鐞嗗钩鍙�</li>
- <li>路 鍖昏嵂鐢靛晢</li>
- </ul>
- <img src="../../img/p14.png" alt="">
- </div>
- </div>
- <div class="content_industry_card">
- <h3>鍟嗕笟娴侀��</h3>
- <p>闅忕潃浜掕仈缃戠殑蹇�熷彂灞曪紝鐢靛瓙鍟嗗姟琛屼笟鍙戝睍杩呯寷锛屼綔涓轰簰鑱旂綉鍜岀浉鍏虫湇鍔′笟涓柊涓氭�侊紝涓嶄粎鍒涢�犱簡鏂扮殑娑堣垂闇�姹傦紝鍚屾椂涔熷紩鍙戜簡鏂扮殑鎶曡祫鏂版疆锛屽紑杈熶簡灏变笟澧炴敹鏂版笭閬擄紝涓哄ぇ浼椼�佷竾浼楀垱鏂版彁渚涗簡鏂扮┖闂淬��</p>
- <div class="content_industry_list">
- <ul>
- <li>路 浠撳偍绠＄悊绯荤粺</li>
- <li>路 閰嶉�佺鐞嗙郴缁�</li>
- </ul>
- <img src="../../img/p15.png" alt="">
+ <div v-else-if="item.type === 'Wcontent'" class="wrapper industry">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <div class="content_industry" v-for="(m, n) in Math.ceil(item.sublist.length / 2)" :key="n">
+ <div class="content_industry_card" v-if="index >= n * 2 && index < (n + 1) * 2" v-for="(cell, index) in item.sublist" :key="index">
+ <h3 v-text="cell.title"></h3>
+ <p v-text="cell.tip"></p>
+ <div class="content_industry_list">
+ <ul>
+ <li v-for="(text, i) in cell.details" :key="i">路 <span v-text="text"></span></li>
+ </ul>
+ <img :src="cell.url" alt="">
+ </div>
</div>
</div>
</div>
</div>
- <div class="wrapper join">
- <div class="content_title"><span>鍔犵洘浠ｇ悊</span></div>
+ <div class="wrapper industry other" v-if="otherlist">
+ <div class="content_title"><span v-text="othertype.name"></span></div>
<div class="content_skill">
- <div class="content_skill_item">
- <div><img src="../../img/p16.png" alt=""></div>
- <p>娉ㄥ唽鐢宠</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p17.png" alt=""></div>
- <p>鍟嗗姟娲借皥</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p18.png" alt=""></div>
- <p>鎻愪氦鏉愭枡</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p19.png" alt=""></div>
- <p>璧勮川瀹℃牳</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p20.png" alt=""></div>
- <p>绛捐鍗忚</p>
+ <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>
@@ -141,17 +62,90 @@
export default {
data () {
return {
-
+ menuId: null,
+ url: null,
+ details: null,
+ othertype: null,
+ otherlist: null
}
- }
+ },
+ watch: {
+ $route () {
+ this.menuId = this.$route.params.menuId
+ this.load()
+ }
+ },
+ methods: {
+ jumpmenu (menu) {
+ this.$router.push({name: menu.PageType, params: {menuId: menu.ID}})
+ },
+ 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
+ })
+ this.othertype = {
+ type: res.Type,
+ name: res.TypeName
+ }
+ this.otherlist = res.LinkDetail
+ })
+ }
+ },
+ created () {
+ this.menuId = this.$route.params.menuId
+ },
+ mounted () {
+ this.load()
+ }
}
</script>
<style lang="less" scoped>
@media (min-width: 751px){
- .p_hide {
- display: none !important;
- }
+ .banner {
+ margin-bottom: 0.5rem;
+ }
.m_img {
display: none;
}
@@ -172,16 +166,54 @@
.txt {
position: absolute;
- left: 1.16rem;
- bottom: 0.12rem;
- font-size: 20px;
+ width: 33%;
+ height: 33%;
+ left: 0;
+ top: 0;
+ font-size: 16px;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
- color: rgba(255,255,255,1);
+ text-align: center;
+ padding: 0.1rem;
}
.txt2 {
- top: 0.19rem;
- left: 0.28rem;
+ top: 0;
+ left: 33%;
+ }
+ .txt3 {
+ left: auto;
+ top: 0;
+ right: 0;
+ }
+ .txt4 {
+ top: 33%;
+ }
+ .txt5 {
+ left: 33%;
+ top: 33%;
+ }
+ .txt6 {
+ left: auto;
+ top: 33%;
+ right: 0;
+ }
+ .txt7 {
+ height: auto;
+ top: auto;
+ bottom: 0;
+ }
+ .txt8 {
+ height: auto;
+ top: auto;
+ bottom: 0;
+ left: 33%;
+ }
+ .txt9 {
+ height: auto;
+ top: auto;
+ left: auto;
+ bottom: 0;
+ right: 0;
}
.content_title {
margin: .53rem 0 0.52rem;
@@ -261,6 +293,16 @@
margin-top: 0.3rem;
}
}
+ .wrapper.other .content_skill_item {
+ padding: 0 0.5rem;
+
+ img {
+ cursor: pointer;
+ }
+ p {
+ font-size: 0.16rem;
+ }
+ }
.join {
.content_title {
margin: 0.85rem 0 0.53rem;
@@ -313,12 +355,24 @@
.content_skill .content_skill_item div {
width: 0.75rem;
height: 0.75rem;
- }
- .m_hide {
- display: none !important;
- }
+ }
+ .wrapper.other .content_skill_item {
+ padding: 0 0.2rem;
+
+ p {
+ font-size: 0.16rem;
+ }
+ }
.main, .banner {
- margin-top: 1.14rem;
+ margin-top: 1.13rem;
+ }
+ .banner {
+ margin-bottom: 0.5rem;
+ img {
+ width: 140%;
+ max-width: none;
+ margin-left: -20%;
+ }
}
.content_scene {
width: 100%;
--
Gitblit v1.8.0