person.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .person-container{
  2. display: flex;
  3. justify-content: space-between;
  4. align-items: flex-start;
  5. margin: 50px auto;
  6. width: 1100px;
  7. }
  8. //.person-body{
  9. // display: flex;
  10. // justify-content: space-between;
  11. // align-items: flex-start;
  12. // margin: 50px 0;
  13. //}
  14. .side-bar{
  15. width: 20%;
  16. }
  17. .main-card{
  18. width: 70%;
  19. min-height: 540px;
  20. padding: 10px 20px 30px 20px;
  21. &__body{
  22. width: 100%;
  23. }
  24. &__title{
  25. font-weight: 500;
  26. font-size: 24px;
  27. }
  28. &__info{
  29. width: 400px;
  30. padding: 30px;
  31. font-size: 18px;
  32. &-item{
  33. margin-top: 20px;
  34. width: 100%;
  35. border-bottom: 0.5px $note-color solid;
  36. &:last-child{
  37. border-bottom: none;
  38. padding-bottom: 20px;
  39. }
  40. &__head{
  41. margin-top: 30px;
  42. }
  43. &__name{
  44. display: inline-block;
  45. }
  46. &__modify{
  47. margin-left: 20px;
  48. color: $focus-color;
  49. font-size: 14px;
  50. vertical-align: center;
  51. cursor: pointer;
  52. }
  53. &__value{
  54. margin: 20px 0 30px 0;
  55. }
  56. }
  57. }
  58. &__tab{
  59. margin: 20px;
  60. &__item{
  61. margin-left: 10px;
  62. margin-top: 30px;
  63. width: 100%;
  64. }
  65. &__input{
  66. width: 300px;
  67. }
  68. &__button{
  69. width: 120px;
  70. margin: 20px auto;
  71. }
  72. }
  73. &__table{
  74. margin: 20px;
  75. width: calc(100% - 40px);
  76. *::-webkit-scrollbar {
  77. width: 6px; // 横向滚动条
  78. height: 6px; // 纵向滚动条 必写
  79. }
  80. // 滚动条的滑块
  81. *::-webkit-scrollbar-thumb {
  82. background-color: #ddd;
  83. border-radius: 3px;
  84. }
  85. }
  86. &__chart{
  87. width: 600px;
  88. height: 400px;
  89. margin: 20px 20px;
  90. }
  91. &__list{
  92. display: flex;
  93. flex-wrap: wrap;
  94. align-items: flex-end;
  95. justify-content: space-between;
  96. width: 100%;
  97. padding: 20px 10px;
  98. }
  99. }