person.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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: 20px 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: 15px 0 20px 0;
  55. }
  56. }
  57. }
  58. &__filter{
  59. width: 400px;
  60. margin: 20px 0 0 20px;
  61. }
  62. &__tab{
  63. margin: 20px;
  64. &__item{
  65. margin-left: 10px;
  66. margin-top: 30px;
  67. width: 100%;
  68. }
  69. &__input{
  70. width: 300px;
  71. }
  72. &__button{
  73. width: 120px;
  74. margin: 20px auto;
  75. }
  76. }
  77. &__table{
  78. margin: 20px;
  79. width: calc(100% - 40px);
  80. *::-webkit-scrollbar {
  81. width: 6px; // 横向滚动条
  82. height: 6px; // 纵向滚动条 必写
  83. }
  84. // 滚动条的滑块
  85. *::-webkit-scrollbar-thumb {
  86. background-color: #ddd;
  87. border-radius: 3px;
  88. }
  89. }
  90. &__chart{
  91. width: 600px;
  92. height: 400px;
  93. margin: 20px 20px;
  94. }
  95. &__list{
  96. display: flex;
  97. flex-wrap: wrap;
  98. align-items: flex-end;
  99. justify-content: space-between;
  100. width: 100%;
  101. padding: 20px 10px;
  102. }
  103. }