<div :class="{'menuContainer':true, 'active':menuShow}">
  <transition name="slide-fade">
    <div v-if="mouseOverState" class="menu-bg" v-bind:style="{backgroundImage:'url(' + backgroundImage + ')'}"></div>
  </transition>
  <div class="menu-close-btn" @click="closeMenu"></div>
  <div class="menu-body">
    <template v-for="(titleItm,index) in titleList">
      <div class="row">
        <div v-if="device.phone">
          <div class="text-left">
            <div class="title-Item" v-on:click="navigateToModule(titleItm.index)">
              <h1>{{titleItm.title}}</h1>
              <small>{{titleItm.subtitle}}</small>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="text-center" >
            <div class="title-Item" @mouseover="titleMouseOver(titleItm.index)" @mouseout="titleMouseOut" v-on:click="navigateToModule(titleItm.index)">
              <h1 :style="{opacity:((index === currentIdx)?'1':'0.2')}">{{titleItm.title}}</h1>
              <small :style="{opacity:((index === currentIdx)?'1':'0.2')}">{{titleItm.subtitle}}</small>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
  <div class="menu-bottom">
    <div class="menu-contact-map">
      <a style="text-decoration:none" href="https://www.amap.com/search?id=B0FFGBBQ2T&city=310106&geoobj=121.442433%7C31.284634%7C121.453795%7C31.289911&query_type=IDQ&query=%E5%A4%A7%E5%AE%81%E5%BE%B7%E5%BF%85%E6%98%93%E5%9B%ADE%E5%BA%A7&zoom=17" target="_blank">
        <div class="map-icon">
          <img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
        </div>
        <div class="map-address">
          <p>地址</p>
        </div>
        <div class="map-desc">
          <p>上海市静安区彭江路602号E座408室</p>
        </div>
      </a>
    </div>
    <div class="menu-contact-phone">
      <div class="phone-icon">
        <img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
      </div>
      <div class="phone-address">
        <p>电话</p>
      </div>
      <div class="phone-desc">
        <p>
          <a href="tel:02156519508">021-50753278</a>
        </p>
      </div>
    </div>
    <div class="menu-contact-mail">
      <div class="email-icon">
        <img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
      </div>
      <div class="email-address">
        <p>邮件</p>
      </div>
      <div class="email-desc">
        <p>
          <a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a>
        </p>
      </div>
    </div>
  </div>
</div>
