list.html 4.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>晋江人力资本有限公司</title>
  7. <link rel="stylesheet" href="__HCSS__/style.css">
  8. <style>
  9. .container {width:1255px;height:605px;background-image:url("__HIMAGES__/index.jpg");background-size:100% 100%;background-repeat:no-repeat;position:relative;}
  10. .inner-box {width:890px;height:546px;position:absolute;left:336px;top:32px;background:white;}
  11. .title-review {margin-top:10px;height:40px;background: #F6F6F6;border-radius: 20px;}
  12. .title-review ul {display:flex;justify-content:space-around;height: 40px;align-items: center;}
  13. .title-review ul li {height: 40px;line-height: 40px;width: 72px;text-align: center;}
  14. .title-review ul li.active {background:#F27F0C;}
  15. .title-review ul li a {color:#A2A2A2;font-weight:bold;}
  16. .title-review ul li.active a{color:white;}
  17. .review {width:870px;margin:0 auto;}
  18. .review .review-box {width:870px;height:470px;background:#F6F6F6;border:1px solid #FEFEFE;border-radius:20px;padding-top:9px;overflow-y:auto;margin-top:10px;}
  19. .review-box .review-item {display:flex;}
  20. .review-box .flex-box {width: calc((100% - 10px) / 3);height:148px;margin-bottom: 5px;}
  21. .review-box .img-box {width:224px;height:148px;margin:0 auto;}
  22. .review-box .img-box .img {width:224px;height:116px;border-radius:20px;background-size:cover;background-position: center;}
  23. .review-box .img-box p {font-size:12px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;height:32px;line-height:16px;}
  24. .back-box {position:absolute;left:388px;bottom:-15px;width:114px;height:48px;background:white;border-radius:20px;box-shadow:0 5px 2px #8A9CB2;display:flex;justify-content:center;align-items:center;}
  25. .back-box .back-text {width:104px;height:38px;line-height:38px;background:#F27F0C;border-radius:20px;color:white;font-size:20px;font-weight:bold;text-align:center;}
  26. .no-more {display:block;margin:150px auto 0 auto;}
  27. .jucai { position: absolute;right: -20px;bottom: -27px;}
  28. .layui-layer-imgtit a {max-width:100% !important;}
  29. .layui-layer-imgbar {display:block !important;}
  30. </style>
  31. </head>
  32. <body>
  33. <div class="container">
  34. <div class="inner-box">
  35. <div class="review">
  36. <div class="title-review">
  37. <ul>
  38. {foreach $month_list as $key=>$month}
  39. <li class="{eq name='key' value='$month_index'}active{/eq}"><a href="{:url('previous/list')}?year_id={$year_id}&month={$key}">{$month}</a></li>
  40. {/foreach}
  41. </ul>
  42. </div>
  43. <div class="review-box">
  44. {empty name="previous"}
  45. <img src="__HIMAGES__/no_more.png" class="no-more">
  46. {else/}
  47. {volist name="previous" id="item"}
  48. <div class="review-item">
  49. {volist name="item" id="vo"}
  50. <div class="flex-box">
  51. <div class="img-box">
  52. <div class="img" data-url="{$vo.image}" data-title="{$vo.title}" style="background-image:url('{$vo.image}')"></div>
  53. <p>{$vo.title}</p>
  54. </div>
  55. </div>
  56. {/volist}
  57. </div>
  58. {/volist}
  59. {/empty}
  60. </div>
  61. </div>
  62. <div class="back-box">
  63. <a href="{:url('previous/index')}" class="back-text">返回</a>
  64. </div>
  65. <img src="__HIMAGES__/jucai.png" class="jucai">
  66. </div>
  67. </div>
  68. <script src="__COMMON_JS__/jquery-1.12.4.min.js"></script>
  69. <script src="__COMMON_JS__/layer/layer.js"></script>
  70. <script>
  71. $('.img').click(function(){
  72. let url = $(this).data('url');
  73. let title = $(this).data('title');
  74. let json = {
  75. "title": title, //相册标题
  76. "id": 1, //相册id
  77. "start": 0, //初始显示的图片序号,默认0
  78. "data": [ //相册包含的图片,数组格式
  79. {
  80. "alt": title,
  81. "pid": 2, //图片id
  82. "src": url, //原图地址
  83. "thumb": "" //缩略图地址
  84. }
  85. ]
  86. };
  87. layer.photos({
  88. photos: json
  89. });
  90. $('.layui-layer-imgbar').show();
  91. });
  92. </script>
  93. </body>
  94. </html>