202226701045/poem-life-app/src/app/tab3/tab3.page.scss

.profile-container {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  
    img {
      width: 100%;
      height: 320px; /* 根据需要调整 */
      object-fit: cover;
    }
  }
  
  .profile-card {
    position: absolute;
    top: 20px; /* 调整位置 */
    left: 50%;
    transform: translateX(-50%); /* 居中 */
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* 半透明背景 */
    color: white;
    text-align: center;
    border-radius: 10px;
  
    .avatar {
      width: 70px; /* 保持宽度 */
      height: 70px; /* 修改为与宽度相等的高度 */
      border-radius: 50%; /* 圆形 */
      margin-bottom: 10px;
      border: 3px solid white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
  
    h2 {
      font-size: 16px; /* 调整为较小的字体大小 */
    }
  
    p {
      font-size: 12px; /* 调整为较小的字体大小 */
    }
  }
  
  .cards-container {
    position: absolute; /* 使容器绝对定位 */
    bottom: 20px; /* 距离底部的距离 */
    left: 50%;
    transform: translateX(-50%); /* 居中 */
    display: flex;
    justify-content: space-around; /* 水平排列 */
    width: 90%; /* 设置宽度 */
    padding: 10px 0; /* 上下内边距 */
  
    .card {
      width: 80px; /* 设置宽度 */
      height: 60px; /* 设置高度 */
      background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
      border-radius: 10px;
      padding: 5px; /* 内边距 */
      display: flex;
      flex-direction: column; /* 垂直排列内容 */
      align-items: center;
      gap: 2px; /* 减小间距 */
      color: black;
      font-size: 14px; /* 设置字体大小 */
      border: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
      transition: all 0.2s ease-in-out;
  
      ion-icon {
        font-size: 32px; /* 设置图标大小 */
        flex: 0 0 40%; /* 使图标占据盒子的40% */
        display: flex; /* 使图标能够使用flex属性 */
        justify-content: center; /* 水平居中图标 */
        align-items: center; /* 垂直居中图标 */
        width: 100%; /* 使图标宽度为100% */
      }
  
      p {
        margin: 0; /* 去除默认的外边距 */
      }
  
      &:hover {
        background: rgba(255, 255, 255, 1); /* 悬停时变为不透明 */
      }
    }
  }
  
  .tabs-container {
    margin-top: 20px;
    padding: 0 20px;
  
    ion-segment {
      --background: rgba(255, 255, 255, 0.5);
      --border-width: 0;
      --padding-start: 0;
      --padding-end: 0;
    }
  
    ion-segment-button {
      --indicator-background: transparent;
      --padding-top: 8px;
      --padding-bottom: 8px;
      --padding-start: 16px;
      --padding-end: 16px;
  
      &.active {
        color: blue; /* 激活时文字变为蓝色 */
        border-bottom: 2px solid blue; /* 激活时显示蓝色横线 */
      }
    }
  }
  
  .like-collection-buttons {
    display: flex;
    justify-content: space-between; /* 水平排列并在两端对齐 */
    width: 100%; /* 使容器宽度为100% */
    margin-top: 10px; /* 与上方内容的间距 */
    padding: 10px 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3); /* 添加阴影线 */
  }
  
  .like-collection-buttons .card {
    flex: 0 0 calc(25%); /* 设置卡片宽度为页面宽度的25% */
    margin: 0 calc(12.5%); /* 左右间距为页面宽度的12.5% */
    background: rgba(255, 255, 255, 0.0); /* 半透明背景 */
    border-radius: 10px;
    padding: 10px; /* 内边距 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease-in-out;
  }
  
  .like-collection-buttons .card .action-button {
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    color: black; /* 字体颜色 */
    font-size: 14px; /* 字体大小 */
    cursor: pointer; /* 鼠标指针样式 */
  }
  
  .like-collection-buttons .card .action-button:hover {
    background: rgba(255, 255, 255, 0.5); /* 悬停时变为半透明 */
  }
  .content-container {
    border-top: 2px solid black; /* 添加上边框 */
    padding-top: 10px; /* 可选：增加一些内边距以便更好地展示内容 */
  }
  .content-container {
    border-top: 2px solid black; /* 添加上边框 */
    padding-top: 10px; /* 可选：增加一些内边距以便更好地展示内容 */
  }
  
  .avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid black; /* 添加圆形边框 */
  }
  .vip-status {
    background: transparent; /* 透明背景 */
    border: none; /* 无边框 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
  }

  .vip-button {
    background: transparent; /* 透明背景 */
    border: none; /* 无边框 */
    color: white; /* 白色文字 */
    font-size: 14px; /* 字体大小 */
    cursor: pointer; /* 鼠标指针样式 */
    text-decoration: underline; /* 下划线 */
  }

  .vip-button:hover {
    color: lightblue; /* 悬停时改变颜色 */
  }