news_list.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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/bs-theme-overrides.css">
  11. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Hero-Carousel-images.css">
  12. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Navbar-Right-Links-icons.css">
  13. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/smjy-header.css">
  14. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/sticky-dark-top-nav-with-dropdown.css"> -->
  15. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/styles.css">
  16. <link rel="stylesheet" type="text/css" href="{dreamer-cms:template /}assets/css/animate.min.css">
  17. <style>
  18. /* .card{
  19. --bs-card-color: rgb(137, 137, 137);
  20. } */
  21. .card-title{
  22. --bs-card-title-color: rgb(137, 137, 137);
  23. font-weight: bold;
  24. }
  25. @media (min-width:768px) {
  26. .new-img-box{
  27. width: 60%!important;
  28. flex-shrink: 0;
  29. height: 100%;
  30. position: relative;
  31. }
  32. .new-img-box .news-img{
  33. width: 100%;
  34. height: auto;
  35. position: absolute;
  36. top: 50%;
  37. left: 50%;
  38. transform: translate(-50%, -50%);
  39. }
  40. .card{
  41. height: 350px!important;
  42. --bs-card-bg: rgb(247,247,247)!important;
  43. }
  44. }
  45. @media (max-width:769px) {
  46. .new-img-box{
  47. height: 300px;
  48. width: 100%!important;
  49. position: relative;
  50. }
  51. .new-img-box .news-img{
  52. width: auto;
  53. height: 100%;
  54. position: absolute;
  55. top: 50%;
  56. left: 50%;
  57. transform: translate(-50%, -50%);
  58. }
  59. .content-text{
  60. display: none!important;
  61. }
  62. h4{
  63. font-size: calc(1rem + .3vw)!important;
  64. }
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. {dreamer-cms:include file='loading.html'/}
  70. {dreamer-cms:include file='header.html'/}
  71. <main>
  72. <section>
  73. <div class="">
  74. <div class="pt-2 pt-md-3 pt-xl-4">
  75. {dreamer-cms:type typeid="927c5jck"}
  76. <img class="auto-img"
  77. src="{dreamer-cms:template /}assets/img/none.png"
  78. data-aos="zoom-in-right" data-aos-duration="800" data-aos-once="true"
  79. data-src="[field:typeimg/]" />
  80. {/dreamer-cms:type}
  81. </div>
  82. </div>
  83. </section>
  84. <div class="px-2 py-4 py-xl-5">
  85. <div class="row gx-0 gy-4 row-cols-1 new-row">
  86. {dreamer-cms:list typeid="927c5jck" pagenum="0" flag="p"}
  87. <div class="col">
  88. <div class="card flex-column flex-md-row flex-lg-row flex-xl-row"
  89. style="border: none;--bs-card-color:rgb(137,137,137);--bs-border-radius:0">
  90. <div class="new-img-box" style="overflow: hidden;">
  91. <img class="card-img-top d-block fit-cover news-img"
  92. src="{dreamer-cms:template /}assets/img/none.png"
  93. data-aos="zoom-in" data-aos-duration="800" data-aos-once="true"
  94. data-src="[field:litpic/]"
  95. loading="lazy"/>
  96. </div>
  97. <div class="card-body p-2 p-md-4" style="display: flex;flex-direction: column;justify-content: space-between;">
  98. <div>
  99. <h4 class="card-title">[field:title/]</h4>
  100. <p class="card-text" style="margin-bottom: 5px;font-size: 13px;">[field:updatetime function="format('yyyy-MM-dd')"/]</p>
  101. <p class="card-text mb-0 link-default content-text" style="overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;word-wrap: break-word;display: -webkit-box;-webkit-box-orient: vertical;line-height: 20px;">
  102. [field:remark/]
  103. </p>
  104. </div>
  105. <div>
  106. <a class="card-link mb-0 link-default" href="[field:arcurl/]" style="font-size: 13px;">阅读更多&gt;</a>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. {/dreamer-cms:list}
  112. </div>
  113. </div>
  114. </main>
  115. {dreamer-cms:include file='footer.html'/}
  116. <script src="{dreamer-cms:template /}assets/js/jquery.min.js"></script>
  117. <script type="text/javascript" src="{dreamer-cms:template /}assets/js/wow.min.js"></script>
  118. <script src="{dreamer-cms:template /}assets/js/main.js"></script>
  119. <script src="{dreamer-cms:template /}assets/bootstrap/js/bootstrap.min.js"></script>
  120. <script src="{dreamer-cms:template /}assets/js/aos.min.js"></script>
  121. <script src="{dreamer-cms:template /}assets/js/bs-init.js"></script>
  122. <script src="{dreamer-cms:template /}assets/js/image.js"></script>
  123. </body>
  124. </html>