根据屏幕大小调整动画延迟效果

cms-editor/templates/default_v5/about_list.html

@@ -50,8 +50,10 @@
     <main>
         <section>
             <div class="container">
-                <div><img style="width: 100%;object-fit: cover;"
-                        src="{dreamer-cms:template /}assets/img/fef4d873cd266540e10dbf1e1a843026.jpg" loading="lazy">
+                <div>
+                    {dreamer-cms:type typeid="04zc8871"}
+                    <img style="width: 100%;object-fit: cover;" src="[field:typeimg/]" loading="lazy">
+                    {/dreamer-cms:type}
                 </div>
                 <hr class="ahout-hr" style="color: #a69b9f;">
             </div>
@@ -59,7 +61,11 @@
         <section>
             <div class="container">
                 <div>
-                    <p style="text-indent: 2em;color: #3c3b3b;">{dreamer-cms:global name="describe" /}</p>
+                    {dreamer-cms:type typeid="04zc8871"}
+                    <div style="text-indent: 2em;color: #6b6767;">
+                        [field:htmlcontent/]
+                    </div>
+                    {/dreamer-cms:type}
                 </div>
                 <hr class="ahout-hr" style="color: #a69b9f;">
             </div>
@@ -72,10 +78,10 @@
                     <img loading="lazy" src="[field:typeimg/]" width="100%" height="50%" alt="[field:typenamecn/]"
                         style="object-fit: cover;">
                     {/dreamer-cms:type}
-                    <div class="row gx-4 row-cols-1 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3">
+                    <div class="row gx-4 row-cols-1 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 team">
                         {dreamer-cms:list typeid="ieu98721" pagenum="0" flag="p" pagesize="3"}
-                        <div class="col mt-xl-4 mt-md-4 mt-2 " data-aos="fade-down-right" data-aos-duration="1000"
-                            data-aos-once="true">
+                        <div class="col mt-xl-4 mt-md-4 mt-2 fade-box" data-aos="zoom-in-right"
+                            data-aos-duration="1000" data-aos-once="true">
                             <div class="team-img" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
                                 <div style="height: inherit;width: inherit;position: absolute;top: 0; z-index: 10;">
                                 </div>
@@ -93,9 +99,16 @@
             <div class="container">
                 <h3>人员介绍</h3>
                 <div
-                    class="row gx-0 gy-2 gx-sm-3 gx-md-3 gx-lg-3 gx-xl-3 gx-xxl-3 row-cols-1 row-cols-sm-4 row-cols-xl-6 pt-xl-4 row-cols-lg-6 pt-3 pt-xl-4">
+                    class="person row gx-0 gy-2 gx-sm-3 gx-md-3 gx-lg-3 gx-xl-3 gx-xxl-3 
+                    row-cols-1 
+                    row-cols-sm-4 
+                    row-cols-xl-6 
+                    pt-xl-4 
+                    row-cols-lg-6 
+                    pt-3 
+                    pt-xl-4">
                     {dreamer-cms:list typeid="16nm8896" pagenum="0" flag="p"}
-                    <div class="col" data-aos="fade-down-right" data-aos-duration="1000" data-aos-once="true">
+                    <div class="col fade-box" data-aos="zoom-in-right" data-aos-duration="1000" data-aos-once="true">
                         <img class="auto-img" src="[field:litpic/]" loading="lazy">
                     </div>
                     {/dreamer-cms:list}
@@ -109,6 +122,45 @@
     <script src="{dreamer-cms:template /}assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="{dreamer-cms:template /}assets/js/aos.min.js"></script>
     <script src="{dreamer-cms:template /}assets/js/bs-init.js"></script>
+    <script>
+        $(function () {
+            var Owidth = document.querySelector("html").offsetWidth;
+            var ow;
+            if (Owidth <= 768) {
+                ow = "s"
+            } else {
+                if (Owidth > 768 && Owidth <= 992) {
+                    ow = "m"
+                } else {
+                    if (Owidth > 992 && Owidth <= 1200) {
+                        ow = "l"
+                    } else {
+                        if (Owidth > 1200) {
+                            ow = "xl"
+                        }
+                    }
+                }
+            }
+            var fade = $(".team .fade-box")
+            let flag = 0
+            fade.each((index, element) => {
+                $(element).attr("data-aos-delay", flag)
+                flag += 200
+                if(ow == "l" && (index+1)%3==0 || ow=="s") {
+                   flag = 0
+                }
+            });
+            let dflag = 0
+            var dfade = $(".person .fade-box")
+            dfade.each((index, element) => {
+                $(element).attr("data-aos-delay", dflag)
+                dflag += 200
+                if(ow=="s" || ow == "m" && (index+1)%4==0 || ow == "l" && (index+1)%6==0){
+                    dflag = 0
+                }
+            });
+        })
+    </script>
 </body>
 
 </html>