infopage.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .container {
  2. height: 600rpx;
  3. background: linear-gradient(#ff8caf, $page-background-color);
  4. .top-info {
  5. display: flex;
  6. align-items: center;
  7. margin-top: 10rpx;
  8. .top-avatar {
  9. margin-left: 50rpx;
  10. width: 140rpx;
  11. height: 140rpx;
  12. border-radius: 100%;
  13. border: 6rpx solid #FFF;
  14. box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
  15. }
  16. .top-name {
  17. margin-left: 50rpx;
  18. display: flex;
  19. flex-direction: column;
  20. font-weight: bold;
  21. .name {
  22. color: $color-title;
  23. font-size: 45rpx;
  24. font-weight: bold;
  25. }
  26. .detail {
  27. color: #FFF;
  28. font-size: 40rpx;
  29. font-weight: bold;
  30. }
  31. }
  32. }
  33. //背景大卡片
  34. .card-box {
  35. position: relative;
  36. background-color: #FFF;
  37. box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.1);
  38. top: 80rpx;
  39. left: 50rpx;
  40. border-radius: 50rpx;
  41. width: 750rpx;
  42. height: 100vh;
  43. .i-item {
  44. display: flex;
  45. align-items: center;
  46. margin-left: 35rpx;
  47. }
  48. }
  49. .data-box-item {
  50. display: flex;
  51. flex-direction: column;
  52. margin: 20rpx;
  53. background-color: #FFF;
  54. border-radius: $card-border-radius;
  55. width: 280rpx;
  56. height: 280rpx;
  57. box-shadow: $box-shadow-stereo-white;
  58. .item-text {
  59. font-size: 30rpx;
  60. color: $color-title;
  61. margin: 20rpx 0 0 20rpx;
  62. }
  63. .t-icon {
  64. width: 100rpx;
  65. height: 100rpx;
  66. }
  67. .item-number {
  68. font-size: 60rpx;
  69. margin: 20rpx 0 10rpx 30rpx;
  70. color: #FFF;
  71. font-weight: bold;
  72. }
  73. }
  74. }