2019-08-11

king

2019-08-11 4e1cca0e3da79819fa3768402ce6a174aea5131f

 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 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>
               <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>
                  <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、MES、质量追溯</div>
            <div class="title_b">供应商协同、经销商管理、ERP接口</div>
            <div class="content" style="margin-top: 0.3rem;">MingKeOS可广泛应用于ERP、SRM、CRM、WMS、MES、DMS、OMS、APP、BDA、FCC等多种系统的研发建设场景</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、电商WMS、物流接口</div>
            <div class="content" style="padding-top: 0.8rem;">MingKeOS帮助企业对接各销售渠道，实现商品，库存，订单，物流，财务等数据的全链路贯通。OMS拥有作业流程智能设定，可根据企业需求自定义自动化审单流程，灵活的拆单合单规则可满足企业对于复杂订单的处理需求，自动匹配物流方案全面优化了企业在审单、备货、发货和售后等环节的作业效率。</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、B2B2C</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、B2B2C</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、MES、质量追溯</p>
                     <p v-if="index == 2">商城系统、支付接口、红包营销</p>
                     <p v-if="index == 0">三屏合一、敏捷开发、多平台接口</p>
                     <p v-if="index == 1">供应商协同、经销商管理、ERP接口</p>
                     <p v-if="index == 2">电商OMS、电商WMS、物流接口</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>明科商业智能开放平台MingKeOS</span></h3>
         <h3 class="content_title fadeInUp zoomIn animated title-m"><span>MingKeOS</span></h3>
         <h4 class="content_subtitle"><span>为企业搭建供应链信息化平台</span></h4>
@@ -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')">基于自动识别技术设计，实现了SAP接口入库、出库、盘点、移位、预警、交叉驳运等业务的精细化管理。采购供货协同项目物料计划，按需采购，定向配送交叉驳运，自动分拣服务器位于北京总部机房乌兹别克斯坦、俄罗斯跨境实施</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>
@@ -371,11 +181,33 @@
            brothers: '',
            data: [],
            img_index:0,
            mainBusiness: null,
            cases: null,
            news: null
         }
      },
      methods:{
         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%;
      background: #162A45;
		
      .left {
         background-size: cover;
         width: 50%;
      height: 6.7rem;
      background:url(../../img/ban2.jpg) no-repeat;
      background-size: 100% 100%;
   }
   .backg33{
      background:url(../../img/ban3.jpg) no-repeat;
      .right {
         position: absolute;
         top: 2.2rem;
         left: 70%;
         color: #fff;
   }
   .backg44{
      background:url(../../img/ban4.jpg) no-repeat;
      .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;
         .el-carousel__item {
            padding: 0;
            }

            .times {
               display: none !important;
         .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;
            }
         }

         .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;
         }
      }

      .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 {
         border: 1px solid #D1D1D1;
         padding: 0.3rem 0.2rem;
         background: #fff;

         h2 {
               padding: 0;
            font-weight: bold;
            font-size: 0.36rem;

            span {
               font-size: 0.36rem;
               span:first-child {
               color: #20242A;
                  font-size: 0.32rem;
               }
               .times {
                  display: none;
            }
         }

         p {
            margin-top: 0.3rem;
            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;
            color: #363636;
               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 {
@@ -931,7 +778,7 @@
               }

               div>p {
                  font-size: .02rem;
                  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 {