<template>
  <div class="info">
    <div class="title">
      <img src="@/assets/images/info-title.png" alt="">
    </div>
    <div class="info-container">
      <router-link tag="div" to="/honor" class="info-box">
        <img src="@/assets/images/info-img1.png" alt="">
        <div class="info-text">
          <h3>公司荣誉</h3>
          <p>{{honorIntro}}</p>
        </div>
      </router-link>
      <router-link tag="div" to="/policy" class="info-box">
        <img src="@/assets/images/info-img2.png" alt="">
        <div class="info-text">
          <h3>政策法规</h3>
          <p>{{policyIntro}}</p>
        </div>
      </router-link>
      <router-link tag="div" to="/recruit" class="info-box">
        <img src="@/assets/images/info-img3.png" alt="">
        <div class="info-text">
          <h3>公司招聘</h3>
          <p>{{recruitIntro}}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "CompanyInfo",
  components: {},
  props: {
    honorIntro: String,
    policyIntro: String,
    recruitIntro: String,
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.info
  width 1200px
  margin 0 auto 60px
  .title
    text-align center
    margin-bottom 45px
  .info-container
    overflow hidden
    .info-box
      width 370px
      float left
      margin-right 45px
      cursor pointer
      &:last-child
        margin-right 0
      img
        width 100%
        height 200px
      .info-text
        padding 20px
        background #f6f6f6
        h3
          font-size 20px
          color #000
          margin-bottom 5px
          font-weight normal
        p
          font-size 14px
          color #000
          line-height 25px
          height 50px
          overflow hidden
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
</style>
