showContent.ftl 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  7. <title>通告详情</title>
  8. <style>
  9. body {
  10. margin: 0;
  11. padding: 20px 16px 12px;
  12. background-color: #fafafa;
  13. }
  14. .rich_media_title {
  15. font-size: 22px;
  16. line-height: 1.4;
  17. margin: 0 0 14px;
  18. }
  19. .meta_content {
  20. margin-bottom: 22px;
  21. line-height: 20px;
  22. font-size: 0;
  23. word-wrap: break-word;
  24. -webkit-hyphens: auto;
  25. -ms-hyphens: auto;
  26. hyphens: auto;
  27. }
  28. .rich_media_meta {
  29. display: inline-block;
  30. vertical-align: middle;
  31. margin: 0 10px 10px 0;
  32. font-size: 15px;
  33. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  34. }
  35. .rich_media_meta.priority {
  36. padding: 0 4px;
  37. font-size: 12px;
  38. line-height: 1.67;
  39. border: 1px solid #d9d9d9;
  40. border-radius: 4px;
  41. -moz-border-radius: 4px;
  42. -webkit-border-radius: 4px;
  43. width: auto;
  44. overflow: hidden;
  45. text-overflow: ellipsis;
  46. white-space: nowrap;
  47. word-wrap: normal;
  48. max-width: 70%;
  49. font-style: normal;
  50. letter-spacing: normal;
  51. background: rgba(0, 0, 0, 0.05);
  52. color: rgba(0, 0, 0, 0.3);
  53. margin-right: 8px;
  54. }
  55. .rich_media_meta.H {
  56. color: #f5222d;
  57. background: #fff1f0;
  58. border-color: #ffcfbf;
  59. }
  60. .rich_media_meta.M {
  61. color: #fa8c16;
  62. background: #fff7e6;
  63. border-color: #ffe59a;
  64. }
  65. .rich_media_meta.text {
  66. color: rgba(0, 0, 0, 0.3);
  67. }
  68. img {
  69. max-width: 100%;
  70. height: auto;
  71. }
  72. /* 滚动条优化 start */
  73. ::-webkit-scrollbar{
  74. width:8px;
  75. height:8px;
  76. }
  77. ::-webkit-scrollbar-track{
  78. background: #f6f6f6;
  79. border-radius:2px;
  80. }
  81. ::-webkit-scrollbar-thumb{
  82. background: #cdcdcd;
  83. border-radius:2px;
  84. }
  85. ::-webkit-scrollbar-thumb:hover{
  86. background: #747474;
  87. }
  88. ::-webkit-scrollbar-corner {
  89. background: #f6f6f6;
  90. }
  91. /* 滚动条优化 end */
  92. </style>
  93. </head>
  94. <body>
  95. <div>
  96. <h2 class="rich_media_title">${data.titile}</h2>
  97. <div class="meta_content">
  98. <#if data.priority??>
  99. <span class="rich_media_meta priority ${data.priority}">
  100. <#if data.priority == "H">
  101. <#elseif data.priority == "M">
  102. <#elseif data.priority == "L">
  103. <#else >
  104. ${data.priority}
  105. </#if>
  106. </span>
  107. </#if>
  108. <#if data.sender??>
  109. <span class="rich_media_meta text">${data.sender}</span>
  110. </#if>
  111. <#if data.sendTime??>
  112. <span class="rich_media_meta text">${data.sendTime?string('yyyy年MM月dd日')}</span>
  113. </#if>
  114. </div>
  115. </div>
  116. <div>
  117. ${data.msgContent!''}
  118. </div>
  119. </body>
  120. </html>