<!DOCTYPE html>
<html lang="en">

<head>
    <!-- set the encoding of your site -->
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>甜糖科技</title>
    <meta name="description" content="Chilo is a Agency, Startup and SaaS template by tempload." />
	<meta name="keywords" content="chilo, startup, saas, agency, development, html, template, tempload" />
	<meta name="author" content="tempload" />
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="css/plugin-resets.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="style.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="css/color.css">
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon/favicon.ico" />

    <!-- Bootstrap & Plugins CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/magnific-popup.css" rel="stylesheet" type="text/css">

    <!-- Custom CSS -->
    <link href="assets/css/green.css" rel="stylesheet" type="text/css">

    <!-- 引入swiper的css -->
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">

    <link rel="stylesheet" href="css/home1.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/index.css">
    <style class="color_css">
        /* don't delete this blank tag*/
    </style>
    <style>
        .swiperslideItem {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .codeContent {
            width: 1.1rem;
            height: 1.1rem;
            margin: 0 auto;
            padding-top: 0.05rem;
            background-color: #fff;
        }

        .codeImg {
            width: 1rem;
            height: 1rem;
            margin: 0 auto;
        }

        /*  卷下来*/
        @keyframes animate1 {
            0% {
                height: 0px;
                marign-top: 800px;
            }

            100% {
                height: 300px;
                top: 0px;
            }
        }

        /* 卷上去 */
        @keyframes animate2 {
            0% {
                height: 300px;
                top: 0px;
            }

            100% {
                height: 0px;
                top: 400px;
            }
        }

        /* 淡入 */

        @keyframes fadeIn {
            0% {
                opacity: 0
            }

            100% {
                opacity: 1
            }
        }

        /* 淡出 */
        @keyframes fadeOut {
            from {
                opacity: 1
            }

            to {
                opacity: 0;
            }
        }

        /* 客服小图标样式 */
        .customer {
            bottom: 85px;
            z-index: 9;
            right: 20px;
            width: 50px;
            color: #fff;
            height: 50px;
            z-index: 909;
            cursor: pointer;
            font-size: 25px;
            position: fixed;
            line-height: 47px;
            text-align: center;
            border-radius: 50%;
            background-color: #00d2c4;
        }

        .customer img {
            width: 60%;
            height: 60%;
            text-align: center;
            line-height: 50px;
        }

        .customerContent {
            bottom: 125px;
            z-index: 9;
            right: 70px;
            color: #000;
            z-index: 9999;
            cursor: pointer;
            position: fixed;
            text-align: center;
            background-color: #fff;
            text-align: center;
        }

        .customerContent ul li {
            line-height: 20px;
            padding: 5px 40px;
            font-size: 12px;
            border-bottom: 1px solid #ccc;
        }

        .customerContent ul li:first-child {
            font-size: 14px;
        }

        .weixinMask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1002;
            background: rgba(0, 0, 0, .7);

        }

        .weixinMask img {
            width: 100vw;
            position: absolute;
            right: 0;
            top: 0;
        }
        .appShow p {
            padding: 0;
            margin: 0;
            font-size: 0.14rem;
            border-radius: 5%;
        }

        .appShow p:first-child {
            padding: 0.04rem 0.1rem;
            background-color: #05d39b;
        }

        .appShow p:nth-child(2) {
            padding: 0.02rem 0.1rem;
            background-color: #59bba1;
            margin: 0.1rem 0;
        }

        .appShow p:nth-child(3) {
            padding: 0.04rem 0.1rem;
            background-color: #6c807a;
        }

        .heading {
            font-size: 0.3rem;
        }

        /* 内容部分的左右间距 */
    </style>


    <script src="js/shared-header.js?v=20260317a"></script>
    <link rel="stylesheet" href="css/shared-header.css?v=20260317a">
</head>

