| | |
| | | <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> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | h_index: 0 |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | .scene { |
| | | margin: 0 auto; |
| | | position: relative; |
| | | cursor: pointer; |
| | | |
| | | .txt { |
| | | position: absolute; |
| | | left: 1.16rem; |
| | |
| | | } |
| | | } |
| | | } |
| | | .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 { |
| | |
| | | } |
| | | } |
| | | @media (max-width: 750px) and (min-width: 0) { |
| | | .hover2 { |
| | | pointer-events: none; |
| | | } |
| | | .joinBtnBox { |
| | | margin: 0.6rem auto 1rem; |
| | | } |