king
2019-08-11 4e1cca0e3da79819fa3768402ce6a174aea5131f
src/views/productCenter/index.vue
@@ -9,12 +9,12 @@
    <div class="wrapper scene">
      <div class="content_title"><span>应用场景</span></div>
      <div class="content_scene">
        <span :class="h_index == 1 ? 'hover2' : 'scene'" @mouseover="h_index = 1" @mouseout="h_index = 0"><img src="../../img/p1.png" alt=""><span class="txt">供应商协同</span></span>
        <span :class="h_index == 2 ? 'hover2' : 'scene'" @mouseover="h_index = 2" @mouseout="h_index = 0"><img src="../../img/p2.png" alt=""><span class="txt txt2">WMS<br />仓库管理系统</span></span>
        <span :class="h_index == 3 ? 'hover2' : 'scene'" @mouseover="h_index = 3" @mouseout="h_index = 0"><img src="../../img/p3.png" alt=""><span class="txt txt2">QTS<br />质量追溯系统</span></span>
        <span :class="h_index == 4 ? 'hover2' : 'scene'" @mouseover="h_index = 4" @mouseout="h_index = 0"><img src="../../img/p4.png" alt=""><span class="txt">经销商管理</span></span>
        <span :class="h_index == 5 ? 'hover2' : 'scene'" @mouseover="h_index = 5" @mouseout="h_index = 0"><img src="../../img/p5.png" alt=""><span class="txt txt2">MES<br />智能制造</span></span>
        <span :class="h_index == 6 ? 'hover2' : 'scene'" @mouseover="h_index = 6" @mouseout="h_index = 0">
        <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>
@@ -139,10 +139,10 @@
<script>
export default {
   data() {
      return {
         h_index: 0
      }
   data () {
    return {
    }
   }
}
</script>
@@ -167,7 +167,9 @@
    }
    .scene {
      margin: 0 auto;
        position: relative;
      position: relative;
      cursor: pointer;
      .txt {
        position: absolute;
        left: 1.16rem;
@@ -195,10 +197,14 @@
        }
      }
    }
    .hover2 {
      cursor: pointer;
      transform: scale(1.2);
      z-index: 99999;
    .scene-img {
      z-index: 1;
      transform: scale(1);
      transition: all 0.5s;
    }
    .scene-img:hover {
      transform: scale(1.1);
      z-index: 10;
    }
    .center .skill {
      .content_title {
@@ -301,9 +307,6 @@
    }
  }
   @media (max-width: 750px) and (min-width: 0) {
      .hover2 {
         pointer-events: none;
      }
      .joinBtnBox {
         margin: 0.6rem auto 1rem;
      }