2019-08-14update

king

2019-08-14 68cbb649c933776838e937446ce9ed384916a5e8

 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 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 class="wrapper scene">
      <div class="content_title"><span>应用场景</span></div>
      <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"><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 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 class="wrapper skill">
      <div class="content_title"><span>核心技术</span></div>
      <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">
          <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 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="wrapper industry">
      <div class="content_title"><span>适用行业</span></div>
      <div class="content_industry">
        <div class="content_industry_card">
          <h3>装备制造</h3>
          <p>中国正在成为全球制造业的中心，中国是制造业大国，但还不是强国。因此，国家确定了通过信息化带动工业化的国策，推动制造企业实施制造业信息化，产品设计制造和企业管理的信息化、生产过程控制的智能化、制造装备的数控化以及咨询服务的网络化，全面提升制造业的竞争力。</p>
      <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>· 供应商协同平台</li>
              <li>· 物料仓库管理系统</li>
              <li>· 制造执行系统</li>
              <li>· 成品仓库管理系统</li>
              <li>· 质量追溯系统</li>
              <li>· 经销商管理平台</li>
                <li v-for="(text, i) in cell.details" :key="i">· <span v-text="text"></span></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>
        </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="">
              <img :src="cell.url" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper join">
      <div class="content_title"><span>加盟代理</span></div>
    </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,16 +62,89 @@
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;
@@ -314,11 +356,23 @@
         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%;