<template>
  <div class="contact">
    <Navbars></Navbars>
    <div class>
      <img src="../assets/image/contact/contactbanner.png" style="width:100%" />
      <!-- width="100%" height="300"> -->
    </div>

    <div class="contact-1">
      <div class="contact-main">
        <h1 style="margin-bottom:70px">联系我们</h1>

        <div class="row app" style="margin:0">
          <div class="col-md-6 col-xs-6 st1" style=" border-right: 1px solid #aaa;">
            <div class="pull-right1">
              <img class="img1" src="../assets/image/contact/weixin.jpg" style="weight:100%" />
              <div class="caption">
                <h2>微信咨询</h2>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-xs-6 st2">
            <div class="pull-left1">
              <img class="img1" src="../assets/image/contact/QQ.jpg" style="weight:100%" />
              <div class="caption">
                <h2>QQ咨询</h2>
              </div>
            </div>
          </div>
        </div>
        <div>
          <a v-if="isMobilePhone" href="tel:13585167730">
            <img src="../assets/image/contact/photo.jpg" alt style="padding-top:7vw;width:61.2vw" />
          </a>
          <img v-else src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:80%" />
        </div>
      </div>
      <div class="address" style=" ">
        <p class="p1">
          <strong>南京福予文化传媒有限公司</strong>
        </p>

        <p class="p2 app">地址：南京市江宁区秣周东路12号悠谷三号楼（砂之船奥特莱斯旁）</p>
      </div>
    </div>
  </div>
</template>



<script>
// @ is an alias to /src

import { isMobilePhone } from '../../utils'
import Navbars from '../components/Navbars'

export default {
  name: 'contact',
  data () {
    return { isMobilePhone, }

  },
  components: {

    Navbars,
  },






}
</script>

<style>
.coll {
  display: none;
}
</style>

<style lang="less" scoped>
.contact{
  min-height: 85vh;
}


.col-md-6,
.col-xs-6 {
  padding: 0px;
}
@media (max-width: 992px) {
  .address {
    .p1 {
      padding-top: 7.57vw;
      font-size: 2.9vw;
      margin-bottom: 0;
    }
    .p2 {
      font-size: 2.4vw;
      padding-top: 1.9vw;
    }
  }
}
@media (min-width: 992px) {
  h1 {
    font-weight: bold;
  }
  .address {
    .p1 {
      padding-top: 70px;
      font-size: 3.6rem;
    }
    .p2 {
      font-size: 3rem;
      padding-top: 14px;
    }
  }
  .pull-right1 {
    float: right;
    padding-right: 120px;
  }
  .pull-left1 {
    float: left;
    padding-left: 120px;
  }
}
</style>

<style lang="less" scoped>
@media (max-width: 992px) {
  .contact {
    margin-top: 47.8px;
  }

  .img1 {
    width: 20vw !important;
  }
  .pull-right1{
    float: right;
    margin-right: 8.5vw;
  }
  .pull-left1{
    float: left;
    margin-left: 8.5vw
  }
  h1{
    font-size: 3.22vw;
    margin-top: 4.9vw;
    margin-bottom: 5vw !important;
  }
  h2{
    font-size: 2.4vw;
    margin-top: 1.6vw;
   
  margin-bottom: 0.08vw !important;


  }
}

@media (min-width: 992px) {
  .contact {
    padding-top: 116px;
  }
  .contact-1 {
    width: 80%;
    padding: 50px;
    margin-top: -120px;

    background-color: #fff;
    display: inline-block;
    border-radius: 0;
    border: 1px solid #dcdcdc;
  }

  .contact-1 .contact-main {
    width: 707px;
    margin: 0 auto;
    padding-top: 20px;
  }

  .contact-2 {
    padding: 98px 98px 27px 98px;
  }
  
}
h2 {
  margin-bottom: -22px;

}

@media (min-width: 992px) and (max-width: 1551px) {
  .contact-1 {
    width: 80%;
    padding: 30px 16px 63px;
    margin-top: -85px;
  }
  .border-bottom {
    font-size: 20px;
    border-bottom: 1px solid #bfbfbf;
    padding: 0px;
  }
  h1 {
    font-size: 2.52rem;
  }
  h2 {
    font-size: 2.1rem;
  }
  .address {
    .p1 {
      padding-top: 70px;
      font-size: 2.52rem;
    }
    .p2 {
      font-size: 2.1rem;
      padding-top: 12px;
    }
  }
}
@media  (max-width: 551px) {
  // h2{
  //   font-size: 2rem
  // }
}
</style>