2025-03-04

king

2025-03-04 bae56a147be85be57ad1c64e9766c9aca750d187

 src/views/successCase/caseDetail.vue

@@ -1,127 +1,68 @@
<template>
  <div class="main">
    <div class="banner">
      <img src="../../img/Solutionbanner.png" alt="" class="m_hide">
      <img src="../../img/gongchang.png" alt="" class="p_hide">
      <img :src="url" alt="">
    </div>
    <div class="wrapper caseDetail">
      <div class="content_title"><span>智慧仓储WMS</span></div>
      <div class="content_title_p" style="margin:.4rem auto">
        随着人们生活水平的提高，消费者的需求从单一化、标准化逐渐向个性化、多样化转变，这对传统工业制造的生产物流组织形式带来巨大的冲击。明科积极响应“智能+”战略，通过IoT技术连接生产侧物流各环节的不同类型智能终端和执行单元，在统一的平台调度控制下，完成物理世界人、机、物、料、法、环的协同、优化与控制，从而适应大规模个性化生产模式下对物流组织模式柔性化、智能化、透明化的发展要求。
    
    <div class="wrapper caseDetail" :class="item.TypeCharOne === 'Wico' && !item.Title1 && 'nomargin'" v-for="(item, index) in details" :key="index">
      <div v-if="item.TypeCharOne === 'WLongText'">
        <div class="content_title"><span v-if="item.Title1" v-text="item.Title1"></span></div>
        <div v-for="(cell, i) in item.subs" :key="i">
          <div class="content_title_p" v-if="cell.type === 'text'" style="margin: .1rem auto .1rem;" :style="!i && 'margin-top: 0.4rem;'" v-text="cell.value"></div>
          <div class="content-img" v-else-if="cell.type === 'img'"><img :src="cell.value" alt=""></div>
        </div>
      </div>
      <div class="content_title_p" style="margin:.1rem auto">		
        明科围绕“降本、增效、提质、创收”的本质需求，整合认证生态链中的优秀伙伴，为工业客户提供涵盖原料收货入库、原料货到人及分拣上线、半成品暂存及转运上线、成品下线入库、成品货到人仓储管理、成品排序出库发运等全场景的智慧生产物流产品、解决方案及服务。
      </div>
      <div class="content-img"><img src="../../img/png2.png" alt=""></div>
      <div class="p_backg">
      <div class="p_backg" v-if="item.TypeCharOne === 'Wico'">
        <div class="wrapper">
          <div class="project" style="padding: 0.2rem 0 0.3rem;">
            <h3><span>方案特点</span></h3>
          <div class="project">
            <h3 :class="!item.Title1 && 'noborder'"><span v-if="item.Title1" v-text="item.Title1"></span></h3>
            <div class="program">
              <dl>
                <dt><img src="../../img/coverage4.png" alt=""></dt>
                <dd>可配置开发</dd>
              </dl>
              <dl>
                <dt><img src="../../img/f2.png" alt=""></dt>
                <dd>高效、低成本需求变更</dd>
              </dl>
              <dl>
                <dt><img src="../../img/f3.png" alt=""></dt>
                <dd>智能连接IoT设备</dd>
              </dl>
              <dl>
                <dt><img src="../../img/f4.png" alt=""></dt>
                <dd class="m_hide">数字化生态、开放式融合、平台化运营</dd>
                <dd class="p_hide">数字化生态<br />开放式融合<br />平台化运营</dd>
              <dl v-for="(cell, i) in item.DOne" :key="i">
                <dt><img :src="cell.Images" alt=""></dt>
                <dd class="m_hide" v-text="cell.Title1"></dd>
                <dd class="p_hide">
                  <p v-for="(title, t) in cell.Title1.split('、')" :key="t" v-text="title"></p>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper">
      <div class="wrapper" v-if="item.TypeCharOne === 'Wcontent'">
        <div class="content-box">
          <h3><span>应用场景</span></h3>
          <ul class="scene m_hide">
            <li>
              <img src="../../img/y1.png" alt="">
              <p>原料收货入库</p>
            </li>
            <li>
              <img src="../../img/y2.png" alt="">
              <p>原料货到人及分拣上线</p>
            </li>
            <li>
              <img src="../../img/y3.png" alt="">
              <p>半成品暂存及转运上线</p>
            </li>
          </ul>
          <ul class="scene m_hide">
            <li>
              <img src="../../img/y4.png" alt="">
              <p>成品下线入库</p>
            </li>
            <li>
              <img src="../../img/y5.png" alt="">
              <p>成品货到人仓储管理</p>
            </li>
            <li>
              <img src="../../img/y6.png" alt="">
              <p>成品排序出库发运</p>
            </li>
          </ul>
          
          <ul class="scene p_hide">
            <li>
              <img src="../../img/y1.png" alt="">
              <p>原料收货入库</p>
            </li>
            <li>
              <img src="../../img/y2.png" alt="">
              <p>原料货到人及分拣上线</p>
            </li>
            <li>
              <img src="../../img/y3.png" alt="">
              <p>半成品暂存及转运上线</p>
            </li>
            <li>
              <img src="../../img/y4.png" alt="">
              <p>成品下线入库</p>
            </li>
            <li>
              <img src="../../img/y5.png" alt="">
              <p>成品货到人仓储管理</p>
            </li>
            <li>
              <img src="../../img/y6.png" alt="">
              <p>成品排序出库发运</p>
          <h3><span v-if="item.Title1" v-text="item.Title1"></span></h3>
          <ul class="scene">
            <li style="margin-bottom: 0.2rem;" v-for="(cell, i) in item.DOne" :key="i">
              <img :src="cell.Images" alt="">
              <p v-text="cell.Title1"></p>
            </li>
          </ul>
        </div>
      </div>
    
      <div class="wrapper" style="margin-bottom: 0.3rem;">
      <div class="wrapper" style="margin-bottom: 0.3rem;" v-if="item.TypeCharOne === 'Wimages'">
        <div class="content-bottom">
          <h3 class="h3"><span>合作伙伴</span></h3>
          <h3 class="h3"><span v-if="item.Title1" v-text="item.Title1"></span></h3>
        </div>
      </div>
      <div class="m_hide" style="background-color: #F9FBFD;">
        <div class="wrapper">
          <div class="content-bottom">
            <img src="../../img/c11.png" alt="">
        <div class="partner">
          <div v-for="(cell, i) in item.DOne" :key="i">
            <img :src="cell.Images" alt="">
          </div>
        </div>
      </div>
      <div class="three_box p_hide">
        <div><img src="../../img/he1.png" alt=""></div>
        <div><img src="../../img/he2.png" alt=""></div>
        <div><img src="../../img/he3.png" alt=""></div>
      </div>
      <div class="title">
      <!-- <div class="title">
        <a class="m_hide" style="visibility: hidden;">了解更多</a>
        <a class="title-m">查看更多</a>
      </div> -->
    </div>
    <div class="wrapper other" v-if="otherlist">
      <div class="content_title"><span v-text="othertype.name"></span></div>
      <div class="content_skill">
        <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>    
    </div>
  </div>
