new_list.css 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .new2 .body {
  2. margin-top: 90px;
  3. padding: 10px 0;
  4. }
  5. .new2 .body .list .list-item {
  6. text-decoration: none;
  7. color: black;
  8. display: flex;
  9. justify-content: flex-start;
  10. align-items: start;
  11. padding-bottom: 10px;
  12. margin-bottom: 10px;
  13. border-bottom: 1px solid #e6e6e6;
  14. }
  15. .new2 .body .list-header {
  16. background-color: #f03;
  17. position: relative;
  18. height: 160px;
  19. }
  20. .new2 .body .list-header h3 {
  21. position: relative;
  22. top: 124px;
  23. margin-top: 0px;
  24. }
  25. .new2 .body .list-header p {
  26. position: relative;
  27. }
  28. .new2 .body .list .list-item:hover {
  29. color: #2382ff;
  30. }
  31. .new2 .body .list .list-item .item-img {
  32. flex: 1;
  33. padding: 0 20px;
  34. }
  35. @media screen and (max-width: 768px) {
  36. .new2 .body .list .list-item .item-img {
  37. padding: 0 10px;
  38. }
  39. }
  40. .new2 .body .list .list-item .item-img img {
  41. width: 100%;
  42. border-radius: 5px;
  43. }
  44. .new2 .body .list .list-item .item-img img:hover {
  45. transform: scale(1.1);
  46. }
  47. .new2 .body .list .list-item .item-detail {
  48. flex: 4;
  49. height: 100%;
  50. position: relative;
  51. overflow: hidden;
  52. }
  53. @media screen and (max-width: 768px) {
  54. .new2 .body .list .list-item .item-detail {
  55. flex: 2;
  56. }
  57. }
  58. .new2 .body .list .list-item .item-detail .title {
  59. font-weight: 400;
  60. }
  61. @media screen and (max-width: 768px) {
  62. .new2 .body .list .list-item .item-detail .title {
  63. white-space: normal;
  64. display: -webkit-box;
  65. -webkit-box-orient: vertical;
  66. -webkit-line-clamp: 2;
  67. }
  68. }
  69. .new2 .body .list .list-item .item-detail .time {
  70. font-size: 12px;
  71. color: #777;
  72. margin-top: 5px;
  73. }
  74. .new2 .body .list .list-item .item-detail .time span {
  75. margin-left: 5px;
  76. }