special_column_detail.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. html,body{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. div{
  14. box-sizing: border-box;
  15. }
  16. .box{
  17. /* width: 294px;
  18. height: 370px; */
  19. width: 1176px;
  20. height: 1480px;
  21. background-color: #fff;
  22. padding: 100px 64px 64px 60px;
  23. border-radius: 16px;
  24. border: 1px solid #ECECEC;
  25. background-image: url('https://hzchart.oss-cn-shanghai.aliyuncs.com/static/icon/hzyb/yb-bg-hzlogo.png');
  26. background-position: top right;
  27. background-size: 336px 336px;
  28. background-repeat: no-repeat;
  29. }
  30. .avatar{
  31. width: 272px;
  32. height: 272px;
  33. display: block;
  34. margin-left: auto;
  35. margin-right: auto;
  36. border-radius: 50%;
  37. object-fit: cover;
  38. }
  39. .sub-title{
  40. font-size: 64px;
  41. font-weight: bold;
  42. text-align: center;
  43. margin-top: 40px;
  44. }
  45. .flex{
  46. height: 256px;
  47. margin-top: 40px;
  48. font-size: 56px;
  49. }
  50. .content-box{
  51. height: 388px;
  52. margin: 40px 0;
  53. color: #999;
  54. overflow: hidden;
  55. font-size: 56px;
  56. }
  57. .xcx-img{
  58. width: 256px;
  59. height: 256px;
  60. float: right;
  61. }
  62. p,span{
  63. margin: 0 !important;
  64. padding: 0 !important;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="box">
  70. <img class="avatar" src="{{REPORT_AVATAR}}" alt="">
  71. <div class="sub-title">{{REPORT_TITLE}}</div>
  72. <div class="content-box" style="color: #333;">
  73. {{REPORT_ABSTRACT}}
  74. </div>
  75. <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
  76. <div class="flex">
  77. <div style="float: left;margin-top: 65px;">
  78. <div>长按识别小程序码</div>
  79. <div style="color:#999;margin-top: 20px;">查看更多</div>
  80. </div>
  81. <img class="xcx-img" src="{{SUN_CODE}}" alt="">
  82. </div>
  83. </div>
  84. </body>
  85. </html>