<template>
  <div class="container1">
    <div class="zypic">
      <img src="../assets/zypic.png" alt="住院服务头部图片" />
    </div>
    <div class="in_box">
      <ul class="ul1">
        <li>
          <router-link to="ZYCharge">
            <h2 class="yujiao">住院预交</h2>
            <div class="yujiao_box">
              去缴费
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="ZYdailylist">
            <h2 class="qingdan">每日账单</h2>
            <div class="qingdan_box">
              去查询
            </div>
          </router-link>
        </li>
        <!-- <li>
          <router-link to="ZYJS">
            <h2 class="qingdan">住院结算</h2>
            <div class="zhuyuan_box">
              去查询
            </div>
          </router-link>
        </li> -->
      </ul>
    </div>
    <dh />
  </div>
</template>

<script>
import dh from "@/components/nav.vue";
export default {
  components: {
    dh
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.in_box {
  padding: 40px 20px;

  ul {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 允许元素换行 */
    gap: 16px; /* 增加元素之间的间距 */

    h2 {
      padding-bottom: 15px;
      font-size: 28px;
    }

    li a {
      display: block;
      color: #fff;
    }
  }

  .ul1 {
    li {
      width: calc(50% - 8px); /* 计算宽度，减去gap的一半实现均匀分布 */
      box-sizing: border-box;
      padding: 6.5% 4%;
      background: url(../assets/in_box3.png) no-repeat;
      background-size: 100% 100%;
      border-radius: 15px;
    }

    /* 为第二个和第三个元素设置不同背景 */
    li:nth-child(2) {
      background-image: url(../assets/in_box1.png);
    }
    li:nth-child(3) {
      background-image: url(../assets/in_box2.png); /* 可根据需要修改第三个元素背景 */
    }
  }

  .qingdan {
    color: #9e7837;
  }

  .yujiao {
    color: #31aaa8;
  }
}

.zypic {
  width: 100%;
  img {
    width: 100%;
    display: block; /* 去除图片底部间隙 */
  }
}

h2.yujiao,
h2.qingdan {
  font-weight: 800;
}

.yujiao_box {
  padding-left: 15px;
  font-size: 20px;
  background: url(../assets/pic3.png) no-repeat;
  background-size: 100% 100%;
  width: 80px;
}

.qingdan_box {
  padding-left: 15px;
  font-size: 20px;
  background: url(../assets/pic1.png) no-repeat;
  background-size: 100% 100%;
  width: 80px;
}
.zhuyuan_box{
  padding-left: 15px;
  font-size: 20px;
  background: url(../assets/pic2.png) no-repeat;
  background-size: 100% 100%;
  width: 80px;
}

</style>
