<template>
    <div class="container">
      <div class="top">
      </div>
      <div class="w12">
        <div class="content">
          <div class="connact">
            <h3>联系我们</h3>
            <p>您有任何问题吗？关于我们的项目？我们期待回答您所有的问题。</p>
            <p><i class="iconfont icon-youjianduanxin"></i>info@luckytrip.cn</p>
            <hr>
            <p>您有酒店想在我们的网站上进行销售，请不要犹豫与我们联系，我们期待与您的合作。</p>
            <p><i class="iconfont icon-youjianduanxin"></i>bd@luckytrip.cn</p>
            <p><i class="iconfont icon-dianhua"></i>023-67094219</p>
          </div>
          <div class="feedback-wrap">
            <h3>我们期待回答您所有的疑问</h3>
            <div class="input-wrap">
              <input type="text" placeholder="您的姓名">
            </div>
            <div class="input-wrap">
              <input type="text" placeholder="您的邮箱">
            </div>
            <div class="input-wrap">
              <textarea type="text" placeholder="您的疑问"></textarea>
            </div>
            <a href="javascript:void(0)" class="sendBtn">发送</a>
          </div>
        </div>
      </div>
      <footB></footB>
    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {}
        },
        methods: {},
        components:{
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.top{
  width: 100%
  min-width: 1200px
  height: 430px
  background: url(../../assets/images/pc/connactUs.png) no-repeat 50%
}
.content{
  width 1200px
  /*min-height calc(100vh - 430px - 116px - 35px)*/
  margin auto
  padding-bottom 60px
  .feedback-wrap{
    display inline-block
    width 400px
    padding-left 60px
    padding-top 30px
    h3{
      margin-bottom 30px
      font-size 30px
      color #333333
    }
    .input-wrap{
      width 100%
      margin-bottom 30px
      font-size 14px
      input{
        width 100%
        height 40px
        padding-left 20px
        border 1px solid #bfbfbf
        box-sizing border-box
        &:focus{
          border 1px solid #26a2ff
        }
      }
      textarea{
        width 100%
        height 160px
        padding-left 20px
        padding-top 13px
        border 1px solid #bfbfbf
        box-sizing border-box
        resize none
        &:focus{
          border 1px solid #26a2ff
        }
      }
    }
    .sendBtn{
      display inline-block
      width 200px
      height 40px
      line-height 40px
      background #26a2ff
      border-radius 2px
      text-align center
      font-size 14px
      color #ffffff
      &:hover{
        background #2585d9
      }
    }
  }
  .connact{
    position relative
    float right
    width 538px
    height 350px
    margin-top -50px
    padding 40px 32px
    box-sizing border-box
    box-shadow 0 0 26px 1px #d7d7d7
    border-radius 4px
    background #064688
    color #fff
    h3{
      line-height 32px
      margin-bottom 24px
      font-size 30px
    }
    hr{
      margin 26px 0
      border none
      border-top 1px solid #eeeeee
    }
    p{
      line-height 26px
      font-size 14px
      i{
        color #fff
        margin-right 8px
      }
    }
  }
}
@media (max-width: 768px){
  .top{
    min-width auto
    height 360px
  }
  .w12{
    width 100%
    padding 20px
    box-sizing border-box
  }
  .content{
    width 100%
    padding-bottom 10px
    .feedback-wrap{
      width 100%
      padding-left 0px
      h3{
        font-size 24px
      }
    }
    .connact{
      float none
      width 100%
      margin-top 15px
      height auto
      min-height auto
    }
  }
}

</style>
