waterSafetyInformation.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. // 水上交通安全通报信息样式
  2. .ship-info-form {
  3. background: #fff;
  4. border-radius: 8px;
  5. padding: 20px;
  6. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  7. }
  8. :deep .el-collapse-item__header {
  9. color: #5070ae;
  10. size: 24px;
  11. background: linear-gradient(135deg, #d2e8ff, #fcfeff);
  12. box-shadow: 0 8px 20px #fcfeff;
  13. text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  14. padding-left: 20px;
  15. }
  16. :deep(.el-collapse-item__content) {
  17. padding-top: 25px;
  18. }
  19. // 表单标题+删除按钮容器
  20. .notification-header {
  21. display: flex;
  22. justify-content: space-between;
  23. align-items: center;
  24. margin-bottom: 20px;
  25. }
  26. // 通报事项标题样式
  27. .notification-matters {
  28. font-size: 20px;
  29. color: #163a8a;
  30. font-weight: 500;
  31. margin-bottom: 0;
  32. }
  33. // 文件链接列表样式
  34. .file-link-list {
  35. padding: 10px;
  36. .file-link-item {
  37. margin-bottom: 8px;
  38. a {
  39. display: inline-flex;
  40. align-items: center;
  41. color: #409eff;
  42. &:hover {
  43. color: #67c23a;
  44. }
  45. .el-icon {
  46. margin-right: 5px;
  47. }
  48. }
  49. }
  50. }
  51. // 文件空状态样式
  52. .file-empty {
  53. color: #909399;
  54. padding: 20px;
  55. text-align: center;
  56. background: #f5f5f5;
  57. border-radius: 4px;
  58. }
  59. // 上传卡片样式
  60. .upload-cards {
  61. display: flex;
  62. gap: 20px;
  63. flex-wrap: wrap;
  64. .upload-card {
  65. flex: 1;
  66. min-width: 250px;
  67. border: 1px dashed #e0e0e0;
  68. border-radius: 4px;
  69. padding: 15px;
  70. .card-title {
  71. font-weight: 500;
  72. margin-bottom: 15px;
  73. color: #333;
  74. .required-mark {
  75. color: #f56c6c;
  76. }
  77. }
  78. }
  79. }
  80. // 上传区域提示
  81. .upload-tip {
  82. font-size: 14px;
  83. line-height: 1.5;
  84. margin-top: 15px;
  85. }
  86. .el-upload__tip {
  87. margin-top: 0;
  88. }
  89. :deep(.el-button--text) {
  90. color: #f56c6c;
  91. &:hover {
  92. color: #ff4d4f;
  93. background: rgba(245, 108, 108, 0.1);
  94. }
  95. }
  96. .add-matters {
  97. display: flex;
  98. justify-content: center;
  99. margin-top: 20px;
  100. }
  101. :deep(.el-divider) {
  102. margin: 25px 0;
  103. border-color: #f0f0f0;
  104. }
  105. @media (max-width: 768px) {
  106. .upload-cards {
  107. flex-direction: column;
  108. }
  109. .notification-matters {
  110. font-size: 18px;
  111. }
  112. }