<body>
    <div id="wrapper">
        <div class="preloader-wrapper">
            <div class="loader"></div>
        </div>
        <!-- <iframe  src="./components/Headers.html"  scrolling="no" style="width: 100%;height: 5rem;"></iframe> -->
                <div id="shared-header-root"></div>
        <script>
            document.getElementById('shared-header-root').outerHTML = renderSharedHeader('index');
        </script>

      
        <main id="main">

            <!-- start of main-banner -->
            <!-- 背景部分 -->
            <div class="main-banner bg-img-full section text-center bagImgs" data-scroll-index="0" id="headered" data-bg="images/home/bag1.webp">
                <div class="contentText" v-show="isWindow">
                    <div class="contentText_top">
                        <p class="contentTitle">甜糖 <span>星愿计划</span></p>
                        <p class="contentTitle">让所有资源，都有意义</p>
                    </div>
                    <div class="contentlittle">

                        甜糖星愿计划是由甜糖科技结合边缘计算云厂商推出的用户激励计划。用户通过贡献闲置算力 即可获取星愿积分。与此同时，甜糖将为企业提供优质低成本的边缘计算服务。
                    </div>


                    <div class="btnDownload" @click="toShowMdel">
                        <a :href="href" id="as" data-scroll-nav="6" style="color: #fff;">下载甜糖APP</a>
                    </div>
                </div>

                <div class="contentText" v-show="!isWindow">
                    <div class="contentText_top">
                        <p class="contentTitle">甜糖 <span>星愿计划</span></p>
                        <p class="contentTitle">让所有资源，都有意义</p>
                    </div>
                    <div class="contentlittle">
                        甜糖星愿计划是由甜糖科技结合边缘计算云厂商推出的用户激励计划。用户通过贡献闲置算力 即可获取星愿积分。与此同时，甜糖将为企业提供优质低成本的边缘计算服务。
                    </div>


                    <div class="btnDownload" @click="handleDownloadNormal" v-if="!is360app">
                        <a :href="href" id="as" data-scroll-nav="6" style="color: #fff;">下载甜糖APP</a>
                    </div>
                    <div class="btnDownload" @click="copeText" v-else>
                        <a :href="href" id="as" data-scroll-nav="6" style="color: #fff;">下载甜糖APP</a>
                    </div>
                </div>

                <div class="appShow" v-show="is360app">
                    <p>星愿：{{ score}}</p>
                    <p>昨日星愿：{{ yes_score}}</p>
                    <p>未激活星愿：{{inactived_score}}</p>
                </div>
            </div>

            <div class="conArea">




                <!-- end of main-banner -->
                <div class="text-center">
                    <!-- <input type="text" name="" id="" onclick="dj()" style="border: 1px solid red;"> -->
                    <p class="bannerTitle">先进企业的选择</p>

                    <!-- 轮播图 -->
                    <div class="swiper swipterWidth">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide bannerItem">
                                <div>
                                    <img alt="loading" style="width: 100%;height: 100%;"
                                        data-src="images/home/douyin.png">
                                </div>
                            </div>
                            <div class="swiper-slide bannerItem">
                                <div>
                                    <img alt="loading" style="width: 100%;height: 100%;"
                                        data-src="images/home/kuishou.png">
                                </div>
                            </div>
                            <div class="swiper-slide bannerItem">
                                <div>
                                    <img alt="loading" style="width: 100%;height: 100%;" data-src="images/home/qq.png">
                                </div>
                            </div>
                            <div class="swiper-slide bannerItem">
                                <div>
                                    <img alt="loading" style="width: 100%;height: 100%;"
                                        data-src="images/home/zhanqi.png">
                                </div>
                            </div>
                            <div class="swiper-slide bannerItem">
                                <div>
                                    <img data-src="images/home/aiqiyi.png" alt="loading"
                                        style="width: 100%;height: 100%;" lazyload="true">
                                </div>
                            </div>
                            <div class="swiper-slide bannerItem">
                                <div>
                                    <img data-src="images/home/bili.png" alt="loading" style="width: 100%;height: 100%;"
                                        lazyload="true">
                                </div>
                            </div>
                         
                        </div>
                 
                    </div>

                </div>


                <!-- main heading start here -->
                <header class="main-heading row conArea">
                    <div class=" col-lg-push-2 text-center " style="padding: 0.5rem;">

                        <h2 class="productTitle">0门槛加入甜糖</h2>
                        <p class="Titlel">使用服务器完成部署，共享算力资源，坐享收益！</p>
                    </div>
                </header>
                <!-- main heading end here -->


                <!-- 安装步骤 -->
                <div class="swiper-container conArea bzWidth server-install-steps">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiperItem">
                            <div class="swiperslideItem" style="width:100%;height:100%;">
                                <div class="Item">
                                    <div class="steps-box text-center  bzTitle">
                                        <div class="swipterText">
                                            <h3 class="swipterNum">01 </h3>
                                            <h3 class="heading swipterTitle">刷写系统</h3>
                                            <p>刷通用 CentOS 7.9 系统。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiperItem">
                            <div class="swiperslideItem" style="width:100%;height:100%;">
                                <div class="Item">
                                    <div class="steps-box text-center bzTitle">
                                        <div class="swipterText">
                                            <h3 class="swipterNum">02 </h3>
                                            <h3 class="heading swipterTitle">执行部署</h3>
                                            <p>执行一键部署脚本。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiperItem">
                            <div class="swiperslideItem" style="width:100%;height:100%;">
                                <div class="Item">
                                    <div class="steps-box text-center bzTitle">
                                        <div class="swipterText">
                                            <h3 class="swipterNum">03 </h3>
                                            <h3 class="heading swipterTitle">扫码绑定</h3>
                                            <p>打开 1024 后台扫码绑定。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiperItem">
                            <div class="swiperslideItem" style="width:100%;height:100%;">
                                <div class="Item">
                                    <div class="steps-box text-center bzTitle">
                                        <div class="swipterText">
                                            <h3 class="swipterNum">04 </h3>
                                            <h3 class="heading swipterTitle">共享算力</h3>
                                            <p>共享算力，坐等收益。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination" style="margin-top: 1rem;"></div>
                </div>
                <div class="install-action conArea text-center">
                    <a class="install-action__button" href="green-blog-single.html?id=doc/%E7%94%9C%E7%B3%96X86%E6%B1%87%E8%81%9A%E8%B5%84%E6%BA%90%E4%B8%8A%E6%9C%BA.md">安装定制镜像</a>
                </div>












                <div class="sharedProducts sharedProductbag conArea" data-bg="images/home/routerBag1.webp">
                    <div class="productItem">
                        <!-- main heading start here -->
                        <header class="main-heading mar-bottom-md">
                            <!-- <div class="text-center kfzy"> -->
                            <h2 class="productTitle">开放自由的共享产品</h2>
                            <p class="Titlel zjTitlel">直接开放软件安装包，发挥你的想象，甜糖几乎可以部署在所有智能设备上</p>
                            <!-- </div> -->
                        </header><!-- main heading end here -->

                        <div class="row mar-bottom-sm">
                            <div class="col-xs-12 col-md-12 col-md-offset-1" style="max-width: none; width:100%;">
                                <!-- start of poitns -->
                                <ul class="list-inline poitns">
                                    <li><i class="fa fa-check main-color" aria-hidden="true"></i> Openwrt系统</li>
                                    <li><i class="fa fa-check main-color" aria-hidden="true"></i> Linux_X86</li>
                                    <li><i class="fa fa-check main-color" aria-hidden="true"></i> Armbian_32/64</li>
                                    <li><i class="fa fa-check main-color" aria-hidden="true"></i> Docker</li>
                                    <li><i class="fa fa-check main-color" aria-hidden="true"></i> 群晖、360路由器等</li>
                                </ul><!-- end of poitns -->
                            </div>


                        </div>
                        <!-- <div class="row conArea" > -->

                        <!-- </div> -->
                    </div>
                    <div class="imgPng">
                        <img data-src="images/home/routerLeft.webp" alt="loading">
                        <img data-src="images/home/routerRight.webp" alt="loading">
                    </div>
                </div>

                <!-- price section start here -->

                <section class=" pad-bottom-sm sharedProducts conArea dhWidth" data-scroll-index="5"
                    style="background-image: none;">

                    <div class="spdh">
                        <!--  -->
                        <!-- main heading start here -->
                        <header class="main-heading row startTitle">
                            <div class=" col-sm-push-1  col-lg-push-2 text-center mar-bottom-md">

                                <h2 class="productTitle">星愿积分 超值商品兑换</h2>
                                <p class="Titlel">甜糖星愿积分可以自由提现，或兑换更多有价值的商品。如果保留积分，每个月还能根据账户余额享受分红！</p>
                            </div>
                        </header><!-- main heading end here -->
                        <div class="rowItem" style="max-width: 1690px;margin: 0 auto;">
                            <div class="rowItem-item">
                                <!-- price box start here -->

                                <div class="price-box grey-bg2 text-center Starintegral">
                                    <div class="headerImg">
                                        <img data-src="images/home/exchange1.png" alt="loading">
                                    </div>
                                    <header class="headerTitle">
                                        <strong class="exchange">自动兑换</strong>
                                        <p class="ll">省心省力</p>
                                    </header>
                                    <ul class="list-unstyled">
                                        <li>每个月自动换购视频VIP</li>
                                        <li>自动换购生活商品</li>
                                        <li>攒积分享受每月分红</li>

                                    </ul>

                                </div>
                                <!-- price box end here -->
                            </div>


                            <div class="rowItem-item">
                                <!-- price box start here -->

                                <div class="price-box grey-bg2 text-center Starintegral">
                                    <div class="headerImg">
                                        <img data-src="images/home/exchange2.png" alt="loading">
                                    </div>
                                    <header class="headerTitle">
                                        <strong class="exchange">甜糖商城</strong>
                                        <p class="ll">星愿兑换享折扣</p>
                                    </header>
                                    <ul class="list-unstyled">
                                        <li>支持甜糖星愿计划的硬件</li>
                                        <li>腾讯视频、爱奇艺VIP</li>
                                        <li>话费兑换</li>

                                        <li>不定期上新，尽请期待</li>

                                    </ul>

                                </div>
                                <!-- price box end here -->
                            </div>


                            <div class="rowItem-item">
                                <!-- price box start here -->

                                <div class="price-box grey-bg2 text-center Starintegral">
                                    <div class="headerImg">
                                        <img data-src="images/home/exchange3.png" alt="loading">
                                    </div>
                                    <header class="headerTitle">
                                        <strong class="exchange">自由提现</strong>
                                        <p class="ll">每周四到账</p>
                                    </header>
                                    <ul class="list-unstyled">
                                        <li>支持支付宝</li>
                                        <li>新用户免实名</li>
                                        <li>超低税率</li>

                                    </ul>

                                </div>
                                <!-- price box end here -->
                            </div>

                        </div>
                    </div>

                </section>

                <section class="pad-top-lg pad-bottom-lg morePlay" data-scroll-index="4"
                    style="padding-top: 50px;background-color: #F8F9FD;">
                    <div class=" col-lg-push-2 text-center mar-bottom-md">
                        <h2 class="productTitle">更多玩法 福利专享</h2>
                        <p class="Titlel" style="color: #666666 ;">新人福利、分享奖励、签到瓜分积分池、每月分红、挂机经验、电费补贴、节假日福利等等，你的每一刻付出都有收获
                        </p>
                    </div>

                    <div class="screen-shold">
                        <div class="screen-slider">
                            <div class="slide sildItem">
                                <img data-src="images/activity1.webp" alt="loading" class="img-responsive">
                            </div>
                            <div class="slide sildItem">
                                <img data-src="images/activity2.webp" alt="loading" class="img-responsive">
                            </div>
                            <div class="slide sildItem">
                                <img data-src="images/activity3.webp" alt="loading" class="img-responsive">
                            </div>
                            <div class="slide sildItem">
                                <img data-src="images/activity4.webp" alt="loading" class="img-responsive">
                            </div>
                            <div class="slide sildItem">
                                <img data-src="images/activity5.webp" alt="loading" class="img-responsive">
                            </div>
                            <div class="slide sildItem">
                                <img data-src="images/activity6.webp" alt="loading" class="img-responsive">
                            </div>
                            <div class="slide sildItem">
                                <img data-src="images/activity7.webp" alt="loading" class="img-responsive">
                            </div>

                        </div>
                        <div class="cover">
                            <img data-src="images/img25.png" alt="loading" class="img-responsive">
                        </div>
                    </div>



                </section>


                
                <!-- 在微信浏览器里面打开 -->

                <div class="appBag conArea">
                    <img data-src="images/home/bag1.webp" alt="loading" style="width: 100%; height: 100%;">
                </div>


            </div>


            <el-dialog title="扫码下载" :visible.sync="ShowMdel" :width="dialogWidth">
                <div style="width:2rem;height:2rem;margin:0 auto;" id="qrcode">
                   
                </div>


            </el-dialog>




        </main>
      
        <!-- 登录页面 -->
        <!-- loginShow -->
        <div class="cover1" v-show="loginShow" @click.self="loginShow = false">
            <el-card class="box-card">
                <p class="title">甜糖科技</p>
                <div class="content">
                    <div class="userName" style="margin: 0 auto">
                        <p style="font-size: 16px">手机号：</p>

                        <div class="postCode">
                            <input type="text" placeholder="请输入您的手机号" style="font-size: 14px; padding-bottom: 4px"
                                v-model="phoneNumber" @blur="mobile" />
                            <p @click="sendCode" v-show="sendShow">发送</p>
                            <p v-show="!sendShow">还有{{ codeNum }}秒</p>
                        </div>
                    </div>

                    <div class="userName" style="margin:30px auto 0 auto; border-bottom: 1px solid #ccc">
                        <p style="font-size: 16px">验证码：</p>
                        <input type="text" placeholder="请输入您的验证码" style="font-size: 14px; padding-bottom: 4px"
                            v-model="code" />
                    </div>

                    <div class="loginBtn" @click="getRegister">
                        登录
                    </div>
                    <div class="thirdparty">
                        <div class="thirdparty_left">
                            <!-- <router-link
                        to="/login"
                        style="
                          margin-top: 6xpx;
                          font-size: 14px;
                          text-decoration: none;
                          color: #30336f;
                        "
                        >登录？</router-link >-->
                        </div>
                        <div class="thirdparty_right"></div>
                    </div>
                </div>
            </el-card>
        </div>




        <!-- main content wrapping section end here -->
        <!-- footer of the page start here -->
        <!-- <iframe class="obj1" src="./components/Footer.html" scrolling="no" style="width:100%;height:5rem"></iframe> -->
        <footer class="dark-bg last" v-show="isHeaderIsFooter">


            <p style="color: #fff;">2021 @甜糖 xzjmw.cn</p>
            <p>
                <a target="_blank" href="http://beian.miit.gov.cn/#/Integrated/index"
                    style="text-decoration: none;color: #fff;">粤ICP备2020127639号</a>
            </p>
            </p>
            <p style="color: #fff;">深圳甜糖科技有限公司</p>
            <p style="text-align: center;display: flex;
                        justify-content: flex-start;
                        align-items: center;">
                <img data-src="images/home/record.png" alt="loading" class="footerImg">
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030602005331"
                    style="text-decoration: none;color: #fff;">

                    <span>粤公网安备 44030602005331号</span>
                    <!-- <a href="http://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx02145753696236ae62025a5e08378c0000&package=2077682656">去往订单</a> -->
                </a>
            </p>


        </footer>
        <!-- footer of the page end here -->
        <!-- Back Top of the page -->
        <!-- 客服的联系方式 -->
        <div class="customerContent" id="costmerC" style="display: none;">
            <ul>
                <li>加入甜糖</li>
                <li>QQ交流群：364444762</li>
            </ul>
        </div>
        <!-- 客服 -->
        <span class="customer" @click="handelCustomer">
            <img src="" data-src="images/iconfont/kf.png" alt="">
        </span>
        <!-- 微信浏览器的提示语 -->
        <div class="cover1" v-show="weixinShow" style="width:100%;height:100vh;">
            <div class="weixinShowStyle" v-show="weixinShow" style="width:100%;height:3rem;">
                <img src="images/wx-open.png" data-src="images/wx-open.png" alt="" style="width: 100%; height: 100%;">
            </div>
        </div>
        <!--回到顶部 -->
        <span id="back-top" class="fa fa-angle-up main-bg-color"></span>




    </div>
    <script src="js/jquery.js" defer></script>
    <script src="js/plugins.js" defer></script>
    <script src="js/jquery.main.js" defer></script>
    <!-- Bootstrap -->
    <script src="assets/js/popper.js" defer></script>
    <script src="assets/js/bootstrap.min.js" defer></script>

    <!-- Plugins -->
    <script src="assets/js/scrollreveal.min.js" defer></script>
    <script src="assets/js/parallax.min.js" defer></script>
    <script src="assets/js/waypoints.min.js" defer></script>
    <script src="assets/js/jquery.counterup.min.js" defer></script>
    <script src="assets/js/jquery.magnific-popup.min.js" defer></script>
    <script src="assets/js/imgfix.min.js" defer></script>

    <!-- Global Init -->
    <script src="assets/js/custom.js" defer></script>
    <!-- 引入swiper的js -->
    <script src="dist/js/swiper-bundle.min.js" defer></script>

    <script src="js/vue.min.js" defer></script>
    <!-- 引入Vant组件样式 -->
    <script src="js/axios.min.js" defer></script>
    <!-- 将地址转为二维码 -->
    <script src="js/qrCode.js" defer></script>
    <!-- <script src="utils/request.js"></script> -->
    <script src="utils/baseUrl.js" defer></script>
    <script src="js/rems.js" defer></script>
    <script src="js/elementui.js" defer></script>
    <!-- <script src="utils/api.js"></script> -->
    <link rel="stylesheet" href="css/elementui.css">
    <script src="js/home.js" defer></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.Swiper) return;

            var mySwiper = new Swiper('.swiper', {
                centeredSlides: true,
                centeredSlidesBounds: true,
                loop: true, // 循环模式选项
                autoplay: true,
                breakpointsInverse: true,
                breakpoints: {
                    320: {
                        slidesPerView: 3,
                    },
                    480: {
                        slidesPerView: 3,
                    },
                    640: {
                        slidesPerView: 3,
                    },
                    1000: {
                        slidesPerView: 5,
                        spaceBetween: 20,
                    }

                }

            });
            var swiper = new Swiper('.swiper-container', {
                centeredSlidesBounds: true,
                autoplay: true,
                breakpointsInverse: true,
                breakpoints: {
                    320: {
                        slidesPerView: 1.5,
                        spaceBetween: 30,
                    },
                    400: {
                        slidesPerView: 1.7,
                        spaceBetween: 30,
                    },
                    450: {
                        slidesPerView: 2,
                        spaceBetween: 30,
                    },
                    480: {
                        slidesPerView: 2.05,
                        spaceBetween: 30,
                    },
                    500: {
                        slidesPerView: 2.05,
                        spaceBetween: 30,
                    },
                    600: {
                        slidesPerView: 2.1,
                        spaceBetween: 35,
                    },
                    640: {
                        slidesPerView: 2.2,
                        spaceBetween: 20,
                    },
                    686: {
                        slidesPerView: 2.2,
                        spaceBetween: 35,
                    },
                    750: {
                        slidesPerView: 2.3,
                        spaceBetween: 35,
                    },
                    770: {
                        slidesPerView: 2.4,
                        spaceBetween: 35,
                    },
                    900: {
                        slidesPerView: 2.4,
                        spaceBetween: 35,
                    },
                    1000: {
                        slidesPerView: 3,
                        spaceBetween: 30,
                    },
                    1100: {
                        slidesPerView: 3,
                        spaceBetween: 30,
                    },
                    1200: {
                        slidesPerView: 4,
                        spaceBetween: 24,
                    },
                    1300: {
                        slidesPerView: 4,
                        spaceBetween: 24,
                    },

                    1400: {
                        slidesPerView: 4,
                        spaceBetween: 24,
                    },
                    1500: {
                        slidesPerView: 4,
                        spaceBetween: 24,
                    },
                    1600: {
                        slidesPerView: 4,
                        spaceBetween: 24,
                    },
                    1650: {
                        slidesPerView: 4,
                        spaceBetween: 35,
                    },
                    1700: {
                        slidesPerView: 4,
                        spaceBetween: 40,
                    },
                    1800: {
                        slidesPerView: 4,
                        spaceBetween: 50,
                    },
                    1900: {
                        slidesPerView: 4,
                        spaceBetween: 50,
                    },

                }

            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var imgs = Array.from(document.querySelectorAll('img[data-src]'));
            var bgBlocks = Array.from(document.querySelectorAll('[data-bg]'));

            imgs.forEach(function (item) {
                item.setAttribute('loading', 'lazy');
            });

            function loadImage(item) {
                if (!item || !item.dataset || !item.dataset.src) return;
                item.setAttribute('src', item.dataset.src);
                item.removeAttribute('data-src');
            }

            function loadBackground(item) {
                if (!item || !item.dataset || !item.dataset.bg) return;
                item.style.backgroundImage = "url('" + item.dataset.bg + "')";
                item.removeAttribute('data-bg');
            }

            if ('IntersectionObserver' in window) {
                var observer = new IntersectionObserver(function (entries, obs) {
                    entries.forEach(function (entry) {
                        if (!entry.isIntersecting) return;
                        loadImage(entry.target);
                        loadBackground(entry.target);
                        obs.unobserve(entry.target);
                    });
                }, { rootMargin: '200px 0px' });

                imgs.forEach(function (item) {
                    observer.observe(item);
                });
                bgBlocks.forEach(function (item) {
                    observer.observe(item);
                });
                return;
            }

            function lazyLoadFallback() {
                var scrollTop = window.scrollY;
                imgs.forEach(function (item) {
                    if (item.offsetTop < window.innerHeight + scrollTop + 200) {
                        loadImage(item);
                    }
                });
                bgBlocks.forEach(function (item) {
                    if (item.offsetTop < window.innerHeight + scrollTop + 200) {
                        loadBackground(item);
                    }
                });
            }

            lazyLoadFallback();
            window.addEventListener('scroll', lazyLoadFallback, { passive: true });
        });
    </script>
    <!-- 监听页面宽度的变化 -->
    <script>
        window.addEventListener('resize', function () {

            if (window.innerWidth > 960) {
                document.getElementById("navlis").style.marginTop = `0rem`
            }
            // var w = window.innerWidth;


        })
    </script>
    <!-- <script src="js/green-features.js"></script> -->
</body>

</html>




