<template>
  <app-frame :tabs="tabs">
    <div id="allmap"></div>
    <template #article>
      <div class="article-contact">
        <div class="tit">{{ $t('about.contact.lxTit') }}</div>
        <div class="info" v-html="$t('about.contact.contactTxt')"></div>
        <div class="follow">
          <div class="tits">{{ $t('about.contact.follow') }}</div>
          <ul>
            <li>
              <img src="https://zws-imgs-pub.ezijing.com/static/public/5c4a58f1d41f786e7713a5a84069404d.png" />
              <div class="name">{{ $t('about.contact.followCodeT1') }}</div>
            </li>
            <li>
              <img src="https://webapp-pub.ezijing.com/project/marywood/wb-code.png" />
              <div class="name">{{ $t('about.contact.followCodeT2') }}</div>
            </li>
            <li>
              <img src="https://webapp-pub.ezijing.com/project/marywood/douyin-code.png" />
              <div class="name" style="margin-top: 50px">{{ $t('about.contact.followCodeT3') }}</div>
            </li>
            <li>
              <img src="https://webapp-pub.ezijing.com/project/marywood/xiaoet-code.png" />
              <div class="name">{{ $t('about.contact.followCodeT4') }}</div>
            </li>
          </ul>
        </div>
      </div>
    </template>
  </app-frame>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/aboutNavList.js'

export default {
  components: { AppFrame },
  data() {
    return {
      tabs: navList(this)
    }
  },
  mounted() {
    if (process.browser) {
      !(function (mapInit) {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https://api.map.baidu.com/api?v=2.0&ak=Z9Km7UTGFI2fwRrpGp7Mji4ySDsvn30d&callback=mapinit'
        window['mapinit'] = function () {
          mapInit()
        }
        document.head.appendChild(script)
      })(function () {
        // 这里使用BMap
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(116.336323, 39.998848), 20)
        map.enableScrollWheelZoom(true)
        // 创建点标记
        var marker1 = new BMap.Marker(new BMap.Point(116.336323, 39.998848))
        map.addOverlay(marker1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#allmap {
  width: 100%;
  height: 320px;
}
.article-contact {
  .tit {
    font-size: 22px;
    font-weight: 500;
    line-height: 100%;
  }
  .info {
    font-size: 16px;
    line-height: 32px;
    color: #333333;
    margin-top: 20px;
  }
  .follow {
    padding-top: 97px;
    .tits {
      font-size: 22px;
      font-weight: 500;
      line-height: 100%;
      color: #333333;
      margin-bottom: 30px;
    }
    ul {
      display: flex;
      li {
        width: 130px;
        margin-right: 80px;
      }
      img {
        display: block;
        width: 100%;
      }
      .name {
        font-size: 16px;
        margin-top: 22px;
        text-align: center;
        color: #666666;
      }
    }
  }
}
</style>
