view.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. {extend name="common/base"/}
  2. {block name="style"}
  3. <link rel="stylesheet" href="{__GOUGU__}/third_party/prism/prism.css"/>
  4. <style>
  5. .footer{
  6. display: none;
  7. }
  8. #fileBox li{
  9. display: flex;
  10. flex-wrap: wrap;
  11. flex-direction: column;
  12. }
  13. .layui-btn-group{
  14. text-align: center;
  15. }
  16. #fileBox p{
  17. margin: 3px 0 5px 0;
  18. width: 11vw;
  19. overflow: hidden;
  20. text-overflow: ellipsis;
  21. text-align: center;
  22. }
  23. .upimg {
  24. width: 250px;
  25. height: 250px;
  26. }
  27. #fileBox img {
  28. height: auto !important;
  29. }
  30. #fileBox{
  31. width: 100%;
  32. overflow: auto;
  33. justify-content:flex-start;
  34. align-content: space-between;
  35. flex-direction: column-reverse;
  36. flex-wrap: wrap;
  37. display: flex;
  38. }
  39. #fileBox li{
  40. padding: 0.5vw 0.8vw 0.5vw 0.8vw;
  41. white-space: nowrap;
  42. overflow: hidden;
  43. text-overflow: ellipsis;
  44. /*display: inline-block;*/
  45. border-right: 1px solid #e2e2e2;
  46. float: left;
  47. }
  48. .text-detial-ops{line-height: 30px; color:#999; font-size: 12px; padding: 12px 0;}
  49. .text-detial-ops span{margin-right: 20px;}
  50. .text-detial-ops a{margin-right:10px;}
  51. .text-detial-content{padding: 8px 0; color:#333; word-break: break-all; border-top:1px solid #e8e8e8;font-size: 16px!important; line-height: 1.72!important;}
  52. .text-detial-content p{padding: 8px 0;}
  53. .text-detial-content img{max-width:98%!important; margin:0 auto; display:block; border: 1px solid #e6e6e6; -webkit-box-shadow: 0 2px 6px rgba(26,26,26,.08); box-shadow: 0 2px 6px rgba(26,26,26,.08); border-radius: 4px;}
  54. .text-detial-content h1,.text-detial-content h2,.text-detial-content h3,.text-detial-content h4,.text-detial-content h5{margin-top:10px;}
  55. .text-detial-content a{color:#186AF2; font-style:italic;}
  56. .text-detial-content a:hover{text-decoration:underline;}
  57. .text-detial-content p code,.blog-detial-content pre{margin:0 3px;font-size: 14px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: #f6f6f6; padding: 10px; border-radius: 2px;}
  58. .text-detial-content p code{border: 1px solid #eee;padding: 2px 4px;}
  59. .text-detial-content table {border-collapse: collapse; border-spacing: 0; display: block; width: 100%; overflow: auto; word-break: normal;word-break: keep-all; margin-top: 0;margin-bottom: 16px;}
  60. .text-detial-content table tr {background-color: #fff;border-top: 1px solid #ccc;}
  61. .text-detial-content table tr:nth-child(2n) {background-color: #f8f8f8;}
  62. .text-detial-content table td, .blog-detial-content table th { padding: 6px 12px;border: 1px solid #ddd; font-size:14px; }
  63. .text-detial-content table th {font-weight: 800;}
  64. .text-detial-content li {list-style: initial;margin-left: 20px;}
  65. :not(pre)>code[class*=language-], pre[class*=language-]{background:#fff!important;border:1px solid #e8e8e8!important; border-radius:3px;}
  66. </style>
  67. {/block}
  68. <!-- 主体 -->
  69. {block name="body"}
  70. <form class="layui-form p-4">
  71. <h1>{$detail.title}</h1>
  72. <div class="text-detial-ops">
  73. <span>{$detail.maker_name}发表于:{$detail.create_time | date='Y-m-d H:i:s'}</span>
  74. </div>
  75. <div class="text-detial-content">
  76. {$detail.content|raw}
  77. </div>
  78. </form>
  79. <div class="layui-card border-y">
  80. <div class="layui-row p-2" id="fileBox">
  81. {:fileCard($file_array)}
  82. {empty name="$file_array" }
  83. <div class="layui-data-none">暂无附件</div>
  84. {/empty}
  85. </div>
  86. </div>
  87. {/block}
  88. <!-- 脚本 -->
  89. {block name="script"}
  90. <script src="{__GOUGU__}/third_party/prism/prism.js"></script>
  91. <script>
  92. function gouguInit(){
  93. $('#filesBox').on('click', '.file-del', function () {
  94. layer.msg("不可删除")
  95. })
  96. }
  97. </script>
  98. {/block}
  99. <!-- /脚本 -->