From 4e1cca0e3da79819fa3768402ce6a174aea5131f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 11 八月 2019 23:35:45 +0800
Subject: [PATCH] 2019-08-11
---
src/views/index/index.vue | 686 ++++++++++++++++++++++----------------------------------
1 files changed, 272 insertions(+), 414 deletions(-)
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 79c4d1e..9e94bcd 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,114 +1,54 @@
<template>
<div class="main">
- <div class="banner"><img src='../../img/home.png' alt=""></div>
+ <div class="banner"><img src='../../img/home.jpg' alt=""></div>
<div class="wrapper-box">
<h3 class="content_title fadeInUp zoomIn animated"><span>涓昏惀涓氬姟</span></h3>
- <div class="m_zhu">
- <div class="title_a">鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</div>
- <div class="title_b">MingKeOS</div>
- <div class="title_b">涓夊睆鍚堜竴銆佹晱鎹峰紑鍙戙�佸骞冲彴鎺ュ彛</div>
- <div class="content">浣跨敤MingKeOS鍙互璁╃敤鎴烽�氳繃绠�鍗曢厤缃嚜鐒惰瑷�瀵硅瘽鐨勪氦浜掓柟寮忥紝鍗冲彲瀹炵幇浼佷笟绠� 鐞嗚繃绋嬩腑澶嶆潅鐨勪笟鍔￠�昏緫澶勭悊锛屽钩鍙板唴缃噰璐�佺敓浜с�侀攢鍞�佹妧鏈�佸搧鎺с�佽拷婧敭鍚庛�佷緵搴斿晢銆佺粡閿�鍟嗐��
- 搴撳瓨銆佽储鍔°�佺數鍟嗐�佹暟鎹腑蹇冦�佹帴鍙ｃ�佷汉宸ユ櫤鑳斤紙Kane锛夌瓑28澶т笟鍔￠鍩熸ā鍧椼��</div>
+ <div class="m_zhu" v-for="(business, index) in mainBusiness" :key="index">
+ <div class="business_box_t" :style="'background-image: url(' + business.Image1 + ')'">
+ <div class="bgopacity"></div>
+ <div class="title_a" v-text="business.Title1"></div>
+ <div class="title_b" v-text="business.CDefine1"></div>
+ <div class="title_b" v-text="business.CDefine2"></div>
+ </div>
+ <div class="content" v-text="business.Remark"></div>
<div class="img_txt">
- <div class="line">
- <img src="../../img/zhu1.png" alt="">
- <span>鍙厤缃�</span>
- </div>
- <div class="line">
- <img src="../../img/zhu2.png" alt="">
- <span>鏄撳彉鏇�</span>
- </div>
- <div class="line">
- <img src="../../img/zhu3.png" alt="">
- <span>澶ф暟鎹�</span>
- </div>
- <div class="line">
- <img src="../../img/zhu4.png" alt="">
- <span>澶氬钩鍙版帴鍙�</span>
+ <div class="line" v-for="(item, index) in business.MainBusi" v-if="index < 4" :key="index">
+ <div class="mob-bus-icon">
+ <span class="fa" :class="item.bImage1">
+ <span class="path1"></span>
+ <span class="path2"></span>
+ <span class="path3"></span>
+ <span class="path4"></span>
+ </span>
+ </div>
+ <p v-text="item.bTitle1"></p>
</div>
</div>
- <!-- <button class="btn">鏌ョ湅鏇村</button> -->
- </div>
-
- <div class="m_zhu m_zhu2">
- <div class="title_a">鍏ㄦ笭閬撲緵搴旈摼浜у搧</div>
- <div class="title_b">WMS銆丮ES銆佽川閲忚拷婧�</div>
- <div class="title_b">渚涘簲鍟嗗崗鍚屻�佺粡閿�鍟嗙鐞嗐�丒RP鎺ュ彛</div>
- <div class="content" style="margin-top: 0.3rem;">MingKeOS鍙箍娉涘簲鐢ㄤ簬ERP銆丼RM銆丆RM銆乄MS銆丮ES銆丏MS銆丱MS銆丄PP銆丅DA銆丗CC绛夊绉嶇郴缁熺殑鐮斿彂寤鸿鍦烘櫙</div>
- <div class="img_txt" style="padding:0.36rem 0.7rem 0.1rem;">
- <div class="line">
- <img src="../../img/zhu5.png" alt="" class="imgs">
- <span class="s1">浠撳簱绠＄悊绯荤粺<br />WMS </span>
- </div>
- <div class="line">
- <span class="s1 s2" style="margin-right:0.29rem">鍒堕�犳墽琛岀郴缁�<br />MES</span>
- <img src="../../img/zhu6.png" alt="" class="imgs s2">
-
- </div>
- </div>
- <div class="img_txt" style="padding:0.36rem 0.7rem 0.1rem;">
- <div class="line">
- <img src="../../img/zhu7.png" alt="" class="imgs">
- <span class="s1">璐ㄩ噺杩芥函绯荤粺<br />QTS</span>
- </div>
- <div class="line">
- <span class="s1 s2">缁忛攢鍟嗙鐞嗗钩鍙�<br />DMS</span>
- <img src="../../img/zhu8.png" alt="" class="imgs s2">
-
- </div>
- </div>
- <!-- <button class="btn" style="margin-top: 0.5rem;">鏌ョ湅鏇村</button> -->
- </div>
-
- <div class="m_zhu m_zhu3" style="height: 12.5rem;">
- <div class="title_a">鐢靛晢绯诲垪浜у搧</div>
- <div class="title_b">鍟嗗煄绯荤粺銆佹敮浠樻帴鍙ｃ�佺孩鍖呰惀閿�</div>
- <div class="title_b">鐢靛晢OMS銆佺數鍟哤MS銆佺墿娴佹帴鍙�</div>
- <div class="content" style="padding-top: 0.8rem;">MingKeOS甯姪浼佷笟瀵规帴鍚勯攢鍞笭閬擄紝瀹炵幇鍟嗗搧锛屽簱瀛橈紝璁㈠崟锛岀墿娴侊紝璐㈠姟绛夋暟鎹殑鍏ㄩ摼璺疮閫氥�侽MS鎷ユ湁浣滀笟娴佺▼鏅鸿兘璁惧畾锛屽彲鏍规嵁浼佷笟闇�姹傝嚜瀹氫箟鑷姩鍖栧鍗曟祦绋嬶紝鐏垫椿鐨勬媶鍗曞悎鍗曡鍒欏彲婊¤冻浼佷笟瀵逛簬澶嶆潅璁㈠崟鐨勫鐞嗛渶姹傦紝鑷姩鍖归厤鐗╂祦鏂规鍏ㄩ潰浼樺寲浜嗕紒涓氬湪瀹″崟銆佸璐с�佸彂璐у拰鍞悗绛夌幆鑺傜殑浣滀笟鏁堢巼銆�</div>
- <div class="img_txt" style="padding:0.36rem 0.7rem 0.1rem;">
- <div class="line">
- <img src="../../img/zhu9.png" alt="" class="imgs">
- <span class="s1">鑷缓鍟嗗煄<br />B2C銆丅2B2C</span>
- </div>
- <div class="line">
- <span class="s1 s2">澶氬钩鍙板鎺�<br />澶╃尗銆佷含涓溾��</span>
- <img src="../../img/zhu10.png" alt="" class="imgs s2">
- </div>
- </div>
- <div class="img_txt" style="padding:0.36rem 0.8rem 0.1rem 0.7rem;">
- <div class="line">
- <img src="../../img/zhu11.png" alt="" class="imgs">
- <span class="s1">澶氭敮浠樺満鏅�<br />鏀粯瀹濄�佸井淇♀��</span>
- </div>
- <div class="line">
- <span class="s1 s2" style="margin: -0.1rem 0 0 0.2rem;">鐗╂祦鎺ュ彛<br />鑿滈笩銆佹棤鐣�<br />椤轰赴銆佸痉閭�</span>
- <img src="../../img/zhu12.png" alt="" class="imgs s2">
- </div>
- </div>
- <div class="img_txt" style="padding:0.36rem 0.7rem 0.1rem;">
- <div class="line">
- <img src="../../img/zhu13.png" alt="" class="imgs">
- <span class="s1" style="margin-top: -0.1rem;">OMS-WMS<br />鍏ㄦ笭閬撱�佽鍗曞綊绫�<br />浠撻厤绛栫暐銆佽禒鍝佺瓥鐣�</span>
- </div>
- </div>
- <!-- <button class="btn" style="margin-top: 0.5rem;">鏌ョ湅鏇村</button> -->
+ <a class="see-detail" href="/caseDetail" style="color: #14A9E5;">浜嗚В璇︽儏 >></a>
</div>
<div class="wrapper">
<ul class="business_ul">
- <router-link tag="li" to="/caseDetail" v-for="(item,index) in 3" :key="index" class="fadeInUp" v-drag>
+ <router-link tag="li" to="/caseDetail" v-for="(business, index) in mainBusiness" :key="index" class="fadeInUp" v-drag>
<router-link tag="div" class="business_box animated pulse" :key="index" to="/caseDetail">
- <div class="business_box_t">
- <h2>鐢靛晢骞冲彴</h2>
- <p>MingKeOS甯姪浼佷笟瀵规帴鍚勯攢鍞笭閬擄紝瀹炵幇鍟嗗搧锛屽簱瀛橈紝璁㈠崟锛岀墿娴侊紝璐㈠姟绛夋暟鎹殑鍏ㄩ摼璺疮閫氥��
- OMS鎷ユ湁浣滀笟娴佺▼鏅鸿兘璁惧畾锛屽彲鏍规嵁浼佷笟闇�姹傝嚜瀹氫箟鑷姩鍖栧鍗曟祦绋嬶紝鐏垫椿鐨勬媶鍗曞悎鍗曡鍒欏彲婊¤冻浼佷笟瀵逛簬澶嶆潅璁㈠崟鐨勫鐞嗛渶姹傦紝鑷姩鍖归厤鐗╂祦鏂规锛屽叏闈紭鍖栦簡浼佷笟鍦ㄥ鍗曘�佸璐с�佸彂璐у拰鍞悗绛夌幆鑺傜殑浣滀笟鏁堢巼銆�</p>
+ <div class="business_box_t" :style="'background-image: url(' + business.Image1 + ')'">
+ <div class="bgopacity"></div>
+ <h2 v-text="business.Title2"></h2>
+ <p v-text="business.Remark"></p>
</div>
<ul class="business_box_b" id="string">
- <li v-for="(item,index2) in 4" :key="index2">
- <h3><img src="../../img/shop.png" alt=""></h3>
+ <li v-for="(item, index) in business.MainBusi" :key="index">
+ <h3>
+ <span class="fa" :class="item.bImage1">
+ <span class="path1"></span>
+ <span class="path2"></span>
+ <span class="path3"></span>
+ <span class="path4"></span>
+ </span>
+ </h3>
<div>
- <p>鑷缓鍟嗗煄</p>
- <p>B2C銆丅2B2C</p>
+ <p v-text="item.bTitle1"></p>
+ <p v-text="item.bTitle2"></p>
</div>
</li>
</ul>
@@ -121,25 +61,17 @@
</router-link>
<div class="business">
<h3>
- <img src="../../img/index_woman.png" v-if="index == 0" alt="">
- <img src="../../img/index_technology.png" v-if="index == 1" alt="">
- <img src="../../img/index33.jpg" v-if="index == 2" alt="">
+ <img :src="business.Image1" alt="">
</h3>
- <h2 v-if="index == 0"><a style="text-decoration: none;">鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</a></h2>
- <h2 v-if="index == 1"><a style="text-decoration: none;">鍏ㄦ笭閬撲緵搴旈摼浜у搧</a></h2>
- <h2 v-if="index == 2"><a style="text-decoration: none;">鐢靛晢绯诲垪浜у搧</a></h2>
- <p v-if="index == 0">MingKeOS</p>
- <p v-if="index == 1">WMS銆丮ES銆佽川閲忚拷婧�</p>
- <p v-if="index == 2">鍟嗗煄绯荤粺銆佹敮浠樻帴鍙ｃ�佺孩鍖呰惀閿�</p>
- <p v-if="index == 0">涓夊睆鍚堜竴銆佹晱鎹峰紑鍙戙�佸骞冲彴鎺ュ彛</p>
- <p v-if="index == 1">渚涘簲鍟嗗崗鍚屻�佺粡閿�鍟嗙鐞嗐�丒RP鎺ュ彛</p>
- <p v-if="index == 2">鐢靛晢OMS銆佺數鍟哤MS銆佺墿娴佹帴鍙�</p>
+ <h2><a style="text-decoration: none;" v-text="business.Title1"></a></h2>
+ <p v-text="business.CDefine1"></p>
+ <p v-text="business.CDefine2"></p>
</div>
</router-link>
</ul>
</div>
</div>
- <div class="wrapper" style="margin-top: 0.5rem;">
+ <div class="wrapper mob-wrapper">
<h3 class="content_title fadeInUp zoomIn animated title"><span>鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙癕ingKeOS</span></h3>
<h3 class="content_title fadeInUp zoomIn animated title-m"><span>MingKeOS</span></h3>
<h4 class="content_subtitle"><span>涓轰紒涓氭惌寤轰緵搴旈摼淇℃伅鍖栧钩鍙�</span></h4>
@@ -161,7 +93,7 @@
</el-carousel-item>
</el-carousel>
<ul class="platform_ul">
- <router-link to="/caseDetail" tag="li" v-for="(item,index) in 3" :key="item.menu_id">
+ <router-link to="/caseDetail" tag="li" v-for="(item, index) in 3" :key="item.menu_id">
<h3 v-if="index == 0"><img src="../../img/yuan1.png" alt=""></h3>
<h3 v-if="index == 1"><img src="../../img/100.png" alt=""></h3>
<h3 v-if="index == 2"><img src="../../img/yuan2.png" alt=""></h3>
@@ -174,132 +106,40 @@
</router-link>
</ul>
</div>
- <div class="wrapper-box">
- <h3 class="content_title fadeInUp zoomIn animated title"><span>鎴愮啛鐨勪緵搴旈摼绯荤粺瑙ｅ喅鏂规</span></h3>
- <h3 class="content_title fadeInUp zoomIn animated title-m"><span>瑙ｅ喅鏂规</span></h3>
- <div class="wrapper">
- <div class="content programme">
- <ul class="programme_ul">
- <router-link to="" tag="li">
- <h3><img src="../../img/programmeTool.png" alt="" @mouseover="img_index = 1" @mouseout="img_index = 0" class="animated" :class="img_index == 1 ? 'rotateIn' : ''"></h3>
- <p>鐢靛姩宸ュ叿</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/2.png" alt="" @mouseover="img_index = 2" @mouseout="img_index = 0" class="animated" :class="img_index == 2 ? 'rotateIn' : ''"></h3>
- <p>绯荤粺闆嗘垚</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/3.png" alt="" @mouseover="img_index = 3" @mouseout="img_index = 0" class="animated" :class="img_index == 3 ? 'rotateIn' : ''"></h3>
- <p>姹介厤琛屼笟</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/4.png" alt="" @mouseover="img_index = 4" @mouseout="img_index = 0" class="animated" :class="img_index == 4 ? 'rotateIn' : ''"></h3>
- <p>浜ら�氳繍杈�</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/5.png" alt="" @mouseover="img_index = 5" @mouseout="img_index = 0" class="animated" :class="img_index == 5 ? 'rotateIn' : ''"></h3>
- <p>鍒惰嵂琛屼笟</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/6.png" alt="" @mouseover="img_index = 6" @mouseout="img_index = 0" class="animated" :class="img_index == 6 ? 'rotateIn' : ''"></h3>
- <p>鑳芥簮琛屼笟</p>
- </router-link>
-
-
- <router-link to="" tag="li">
- <h3><img src="../../img/7.png" alt="" @mouseover="img_index = 7" @mouseout="img_index = 0" class="animated" :class="img_index == 7 ? 'rotateIn' : ''"></h3>
- <p>浠撳偍鐗╂祦</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/11.png" alt="" @mouseover="img_index = 8" @mouseout="img_index = 0" class="animated" :class="img_index == 8 ? 'rotateIn' : ''"></h3>
- <p>闂ㄧ獥琛屼笟</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/8.png" alt="" @mouseover="img_index = 9" @mouseout="img_index = 0" class="animated" :class="img_index == 9 ? 'rotateIn' : ''"></h3>
- <p>鍖昏嵂娴侀��</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/9.png" alt="" @mouseover="img_index = 10" @mouseout="img_index = 0" class="animated" :class="img_index == 10 ? 'rotateIn' : ''"></h3>
- <p>鍟嗕笟杩為攣</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/12.png" alt="" @mouseover="img_index = 11" @mouseout="img_index = 0" class="animated" :class="img_index == 11 ? 'rotateIn' : ''"></h3>
- <p>鐢靛瓙鍟嗗姟</p>
- </router-link>
- <router-link to="" tag="li">
- <h3><img src="../../img/10.png" alt="" @mouseover="img_index = 12" @mouseout="img_index = 0" class="animated" :class="img_index == 12 ? 'rotateIn' : ''"></h3>
- <p>鏉＄爜绠＄悊</p>
- </router-link>
- </ul>
- </div>
- </div>
- </div>
<div class="content">
<h3 class="content_title fadeInUp zoomIn animated"><span>鍏稿瀷妗堜緥</span></h3>
<h4 class="content_subtitle"><span>涓撴敞澶т腑鍨嬩紒涓氫俊鎭寲搴旂敤</span></h4>
- <div class="m_zhu m_zhu4" style="height: 9.3rem;">
- <div class="content" style="padding-top: 3.9rem;" @click="jump('successCaseIndex')">鍩轰簬鑷姩璇嗗埆鎶�鏈璁★紝瀹炵幇浜哠AP鎺ュ彛鍏ュ簱銆佸嚭搴撱�佺洏鐐广�佺Щ浣嶃�侀璀︺�佷氦鍙夐┏杩愮瓑涓氬姟鐨勭簿缁嗗寲绠＄悊銆傞噰璐緵璐у崗鍚岄」鐩墿鏂欒鍒掞紝鎸夐渶閲囪喘锛屽畾鍚戦厤閫佷氦鍙夐┏杩愶紝鑷姩鍒嗘嫞鏈嶅姟鍣ㄤ綅浜庡寳浜�婚儴鏈烘埧涔屽吂鍒厠鏂潶銆佷縿缃楁柉璺ㄥ瀹炴柦</div>
- <!-- <button class="btn" style="margin-top: 0.5rem;">鏌ョ湅鏇村</button> -->
+ <div class="mob_case">
+ <el-carousel height="6.7rem" arrow="never" :autoplay="true" :interval="5000" style="position: relative;">
+ <el-carousel-item v-for="_case in cases" :key="_case.ID">
+ <div class="case-box">
+ <div class="top" :style="'background-image: url(' + _case.Image1 + ')'"></div>
+ <div class="bottom">
+ <div style="font-size: 0.35rem;margin-bottom: 0.4rem;" v-text="_case.Title1"></div>
+ <img :src="_case.Image2" @click="jump('successCaseIndex')" alt="" style="max-width: 2.5rem;max-height: 0.8rem;">
+ <div style="position: absolute; right: 0.5rem;bottom: 0rem;" @click="jump('successCase')">
+ <img src="../../img/zhong5.png" alt="" style="width: 2rem;">
+ <img src="../../img/zhong6.png" alt="" style="width: 0.35rem;position: absolute;top: 0.08rem;right: 0.15rem;">
+ <span style="position: absolute;top: 0.11rem;left: 0.4rem;font-size: 0.24rem;">浜嗚В鏇村</span>
+ </div>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
</div>
<div class="content case pc_case">
- <el-carousel height="6.7rem" direction="vertical" :autoplay="false" style="position: relative;">
- <el-carousel-item>
- <div class="backg11">
- <div style="float: right;color: #fff;margin: 2.2rem 2.6rem 0 0;">
- <div style="font-size: 0.35rem;margin-bottom: 0.4rem;">鍗℃柉鏌�</div>
- <img src="../../img/zhong1.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong4.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong3.png" @click="jump('successCaseIndex')" alt="" style="cursor: pointer;">
+ <el-carousel height="6.7rem" direction="vertical" :autoplay="true" :interval="5000" style="position: relative;">
+ <el-carousel-item v-for="_case in cases" :key="_case.ID">
+ <div class="case-box">
+ <div class="left" :style="'background-image: url(' + _case.Image1 + ')'"></div>
+ <div class="right">
+ <div style="font-size: 0.35rem;margin-bottom: 0.4rem;" v-text="_case.Title1"></div>
+ <img :src="_case.Image2" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
<div style="position: relative;margin-top: 0.4rem;cursor: pointer;" @click="jump('successCase')">
<img src="../../img/zhong5.png" alt="">
- <img src="../../img/zhong6.png" alt="" style="position: absolute;top: 0.11rem;right: 1.94rem;">
- <span style="position: absolute;top: 0.12rem;right: 2.43rem;font-size: 0.18rem;">浜嗚В鏇村</span>
- </div>
- </div>
- </div>
- </el-carousel-item>
- <el-carousel-item>
- <div class="backg11 backg22">
- <div style="float: right;color: #fff;margin: 2.2rem 2.6rem 0 0;">
- <div style="font-size: 0.35rem;margin-bottom: 0.4rem;">濞佸厠澹�</div>
- <img src="../../img/zhong4.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong2.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong3.png" @click="jump('successCaseIndex')" alt="" style="cursor: pointer;">
- <div style="position: relative;margin-top: 0.4rem;cursor: pointer;" @click="jump('successCase')" >
- <img src="../../img/zhong5.png" alt="">
- <img src="../../img/zhong6.png" alt="" style="position: absolute;top: 0.11rem;right: 2.08rem;">
- <span style="position: absolute;top: 0.12rem;right: 2.58rem;font-size: 0.18rem;">浜嗚В鏇村</span>
- </div>
- </div>
- </div>
- </el-carousel-item>
- <el-carousel-item>
- <div class="backg11 backg33">
- <div style="float: right;color: #fff;margin: 1.9rem 2.6rem 0 0;">
- <div style="font-size: 0.35rem;margin-bottom: 0.4rem;">鍚屼粊鍫�</div>
- <img src="../../img/zhong1.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong2.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong4.png" @click="jump('successCaseIndex')" alt="" style="cursor: pointer;">
- <div style="position: relative;margin-top: 0.4rem;cursor: pointer;" @click="jump('successCase')" >
- <img src="../../img/zhong5.png" alt="">
- <img src="../../img/zhong6.png" alt="" style="position: absolute;top: 0.11rem;right: 1.48rem;">
- <span style="position: absolute;top: 0.12rem;right: 2rem;font-size: 0.18rem;">浜嗚В鏇村</span>
- </div>
- </div>
- </div>
- </el-carousel-item>
- <el-carousel-item>
- <div class="backg11 backg44">
- <div style="float: right;color: #fff;margin: 1.9rem 2.6rem 0 0;">
- <div style="font-size: 0.35rem;margin-bottom: 0.4rem;">涓浗鐭虫补宸ョ▼寤鸿鍏徃</div>
- <img src="../../img/zhong1.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong2.png" @click="jump('successCaseIndex')" alt="" style="margin-right: 0.45rem;cursor: pointer;">
- <img src="../../img/zhong3.png" @click="jump('successCaseIndex')" alt="" style="cursor: pointer;">
- <div style="position: relative;margin-top: 0.4rem;cursor: pointer;" @click="jump('successCase')" >
- <img src="../../img/zhong5.png" alt="">
- <img src="../../img/zhong6.png" alt="" style="position: absolute;top: 0.11rem;right: 1.82rem;">
- <span style="position: absolute;top: 0.12rem;right: 2.35rem;font-size: 0.18rem;">浜嗚В鏇村</span>
+ <img src="../../img/zhong6.png" alt="" style="position: absolute;top: 0.11rem;left: 1.4rem;">
+ <span style="position: absolute;top: 0.12rem;left: 0.45rem;font-size: 0.18rem;">浜嗚В鏇村</span>
</div>
</div>
</div>
@@ -308,54 +148,24 @@
</div>
</div>
<div class="m_hide" style="height: 1rem;"></div>
- <div class="wrapper">
+ <div class="wrapper mob-wrapper">
<h3 class="content_title fadeInUp zoomIn animated"><span>鏄庣鍔ㄦ��</span></h3>
<div class="m_hide" style="height: 0.5rem;"></div>
<div class="wrapper">
<ul class="dynamic_ul">
- <router-link to="/dynamicDetail" tag="li" v-for="(item,index) in 3" :key="index">
+ <router-link to="/dynamicDetail" tag="li" v-for="item in news" :key="item.ID">
<div style="cursor: pointer;">
- <h3 v-if="index == 0" class="h33">
- <img src="../../img/dynamic.png" alt="">
- <span>浼佷笟璧勮</span>
+ <h3 class="h33">
+ <img :src="item.Image1" alt="">
</h3>
- <div class="dynamic_ul_card" v-if="index == 0" style="height: 2.56rem;">
+ <div class="dynamic_ul_card">
<h2>
- <span style="display: inline-block;padding-top: 0.27rem;">鏄庣浜у搧璐ㄩ噺瀹夊叏杩芥函绯荤粺瑙ｅ喅鏂规</span>
- <span class="times" style="display: inline-block;padding-top: 0.08rem;">2017-03-08</span>
+ <span style="display: inline-block;padding-top: 0.2rem;" v-text="item.Title1"></span>
+ <span class="times" v-text="item.CompletedTime"></span>
<div style="clear: both;"></div>
</h2>
- <p class="m_txt" style="line-height: 0.25rem;">鏄庣鍏徃闈㈠悜鐢熶骇鍨嬩紒涓氫笓闂ㄧ爺鍙戜簡涓�濂楄川閲忕洃绠＄郴缁燂紝閽堝鍟嗗搧鐨勭敓浜ф棩鏈熴�佹湁鏁堟湡鎵瑰彿绛変俊鎭紝鍒涘缓鍞竴鍙瘑鍒潯鐮侊紝杩涜浜у搧璐ㄩ噺杩芥函锛屽啀鏍规嵁姝よ瘑鍒爜鐨勫寘瑁呭叧鑱旂爜鏌ヨ娴侀�氳繃绋嬩腑鐨勫晢鍝佹祦...</p>
+ <p v-text="item.Remark"></p>
</div>
-
- <h3 v-if="index == 1" style="position: relative;" class="h33">
- <img src="../../img/22.png" alt="">
- <span class="m_hide" style="position: absolute;top: 40%;left: 26%;font-size: 0.2rem;">瀹濇椂寰楃數鍟嗗钩鍙�</span>
- <span class="p_hide" style="position: absolute;top: 43%;left: 26%;font-size: 0.4rem;">瀹濇椂寰楃數鍟嗗钩鍙�</span>
- <span>鍏徃娲诲姩</span>
- </h3>
- <div class="dynamic_ul_card" v-if="index == 1" style="height: 2.56rem;">
- <h2>
- <span style="display: inline-block;padding-top: 0.27rem;">瀹濇椂寰楃數鍟嗗钩鍙伴」鐩惎鍔ㄤ細璁殕閲嶄妇琛�</span>
- <span class="times" style="display: inline-block;padding-top: 0.08rem;">2017-10-10</span>
- <div style="clear: both;"></div>
- </h2>
- <p class="m_txt" style="line-height: 0.25rem;">9鏈�22鏃ヤ笂鍗堬紝瀹濇椂寰楃數鍟嗗钩鍙伴」鐩惎鍔ㄤ細鍦ㄨ嫃宸炲巺闅嗛噸鍙紑锛屼笓涓氬伐鍏疯惀閿�涓績鏈辨�汇�佽储鍔″紶鎬汇�佷俊鎭寲绠＄悊閮ㄤ竵鎬伙紝鎼洪」鐩粍鍥㈤槦鍙傚姞浜嗘娆′細璁�傚寳浜槑绉戞櫘鍗庡壇鎬荤粡鐞嗗紶瀵岃吹鎼洪【闂唬琛�4浜哄嚭甯簡浼氳銆�</p>
- </div>
-
- <h3 v-if="index == 2" class="h33">
- <img src="../../img/33.png" alt="">
- <span>瑙ｅ喅鏂规</span>
- </h3>
- <div class="dynamic_ul_card" v-if="index == 2" style="height: 2.56rem;">
- <h2>
- <span style="display: inline-block;padding-top: 0.27rem;">鏄庣鍞悗鏈嶅姟璺熻釜绯荤粺瑙ｅ喅鏂规</span>
- <span class="times" style="display: inline-block;padding-top: 0.08rem;">2017-03-08</span>
- <div style="clear: both;"></div>
- </h2>
- <p class="m_txt" style="line-height: 0.25rem;">鏄庣鏈嶅姟璺熻釜绯荤粺MK-SES鏄敱鏄庣鍏徃棣栧垱鐨勫熀浜庤嚜鍔ㄨ瘑鍒妧鏈殑鏈嶅姟绯荤粺锛屽畠鑳借浼佷笟鑳藉鏇村ソ鐨勪负鐢ㄦ埛鎻愪緵鏇翠汉鎬у寲鐨勮窡韪湇鍔★紝骞朵笖鑳芥湁鏁堢殑闄嶄綆鏈嶅姟鎴愭湰銆�</p>
- </div>
-
</div>
</router-link>
</ul>
@@ -370,12 +180,34 @@
return {
brothers: '',
data: [],
- img_index:0,
+ img_index: 0,
+ mainBusiness: null,
+ cases: null,
+ news: null
}
},
methods:{
- jump(u){
+ jump (u) {
this.$router.push(u)
+ },
+ load () {
+ this.$axios({
+ data: {
+ func: 'Web_Index_GetData'
+ }
+ }).then(res => {
+ this.mainBusiness = res.Main
+ this.cases = res.Case
+ this.news = res.News
+ })
+ this.$axios({
+ data: {
+ func: 'Web_productCenter_GetData',
+ ID: '20190726105746487D81C9D31A08C4C55A81C'
+ }
+ }).then(res => {
+ console.log(res)
+ })
}
},
directives: {
@@ -399,27 +231,46 @@
brothers.style.display = 'none';
}
}
+ },
+ mounted () {
+ this.load()
}
}
</script>
<style scoped lang="less">
- .backg11{
+ .pc_case {
+ background: #162A45;
+ }
+ .case-box {
+ position: relative;
width: 100%;
height: 6.7rem;
- background:url(../../img/ban1.jpg) no-repeat;
- background-size: 100% 100%;
- }
- .backg22{
- width: 100%;
- height: 6.7rem;
- background:url(../../img/ban2.jpg) no-repeat;
- background-size: 100% 100%;
- }
- .backg33{
- background:url(../../img/ban3.jpg) no-repeat;
- }
- .backg44{
- background:url(../../img/ban4.jpg) no-repeat;
+ background: #162A45;
+
+ .left {
+ background-size: cover;
+ width: 50%;
+ height: 6.7rem;
+ }
+ .right {
+ position: absolute;
+ top: 2.2rem;
+ left: 70%;
+ color: #fff;
+ }
+ .top {
+ background-size: cover;
+ width: 100%;
+ height: 4rem;
+ }
+ .bottom {
+ position: absolute;
+ top: 4.2rem;
+ left: 0;
+ width: 100%;
+ padding-left: 0.5rem;
+ color: #fff;
+ }
}
.dynamic_ul li {
h2 {
@@ -467,55 +318,69 @@
}
@media (max-width: 750px) and (min-width: 0) {
- .dynamic_ul_card {
- height: auto !important;
+ .mob_case {
+ background: #ffffff;
+ position: relative;
+ margin: 0.6rem 0.3rem 0rem;
- h2 {
- span {
- padding-top: 0 !important;
- font-size: 0.32rem !important;
- font-family: PingFang-SC-Bold;
- font-weight: bold;
- color: rgba(32, 36, 42, 1);
- line-height: 0.4rem;
- }
-
- .times {
- display: none !important;
- }
+ .el-carousel__item {
+ padding: 0;
}
- .m_txt {
- font-size: 0.32rem;
- font-family: PingFang-SC-Regular;
- font-weight: 400;
- color: rgba(54, 54, 54, 1);
- line-height: 0.44rem !important;
- text-align: left;
- margin-top: 0;
+ .btn {
+ width: 3.38rem;
+ height: 1.04rem;
+ margin-left: calc(50% - 1.69rem);
+ border: 0.02rem solid #52b6e7;
+ font-size: 0.3rem;
+ font-family: PingFang-SC-Medium;
+ font-weight: 500;
+ color: #0380be;
+ background-color: #fff;
+ outline: none;
}
}
-
.pc_case {
display: none;
}
.m_zhu {
- height: 9rem;
- background: url(../../img/z_back.png) no-repeat;
- background-size: 100% 100%;
+ margin: 0 0.3rem 0.5rem;;
+ background: #ffffff;
+ padding-bottom: 0.7rem;
+ .business_box_t {
+ position: relative;
+ background-size: 100% auto;
+ background-position: top;
+ text-align: left;
+ color: #fff;
+ padding: .2rem .1rem 0.4rem;
+
+ .bgopacity {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ }
+ }
.title_a {
+ position: relative;
+ z-index: 2;
font-size: 0.44rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: #fff;
text-align: center;
- padding-top: 0.7rem;
+ padding-top: 0.4rem;
margin-bottom: 0.1rem;
}
.title_b {
+ position: relative;
+ z-index: 2;
text-align: center;
font-size: 0.24rem;
font-family: PingFang-SC-Regular;
@@ -525,12 +390,12 @@
}
.content {
- font-size: 0.32rem;
+ font-size: 0.26rem;
font-family: PingFang-SC-Regular;
font-weight: 400;
color: rgba(54, 54, 54, 1);
line-height: 0.44rem;
- padding: 0.6rem 0.6rem 0.2rem;
+ padding: 0.4rem 0.3rem 0.2rem;
}
.img_txt {
@@ -541,59 +406,38 @@
flex: 1;
text-align: center;
- img {
- width: 0.9rem;
- }
-
- .imgs {
- float: left;
- }
-
- span {
+ .mob-bus-icon {
display: inline-block;
+ width: 0.7rem;
+ height: 0.7rem;
+ border: 1px solid #1CACE6;
+ border-radius: 0.7rem;
+
+ .fa {
+ line-height: 0.65rem;
+ font-size: 0.35rem;
+ color: #1CACE6;
+ }
+ }
+
+ p {
text-align: center;
color: #838383;
margin-top: 0.1rem;
- }
-
- .s1 {
- float: left;
- margin-left: 0.1rem;
- }
- .s2{
- float: right;
+ padding: 0px 0.1rem;
+ font-size: 0.24rem;
}
}
}
- .btn {
- width: 3.38rem;
- height: 1.04rem;
- margin-left: calc(50% - 1.69rem);
- border: 0.02rem solid rgba(82, 182, 231, 1);
- font-size: 0.3rem;
+ .see-detail {
+ font-size: 0.24rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
- color: rgba(3, 128, 190, 1);
- background-color: #fff;
- outline: none;
+ float: right;
+ margin-right: 0.5rem;
}
- }
-
- .m_zhu2 {
- background: url(../../img/z_back2.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .m_zhu3 {
- background: url(../../img/z_back3.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .m_zhu4 {
- background: url(../../img/z_back4.png) no-repeat;
- background-size: 100% 100%;
}
.platform_ul {
@@ -620,32 +464,11 @@
display: none;
}
- li .business_box {
- display: block;
- background: #fff;
- margin: 0 0.41rem 0.41rem 0.29rem;
-
- .business_box_t {
- background: url(../../img/business.png) 100% 100%;
-
- h2 {
- text-align: center;
- color: #fff;
- padding: .25rem 0 .1rem;
- }
-
- p {
- margin-top: 0.1rem;
- font-size: 0.32rem;
- line-height: 0.44rem;
- }
- }
- }
-
.banner {
- background: url(../../img/indexBanner_m.png) no-repeat center;
+ background: url(../../img/indexBanner_m.jpg) no-repeat center;
min-height: 11.44rem;
background-size: cover;
+ margin-top: 1.13rem;
img {
display: none;
@@ -739,43 +562,40 @@
.dynamic_ul li {
text-align: center;
- padding: 0 0.2rem;
+ padding: 0;
margin-bottom: 0.3rem;
h3 {
height: 4rem;
-
- span {
- left: -1.6rem;
- }
}
- }
- .dynamic_ul li h3 span {
- background: transparent;
- bottom: 0.55rem;
- }
+ .dynamic_ul_card {
+ padding: 0.3rem 0.2rem;
+ background: #fff;
- .dynamic_ul_card {
- border: 1px solid #D1D1D1;
- padding: 0.3rem 0.2rem;
- background: #fff;
-
- h2 {
- font-weight: bold;
- font-size: 0.36rem;
-
- span {
+ h2 {
+ padding: 0;
+ font-weight: bold;
font-size: 0.36rem;
- color: #20242A;
- }
- }
- p {
- margin-top: 0.3rem;
- font-size: 0.32rem;
- line-height: 0.44rem;
- color: #363636;
+ span:first-child {
+ color: #20242A;
+ font-size: 0.32rem;
+ }
+ .times {
+ display: none;
+ }
+ }
+
+ p {
+ font-size: 0.26rem;
+ font-family: PingFang-SC-Regular;
+ font-weight: 400;
+ color: rgba(54, 54, 54, 1);
+ line-height: 0.44rem;
+ text-align: left;
+ margin-top: 0;
+ }
}
}
@@ -802,9 +622,20 @@
padding: .4rem;
}
}
+ .mob-wrapper {
+ width: auto;
+ margin: 0 0.3rem;
+
+ .wrapper {
+ width: 100%;
+ }
+ }
}
@media all and (min-width: 751px) {
+ .mob_case {
+ display: none;
+ }
.h33{
height: 2.05rem;
}
@@ -825,7 +656,7 @@
}
.wrapper-box {
- padding: .5rem 1.8rem;
+ padding: .5rem 0rem;
}
.business_ul {
@@ -879,7 +710,7 @@
p {
color: #838383;
- font-size: 0.1rem;
+ font-size: 0.12rem;
}
p:nth-child(4) {
@@ -892,35 +723,51 @@
width: 100%;
height: auto;
background: #fff;
- padding: 0 0 0.4rem 0;
+ padding: 0 0 0.1rem 0;
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05);
.business_box_t {
- background: url(../../img/business.png) 100% 100%;
+ position: relative;
+ background-size: 100% auto;
+ background-position: top;
text-align: left;
height: 1.4rem;
color: #fff;
padding: .2rem .1rem;
+ .bgopacity {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ }
h2 {
+ position: relative;
+ z-index: 2;
margin: 0;
font-size: .18rem;
+ margin-bottom: 0.05rem;
}
p {
- font-size: .035rem;
+ position: relative;
+ z-index: 2;
+ font-size: .12rem;
color: #fff;
}
}
.business_box_b {
display: flex;
- // margin-top: 0.28rem;
padding: 0 .1rem;
flex-wrap: wrap;
li {
width: 33.3%;
margin-top: 0.28rem;
+ height: 0.55rem;
h3 {
img {
@@ -930,8 +777,8 @@
}
}
- div>p {
- font-size: .02rem;
+ div > p {
+ font-size: 0.12rem;
color: #838383;
}
}
@@ -971,7 +818,7 @@
}
p {
- font-size: 0.11rem;
+ font-size: 0.13rem;
color: #838383;
}
}
@@ -1050,6 +897,17 @@
.dynamic_ul_card {
background: rgba(243, 243, 243, 1);
+ height: 2.56rem;
+
+ h2 {
+ .times {
+ display: inline-block;
+ padding-top: 0.08rem;
+ }
+ }
+ p {
+ line-height: 0.25rem;
+ }
}
.wrapper:last-child .content_title {
--
Gitblit v1.8.0