2025-03-04

king

2025-03-04 bae56a147be85be57ad1c64e9766c9aca750d187

 src/views/successCase/caseDetail.vue

@@ -1,152 +1,179 @@
<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="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>
          </li>
        </ul>
      <div class="wrapper" v-if="item.TypeCharOne === 'Wcontent'">
        <div class="content-box">
          <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>
    
    <div class="wrapper" style="margin-bottom: 0.3rem;">
      <div class="content-bottom">
        <h3 class="h3"><span>合作伙伴</span></h3>
      </div>
    </div>
    <div class="m_hide" style="background-color: #F9FBFD;">
      <div class="wrapper">
      <div class="wrapper" style="margin-bottom: 0.3rem;" v-if="item.TypeCharOne === 'Wimages'">
        <div class="content-bottom">
          <img src="../../img/c11.png" alt="">
          <h3 class="h3"><span v-if="item.Title1" v-text="item.Title1"></span></h3>
        </div>
        <div class="partner">
          <div v-for="(cell, i) in item.DOne" :key="i">
            <img :src="cell.Images" alt="">
          </div>
        </div>
      </div>
      <!-- <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 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">
              <a class="m_hide" style="visibility: hidden;">了解更多</a>
              <a class="title-m">查看更多</a>
          </div>
      </div>    
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuId: null,
      url: null,
      details: null,
      otherlist: null
    }
  },
  watch: {
    $route () {
      this.menuId = this.$route.params.menuId
      this.load()
    }
  },
  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.replace('.html', '')
      }
      this.Service.getParamData(param).then(res => {
        this.url = res.Image1
        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
      })
    }
  },
  created () {
    this.menuId = this.$route.params.menuId
  },
  mounted () {
    this.load()
  }
}
</script>

