index.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. .ledge_box{
  2. .data-search {
  3. display: flex;
  4. justify-content: flex-end;
  5. padding: 20px 30px 0px 30px;
  6. }
  7. .data-list{
  8. padding: 10px;
  9. min-height: 200px; // 确保在没有内容时也有足够的高度显示加载动画
  10. position: relative; // 为加载动画提供定位上下文
  11. .time {
  12. font-size: 12px;
  13. color: #999;
  14. }
  15. .bottom {
  16. margin-top: 13px;
  17. line-height: 12px;
  18. }
  19. .button {
  20. padding: 0;
  21. float: right;
  22. }
  23. .image {
  24. width: 100%;
  25. display: block;
  26. }
  27. .clearfix:before,
  28. .clearfix:after {
  29. display: table;
  30. content: "";
  31. }
  32. .clearfix:after {
  33. clear: both
  34. }
  35. .card_box{
  36. position: relative;
  37. padding: 20px;
  38. .header{
  39. position: absolute;
  40. top: 10px;
  41. right: 10px;
  42. z-index: 10;
  43. }
  44. .header_right {
  45. cursor: pointer;
  46. z-index: 2000; // 确保图标可点击
  47. padding-right: 20px;
  48. }
  49. .content {
  50. padding-top: 30px; // 为header腾出空间
  51. }
  52. }
  53. .el-card:hover {
  54. /* 鼠标悬停时的更强烈阴影 */
  55. box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
  56. }
  57. ::v-deep .custom-popover {
  58. z-index: 3000 !important; // 增加 z-index
  59. }
  60. .el-card{
  61. margin-bottom: 30px;
  62. /* 初始状态的阴影 */
  63. box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  64. /* 添加过渡效果 */
  65. transition: box-shadow 0.3s ease-in-out;
  66. .card_box{
  67. height: 235px;
  68. .box_content{
  69. font-family: Arial, Helvetica, sans-serif;
  70. display: flex;
  71. flex-direction: column;
  72. justify-content: space-between;
  73. height: 100%;
  74. .content{
  75. margin-top: -50px;
  76. padding-top: 50px;
  77. font-size: 22px;
  78. line-height: 32px;
  79. font-weight: 600;
  80. cursor: pointer;
  81. color: #666666;
  82. word-break: break-all;
  83. .content_info{
  84. font-size: 12px;
  85. line-height: 18px;
  86. color:#999999 ;
  87. height: 36px;
  88. margin: 30px 10px 10px;
  89. overflow: hidden;
  90. text-overflow: ellipsis;
  91. display: -webkit-box;
  92. -webkit-line-clamp: 2;
  93. -webkit-box-orient: vertical;
  94. }
  95. .content_file{
  96. font-size: 11px;
  97. line-height: 14px;
  98. display: flex;
  99. .file{
  100. width: 60px;
  101. display: flex;
  102. flex-direction: column;
  103. align-items: center;
  104. margin-right: 5px;
  105. p{
  106. margin: 0;
  107. }
  108. }
  109. }
  110. }
  111. .footer{
  112. display: flex;
  113. justify-content: space-between;
  114. font-size: 12px;
  115. margin-top: 15px;
  116. color: #999999;
  117. vertical-align: middle;
  118. }
  119. }
  120. }
  121. }
  122. }
  123. }