2019-08-14update

king

2019-08-14 68cbb649c933776838e937446ce9ed384916a5e8

 src/views/successCase/caseDetail.vue

@@ -39,114 +39,181 @@
          </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>
          </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="content-bottom">
          <img src="../../img/c11.png" alt="">
        <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>
      </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 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="content-bottom">
            <img src="../../img/c11.png" alt="">
          </div>
      </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
    }
  },
  watch: {
    $route () {
      this.menuId = this.$route.params.menuId
      this.load()
    }
  },
  methods: {
    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
        })
      })
    }
  },
  created () {
    this.menuId = this.$route.params.menuId
  },
  mounted () {
    this.load()
  }
}
</script>

<style lang="less" scoped>
.warpper{
    width: 100%;
.warpper {
  width: 100%;
}
.caseDetail{
    margin: 0;
    width: 100%;
.caseDetail {
  margin: 0;
  width: 100%;
}
h3{
    font-size: 0.16rem;
    color: #3A3A3C;
    padding-left: .06rem;
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,8 +223,8 @@
   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){
   .three_box{
@@ -173,10 +240,10 @@
      }
   }
   
    h3{
        font-size: .4rem;
  h3 {
    font-size: .4rem;
      padding-left: 0.2rem;
    }
  }
   .h3::after{
      width:1.15rem;
      height:0.06rem;
@@ -186,127 +253,127 @@
      left: calc(50% - 0.45rem);
   }
   
    .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{
            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;
                }
            }
  .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 {
      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;
        }
      }
    }
    .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;
                }
            }
  }
  .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;
        }
      }
    }
    .content-bottom{
        width: 94%;
        box-sizing: border-box;
        margin: .4rem auto;
        padding: .1rem 0;
        h3{
            text-align: center;
            border:none;
            margin-bottom: .57rem;
        }
        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;
                }
            }
        }
  }
  .content-bottom {
    width: 94%;
    box-sizing: border-box;
    margin: .4rem auto;
    padding: .1rem 0;
    h3 {
      text-align: center;
      border:none;
      margin-bottom: .57rem;
    }
    .title{
        text-align: center;
        margin-bottom: 1.05rem;
        a:first-child{
            display: none;
    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-m{
            display: inline-block;
            width: 3.38rem;
            height: 1.04rem;
            line-height: 1.04rem;
            border: 1px solid #52B6E7;
            color: #52B6E7;
        }
      }
    }
  }
  .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;
    }
  }
}
@media (min-width: 751px){
   h3{
      span{
   h3 {
      span {
         padding-left: 0.2rem;
      }
   }
   h3::after{
   h3::after {
      content: '';
      width: 0.06rem;
      height: 0.3rem;
@@ -315,137 +382,136 @@
      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.91rem;
    .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;
                }
            }
  }
  .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.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;
        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>