<template>
  <div class="main_content ">
    <div class="container_item banner1">
      <a href="https://marywood-plus.ezijing.com" target="_blank">
        <div class="btn_detail">查看详情</div>
      </a>
    </div>

    <div class="container_item banner2">
      <a href="https://marywood.ezijing.com" target="_blank">
        <div class="btn_detail">查看详情</div>
      </a>
    </div>
  </div>
</template>
<script>
export default {}
</script>

<style lang="scss" scoped>
.main_content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .container_item {
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0.42rem;
    position: relative;
    .btn_detail {
      width: 0.87rem;
      height: 0.25rem;
      border: 1px solid #ffffff;
      line-height: 0.25rem;
      text-align: center;
      font-size: 0.15rem;
      font-weight: 500;
      color: #ffffff;
      position: absolute;
      top: 2.15rem;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
    }
    // .btn_detail:hover {
    //   background: #ffffff;
    //   color: #333333;
    // }
  }
  .banner1 {
    background: url(https://webapp-pub.ezijing.com/www/h5/marywood/mary_banner1.png) no-repeat;
    background-size: 100% 100%;
  }
  .banner2 {
    background: url(https://webapp-pub.ezijing.com/www/h5/marywood/mary_banner2.png);
    background-size: contain;
  }
}
</style>
