Merge branch 'master' of http://115.29.66.169:10080/cyz/panda_web

about_us.html

@@ -315,6 +315,7 @@
     </div>
     <div class="box6-content mobile">
         <div class="cards-box">
+            <div class="title">News</div>
             <div class="cards">
                 <div class="card">
                     <div class="tag"></div>
@@ -329,7 +330,7 @@
             <div onclick="nextPage2()" class="img last2"></div>
         </div>
     </div>
-    <!--头部-->
+    <!--尾部-->
     <!--#include file="./components/footer1.html"-->
 </div>
 <script type="module" src="./assets/js/common/index.js"></script>

assets/js/common/index.js

@@ -8,8 +8,8 @@ import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';
 
 /**
  * 执行动画
+ * @description 如果元素滚动至可视窗口，添加css动效
  * @param ele 元素的选择器
- * @description 如果元素滚动至距离底部150px以上，添加css动效
  */
 window.showAnimate = function (ele, className) {
   //先隐藏元素
@@ -58,9 +58,9 @@ window.showAnimate = function (ele, className) {
 }
 
 /**
- * @description 元素滚动至父容器的中间
+ * @description 元素横向滚动至父容器的中间
  * @param ele 可以传元素的"event"或者"选择器名称"
- * @fatherEle 滚动父容器的元素
+ * @fatherEle 可滚动的父容器的元素
  */
 window.eleToCenter = function (e,fatherEle){
   let item = typeof e == 'object'?$(e.target):(e);

assets/js/takeout_support/index.js

@@ -0,0 +1,14 @@
+//轮播图
+let swiper = new Swiper("#swiper1", {
+    pagination: {
+        el: ".swiper-pagination"
+    },
+    loop: true, //循环
+    observer: true,//修改swiper自己或子元素时，自动初始化swiper
+    observeParents: true,//修改swiper的父元素时，自动初始化swiper
+    speed: 500,
+    autoplay: {
+        disableOnInteraction: false,  //触碰后自动轮播也不会停止
+        delay: 3000,
+    }
+});

assets/style/about_us/index.css

@@ -1,5 +1,3 @@
-
-
 /* 轮播图 */
 .aboutus-page .swiper {
     width: 100%;
@@ -829,6 +827,17 @@
         height: 92.4vw;
        padding-top: 19.46vw;
     }
+    .aboutus-page .box6-content.mobile .cards-box .title{
+        font-size: 6.4vw;
+        font-family: NexaBold, NexaBold-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #ffffff;
+        position: absolute;
+        top: 9vw;
+        left: 50%;
+        transform: translateX(-50%);
+    }
     .aboutus-page .box6-content.mobile .card{
         width: 53.33vw;
         min-height: 53.33vw;

assets/style/common/index.css

@@ -88,3 +88,27 @@
     width: 4.66vw;
     height: 4.66vw;
 }
+
+
+/* 轮播图的指示器样式 */
+.swiper-pagination-bullet{
+    background: white;
+    opacity: 1;
+    transform: scale(0.8);
+}
+.swiper-pagination-bullet-active{
+    position: relative;
+    transform: scale(0.8);
+}
+.swiper-pagination-bullet-active:after{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    height: 200%;
+    transform: translate(-50%,-50%);
+    border: 2px white solid;
+    background: transparent;
+    border-radius: 50%;
+}

assets/style/takeout_support/index.css

@@ -0,0 +1,34 @@
+/* 轮播图 */
+.takeoutsupport-page .swiper {
+    width: 100%;
+    height: 100%;
+}
+
+.takeoutsupport-page .swiper-slide {
+    font-size: 18px;
+}
+
+.takeoutsupport-page .swiper-slide img {
+    height: 41.66vw;
+    width: 100%;
+}
+
+
+.takeoutsupport-page .box1 {
+    width: 100%;
+    height: 41.666vw;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+}
+
+.takeoutsupport-page .box1 .title{
+    font-size: 4.16vw;
+    font-family: Gilroy, Gilroy-Bold;
+    font-weight: 700;
+    color: #ffffff;
+    margin: 0 auto;
+}