report_list.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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: 336px; */
  19. width: 1176px;
  20. height: 1344px;
  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. .title{
  31. font-size: 64px;
  32. font-weight: bold;
  33. margin-bottom: 20px;
  34. }
  35. .flex{
  36. height: 256px;
  37. margin-top: 40px;
  38. font-size: 56px;
  39. }
  40. .content-box{
  41. height: 628px;
  42. margin: 40px 0;
  43. overflow: hidden;
  44. font-size: 56px;
  45. }
  46. .text-one{
  47. overflow: hidden;
  48. white-space: nowrap;
  49. text-overflow: ellipsis;
  50. }
  51. .item-img{
  52. width: 188px;
  53. height: 252px;
  54. float: left;
  55. object-fit: cover;
  56. border-radius: 16px;
  57. margin-right: 20px;
  58. }
  59. .item-title{
  60. font-size: 52px;
  61. }
  62. .item-des{
  63. height: 80px;
  64. font-size: 44px;
  65. }
  66. .audio-box{
  67. width: 200px;
  68. height: 80px;
  69. background: #E3B377;
  70. border-radius: 40px;
  71. color: #fff;
  72. font-size: 48px;
  73. float: right;
  74. text-align: center;
  75. line-height: 80px;
  76. }
  77. .audio-box img{
  78. width: 60px;
  79. height: 60px;
  80. object-fit: cover;
  81. position: relative;
  82. top: 12px;
  83. }
  84. .xcx-img{
  85. width: 256px;
  86. height: 256px;
  87. float: right;
  88. }
  89. p,span{
  90. margin: 0 !important;
  91. padding: 0 !important;
  92. }
  93. </style>
  94. </head>
  95. <body>
  96. <div class="box">
  97. <div class="title">{{LIST_TITLE}}</div>
  98. <div class="content-box">
  99. <div class="item" style="margin-bottom: 40px;">
  100. <img class="item-img" src="{{IMG_1}}" alt="">
  101. <div class="item-title text-one" style="margin:20px 0">{{TITLE_1}}</div>
  102. <div class="item-des text-one" style="color:#666">{{ABSTRACT_1}}</div>
  103. <div class="item-bot">
  104. <span class="item-time" style="color:#999;font-size: 44px;">{{TIME_1}}</span>
  105. <div class="audio-box" style="display: none">
  106. <img src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
  107. <span>播放</span>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="item" style="margin-bottom: 40px;">
  112. <img class="item-img" src="{{IMG_2}}" alt="">
  113. <div class="item-title text-one" style="margin:20px 0">{{TITLE_2}}</div>
  114. <div class="item-des text-one" style="color:#666">{{ABSTRACT_2}}</div>
  115. <div class="item-bot">
  116. <span class="item-time" style="color:#999;font-size: 44px;">{{TIME_2}}</span>
  117. <div class="audio-box" style="display: none">
  118. <img src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
  119. <span>播放</span>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
  125. <div class="flex">
  126. <div style="float: left;margin-top: 65px;">
  127. <div>长按识别小程序码</div>
  128. <div style="color:#999;margin-top: 20px;">查看更多</div>
  129. </div>
  130. <img class="xcx-img" src="{{SUN_CODE}}" alt="">
  131. </div>
  132. </div>
  133. </body>
  134. </html>