/* src/app/tab3/tab3.page.scss */

/* 全局样式 */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

/* 动画库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* 头部工具栏样式 */
ion-header ion-toolbar {
  --background: linear-gradient(135deg, #6a11cb, #2575fc);
  --color: var(--ion-color-light);
  --border-width: 0; /* 移除默认边框 */
  animation: fadeInDown 1s ease-out;
}

/* 内容区域样式 */
ion-content {
  --padding-top: 0;
  --padding-bottom: 0;
  background: linear-gradient(135deg, #f4f5f8, #eaeaea); /* 设置背景颜色为浅灰色渐变 */
  transition: background-color 0.3s ease;
}

/* 用户信息区样式 */
.user-info {
  display: flex;
  align-items: center;
  padding: 32px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  animation: slideInLeft 1s ease-out;

  & .user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 32px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .user-details {
    flex-grow: 1;
  }

  & h2 {
    font-size: 22px;
    margin: 0;
    color: #333;
  }

  & p {
    font-size: 14px;
    margin: 4px 0 0;
    color: #777;
  }
}

/* 列表样式 */
ion-list {
  margin: 32px 0;
  padding: 0;
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

/* 列表项样式 */
ion-item {
  --padding-start: 32px;
  --padding-end: 32px;
  --min-height: 80px;
  border-bottom: 1px solid #eee;
  &:last-child {
    border-bottom: none;
  }
  &:hover {
    background-color: #f8f8f8;
  }

  ion-icon {
    font-size: 20px;
    margin-right: 16px;
  }

  ion-label {
    h2 {
      font-size: 16px;
      margin: 0;
    }
    p {
      font-size: 12px;
      color: #777;
      margin: 4px 0 0;
    }
  }

  ion-badge {
    margin-left: auto;
    margin-right: 16px;
  }

  ion-button {
    margin-left: auto;
    --background: transparent;
    --color: var(--primary-color);
    --border: 1px solid var(--primary-color);
    --box-shadow: none;
    &:hover {
      --background: rgba(var(--primary-rgb), 0.1);
    }
  }
}

/* 按钮样式 */
ion-button {
  margin: 32px 32px;
  --border-radius: 24px;
  --box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.2s ease;
  &:active {
    transform: scale(0.95);
  }
}

.center-title {
  text-align: center;
  padding: 32px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: var(--ion-color-light);
  border-radius: 24px;
  animation: fadeIn 1s ease-out;
}

/* 设置 promotion-card 的样式 */
.promotion-card {
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none; /* 移除链接默认下划线 */
  transition: transform 0.2s ease-in-out;
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: scale(1.05);
  }

  .promotion-image {
    background: url('../../assets/images/action.jpg') no-repeat center center / cover;
    width: 100%;
    transition: opacity 0.3s ease;
    &:hover {
      opacity: 0.9;
    }
  }

  ion-card-content {
    padding: 32px;
    text-align: center;

    p {
      font-size: 10px;
      color: #777;
      margin: 0;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    .user-avatar {
      margin-bottom: 32px;
    }
  }

  ion-item {
    --padding-start: 24px;
    --padding-end: 24px;
    --min-height: 72px;
  }

  .promotion-card {
    margin: 24px 0;
    .promotion-image {
      height: 200px;
    }
  }
}

/* 颜色主题 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --primary-rgb: 0, 123, 255;
}

ion-toolbar {
  --background: linear-gradient(135deg, #6a11cb, #2575fc);
  --color: var(--ion-color-light);
}

ion-button {
  --background: var(--primary-color);
  --color: var(--light-color);
  &:hover {
    --background: darken(var(--primary-color), 10%);
  }
}



