首页

static/css/common.css

@@ -0,0 +1,39 @@
+body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0rem;
+    margin: 0rem;
+}
+
+html {
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+
+    font-size: 0.835vw;
+}
+
+@media screen and (max-width: 1920px) {
+    html {
+        font-size: 1rem;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 .375rem rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 .375rem rgba(255, 255, 255, 0.3);
+    background-color: #b3b3b3;
+}

static/css/index.css

@@ -0,0 +1,99 @@
+.navbar-lang-icon > path {
+    stroke: white;
+    stroke-width: 3;
+}
+
+.navbar {
+    transition: all .3s;
+}
+
+.navbar:hover .navbar-brand > div {
+    color: #333;
+}
+
+.navbar:hover .navbar-item {
+    color: #333;
+}
+
+.navbar:hover .navbar-lang-icon > path {
+    stroke: #333;
+}
+
+
+@media (min-width: 1024px) {
+    .navbar-light {
+        border-bottom: 0;
+    }
+
+    .navbar-light .navbar-brand > div {
+        color: #333;
+    }
+
+    .navbar-light .navbar-brand > .brand-dark {
+        display: none;
+    }
+
+    .navbar-light .navbar-brand > .brand-light {
+        display: block;
+    }
+
+    .navbar-light .navbar-item {
+        color: #333;
+    }
+
+    .navbar-light .navbar-lang-icon > path {
+        stroke: #333;
+    }
+
+    .navbar-item > .banner-inner {
+        transition: all .3s;
+    }
+
+    .navbar-item:hover > .banner-inner {
+        display: flex;
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+@media (max-width: 1024px) {
+    .navbar-mobile-light .navbar-brand > div {
+        color: #333;
+    }
+
+    .navbar-mobile-light .navbar-brand > .brand-dark {
+        display: none;
+    }
+
+    .navbar-mobile-light .navbar-brand > .brand-light {
+        display: block;
+    }
+
+    .navbar-mobile-light .navbar-item {
+        color: #333;
+    }
+
+    .navbar-mobile-light .navbar-lang-icon > path {
+        stroke: #333;
+    }
+
+    .navbar-item > .banner-inner {
+        transition: all .3s;
+    }
+
+    .navbar-item:hover > .banner-inner {
+        display: flex;
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+@media screen and (max-width: 996px) {
+    .navbar-items {
+        display: none;
+    }
+
+    .navbar-toggler {
+        display: flex !important;
+    }
+}

static/js/common.js

@@ -0,0 +1,3 @@
+AOS.init({
+    once: true
+})

static/js/index.js

@@ -0,0 +1,167 @@
+var product_swiper = new Swiper(".product-swiper", {
+    loop: true,
+    slidesPerView: 4,
+    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(() => {
+    $(".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",
+    autoplay: {
+        delay: 4000,
+        disableOnInteraction: false,
+    },
+    snpeed: 300,
+    on: {
+        slideChangeTransitionStart: function () {
+            $('.carousel-aos').hide(0);
+            $('.carousel-aos').removeClass('aos-init').removeClass('aos-animate');
+        },
+        slideChangeTransitionEnd: function () {
+            $('.carousel-aos').show(0);
+            $('.carousel-aos').addClass('aos-init').addClass('aos-animate');
+        },
+        slideChange: function () {
+            $(".carousel-pagination-item").each((index, elem) => {
+                if (index == this.realIndex) {
+                    $(elem).addClass("carousel-pagination-item-active")
+                } else {
+                    $(elem).removeClass("carousel-pagination-item-active")
+                }
+            })
+        },
+    },
+});
+$(document).ready(() => {
+    $(".carousel-pagination-item").each((index, elem) => {
+        $(elem).click(() => {
+            carousel_swiper.slideToLoop(index, 800, false)
+        })
+    })
+})
+
+$('#contactus-submit-button').click(() => {
+    let comment_title = $('#contactus-first').val() + $('#contactus-last').val()
+    let comment_contact = $('#contactus-phone').val() + '|' + $('#contactus-address').val()
+    let comment_content = $('#contactus-content').val()
+    if ($('#contactus-first').val().length < 1) {
+        alert('请输入姓')
+    } else if ($('#contactus-last').val().length < 1) {
+        alert('请输入名')
+    } else if ($('#contactus-phone').val().length < 1) {
+        alert('请输入电话')
+    } else if ($('#contactus-address').val().length < 1) {
+        alert('请输入地址')
+    } else if ($('#contactus-content').val().length < 1) {
+        alert('请输入您的需求内容')
+    } else {
+        $.ajax({
+            "url": base_url + "/site/comment/add?auth_id=" + "1" + "&auth_key=" + "97a73b7e-9fde-474f-ba2b-ae4703d1e7bb",
+            "method": "POST",
+            "timeout": 0,
+            "headers": {
+                "Content-Type": "application/json"
+            },
+            "data": JSON.stringify({
+                comment_title: comment_title,
+                comment_contact: comment_contact,
+                comment_content: comment_content
+            }),
+        }).done(function (response) {
+            alert(response.errorMessage)
+        }).catch(() => {
+            alert('网络错误')
+        });
+    }
+})
+
+$(document).ready(() => {
+    $('.navbar-offcanvas-body').hide()
+    $('.navbar-toggler-icon').click(() => {
+        $('.navbar-offcanvas').show()
+        $('.navbar-offcanvas-mask').show()
+        $('.navbar-offcanvas').animate({ width: '300px' }, () => {
+            $('.navbar-offcanvas-body').show()
+        })
+    })
+    $('.navbar-offcanvas-close-icon').click(() => {
+        $('.navbar-offcanvas-body').hide()
+        $('.navbar-offcanvas').animate({ width: '0px' }, () => {
+            $('.navbar-offcanvas-mask').hide()
+            $('.navbar-offcanvas').hide()
+        })
+    })
+    $('.navbar-offcanvas-mask').click(() => {
+        $('.navbar-offcanvas-body').hide()
+        $('.navbar-offcanvas').animate({ width: '0px' }, () => {
+            $('.navbar-offcanvas-mask').hide()
+            $('.navbar-offcanvas').hide()
+        })
+    })
+
+    $('.navbar-offcanvas-inner-button').each((index, item) => {
+        $(item).click(() => {
+            if ($(item).parent().children('.navbar-offcanvas-inner').css('display') == 'block') {
+                $(item).children('.navbar-offcanvas-inner-icon').animate({ 'rotate': '0deg' })
+                $(item).parent().children('.navbar-offcanvas-inner').hide()
+            } else {
+                $(item).children('.navbar-offcanvas-inner-icon').animate({ 'rotate': '-90deg' })
+                $(item).parent().children('.navbar-offcanvas-inner').show()
+            }
+        })
+    })
+})
+
+$(document).ready(function () {
+    $(window).on('scroll', function () {
+        // 检查页面滚动的距离
+        if ($(window).scrollTop() > 100) { // 当滚动距离超过 50px 时
+            $('.navbar').addClass('bg-white').removeClass('bg-transparent');
+            $('.navbar a').removeClass('text-white');
+            $('.navbar input').removeClass('border-white').removeClass('text-white').removeClass('placeholder-white');
+        } else {
+            $('.navbar').addClass('bg-transparent').removeClass('bg-white');
+            $('.navbar a').addClass('text-white');
+            $('.navbar input').addClass('border-white').addClass('text-white').addClass('placeholder-white');
+        }
+    });
+});