<template>
  <div class="layout_com_page">
    <vue-lazy-component>
      <div class="contact-banner" :style="{height: heightdy + 'px'}">
        <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号院3号楼（清华科技园创业大厦）8层</span>
        </div>
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <leavex
        :imgUrl="require('@/assets/images/mes1.png')"
        :imgUrlBg="require('@/assets/images/mesbk.png')"
        :leavheight=" heightdy - 60"
      />
    </vue-lazy-component>
    <vue-lazy-component>
      <page-footer />
    </vue-lazy-component>
  </div>
</template>
<script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
export default {
  name: 'contact-us',
  mixins: [dyHeight],
  components: {
    Leavex,
    PageFooter
  }
}
</script>

<style lang="scss" scoped>
.contact-banner {
  width: 100%;
  position: relative;
  background: url('~@/assets/images/wm.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  .contact-main {
    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>
