about_list.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <!DOCTYPE html>
  2. <html data-bs-theme="light" lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  6. <title>{dreamer-cms:global name="title" /}</title>
  7. <link rel="stylesheet" href="{dreamer-cms:template /}assets/bootstrap/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Roboto.css">
  9. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Roboto%20Slab.css">
  10. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/styles.css">
  11. <link rel="stylesheet" type="text/css" href="{dreamer-cms:template /}assets/css/animate.min.css">
  12. <style>
  13. .auto-img {
  14. height: 100% !important;
  15. object-fit: cover;
  16. }
  17. .team-img img {
  18. transform: scale(1);
  19. transition: all ease 0.5s;
  20. }
  21. @media (any-hover) {
  22. .team-img div {
  23. background-color: #4a575755;
  24. transition: all ease 0.5s;
  25. }
  26. .team-img:hover div {
  27. background-color: #ffffff00;
  28. transition: all ease 0.5s;
  29. }
  30. }
  31. .team-img:hover img {
  32. transform: scale(1.1);
  33. transition: all ease 0.5s;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. {dreamer-cms:include file='loading.html'/}
  39. {dreamer-cms:include file='header.html'/}
  40. <main>
  41. <section>
  42. <div class="">
  43. <div>
  44. {dreamer-cms:type typeid="04zc8871"}
  45. <img style="width: 100%;object-fit: cover;"
  46. data-src="[field:typeimg/]"
  47. src="{dreamer-cms:template /}assets/img/none.png" loading="lazy">
  48. {/dreamer-cms:type}
  49. </div>
  50. <hr class="ahout-hr" style="color: #a69b9f;">
  51. </div>
  52. </section>
  53. <section>
  54. <div class="">
  55. <div class="p-3 px-xl-5">
  56. {dreamer-cms:type typeid="04zc8871"}
  57. <div style="text-indent: 2em;color: #6b6767;">
  58. [field:htmlcontent/]
  59. </div>
  60. {/dreamer-cms:type}
  61. </div>
  62. <hr class="ahout-hr" style="color: #a69b9f;">
  63. </div>
  64. </section>
  65. <section>
  66. <div class="">
  67. <h3 class="px-3 px-xl-5">团建照片</h3>
  68. <div class="pt-3 pt-xl-4">
  69. {dreamer-cms:type typeid="ieu98721"}
  70. <img data-src="[field:typeimg/]"
  71. src="{dreamer-cms:template /}assets/img/none.png"
  72. width="100%" height="50%" alt="[field:typenamecn/]"
  73. style="object-fit: cover;">
  74. {/dreamer-cms:type}
  75. <div class="row gx-4 row-cols-1 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 team">
  76. {dreamer-cms:list typeid="ieu98721" pagenum="0" flag="p" pagesize="3"}
  77. <div class="col mt-xl-4 mt-md-4 mt-2 fade-box wow fadeIn"
  78. data-wow-duration="1000"
  79. data-wow-once="true">
  80. <div class="team-img" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
  81. <div style="height: inherit;width: inherit;position: absolute;top: 0; z-index: 10;">
  82. </div>
  83. <img class="auto-img"
  84. data-src="[field:litpic/]"
  85. src="{dreamer-cms:template /}assets/img/none.png"
  86. alt="[field:title/]" style="z-index: 5;" loading="lazy"/>
  87. </div>
  88. </div>
  89. {/dreamer-cms:list}
  90. </div>
  91. </div>
  92. <hr class="ahout-hr" style="color: #a69b9f;">
  93. </div>
  94. </section>
  95. <section>
  96. <div class="">
  97. <h3 class="px-3 px-xl-5">人员介绍</h3>
  98. <div class="person row gx-0 gy-2 gx-sm-3 gx-md-3 gx-lg-3 gx-xl-3 gx-xxl-3
  99. row-cols-1
  100. row-cols-sm-4
  101. row-cols-xl-6
  102. pt-xl-4
  103. row-cols-lg-6
  104. pt-3
  105. pt-xl-4">
  106. {dreamer-cms:list typeid="16nm8896" pagenum="0" flag="p"}
  107. <div class="col fade-box wow fadeIn" data-wow-duration="1000" data-wow-once="true">
  108. <img class="auto-img"
  109. src="{dreamer-cms:template /}assets/img/none.png"
  110. data-src="[field:litpic/]" loading="lazy">
  111. </div>
  112. {/dreamer-cms:list}
  113. </div>
  114. <hr class="ahout-hr" style="color: #a69b9f;">
  115. </div>
  116. </section>
  117. </main>
  118. {dreamer-cms:include file='footer.html'/}
  119. <script src="{dreamer-cms:template /}assets/js/jquery.min.js"></script>
  120. <script type="text/javascript" src="{dreamer-cms:template /}assets/js/wow.min.js"></script>
  121. <script src="{dreamer-cms:template /}assets/js/main.js"></script>
  122. <script src="{dreamer-cms:template /}assets/bootstrap/js/bootstrap.min.js"></script>
  123. <!-- <script src="{dreamer-cms:template /}assets/js/aos.min.js"></script> -->
  124. <script src="{dreamer-cms:template /}assets/js/bs-init.js"></script>
  125. <script>
  126. $(function () {
  127. var Owidth = document.querySelector("html").offsetWidth;
  128. var ow;
  129. if (Owidth <= 576) {
  130. ow = "s"
  131. } else {
  132. if (Owidth > 768 && Owidth <= 992) {
  133. ow = "m"
  134. } else {
  135. if (Owidth > 992 && Owidth <= 1200) {
  136. ow = "l"
  137. } else {
  138. if (Owidth > 1200) {
  139. ow = "xl"
  140. }
  141. }
  142. }
  143. }
  144. // console.log(ow)
  145. var fade = $(".team .fade-box")
  146. let flag = 0
  147. fade.each((index, element) => {
  148. $(element).attr("data-wow-delay", flag+"ms")
  149. flag += 200
  150. if (ow == "l" && (index + 1) % 3 == 0 || ow == "s") {
  151. flag = 0
  152. }
  153. });
  154. let dflag = 0
  155. var dfade = $(".person .fade-box")
  156. dfade.each((index, element) => {
  157. $(element).attr("data-wow-delay", dflag+"ms")
  158. dflag += 200
  159. if (ow == "s" || ow == "m" && (index + 1) % 4 == 0 || ow == "l" && (index + 1) % 6 == 0) {
  160. dflag = 0
  161. }
  162. });
  163. })
  164. </script>
  165. <script src="{dreamer-cms:template /}assets/js/image.js"></script>
  166. </body>
  167. </html>