<style lang="less" scoped>
.warpper{
    width: 100%;
.main {
  min-height: 60vh;
}
.caseDetail{
    margin: 0;
    width: 100%;
.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;
      }
    }
  }
}
h3{
    font-size: 0.16rem;
    color: #3A3A3C;
    padding-left: .06rem;
.warpper {
  width: 100%;
}

.caseDetail {
  margin: 0;
  width: 100%;
}
.project {
  padding: 0.2rem 0 0.3rem;
}
h3 {
  font-size: 0.16rem;
  color: #3A3A3C;
  padding-left: .06rem;
   margin-top: 0.2rem;
   position: relative;
}
h3::after{
h3::after {
   content: '';
   width:0.09rem;
   height:0.45rem;
@@ -156,10 +183,18 @@
   left: 0;
}
.content-img{
    box-sizing: border-box;
    margin: .4rem auto 0;
  box-sizing: border-box;
  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;
@@ -172,141 +207,200 @@
         padding-right: 0;
      }
   }
	
    h3{
        font-size: .4rem;
      padding-left: 0.2rem;
   .wrapper {
      h3 {
      font-size: 0.36rem;
    }
    h3:after {
      width: 0.07rem;
      height: 0.42rem;
    }
   }
  h3 {
    font-size: .4rem;
      padding-left: 0.2rem;
  }
   .h3::after{
      width:1.15rem;
      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);
   }
	
    .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;
    }
    .content_title,.content_title_p{
        width: 100%;
        box-sizing: border-box;
        padding: 0.6rem .43rem 0;
    }
    .content-img{
        width: 100%;
        height: 3.5rem;
    }
    .project{
        background: #f9f9f9;
        box-sizing: border-box;
        margin: .1rem auto;
        padding: .1rem 0;
        .program{
   h3.noborder::after {
    content: none;
  }
  h3.noborder {
    margin: 0;
  }
  .content_title_p {
    color: #3e3e3e;
    margin: 0 auto !important;
    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.2rem .43rem 0;
  }
  .content-img {
    width: 100%;
  }
  .project{
    background: #f9f9f9;
    box-sizing: border-box;
    margin: .1rem auto;
    padding: .1rem 0;
    .program {
      width: 100%;
      height: auto;
      display: flex;
      padding: .34rem 0;
      dl {
        flex: 1;
        dt {
          width: .8rem;
          height: .8rem;
          margin: 0 auto;
          img {
            width: 100%;
            height: auto;
            display: flex;
            padding: .34rem 0;
            dl{
                width: 25%;
                dt{
                    width: .94rem;
                    height: .94rem;
                    margin: 0 auto;
                }
                dd{
                    text-align: center;
                    padding-top: .07rem;
                }
            }
            height: 100%;
          }
        }
        dd {
          text-align: center;
          padding-top: .07rem;
          p {
            font-size: 0.26rem;
          }
        }
      }
    }
    .content-box{
        background: #f9f9f9;
        box-sizing: border-box;
        margin: .4rem auto;
        padding: .1rem 0;
        ul{
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            margin: .2rem 0;
            li{
                width: 50%;
                padding: .08rem .18rem;
                img{
                    display: block;
                    width: 100%;
                    height: 1.8rem;
                    background: #747474;
                }
                p{
                    text-align: center;
                    margin: .1rem 0;
                }
            }
        }
  }
  .caseDetail.nomargin {
    margin-top: 0;
    .project {
      padding-top: 0;
      margin-top: -0.1rem;
      .program {
        margin-top: 0;
      }
    }
    .content-bottom{
        width: 94%;
        box-sizing: border-box;
        margin: .4rem auto;
        padding: .1rem 0;
        h3{
            text-align: center;
            border:none;
            margin-bottom: .57rem;
  }
  .content-box {
    background: #f9f9f9;
    box-sizing: border-box;
    margin: .4rem auto;
    padding: .1rem 0;
    ul {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      margin: .2rem 0;
      li {
        width: 50%;
        padding: .08rem .18rem;
        img {
          display: block;
          width: 100%;
          height: 1.8rem;
          background: #747474;
        }
        ul{
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 33.3%;
                padding: .08rem .1rem;
                img{
                    display: block;
                    width: 100%;
                    height: .98rem;
                    background: #747474;
                    border: 1px #000 dashed;
                }
            }
        p {
          text-align: center;
          margin: .1rem 0;
        }
      }
    }
    .title{
        text-align: center;
        margin-bottom: 1.05rem;
        a:first-child{
            display: none;
        }
        .title-m{
            display: inline-block;
            width: 3.38rem;
            height: 1.04rem;
            line-height: 1.04rem;
            border: 1px solid #52B6E7;
            color: #52B6E7;
        }
  }
  .content-bottom {
    width: 94%;
    box-sizing: border-box;
    margin: .4rem auto 0;
    padding: .1rem 0;
    h3 {
      text-align: center;
      border:none;
      margin-bottom: .3rem;
    }
    ul {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.3%;
        padding: .08rem .1rem;
        img {
          display: block;
          width: 100%;
          height: .98rem;
          background: #747474;
          border: 1px #000 dashed;
        }
      }
    }
  }
  .title{
    text-align: center;
    margin-bottom: 1.05rem;
    a:first-child {
      display: none;
    }
    .title-m {
      display: inline-block;
      width: 3.38rem;
      height: 1.04rem;
      line-height: 1.04rem;
      border: 1px solid #52B6E7;
      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{
   h3 {
      span {
         padding-left: 0.2rem;
      }
   }
   h3::after{
  }
  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;
      height: 0.3rem;
@@ -315,137 +409,148 @@
      top: -0.03rem;
      left: 0.1rem;
   }
   .content-bottom{
      .h3{
   .content-bottom {
      .h3 {
         padding-left: 0.05rem;
         span{
         span {
            padding-left: 0.15rem;
         }
      }
      .h3::after{
      .h3::after {
         width: 0.06rem;
         height: 0.3rem;
         left: 0.05rem;
         top: -0.02rem;
      }
   }
   .p_backg{
   .p_backg {
      background-color: #f9fbfd;
   }
    .caseDetail{
        margin-top: 0.91rem;
        .content_title{
            margin: 0 auto;
        }
        .content_title_p{
            font-size: 0.16rem;
            color: #747474;
            line-height: .22rem;
         width: 11.92rem;
         margin: 0 auto;
        }
  .caseDetail {
    margin-top: 0.35rem;
    .content_title {
      margin: 0 auto;
    }
    .project{
        width: 100%;
        background: #f9fbfd;
    .content_title_p {
      font-size: 0.16rem;
      color: #747474;
      line-height: .22rem;
      width: 11.92rem;
      margin: 0 auto;
    }
    .content-box{
        width: 100%;
        padding: .15rem 0 .15rem;
        ul{
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 33.3%;
                padding: .08rem .1rem;
                img{
                    display: block;
                    width: 100%;
                    background: #747474;
                }
                p{
                    text-align: center;
                    margin: .1rem 0;
                }
            }
  }
  .caseDetail.nomargin {
    margin-top: 0rem;
    .project {
      padding-top: 0px;
      .program {
        margin-top: 0;
      }
    }
  }
  .project {
    width: 100%;
    background: #f9fbfd;
  }
  .content-box {
    width: 100%;
    padding: .15rem 0 .15rem;
    ul {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.3%;
        padding: .08rem .1rem;
        img {
          display: block;
          width: 100%;
          background: #747474;
        }
    }
    .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;
                }
            }
        p {
          text-align: center;
          margin: .1rem 0;
        }
      }
    }
    .title{
        width: 100%;
  }
  // .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;
    a {
      display: inline-block;
      margin: 0 auto .8rem;
      border-bottom: 1px solid #0070c0;
      color: #0070c0;
    }
    .title-m {
      display: none;
    }
  }
  .content-img {
    width: 12.32rem;
    height: auto;
    margin-top: 0.4rem;
  }
  .program {
    width: 100%;
    height: auto;
    display: flex;
    margin: .2rem 0;
    dl {
      flex: 1;
      dt {
        width: .94rem;
        height: .94rem;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      dd {
        text-align: center;
        a{
            display: inline-block;
            margin: 0 auto .8rem;
            border-bottom: 1px solid #0070c0;
            color: #0070c0;
        }
        .title-m{
            display: none;
        }
        padding-top: .07rem;
      }
    }
    .content-img{
        width: 12.32rem;
        height: auto;
      margin-top: 0.8rem;
    }
    .program{
        width: 100%;
        height: auto;
        display: flex;
        margin: .2rem 0;
        dl{
            margin-right: .8rem;
            dt{
                width: .94rem;
                height: .94rem;
            margin: 0 auto;
            }
            dd{
            width: 1.8rem;
                text-align: center;
                padding-top: .07rem;
            }
        }
		
    }
   .program:first-child{
  }
   .program:first-child {
      margin-left: -0.55rem;
   }
    .scene{
        width: 100%;
        height: 4.82rem;
        margin: .2rem 0;
    }
    .partner{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        margin: .2rem 0 .4rem 0;
    }
  .scene {
    width: 100%;
    height: 4.82rem;
    margin: .2rem 0;
  }
  // .partner {
  //   width: 100%;
  //   height: auto;
  //   box-sizing: border-box;
  //   margin: .2rem 0 .4rem 0;
  // }
}
</style>