<template>
  <div class="layout_com_page">
    <div class="contact-banner">
      <div class="pop"></div>
      <div class="contact-main">
        <span class="font-size-24">ezijing</span>
        <span class="font-size-40 befo">BEIJING</span>
        <span class="font-size-40">清控紫荆（北京）教育科技股份有限公司</span>
        <span class="font-size-18">地址：北京市海淀区中关村东路1号院7号楼5层</span>
        <span class="font-size-18">电话：010-62796446</span>
      </div>
    </div>
    <FormBox />
  </div>
</template>
<script>
import FormBox from '@/components/formBox'

export default {
  name: 'contact-us',
  components: { FormBox }
}
</script>

<style lang="scss" scoped>
.contact-banner {
  height: calc(100vh - 10px);
  position: relative;
  background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/xlwm_bg.jpg) no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  .pop{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: .5);
  }
  .contact-main {
    position: relative;
    z-index: 99;
    height: 100%;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    span {
      padding: 5px;
    }
    .befo {
      position: relative;
      margin-bottom: 10px;
      &::before {
        content: '';
        position: absolute;
        bottom: 2px;
        height: 3px;
        background: #fff;
        width: 13%;
      }
    }
  }
}
</style>
