aos

xihuaTemplate/css/media.css

@@ -1,6 +1,26 @@
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: 1366px) {
   .header_layout {
     padding: 16px 20px;
+  }
+  .header_logo img {
+    max-width: 300px;
+  }
+  .header_layout .header_menu {
+    padding-left: 20px;
+  }
+  .header_btm_wrapper {
+    padding: 130px 20px;
+  }
+  .footer_layout .lay_footer .footer_menu .logo {
+    padding-right: 40px;
+  }
+  .footer_layout .lay_footer .footer_menu .menus .wp-menu {
+    padding-left: 40px;
+    gap: 20px;
+  }
+}
+@media screen and (max-width: 1152px) {
+  .header_layout {
     justify-content: space-between;
   }
   .header_logo {
@@ -20,13 +40,33 @@
     padding-top: 72px;
   }
   .page_tabs_box {
+    width: 100%;
+  }
+  .page_tabs_box .column_title_box {
+    padding: 12px 20px;
+    margin-bottom: 0;
+  }
+  .column_title_box .arrow {
+    display: block;
+  }
+  .page_tabs_box .column_title {
+    font-size: 22px;
+  }
+  .page_tabs_box .page_tab_list {
     display: none;
   }
+  .page_tabs_box .page_tab_list .page_list_item .item_link {
+    padding: 16px 24px;
+  }
+  .page_tabs_box .page_tab_list .page_list_item .sub_list {
+    padding: 0 24px 20px;
+  }
   .header_btm_wrapper {
-    padding: 100px 0;
+    padding: 72px 0;
+    flex-direction: column;
   }
   .content_wrapper {
-    padding: 0 40px;
+    padding: 40px 40px 0;
   }
   .search_box .wp-search {
     padding: 16px 20px;
@@ -303,29 +343,6 @@
     display: none;
   }
 
-  .page_tabs_box .page_tab_list {
-    justify-content: flex-start;
-  }
-  .page_tabs_box .page_tab_list {
-    justify-content: flex-start;
-  }
-  .page_tabs_box .page_tab_list .sub_list {
-    justify-content: flex-start;
-    padding: 20px 10px 10px;
-  }
-  .page_tabs_box .page_tab_list .page_list_item {
-    flex-shrink: 1;
-  }
-  .page_tabs_box .page_tab_list .page_list_item + .page_list_item {
-    margin-left: 0;
-  }
-  .page_tabs_box .page_tab_list .page_list_item .item_link {
-    display: none;
-  }
-  .page_tabs_box .page_tab_list .page_list_item .sub_list {
-    position: relative;
-    top: 0;
-  }
   .page_article_list,
   .page_teacher_list {
     grid-template-columns: repeat(2, 1fr);

xihuaTemplate/css/style.css

@@ -20,7 +20,6 @@
   display: block;
   font-size: 0;
 }
-
 .header_logo img {
   max-width: 440px;
   height: 65px;
@@ -28,7 +27,7 @@
 }
 .header_layout .header_menu {
   position: relative;
-  margin-left: 50px;
+  padding-left: 50px;
   flex: 1;
 }
 .header_layout .nav .wp-menu {
@@ -202,11 +201,11 @@
   padding: 130px 0;
   display: flex;
   width: 100%;
-  max-width: 1200px;
+  max-width: 1280px;
   margin: 0 auto;
 }
 .home_lay_title {
-  margin-bottom: 24px;
+  margin-bottom: 30px;
   font-size: 30px;
   color: var(--vt-c-indigo);
   line-height: 1;
@@ -558,7 +557,7 @@
 .tabs_header {
   display: flex;
   align-items: center;
-  margin-bottom: 40px;
+  margin-bottom: 30px;
 }
 .tabs_header .home_lay_title {
   margin-bottom: 0;
@@ -1152,16 +1151,34 @@
   position: relative;
   width: 220px;
 }
-.page_tabs_box .column_title {
+.page_tabs_box .column_title_box {
+  display: flex;
+  align-items: center;
   margin-bottom: 16px;
   padding: 24px 20px;
+  background: var(--vt-c-primary);
+  overflow: hidden;
   width: 100%;
+}
+.page_tabs_box .column_title {
+  flex: 1;
   font-weight: 600;
   font-size: 28px;
+  line-height: 28px;
   color: #ffffff;
   white-space: nowrap;
   overflow: hidden;
-  background: var(--vt-c-primary);
+}
+.column_title_box .arrow {
+  display: none;
+  width: 40px;
+  height: 40px;
+  background: url("../images/arrow_down_white.png") no-repeat center/contain;
+  transition: all 0.4s ease-in-out;
+  cursor: pointer;
+}
+.column_title_box .arrow.up {
+  transform: rotate(-180deg);
 }
 .page_tabs_box .page_tab_list {
   position: relative;

xihuaTemplate/js/app.js

@@ -56,6 +56,12 @@ SDAPP.prototype.plugin = function () {
 			_this.J(this).children('.sub-menu').hide();
 		});
 	}
+	this.J(".column_title_box").on("click", function (event) {
+		event.preventDefault();
+		_this.J(".column_title_box .arrow").toggleClass("up")
+		_this.J(".page_tab_list").slideToggle(200);
+	});
+
 	this.J(".page_tab_list .page_list_item.selected").find(".sub_item_link ").eq(0).addClass("selected")
 	var $aside = this.J("#wp-navi-aside");
 	var sideWrap = $aside.find(".navi-aside-wrap");

xihuaTemplate/listcolumn.htm

@@ -65,7 +65,6 @@
                       </ul>
                       <!--[MenuStructEnd]-->
                     </li>
-
                     <!--[NaviItemCycleEnd]-->
                   </ul>
                   <!--[NaviStructEnd]-->
@@ -128,7 +127,11 @@
       <div class="page_tabs_box">
         <div frag="窗口3" portletmode="simpleColumnList">
           <div frag="窗口内容">
-            <h1 class="column_title">{位置栏目}</h1>
+            <div class="column_title_box">
+              <h1 class="column_title">{位置栏目}</h1>
+              <div class="arrow"></div>
+            </div>
+
             <!--[ColumnStructBegin]-->
             <ul class="page_tab_list">
               <!--[ColumnCycleBegin]-->
@@ -244,7 +247,6 @@
                   </ul>
                   <!--[MenuStructEnd]-->
                 </li>
-
                 <!--[NaviItemCycleEnd]-->
               </ul>
               <!--[NaviStructEnd]-->

xihuaTemplate/listintro.htm

@@ -129,7 +129,10 @@
       <div class="page_tabs_box">
         <div frag="窗口3" portletmode="simpleColumnList">
           <div frag="窗口内容">
-            <h1 class="column_title">{位置栏目}</h1>
+            <div class="column_title_box">
+              <h1 class="column_title">{位置栏目}</h1>
+              <div class="arrow"></div>
+            </div>
             <!--[ColumnStructBegin]-->
             <ul class="page_tab_list">
               <!--[ColumnCycleBegin]-->

xihuaTemplate/listteacher.htm

@@ -129,7 +129,10 @@
       <div class="page_tabs_box">
         <div frag="窗口3" portletmode="simpleColumnList">
           <div frag="窗口内容">
-            <h1 class="column_title">{位置栏目}</h1>
+            <div class="column_title_box">
+              <h1 class="column_title">{位置栏目}</h1>
+              <div class="arrow"></div>
+            </div>
             <!--[ColumnStructBegin]-->
             <ul class="page_tab_list">
               <!--[ColumnCycleBegin]-->

xihuaTemplate/main.htm

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="./css/reset.css" type="text/css" />
     <link rel="stylesheet" href="./css/style.css" type="text/css" />
     <link rel="stylesheet" href="./css/media.css" type="text/css" />
+    <link rel="stylesheet" href="./css/aos.css" type="text/css" />
 
     <!--[if lt IE 9]>
       <script src="extends/libs/html5.js"></script>
@@ -150,12 +151,12 @@
     <!--Start||content-->
     <div class="wrapper home_lay_item_box">
       <div class="inner">
-        <div class="home_lay_title">
+        <div class="home_lay_title" data-aos="fade-down">
           最新动态<span>/</span>
           <span>News</span>
         </div>
         <div class="news_lay_box">
-          <div class="news_lay_item" frag="窗口4">
+          <div class="news_lay_item" frag="窗口4" data-aos="fade-up">
             <div class="news_tit">
               要闻快讯
               <div class="list_more" frag="按钮" type="更多">
@@ -179,7 +180,7 @@
               </div>
             </div>
           </div>
-          <div class="news_lay_item" frag="窗口5">
+          <div class="news_lay_item" frag="窗口5" data-aos="fade-up">
             <div class="news_tit">
               党建动态
               <div class="list_more" frag="按钮" type="更多">
@@ -200,7 +201,7 @@
               </div>
             </div>
           </div>
-          <div class="news_lay_item" frag="窗口6">
+          <div class="news_lay_item" frag="窗口6" data-aos="fade-up">
             <div class="news_tit">
               招生就业
               <div class="list_more" frag="按钮" type="更多">
@@ -227,14 +228,14 @@
 
     <div class="wrapper home_lay_item_box">
       <div class="inner" frag="窗口7" portletmode="simpleArticleAttri">
-        <div class="home_lay_title">
+        <div class="home_lay_title" data-aos="fade-down">
           系部设置<span>/</span>
           <span>Speciality</span>
         </div>
         <div frag="窗口内容">
           <div class="spe_cards">
             <!--[InfoCycleBegin]-->
-            <div class="cards_item card_{序号值}">
+            <div class="cards_item card_{序号值}" data-aos="fade-up">
               <div class="card_top">
                 <div class="card_icon icon_{序号值}"></div>
                 <div class="card_tit">
@@ -260,7 +261,7 @@
 
     <div class="wrapper home_lay_item_box wrapper_teacher_bg">
       <div class="inner" frag="窗口8">
-        <div class="home_lay_title">
+        <div class="home_lay_title" data-aos="fade-down">
           教师队伍<span>/</span>
           <span>Teachers</span>
         </div>
@@ -268,7 +269,7 @@
           <div class="teachers_box">
             <div class="teachers_swiper">
               <!--[InfoCycleBegin]-->
-              <div class="teacher_slide">
+              <div class="teacher_slide" data-aos="fade-up">
                 <div class="teacher_item">{缩略图}</div>
                 <div class="item_footer">
                   <div class="name">{标题}</div>
@@ -289,11 +290,11 @@
     <div class="wrapper home_lay_item_box teach_bg">
       <div class="inner talent_tab">
         <div class="tabs_header">
-          <div class="home_lay_title">
+          <div class="home_lay_title" data-aos="fade-down">
             教育教学<span>/</span>
             <span>Education & teaching</span>
           </div>
-          <div class="tabs_nav_list">
+          <div class="tabs_nav_list" data-aos="fade-left">
             <div class="list_item" frag="窗口81" portletmode="windowTitle">
               <span frag="窗口内容">{标题8}</span>
             </div>
@@ -310,7 +311,7 @@
             <div frag="窗口内容">
               <ul class="tab_list">
                 <!--[InfoCycleBegin]-->
-                <li class="list_item">
+                <li class="list_item" data-aos="fade-up">
                   <div class="item">
                     <div class="list_img">{缩略图}</div>
                     <div class="info_box">
@@ -378,14 +379,14 @@
 
     <div class="wrapper home_lay_item_box research_bg">
       <div class="inner research" frag="窗口12">
-        <div class="home_lay_title">
+        <div class="home_lay_title" data-aos="fade-down">
           科研创作<span>/</span>
           <span>Scientific Research</span>
         </div>
         <div frag="窗口内容">
           <ul class="tab_list research_list">
             <!--[InfoCycleBegin]-->
-            <li class="list_item">
+            <li class="list_item" data-aos="fade-up">
               <div class="item">
                 <div class="list_img">{缩略图}</div>
                 <div class="info_box">
@@ -408,11 +409,11 @@
     <div class="wrapper home_lay_item_box work_bg">
       <div class="inner works_tab">
         <div class="tabs_header">
-          <div class="home_lay_title white">
+          <div class="home_lay_title white" data-aos="fade-down">
             师生作品<span>/</span>
             <span>Works</span>
           </div>
-          <div class="tabs_nav_list">
+          <div class="tabs_nav_list" data-aos="fade-left">
             <div class="list_item" frag="窗口121" portletmode="windowTitle">
               <span frag="窗口内容">{标题12}</span>
             </div>
@@ -435,7 +436,7 @@
             <div frag="窗口内容">
               <ul class="tab_list">
                 <!--[InfoCycleBegin]-->
-                <li class="list_item">
+                <li class="list_item" data-aos="fade-up">
                   <div class="item_link">
                     {缩略图}
                     <div class="item_txt">
@@ -541,12 +542,12 @@
     </div>
     <div class="wrapper home_lay_item_box services_bg">
       <div class="inner">
-        <div class="home_lay_title">
+        <div class="home_lay_title" data-aos="fade-down">
           学生服务<span>/</span>
           <span>Services</span>
         </div>
         <div class="service_list">
-          <div class="ser_item">
+          <div class="ser_item" data-aos="fade-up">
             <a href="http://www.lib.xhu.edu.cn/" target="_blank">
               <div class="ser_icon">
                 <img src="./images/icon_home_service_1.png" />
@@ -557,7 +558,7 @@
               </div>
             </a>
           </div>
-          <div class="ser_item">
+          <div class="ser_item" data-aos="fade-up">
             <a href="http://jwc.xhu.edu.cn/" target="_blank">
               <div class="ser_icon">
                 <img src="./images/icon_home_service_2.png" />
@@ -568,7 +569,7 @@
               </div>
             </a>
           </div>
-          <div class="ser_item">
+          <div class="ser_item" data-aos="fade-up">
             <a href="http://urp.xhu.edu.cn/" target="_blank">
               <div class="ser_icon">
                 <img src="./images/icon_home_service_3.png" />
@@ -579,7 +580,7 @@
               </div>
             </a>
           </div>
-          <div class="ser_item">
+          <div class="ser_item" data-aos="fade-up">
             <a href="http://eclass.xhu.edu.cn/" target="_blank">
               <div class="ser_icon">
                 <img src="./images/icon_home_service_4.png" />
@@ -590,7 +591,7 @@
               </div>
             </a>
           </div>
-          <div class="ser_item">
+          <div class="ser_item" data-aos="fade-up">
             <a href="mailto:msysj@mail.xhu.edu.cn" target="_blank">
               <div class="ser_icon">
                 <img src="./images/icon_home_service_5.png" />
@@ -601,7 +602,7 @@
               </div>
             </a>
           </div>
-          <div class="ser_item">
+          <div class="ser_item" data-aos="fade-up">
             <a href="http://oa.xhu.edu.cn/" target="_blank">
               <div class="ser_icon">
                 <img src="./images/icon_home_service_6.png" />
@@ -691,10 +692,18 @@
 
   <script type="text/javascript" src="./js/main.js"></script>
   <script type="text/javascript" src="./js/app.js"></script>
+  <script type="text/javascript" src="./js/aos.js"></script>
   <script type="text/javascript">
     $(function () {
       // 初始化SDAPP
       new SDAPP();
+      AOS.init({
+        easing: "ease-in-out-sine",
+        offset: 200,
+        delay: 100,
+        once: true,
+        duration: 500,
+      });
     });
   </script>
 </html>