websopy-taro/src/developer/index.scss

page {
  background: #f5f6f7;
}

.developer-page {
  min-height: 100vh;
  background: #f5f6f7;

  &__scroll {
    height: 100vh;
  }
}

/* 头部区域 */
.developer-header {
  position: relative;
  padding: 40rpx 32rpx 60rpx;
  background: linear-gradient(180deg, #1a56db 0%, #3b82f6 100%);
  overflow: hidden;

  &__glow {
    position: absolute;
    left: 50%;
    top: -100rpx;
    width: 500rpx;
    height: 300rpx;
    transform: translateX(-50%);
    border-radius: 999rpx;
    background: rgba(255, 255, 255, 0.15);
    filter: blur(60rpx);
    pointer-events: none;
  }

  &__content {
    position: relative;
    z-index: 1;
  }

  &__title {
    margin-bottom: 12rpx;
  }

  &__titleText {
    font-size: 44rpx;
    font-weight: 900;
    color: #ffffff;
  }

  &__subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.85);
  }
}

/* 统计卡片 */
.stats-card {
  margin: -40rpx 24rpx 24rpx;
  padding: 32rpx 24rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);

  &__row {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  &__item {
    flex: 1;
    text-align: center;
  }

  &__value {
    display: block;
    font-size: 48rpx;
    font-weight: 900;
    color: #1a56db;
    line-height: 1.2;
  }

  &__label {
    display: block;
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #666666;
  }

  &__divider {
    width: 2rpx;
    height: 60rpx;
    background: #e5e7eb;
  }
}

/* 快捷操作 */
.quick-actions {
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

  &__title {
    margin-bottom: 20rpx;
  }

  &__titleText {
    font-size: 32rpx;
    font-weight: 800;
    color: #111111;
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    padding: 20rpx 10rpx;
    border-radius: 16rpx;
    background: #f9fafb;
  }

  &__icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
  }

  &__icon--blue {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  }

  &__icon--green {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  }

  &__icon--purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  }

  &__icon--orange {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  }

  &__text {
    font-size: 24rpx;
    color: #374151;
    font-weight: 600;
  }
}

/* 应用列表 */
.app-list {
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  &__title {
    font-size: 32rpx;
    font-weight: 800;
    color: #111111;
  }

  &__more {
    padding: 8rpx 16rpx;
  }

  &__moreText {
    font-size: 26rpx;
    color: #666666;
  }

  &__loading {
    padding: 60rpx 0;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  &__footer {
    margin-top: 24rpx;
  }
}

/* 应用项 */
.app-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 16rpx;
  background: #f9fafb;

  &__icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__info {
    flex: 1;
    margin-left: 20rpx;
    min-width: 0;
  }

  &__name {
    display: block;
    font-size: 30rpx;
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__type {
    display: block;
    margin-top: 6rpx;
    font-size: 24rpx;
    color: #666666;
  }

  &__status {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;
    border-radius: 999rpx;
    background: #f3f4f6;
  }

  &__statusDot {
    width: 8rpx;
    height: 8rpx;
    border-radius: 999rpx;
  }

  &__statusText {
    font-size: 22rpx;
    font-weight: 600;
  }
}

/* 底部安全区域 */
.safe-area-bottom {
  height: calc(40rpx + env(safe-area-inset-bottom));
}