<template>
  <footer class="footer">
    <div class="main">
      <div class="w-110px">
        <img src="/images/footer/qr-code.png" alt="">
        <h3 class="info font-size-12">桐乡教育App<br>及时了解最新动态</h3>
      </div>
      <div class="w-320px ml-75px">
        <h3 class="text-18px text-hex-fff">联系我们</h3>
        <h3 class="mt-20px f-info f-1">0573-89393295</h3>
        <h3 class="mt-15px f-info f-2">txhlwxx@126.com</h3>
        <h3 class="mt-15px f-info f-3">浙江省桐乡市梧桐街道康民路280号</h3>
      </div>
      <div class="w-120px h-180px ml-40px">
        <img src="/images/footer/f-4.png" alt="">
      </div>
      <div class="w-120px h-180px ml-20px">
        <img src="/images/footer/f-5.png" alt="">
      </div>
      <div class="w-320px h-100px ml-70px mt-75px color-1 text-14px leading-20px">
        技术支持：苏州博智电子科技有限公司<br>
        备案：浙ICP备17002648号-1<br>
        备案登记网址：<a href="https://beian.miit.gov.cn" target="_blank" class="color-1">https://beian.miit.gov.cn</a><br>
        违法和不良信息公开举报电话：0573-89393295<br>
        举报邮箱：1499585689@qq.com
      </div>
    </div>
  </footer>
</template>
  
  <script>
export default {
  name: "index"
}
  </script>
  
  <style lang="scss" scoped>
.footer {
  width: 100%;
  height: 250px;
  background: #1f232f;
  .main {
    width: 1200px;
    margin: 0 auto;
    padding-top: 35px;
    display: flex;
  }
  .info {
    margin-top: 10px;
    font-size: 12px;
    color: #fff;
    text-align: center;
  }
  .f-info {
    font-size: 18px;
    color: #fff;
    padding-left: 35px;
    &.f-1 {
      background: url("/images/footer/f-1.png") left no-repeat;
      background-size: 20px 19px;
    }
    &.f-2 {
      background: url("/images/footer/f-2.png") left no-repeat;
      background-size: 20px 16px;
    }
    &.f-3 {
      background: url("/images/footer/f-3.png") left no-repeat;
      background-size: 20px 20px;
    }
  }
  .color-1 {
    color: rgba(255, 255, 255, 0.5);
  }
}
</style>