</template>

@@ -131,7 +72,8 @@
    return {
      menuId: null,
      url: null,
      details: null
      details: null,
      otherlist: null
    }
  },
  watch: {
@@ -141,51 +83,43 @@
    }
  },
  methods: {
    jumpmenu (menu) {
      let _menuId = menu.ID
      _menuId = _menuId + '.html'

      this.$router.push({name: menu.PageType.toLowerCase(), params: {menuId: _menuId}})
    },
    load () {
      let param = {
        func: 'Web_productCenter_GetData',
        ID: this.menuId
        ID: this.menuId.replace('.html', '')
      }
      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
        this.details = res.Detail.map(item => {
          if (item.TypeCharOne === 'WLongText') {
            item.subs = []
            item.DOne.forEach(cell => {
              if (cell.LongText) {
                item.subs.push({
                  type: 'text',
                  value: cell.LongText
                })
              } else if (cell.Images) {
                item.subs.push({
                  type: 'img',
                  value: cell.Images
                })
              }
            })
          }
          return item
        })
        this.othertype = {
          type: res.Type,
          name: res.TypeName
        }
        this.otherlist = res.LinkDetail
      })
    }
  },
@@ -199,12 +133,38 @@
</script>

<style lang="less" scoped>
.main {
  min-height: 60vh;
}
.other {
  margin-top: 0.7rem;
  .content_skill {
    display: flex;
    .content_skill_item {
      padding: 0.4rem 0.2rem;
      flex: 1;
      img {
        cursor: pointer;
      }
      p {
        color: #3A3A3C;
        margin: 0.2rem 0;
        text-align: center;
        font-size: 0.16rem;
      }
    }
  }
}
.warpper {
  width: 100%;
}

