<template>
  <div class="serv-box">
    <img class="top-bar" src="../../assets/images/top-bar.png" alt="">
    <ul class="contact-info">
      <li>
        <img src="../../assets/images/ser-icon1.png" alt="">
        <div class="txt"><span>客服微信:</span> 18610017891</div>
      </li>
      <li>
        <img src="../../assets/images/ser-icon2.png" alt="">
        <div class="txt"><span>客服电话:</span> 18610017891</div>
      </li>
      <li>
        <img src="../../assets/images/ser-icon3.png" alt="">
        <div class="txt"><span>工作时间:</span> 工作日9:00-12:00,13:00-18:00</div>
      </li>
    </ul>
    <div class="code">
      <div class="txt">想了解更多，保存二维码图片，扫码关注我们</div>
      <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png" alt="">
    </div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
export default {
  components: {
    [ImagePreview.name]: ImagePreview
  },
  metaInfo: {
    title: '联系客服'
  },
  methods: {
    imagePreview() {
      ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png'])
    }
  }
}
</script>

<style lang="scss" scoped>
.top-bar{
  width: 100%;
  display: block;
}
.contact-info{
  padding-left: .7rem;
  padding-top: .2rem;
  li{
    display: flex;
    margin-bottom: .48rem;
    img{
      width: .5rem;
      height: .5rem;
      display: block;
    }
    .txt{
      margin-left: .3rem;
      line-height: .5rem;
      font-size:.3rem;
      color:rgba(34,34,34,1);
      span{
        font-weight:bold;
      }
    }
  }
}
.code{
  margin-top: .84rem;
  .txt{
    text-align: center;
    font-weight:bold;
    color:rgba(34,34,34,1);
    line-height:100%;
    font-size: .3rem;
  }
  img{
    width: 4.3rem;
    display: block;
    margin: .25rem auto;
  }
}
</style>
