<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="icon" href="dist/images/favicon.icon" />
    <link rel="shortcut icon" href="dist/images/favicon.ico">
    <title>江苏小牛电子科技有限公司</title>
    <meta name="keywords" content="keywords" />
    <meta name="description" content="江苏小牛" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
    width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./dist/css/common.css">
    <link rel="stylesheet" href="./dist/css/index.css">
    <link rel="stylesheet" type="text/css" href="dist/css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="dist/css/swiper.css" />
    <script type="text/javascript" src="dist/js/vue.js"></script>
    <script type="text/javascript" src="dist/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="dist/js/to-top.js"></script>
</head>

<body>
    <div class="container" id="app">
        <!-- 头部 -->
        <div class="top-container d-f j-c">
            <div class="top d-f j-b a-c">
                <img src="./img/xiaoniu_logo.png" alt="">
                <ul class="nav d-f">
                    <li class="active-nav" @click="toIndex">首页</li>
                    <li>产品中心
                        <div class="li-hover d-f f-d a-c">
                            <p @click="toProduct1">交互显示系列</p>
                            <p @click="toProduct2">软件系列</p>
                            <p @click="toProduct3">产品配件</p>
                            <p @click="toSolution">解决方案</p>
                            <p @click="toAdvertisingMachine">广告机</p>
                        </div>
                    </li>
                    <li @click="toCase">案例</li>
                    <li @click="toServe">服务</li>
                    <li>关于小牛
                        <div class="li-hover-too d-f f-d a-c">
                            <p @click="toAboutUs">关于我们</p>
                            <p @click="toDynamics">小牛动态</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 头部固定 -->
        <div class="top-container-too">
            <div class="top d-f j-b a-c">
                <img src="./img/xiaoniu_logo_too.png" alt="">
                <ul class="nav d-f">
                    <li class="active-nav" @click="toIndex">首页</li>
                    <li>产品中心
                        <div class="li-hover d-f f-d a-c">
                            <p @click="toProduct1">交互显示系列</p>
                            <p @click="toProduct2">软件系列</p>
                            <p @click="toProduct3">产品配件</p>
                            <p @click="toSolution">解决方案</p>
                            <p @click="toAdvertisingMachine">广告机</p>
                        </div>
                    </li>
                    <li @click="toCase">案例</li>
                    <li @click="toServe">服务</li>
                    <li>关于小牛
                        <div class="li-hover-too d-f f-d a-c">
                            <p @click="toAboutUs">关于我们</p>
                            <p @click="toDynamics">小牛动态</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 手机端头部固定 -->
        <div class="top-container-mobile" v-show="!canOpen">
            <img src="./img/xiaoniu_logo_mobile.png" alt="">
            <img src="./dist/images/index_top_open_mobile.png" @click="open">
        </div>
        <!-- 轮播图 -->
        <div class="swiper-container-pc">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
                    <img :src="item" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!-- 手机端轮播图 -->
        <div class="swiper-container-mobile">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in bannerListToo" :key="index">
                    <img :src="item" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- 产品中心 -->
        <div class="product-container d-f j-c">
            <div class="product">
                <div class="title-chinese d-f j-c wow fadeInDown">产品中心</div>
                <div class="title-english d-f j-c wow fadeInDown">product</div>
                <div class="product-item-one">
                    <div class="item-one wow fadeInLeft" @click="toProduct1">
                        <img src="https://xn-website.oss-cn-beijing.aliyuncs.com/imgs/index_product_one.png" alt="">
                        <h3>交互显示系列</h3>
                        <h4>基于F-Engine核心技术方案</h4>
                    </div>
                    <div class="item-two wow fadeInRight" @click="toProduct2">
                        <img src="https://xn-website.oss-cn-beijing.aliyuncs.com/imgs/index_product_two.png" alt="">
                        <h3>智慧软件类</h3>
                        <h4>多样化教学应用软件</h4>
                    </div>
                </div>
                <div class="product-item-two">
                    <div class="item-three wow fadeInLeft" @click="toProduct3">
                        <img src="https://xn-website.oss-cn-beijing.aliyuncs.com/imgs/index_product_three.png" alt="">
                        <h3>配件类</h3>
                        <h4>多样化教学应用软件</h4>
                    </div>
                    <div class="item-four wow fadeInRight" @click="toProductRecording">
                        <img src="https://xn-website.oss-cn-beijing.aliyuncs.com/imgs/index_product_four.png" alt="">
                        <h3>录播系统</h3>
                        <h4>多样化教学应用软件</h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- 关于我们 -->
        <div class="about-container d-f j-c">
            <div class="about">
                <div class="title-chinese d-f j-c wow fadeInDown">关于小牛</div>
                <div class="title-english d-f j-c wow fadeInDown">ABOUT US</div>
                <div class="about-item d-f f-d a-c j-c wow fadeInLeft">
                    <div class="pc-video-dust" v-if="!pcVideoOpen">
                        <img src="./img/temp/index_about_open.png" class="pc-img" @click="OpenVideoPc">
                    </div>
                    <div class="mobile-video-dust" v-if="!mobileVideoOpen">
                        <img src="./img/temp/index_about_open_mobile.png" class="mobile-img" @click="OpenVideoMobile">
                    </div>

                    <video width="1200" height="675" controls autoplay="autoplay" class="pc-video" v-if="pcVideoOpen" style="object-fit: fill">
                        <source src="https://xn-website.oss-cn-beijing.aliyuncs.com/videos/WeChat_20210805110841.mp4"
                            type="video/mp4">
                        您的浏览器不支持Video标签。
                    </video>
                    <video width="343" height="192" controls autoplay="autoplayMobile" class="mobile-video" v-if="mobileVideoOpen" style="object-fit: fill">
                        <source src="https://xn-website.oss-cn-beijing.aliyuncs.com/videos/WeChat_20210805110841.mp4"
                            type="video/mp4">
                        您的浏览器不支持Video标签。
                    </video>
                </div>
                <div class="detail d-f j-b f-w">
                    <img src="https://xn-website.oss-cn-beijing.aliyuncs.com/imgs/index_about_detail_mobile.png" class="wow fadeInRight mobile-img">
                    <div class="wow fadeInLeft mobile-content">
                        <h6>小牛科技总部座落于南京市北大科技园，拥有10000平米的现代化生产车间。小牛科技是一家以自主研发为驱动，以自主生产为依托，以智慧教室为场景，打造智慧校园，智慧校区一体化解决方案的高科技公司，具备多项软件著作权及相关专利。
                        </h6>
                        <div class="more d-f a-c" @click="toAboutUs">了解更多
                            <img src="./dist/images/index_about_arrow.png">
                        </div>
                    </div>
                    <div class="wow fadeInLeft pc-content">
                        <h6>小牛科技总部座落于南京市北大科技园，拥有10000平米的现代化生产车间。小牛科技是一家以自主研发为驱动，以自主生产为依托，以智慧教室为场景，打造智慧校园，智慧校区一体化解决方案的高科技公司，具备多项软件著作权及相关专利。
                        </h6>

                        <h6>
                            以小牛F-Engine技术方案为核心，将教学场景中显示系统、录播系统、教学环境系统，教学反馈系统进行有效互联互通，从而实现一个平台对智慧教室所有硬件设备运行状况集中管控。同时，平台对课堂分析反馈系统、备授课系统、组卷测试系统的整合，实现无感知数据采集与分析，通过识别学习者个性特征，实现按需推送学习资源、自动评估学习结果等功能。
                        </h6>
                        <h6>
                            公司秉承“客户至上，极速发展”的宗旨，坚持“技术优先、服务至上、合作多赢”的经营理念，植根中国教育信息化，为教育行业提供技术领先的信息化产品及服务，立志成为中国教育信息化发展历程中的参与者、推动者。
                        </h6>
                        <div class="more d-f a-c" @click="toAboutUs">了解更多
                            <img src="./dist/images/index_about_arrow.png">
                        </div>
                    </div>
                    <img src="https://xn-website.oss-cn-beijing.aliyuncs.com/imgs/index_about_detail.png" class="wow fadeInRight pc-img">
                </div>
            </div>
        </div>
        <!-- 我们的优势 -->
        <div class="advantage-container d-f j-c">
            <div class="advantage">
                <div class="title-chinese d-f j-c wow fadeInDown">我们的优势</div>
                <div class="title-english d-f j-c wow fadeInDown">OUR ADVANTAGES</div>
                <div class="detail-pc d-f j-b">
                    <div class="item d-f f-d a-c  wow fadeInRight">
                        <div class="bac first"></div>
                        <h5>自主研发</h5>
                        <p>DEVELOPMENT</p>
                    </div>
                    <div class="item d-f f-d a-c wow fadeInLeft">
                        <div class="bac second"></div>
                        <h5>自主生产</h5>
                        <p>PRODUCTION</p>
                    </div>
                    <div class="item third d-f f-d a-c  wow fadeInRight">
                        <div class="bac third"></div>
                        <h5>品质至上</h5>
                        <p>QUALITY</p>
                    </div>
                    <div class="item d-f f-d a-c wow fadeInLeft">
                        <div class="bac forth"></div>
                        <h5>优质服务</h5>
                        <p>SERVICE</p>
                    </div>
                </div>
                <div class="detail-mobile d-f j-b f-w">
                    <div class="item d-f f-d a-c  wow fadeInRight">
                        <img src="./img/temp/index_advantage_invention_mobile.png">
                        <h5>自主研发</h5>
                        <p>DEVELOPMENT</p>
                    </div>
                    <div class="item d-f f-d a-c wow fadeInLeft">
                        <img src="./img/temp/index_advantage_product_mobile.png">
                        <h5>自主生产</h5>
                        <p>PRODUCTION</p>
                    </div>
                    <div class="item d-f f-d a-c  wow fadeInRight">
                        <img src="./img/temp/index_advantage_quality_mobile.png">
                        <h5>品质至上</h5>
                        <p>QUALITY</p>
                    </div>
                    <div class="item d-f f-d a-c wow fadeInLeft">
                        <img src="./img/temp/index_advantage_serve_mobile.png">
                        <h5>优质服务</h5>
                        <p>SERVICE</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻动态 -->
        <div class="news-container d-f j-c">
            <div class="news">
                <div class="title-chinese d-f j-c wow fadeInDown">新闻动态</div>
                <div class="title-english d-f j-c wow fadeInDown">HOT NEWS</div>
                <div class="detail-pc d-f j-b f-w">
                    <div class="item d-f f-d wow fadeInLeft" v-for="item in newsList">
                        <div class="title d-f a-c">
                            <div class="text">{{item.title}}</div>
                        </div>
                        <div class="time">{{item.createTime|filtersTime}}</div>
                        <div class="content">{{item.content|filtersText}}</div>
                        <div class="read d-f a-c" @click="toNewsDetail(item)">
                            阅读详情<img src="./dist/images/index_about_arrow.png">
                        </div>
                    </div>
                </div>
                <div class="detail-mobile d-f j-b f-w">
                    <div class="item d-f f-d wow fadeInLeft" v-for="item in newsList" @click="toNewsDetail(item)">
                        <div class="title d-f">
                            <div class="text">{{item.title}}</div>
                        </div>
                        <div class="time">{{item.createTime|filtersTime}}</div>
                    </div>
                </div>
                <div class="more d-f j-c">
                    <div class="btn" @click="toDynamics">查看更多</div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer-container d-f j-c">
            <div class="footer">
                <div class="d-f j-b">
                    <div class="left">
                        <div class="phone d-f a-c j-c">
                            <img src="./dist/images/index_footer_phone.png" alt=""> 025-871-83991
                        </div>
                        <p class="d-f a-c">销售热线：400-900-2881</p>
                        <p class="d-f a-c">售后客服：400-873-2988</p>
                        <p class="d-f a-c">邮箱：xiaoniu@jsxniu.com</p>
                        <p class="d-f a-c">南京市江宁区胜利路99号名家科技大厦A座9层</p>
                        <p class="d-f a-c">
                            <a href="https://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">©2021&nbsp;XNIU&nbsp;&nbsp;&nbsp;苏公网安备32011502011289号</a>&nbsp;&nbsp;&nbsp;<a href="https://beian.miit.gov.cn" target="_blank">苏ICP备2020065401号</a>&nbsp;&nbsp;&nbsp;江苏小牛电子科技有限公司
                        </p>
                    </div>
                    <div class="right d-f j-b">
                        <div class="wx d-f a-c j-c">
                            <img src="./dist/images/index_footer_wx.png" alt="">
                        </div>
                        <div class="wx-hover">
                            <img src="./img/temp/index_footer_wx_hover.png" alt="">
                        </div>
                        <div class="wb d-f a-c j-c" @click="toWb">
                            <img src="./dist/images/index_footer_wb.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="mark">
                    本网站中产品信息，包括但不限于产品介绍、功能参数、规格信息、配件信息或产品图片等，均属于对我司系列产品的通用信息介绍，并非我司承诺。通用信息介绍内容与阁下实际购买的产品情况可能有所不同</div>
            </div>
        </div>
        <!-- 手机端底部 -->
        <div class="footer-container-mobile">
            <div class="left d-f f-d a-c">
                <ul>
                    <li class="d-f j-b a-c" @click="toIndex">
                        <div class="text">首页</div>
                        <img src="./dist/images/index_footer_arrow_mobile.png" alt="">
                    </li>
                    <li class="d-f j-b a-c" @click="toProduct1">
                        <div class="text">产品中心</div>
                        <img src="./dist/images/index_footer_arrow_mobile.png" alt="">
                    </li>
                    <li class="d-f j-b a-c" @click="toCase">
                        <div class="text">案例</div>
                        <img src="./dist/images/index_footer_arrow_mobile.png" alt="">
                    </li>
                    <li class="d-f j-b a-c" @click="toServe">
                        <div class="text">服务</div>
                        <img src="./dist/images/index_footer_arrow_mobile.png" alt="">
                    </li>
                    <li class="d-f j-b a-c" @click="toAboutUs">
                        <div class="text">关于小牛</div>
                        <img src="./dist/images/index_footer_arrow_mobile.png" alt="">
                    </li>
                </ul>
                <div class="space">
                    <div class="phone d-f a-c j-c">
                        <img src="./dist/images/index_footer_phone.png" alt=""> 025-871-83991
                    </div>
                    <p class="d-f a-c">销售热线：400-900-2881</p>
                    <p class="d-f a-c">售后客服：400-873-2988</p>
                    <p class="d-f a-c">邮箱：xiaoniu@jsxniu.com</p>
                    <p class="d-f a-c">南京市江宁区胜利路99号名家科技大厦A座9层
                    </p>
                    <div class="wx-and-wb d-f j-b">
                        <div class="wx d-f f-d a-c" @click="showScan">
                            <img src="./dist/images/index_footer_wx_mobile.png" alt="">
                            <p>微信公众号</p>
                        </div>
                        <div class="wx-hover" v-if="canShow">
                            <img src="./img/temp/index_footer_wx_hover.png" alt="">
                        </div>
                        <div class="wb d-f f-d a-c" @click="toWb">
                            <img src="./dist/images/index_footer_wb_mobile.png" alt="">
                            <p>微博</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right d-f f-d a-c">
                <div class="record">
                    <a href="https://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">©2021&nbsp;&nbsp;XNIU&nbsp;&nbsp;苏公网安备32011502011289号</a><br>
                    <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备2020065401号</a>
                </div>
                <div class="mark">
                    本网站中产品信息，包括但不限于产品介绍、功能参数、规格信息、配件信息或产品图片等，均属于对我司系列产品的通用信息介绍，并非我司承诺。通用信息介绍内容与阁下实际购买的产品情况可能有所不同</div>
            </div>
        </div>
        <!-- 侧边固定 -->
        <div class="fixed-pc">
            <!-- <div class="contact"></div> -->
            <div class="wx"></div>
            <div class="wx-hover">
                <img src="./img/temp/index_fixed_wx_hover.png" alt="">
            </div>
            <div class="tel"></div>
            <div class="tel-hover">
                <img src="./img/temp/index_fixed_tel_hover.png" alt="">
            </div>
            <div class="up" id="to-top"></div>
        </div>
        <!-- 手机端侧边固定 -->
        <div class="fixed-mobile" id="to-top-mobile">
            <img src="./dist/images/index_fixed_up_mobile.png" alt="">
        </div>
        <!-- 手机端侧边展开 -->
        <div class="open-container-mobile d-f j-c" v-show="canOpen">
            <div class="open">
                <div class="top d-f j-b a-c">
                    <img src="./img/temp/index_top_logo_mobile.png" alt="">
                    <img src="./dist/images/index_top_close_mobile.png" @click="close">
                </div>
                <div class="item">
                    <div class="title d-f j-b a-c" @click="toIndex">
                        <div>首页</div>
                        <img src="./dist/images/index_content_arrow_mobile.png" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="title d-f j-b a-c">
                        <div>产品中心</div>
                        <img src="./dist/images/index_content_arrow_mobile.png" alt="">
                    </div>
                    <div class="content d-f a-c f-w">
                        <a href="./product.html?type=1">交互显示系列</a>
                        <p></p>
                        <a href="./product.html?type=2">软件类</a>
                        <p></p>
                        <a href="./product.html?type=3">配件类</a>
                        <p></p>
                        <a href="./solution.html">解决方案</a>
                        <a href="./advertising-machine.html">广告机</a>
                    </div>
                </div>
                <div class="item">
                    <div class="title d-f j-b a-c" @click="toCase">
                        <div>案例</div>
                        <img src="./dist/images/index_content_arrow_mobile.png" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="title d-f j-b a-c" @click="toServe">
                        <div>服务</div>
                        <img src="./dist/images/index_content_arrow_mobile.png" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="title d-f j-b a-c">
                        <div>关于小牛</div>
                        <img src="./dist/images/index_content_arrow_mobile.png" alt="">
                    </div>
                    <div class="content d-f f-w a-c">
                        <a href="./about-us.html">关于我们</a>
                        <p></p>
                        <a href="./dynamics.html">小牛动态</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="dist/js/wow.min.js"></script>
    <script type="text/javascript" src="dist/js/swiper.js"></script>
    <script>
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
    </script>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    bannerList: [], //pc端轮播图
                    bannerListToo: [], //手机端轮播图
                    newsList: [], //新闻列表
                    canShow: false, //手机端微信公众号的显示与隐藏
                    canOpen: false, //手机端侧边导航显示与隐藏
                    autoplay: false,
                    autoplayMobile: false,
                    pcVideoOpen: false,
                    mobileVideoOpen: false,
                }
            },
            filters: {
                //新闻内容过滤标签
                filtersText(text) { // 要判断一下,如果是空就返回空字符串,不然会报错
                    var reg = /<[^<>]+>/g; //1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
                    text = text.replace(reg, ''); //替换HTML标签
                    text = text.replace(/&nbsp;/ig, ''); //替换HTML空格
                    return text;
                },
                //新闻时间过滤标签
                filtersTime(val) {
                    var now = new Date(val);
                    var yy = now.getFullYear(); //年
                    var mm = now.getMonth() + 1; //月
                    var dd = now.getDate(); //日
                    var hh = now.getHours(); //时
                    var ii = now.getMinutes(); //分
                    var ss = now.getSeconds(); //秒
                    var clock = yy + "-";
                    if (mm < 10) clock += "0";
                    clock += mm + "-";
                    if (dd < 10) clock += "0";
                    clock += dd + " ";
                    if (hh < 10) clock += "0";
                    clock += hh + ":";
                    if (ii < 10) clock += '0';
                    clock += ii + ":";
                    if (ss < 10) clock += '0';
                    clock += ss;
                    return clock;
                }
            },
            methods: {
                //去首页
                toIndex() {
                    window.open("./index.html", "_self");
                },
                //去产品中心交互显示
                toProduct1() {
                    window.open("./product.html?type=1", "_self");
                },
                //去产品中心智慧软件类
                toProduct2() {
                    window.open("./product.html?type=2", "_self");
                },
                //去产品中心配件类
                toProduct3() {
                    window.open("./product.html?type=3", "_self");
                },
                //去智慧软件类的录播
                toProductRecording() {
                    window.open("./product.html?type=2&activeToo=1", "_self");
                },
                //去解决方案
                toSolution() {
                    window.open("./solution.html", "_self");
                },
                //去广告机
                toAdvertisingMachine() {
                    window.open("./advertising-machine.html", "_self");
                },
                //去案例
                toCase() {
                    window.open("./case.html", "_self");
                },
                //去服务
                toServe() {
                    window.open("./serve.html", "_self");
                },
                //去关于我们
                toAboutUs() {
                    window.open("./about-us.html", "_self");
                },
                //去小牛动态
                toDynamics() {
                    window.open("./dynamics.html", "_self");
                },
                //点击微博图标
                toWb() {
                    window.open("https://weibo.com/u/7573642595?is_hot=1", "_blank");
                },
                //点击微信小图标（手机）
                showScan() {
                    this.canShow = !this.canShow
                },
                //点击手机端头部展开
                open() {
                    this.canOpen = true
                },
                //点击手机端头部关闭
                close() {
                    this.canOpen = false
                },
                //点击pc端播放视频
                OpenVideoPc() {
                    this.pcVideoOpen = true
                    this.autoplay = true
                },
                //点击手机端播放视频
                OpenVideoMobile() {
                    this.mobileVideoOpen = true
                    this.autoplayMobile = true
                },
                //获取pc端轮播图
                getBannerListPc() {
                    $.ajax({
                        type: 'GET',
                        url: 'https://api.website.jsxniu.com/api/banner/query',
                        data: {
                            moduleType: 1,
                            platformValue: 1
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            this.bannerList = reponse.data.list[0].imageList

                            this.$nextTick(() => {
                                var mySwiper1 = new Swiper('.swiper-container-pc', {
                                    autoplay: {
                                        delay: 5000,
                                        disableOnInteraction: false,
                                    },
                                    loop: true, // 循环模式选项
                                    speed: 1000, // 循环模式选项
                                    // 如果需要分页器
                                    pagination: {
                                        el: '.swiper-pagination',
                                        type: 'custom',
                                        autoplayDisableOnInteraction: false,
                                        renderCustom: function(swiper, current,
                                            total) {
                                            var paginationHtml = " ";
                                            for (var i = 0; i < total; i++) {
                                                // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                                                if (i === (current - 1)) {
                                                    paginationHtml +=
                                                        '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                                                } else {
                                                    paginationHtml +=
                                                        '<span class="swiper-pagination-customs"></span>';
                                                }
                                            }
                                            return paginationHtml;
                                        },
                                    },
                                    // 如果需要前进后退按钮
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                })
                            })

                        },
                        error: function(xhr, type) {
                            // alert('加载出错!');
                            console.log(xhr, type);
                        }
                    });
                },
                //获取手机端轮播图
                getBannerListMobile() {
                    $.ajax({
                        type: 'GET',
                        url: 'https://api.website.jsxniu.com/api/banner/query',
                        data: {
                            moduleType: 1,
                            platformValue: 2
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            this.bannerListToo = reponse.data.list[0].imageList

                            this.$nextTick(() => {
                                var mySwiper2 = new Swiper('.swiper-container-mobile', {
                                    autoplay: {
                                        delay: 5000,
                                        disableOnInteraction: false,
                                    },
                                    loop: true, // 循环模式选项
                                    speed: 1000, // 循环模式选项
                                    // 如果需要分页器
                                    pagination: {
                                        el: '.swiper-pagination',
                                        bulletClass: 'my-bullet', //需设置.my-bullet样式
                                        bulletActiveClass: 'my-bullet-active',
                                    },
                                })
                            })

                        },
                        error: function(xhr, type) {
                            // alert('加载出错!');
                            console.log(xhr, type);
                        }
                    });
                },
                //获取新闻动态列表
                getNewsList() {
                    $.ajax({
                        type: 'GET',
                        url: 'https://api.website.jsxniu.com/api/news/query',
                        data: {
                            currentPage: 1,
                            count: 4,
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            if (reponse.code == 200) {
                                this.newsList = reponse.data.list
                            }
                        },
                        error: function(xhr, type) {
                            // alert('加载出错!');
                            console.log(xhr, type);
                        }
                    });
                },
                //去新闻详情
                toNewsDetail(item) {
                    window.open(`./news-detail.html?type=news&id=${item.id}`, "_self");
                },
            },
            created() {
                this.getBannerListPc()
                this.getBannerListMobile()
                this.getNewsList()
            },
        })
    </script>
</body>

</html>