igg4-miniprogram/src/pages/personalInformation/index.scss

.page {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  .cross {
    margin-left: 40rpx;
    font-size: 40rpx;
    color: #000000;
  }
  .page-container {
    padding-bottom: 180rpx;
    display: flex;
    flex-direction: column;
    .content {
      margin: 0 auto;
      padding: 40rpx 0 0;
      width: 654rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      .switch {
        margin-bottom: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 26rpx;
        .item {
          flex: 1;
          display: flex;
          align-items: center;
          background-color: #f6f8f9;
          border-radius: 16rpx;
          border: 1px solid #f6f8f9;
          .icon {
            flex-shrink: 0;
            width: 148rpx;
            height: 140rpx;
          }
          .name {
            font-size: 36rpx;
            color: #211d2e;
            text-align: center;
          }
          &.active {
            border-color: #0eb66d;
            background: #ecfff7;
            .name {
              color: #0eb66d;
            }
          }
        }
      }
      .row-title {
        margin-bottom: 32rpx;
        font-size: 40rpx;
        color: #222222;
        font-weight: bold;
      }
      .row {
        margin-bottom: 56rpx;
        &.row2 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 22rpx;
        }
        &.row-age {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24rpx;
        }
        &.row-phone {
          display: flex;
          align-items: center;
          gap: 20rpx;
          .phone-input {
            flex: 1;
          }
          .change-phone {
            flex-shrink: 0;
            font-size: 32rpx;
            color: #0eb66d;
          }
        }
        .picker {
          flex: 1;
          padding: 24rpx 32rpx;
          font-size: 28rpx;
          color: #999999;
          background: #f2f2f2;
          border: 2rpx solid #cccccc;
          border-radius: 16rpx;
          .select {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .select-content {
              font-size: 32rpx;
              color: #222222;
            }
            .triangle {
              width: 48rpx;
              height: 48rpx;
            }
          }
        }
        .input {
          flex: 1;
          padding: 24rpx 32rpx;
          height: 40rpx;
          font-size: 36rpx;
          color: #222222;
          background: #f6f6f6;
          border-radius: 16rpx;
        }
        .item {
          padding: 12rpx 24rpx;
          opacity: 1;
          border: 2rpx solid #cccccc;
          font-size: 36rpx;
          color: #999999;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12rpx;
          background: linear-gradient(90deg, #fff 0%, #f9f9f9 100%);
          .icon {
            width: 64rpx;
            height: 64rpx;
          }
          &.active {
            color: #0eb66d;
            background: #ecfff7;
            border-color: #0eb66d;
          }
        }
        .age-item {
          height: 96rpx;
          white-space: nowrap;
          font-size: 36rpx;
          color: rgba(34, 34, 34, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12rpx;
          box-sizing: border-box;
          border: 1px solid #f6f6f6;
          background-color: #f6f6f6;
          &.active {
            background-color: #ecfff7;
            color: #0eb66d;
            border-color: #0eb66d;
          }
        }
        .area-text {
          flex: 1;
          padding: 0 32rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 96rpx;
          font-size: 36rpx;
          color: rgba(34, 34, 34, 0.3);
          background-color: rgba(246, 246, 246, 1);
          border-radius: 16rpx;
          &.area-text-active {
            color: rgba(34, 34, 34, 0.7);
          }
        }
      }
    }
    .bottom-actions {
      width: 100%;
      padding: 0 48rpx;
      box-sizing: border-box;
      .action-btn {
        margin-bottom: 32rpx;
        text-align: center;
        height: 96rpx;
        line-height: 96rpx;
        border-radius: 16rpx;
        font-size: 36rpx;
        background: #ffffff;
        box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.05);
        color: rgba(34, 34, 34, 1);
        &.danger {
          color: rgba(14, 182, 109, 1);
        }
      }
    }
  }
}

#drug-page {
  .switch .item {
    background: rgba(246, 246, 246, 1);
  }
  .switch .item.active {
    background-color: rgba(245, 244, 255, 1);
    border-color: rgba(89, 86, 233, 1);
    .name {
      color: rgba(89, 86, 233, 1);
    }
  }
  .row {
    .item {
      border-color: rgba(246, 246, 246, 1);
      background: rgba(246, 246, 246, 1);
    }
    .active {
      border-color: rgba(89, 86, 233, 1);
      background-color: rgba(245, 244, 255, 1);
      color: rgba(89, 86, 233, 1);
    }
  }
  .change-phone {
    color: rgba(89, 86, 233, 1);
  }
  .action-btn {
    color: rgba(89, 86, 233, 1);
  }
}