instructorList.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. .container {
  2. width: 1200px;
  3. margin: auto;
  4. }
  5. .el-breadcrumb {
  6. margin-top: 30px;
  7. margin-bottom: 20px;
  8. }
  9. .container_title>div {
  10. margin-right: 4px;
  11. }
  12. .container_title>div:nth-child(3) {
  13. color: #999999;
  14. }
  15. .container_list {
  16. margin-top: 6px;
  17. display: grid;
  18. grid-template-columns: repeat(4, 1fr);
  19. grid-row-gap: 20px;
  20. }
  21. .container_list_item {
  22. width: 284px;
  23. height: 470px;
  24. background: #FFFFFF;
  25. -webkit-box-shadow: 0px 2px 16px rgba(79, 109, 143, 0.12);
  26. box-shadow: 0px 2px 16px rgba(79, 109, 143, 0.12);
  27. opacity: 1;
  28. border-radius: 8px;
  29. position: relative;
  30. overflow: hidden;
  31. }
  32. .container_list_item_image {
  33. width: 100%;
  34. height: 284px;
  35. overflow: hidden;
  36. }
  37. .container_list_item_image>img {
  38. width: 100%;
  39. height: 100%;
  40. -o-object-fit: cover;
  41. object-fit: cover;
  42. }
  43. .container_list_item_content {
  44. padding: 26px 20px 21px 20px;
  45. }
  46. .container_list_item_content_title {
  47. color: #282828;
  48. font-size: 18px;
  49. font-weight: bold;
  50. margin-bottom: 10px;
  51. }
  52. .container_list_item_content_value {
  53. letter-spacing: 0;
  54. overflow: hidden;
  55. display: -webkit-box;
  56. -o-text-overflow: ellipsis;
  57. text-overflow: ellipsis;
  58. -webkit-line-clamp: 2;
  59. /*要显示的行数*/
  60. -webkit-box-orient: vertical;
  61. color: #999999;
  62. height: 45px;
  63. font-size: 16px;
  64. }
  65. .container_list_item_handle {
  66. padding: 0 20px;
  67. cursor: pointer;
  68. }
  69. .container_list_item_handle_detils {
  70. display: -webkit-box;
  71. display: -webkit-flex;
  72. display: -moz-box;
  73. display: -ms-flexbox;
  74. display: flex;
  75. -webkit-box-align: center;
  76. -webkit-align-items: center;
  77. -moz-box-align: center;
  78. -ms-flex-align: center;
  79. align-items: center;
  80. -webkit-box-pack: center;
  81. -webkit-justify-content: center;
  82. -moz-box-pack: center;
  83. -ms-flex-pack: center;
  84. justify-content: center;
  85. border: 1px solid #191C6E;
  86. opacity: 1;
  87. border-radius: 15px;
  88. font-size: 14px;
  89. color: #191C6E;
  90. width: 100px;
  91. height: 29px;
  92. }
  93. .container_list_item_handle_detils>span:nth-child(1) {
  94. font-weight: bold;
  95. }
  96. .pagination {
  97. display: -webkit-box;
  98. display: -webkit-flex;
  99. display: -moz-box;
  100. display: -ms-flexbox;
  101. display: flex;
  102. -webkit-box-pack: center;
  103. -webkit-justify-content: center;
  104. -moz-box-pack: center;
  105. -ms-flex-pack: center;
  106. justify-content: center;
  107. margin-top: 70px;
  108. margin-bottom: 100px;
  109. }