.caseDetail {
  margin: 0;
  width: 100%;
}
.project {
  padding: 0.2rem 0 0.3rem;
}
h3 {
  font-size: 0.16rem;
@@ -227,6 +187,14 @@
  margin: .4rem auto 0;
}
@media (max-width: 750px) and (min-width: 0){
  .banner {
    margin-top: 1.13rem;
    img {
      max-width: none;
      width: 140%;
      margin-left: -20%;
    }
  }
   .three_box{
      margin: 0.4rem 0.3rem 0.8rem;
      display: flex;
@@ -239,7 +207,15 @@
         padding-right: 0;
      }
   }
	
   .wrapper {
      h3 {
      font-size: 0.36rem;
    }
    h3:after {
      width: 0.07rem;
      height: 0.42rem;
    }
   }
  h3 {
    font-size: .4rem;
      padding-left: 0.2rem;
@@ -249,28 +225,31 @@
      height:0.06rem;
      background:rgba(0,112,192,1);
      position: absolute;
      top: 0.55rem;
      left: calc(50% - 0.45rem);
      top: 0.05rem;
      left: calc(50% - 0.85rem);
   }
	
   h3.noborder::after {
    content: none;
  }
  h3.noborder {
    margin: 0;
  }
  .content_title_p {
    color: #3e3e3e;
    font-size: .16rem;
    margin: 0 auto !important;
    font-size:0.24rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(62,62,62,1);
    line-height:0.44rem;
    font-size: 0.26rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(62,62,62,1);
    line-height: 0.44rem;
  }
  .content_title,.content_title_p{
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem .43rem 0;
    padding: 0.2rem .43rem 0;
  }
  .content-img{
  .content-img {
    width: 100%;
    height: 3.5rem;
  }
  .project{
    background: #f9f9f9;
@@ -283,16 +262,33 @@
      display: flex;
      padding: .34rem 0;
      dl {
        width: 25%;
        flex: 1;
        dt {
          width: .94rem;
          height: .94rem;
          width: .8rem;
          height: .8rem;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          text-align: center;
          padding-top: .07rem;
          p {
            font-size: 0.26rem;
          }
        }
      }
    }
  }
  .caseDetail.nomargin {
    margin-top: 0;
    .project {
      padding-top: 0;
      margin-top: -0.1rem;
      .program {
        margin-top: 0;
      }
    }
  }
@@ -326,12 +322,12 @@
  .content-bottom {
    width: 94%;
    box-sizing: border-box;
    margin: .4rem auto;
    margin: .4rem auto 0;
    padding: .1rem 0;
    h3 {
      text-align: center;
      border:none;
      margin-bottom: .57rem;
      margin-bottom: .3rem;
    }
    ul {
      width: 100%;
@@ -366,13 +362,44 @@
      color: #52B6E7;
    }
  }
  .partner {
    display: flex;
    margin-top: 0.1rem;
  }
  .partner div {
    flex: 1;
    text-align: center;
    padding-right: 0.3rem;
  }
  .partner div:last-child {
    padding-right: 0;
  }
  .scene {
    li p {
      font-size: 0.26rem;
    }
  }
}
@media (min-width: 751px){
   h3 {
      span {
         padding-left: 0.2rem;
      }
   }
  }
  h3.noborder::after {
    content: none;
  }
  h3.noborder {
    margin: 0;
  }
  .partner {
    display: flex;
    margin-top: 0.4rem;
  }
  .partner div {
    flex: 1;
    text-align: center;
  }
   h3::after {
      content: '';
      width: 0.06rem;
@@ -400,7 +427,7 @@
      background-color: #f9fbfd;
   }
  .caseDetail {
    margin-top: 0.91rem;
    margin-top: 0.35rem;
    .content_title {
      margin: 0 auto;
    }
@@ -410,6 +437,15 @@
      line-height: .22rem;
      width: 11.92rem;
      margin: 0 auto;
    }
  }
  .caseDetail.nomargin {
    margin-top: 0rem;
    .project {
      padding-top: 0px;
      .program {
        margin-top: 0;
      }
    }
  }
  .project {
@@ -439,29 +475,29 @@
      }
    }
  }
  .content-bottom {
    width: 100%;
    ul {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.3%;
        padding: .08rem .1rem;
        img {
          display: block;
          width: 100%;
          height: .8rem;
          background: #747474;
        }
        p {
          text-align: center;
          margin: .1rem 0;
        }
      }
    }
  }
  // .content-bottom {
  //   width: 100%;
  //   ul {
  //     width: 100%;
  //     height: auto;
  //     display: flex;
  //     flex-wrap: wrap;
  //     li {
  //       width: 33.3%;
  //       padding: .08rem .1rem;
  //       img {
  //         display: block;
  //         width: 100%;
  //         height: .8rem;
  //         background: #747474;
  //       }
  //       p {
  //         text-align: center;
  //         margin: .1rem 0;
  //       }
  //     }
  //   }
  // }
  .title {
    width: 100%;
    text-align: center;
@@ -478,7 +514,7 @@
  .content-img {
    width: 12.32rem;
    height: auto;
    margin-top: 0.8rem;
    margin-top: 0.4rem;
  }
  .program {
    width: 100%;
@@ -486,14 +522,17 @@
    display: flex;
    margin: .2rem 0;
    dl {
      margin-right: .8rem;
      flex: 1;
      dt {
        width: .94rem;
        height: .94rem;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      dd {
        width: 1.8rem;
        text-align: center;
        padding-top: .07rem;
      }
@@ -507,11 +546,11 @@
    height: 4.82rem;
    margin: .2rem 0;
  }
  .partner {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: .2rem 0 .4rem 0;
  }
  // .partner {
  //   width: 100%;
  //   height: auto;
  //   box-sizing: border-box;
  //   margin: .2rem 0 .4rem 0;
  // }
}
</style>