/* drift-bottle.component.scss */
:host {
    display: block;
}

/* 设置页面背景色 */
ion-content {
    --background: transparent; /* 确保内容背景透明 */
    position: relative;
    height: 100vh; /* 确保内容高度占满整个视口 */
}

.top-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* 图片占据页面的70%高度 */
    overflow: hidden;
    z-index: 0; /* 确保图片在工具栏之下 */
}

.top-image img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
}
.top-image::after {
    content: '';
    position: absolute;
    bottom: -50px; /* 调整此值以改变圆弧的大小 */
    left: 0;
    width: 110%; /* 让伪元素稍微宽于其父级元素 */
    height: 100px; /* 圆弧的高度 */
    background: #fff; /* 匹配页面背景颜色 */
    border-radius: 0 0 50% 50%; /* 创建半圆形 */
    transform: scaleX(1.2); /* 可选：让圆弧更平缓 */
    z-index: 1; /* 确保圆弧在图片之上 */
}


/* 其他内容的样式可以根据需要添加 */
.content-container {
    position: relative;
    z-index: 1; /* 确保其他内容在图片之上 */
    padding: 20px;
    margin-top: 120%; /* 内容从图片下方开始 */
}

  
  
  
  