feat:about,contact,news的全部内容以及product的部分内容

static/css/index.css

@@ -1,3 +1,24 @@
+.about-advantage-swiper-slide:hover {
+    box-shadow: 0 0 10px 2px rgb(187, 187, 187);
+}
+
+.about-advantage-swiper-slide {
+    box-shadow: 0 0 4px 1px rgba(187, 187, 187, 0.76);
+}
+
+.amap-info {
+    width: 35rem;
+    }
+
+.amap-info-content {
+color: white;
+background-color: rgb(254, 108, 34);
+}
+
+.amap-info-sharp {
+    border-top: .5rem solid rgb(254, 108, 34) !important;
+}
+
 .navbar-lang-icon > path {
     stroke: white;
     stroke-width: 3;

static/js/index.js

@@ -1,3 +1,137 @@
+window.init = function(){
+    // 信息窗体的内容
+    var content = [
+        "<div><div style=\"font-size: 1rem; margin-bottom: .75rem;\">常州市鸿福如电子电器有限公司</div>",
+        "<div style=\"font-size: .75rem;\">联系人:周三妹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话:189 2107 9018</div>",
+        "<div style=\"font-size: .75rem;\">公司地址:江苏武进经济开发区西湖街道长秀路8号5幢101室</div></div>"
+    ];
+
+    var map = new AMap.Map("container", {
+        resizeEnable: true,
+        center: [119.82,31.73],
+        zoom: 16
+    });
+
+    infoWindow = new AMap.InfoWindow({
+        content: content.join("")  //使用默认信息窗体框样式，显示信息内容
+    });
+
+    infoWindow.open(map, map.getCenter());
+}
+
+var about_advantage_swiper = new Swiper(".about-advantage-swiper", {
+    loop: true,
+    slidesPerView: 5,
+    spaceBetween: 20,
+    centeredSlides: true,
+    grabCursor: true,
+    speed: 800,
+    // autoplay: {
+    //     delay: 3000, // 自动切换的时间间隔（单位：毫秒）
+    //     disableOnInteraction: false, // 用户操作后是否停止自动播放（false 表示不停止）
+    // },
+    breakpoints: {
+        0: {
+            slidesPerView: 1,
+            centeredSlides: true,
+        },
+        700: {
+            slidesPerView: 2,
+            centeredSlides: true,
+        },
+        1050: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        },
+        1450: {
+            slidesPerView: 5,
+            centeredSlides: false,
+        },
+        1920: {
+            slidesPerView: 5,
+            centeredSlides: false,
+        },
+    },
+    on: {
+        resize: function () {
+            updateAboutAdvantagePaginationVisibility();
+        },
+
+        slideChange: function () {
+            $(".about-advantage-pagination-item").each((index, elem) => {
+                if (index == this.realIndex) {
+                    $(elem).addClass("bg-black").removeClass("bg-opacity-70")
+                } else {
+                    $(elem).removeClass("bg-black").addClass("bg-opacity-70")
+                }
+            })
+        },
+    },
+});
+function updateAboutAdvantagePaginationVisibility(){
+    let show_slides_number = about_advantage_swiper.params.slidesPerView;
+    console.log(show_slides_number);
+    if (show_slides_number < 5){
+        $(".about-advantage-pagination").show();
+    } else {
+        $(".about-advantage-pagination").hide();
+    }
+}
+
+$(document).ready(() => {
+    updateAboutAdvantagePaginationVisibility(),
+    $(".about-advantage-pagination-item").each((index, elem) => {
+        $(elem).click(() => {
+            about_advantage_swiper.slideToLoop(index, 800, false)
+        })
+    })
+})
+
+var about_honor_swiper = new Swiper(".about-honor-swiper", {
+    loop: true,
+    slidesPerView: 5,
+    spaceBetween: 20,
+    centeredSlides: true,
+    grabCursor: true,
+    speed: 800,
+    autoplay: {
+        delay: 3000, // 自动切换的时间间隔（单位：毫秒）
+        disableOnInteraction: false, // 用户操作后是否停止自动播放（false 表示不停止）
+    },
+    breakpoints: {
+        0: {
+            slidesPerView: 1,
+            centeredSlides: true,
+        },
+        700: {
+            slidesPerView: 2,
+            centeredSlides: true,
+        },
+        1050: {
+            slidesPerView: 3,
+            centeredSlides: false,
+        },
+        1450: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        },
+        1920: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        },
+    },
+});
+
+
+$(document).ready(() => {
+    $(".about-honor-prev-button").click(() => {
+        about_honor_swiper.slidePrev()
+    })
+    $(".about-honor-next-button").click(() => {
+        about_honor_swiper.slideNext()
+    })
+})
+
 var product_swiper = new Swiper(".product-swiper", {
     loop: true,
     slidesPerView: 4,
@@ -33,16 +167,6 @@ var product_swiper = new Swiper(".product-swiper", {
     },
 });
 
-$(document).ready(() => {
-    $(".product-prev-button").click(() => {
-        console.log("1")
-        product_swiper.slidePrev()
-    })
-    $(".product-next-button").click(() => {
-        product_swiper.slideNext()
-    })
-})
-
 const carousel_swiper = new Swiper(".carousel-swiper", {
     loop: true,
     effect: "fade",