<!--
 * @Author: your name
 * @Date: 2021-04-25 17:12:11
 * @LastEditTime: 2021-08-12 20:11:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \study\xiaoniu\xiaoniu.html
-->
<!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" />
</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/logo.png" alt="上海深竹" width="180px">
                <ul class="nav d-f">
                    <li class="active-nav" @click="toIndex">首页</li>
                    <li>产品中心
                        <div class="li-hover d-f f-d a-c">
                            <div class="circle"></div>
                            <p v-for="item in productList" @click="toProduct(item.id)">{{item.name}}</p>
                        </div>
                    </li>
                    <li>技术中心
                        <div class="li-hover-too d-f f-d a-c">
                            <div class="circle"></div>
                            <p @click="toSupport">技术文章</p>
                            <p @click="toSolution">解决方案</p>
                        </div>
                    </li>
                    <li @click="toNews">新闻动态</li>
                    <li>关于深竹
                        <div class="li-hover-three d-f f-d a-c">
                            <div class="circle"></div>
                            <a href="./about-us.html#introduction">深竹简介</a>
                            <a href="./about-us.html#culture">深竹文化</a>
                            <a href="./about-us.html#honor">资质荣誉</a>
                            <a href="./about-us.html#contact">联系方式</a>
                            <a href="./about-us.html#join">加入我们</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 头部固定 -->
        <div class="top-container-too">
            <div class="top d-f j-b a-c">
                <img src="./img/logo2.png" alt="上海深竹" width="180px">
                <ul class="nav d-f">
                    <li class="active-nav" @click="toIndex">首页</li>
                    <li>产品中心
                        <div class="li-hover d-f f-d a-c">
                            <div class="circle"></div>
                            <p v-for="item in productList" @click="toProduct(item.id)">{{item.name}}</p>
                        </div>
                    </li>
                    <li>技术中心
                        <div class="li-hover-too d-f f-d a-c">
                            <div class="circle"></div>
                            <p @click="toSupport">技术文章</p>
                            <p @click="toSolution">解决方案</p>
                        </div>
                    </li>
                    <li @click="toNews">新闻动态</li>
                    <li>关于深竹
                        <div class="li-hover-three d-f f-d a-c">
                            <div class="circle"></div>
                            <a href="./about-us.html#introduction">深竹简介</a>
                            <a href="./about-us.html#culture">深竹文化</a>
                            <a href="./about-us.html#honor">资质荣誉</a>
                            <a href="./about-us.html#contact">联系方式</a>
                            <a href="./about-us.html#join">加入我们</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="swiper-container" id="swiper-container">
            <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="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="d-f">
                    <div class="product-item d-f wow fadeInUp">
                        <div class="item" @click="toProduct(item.id)" v-for="(item,index) in productFourList">
                            <div class="dust">
                                <div class="num">0{{index+1}}</div>
                                <div class="line"></div>
                                <h5>0{{index+1}}</h5>
                                <h3>{{item.name}}</h3>
                                <h4>{{item.englishName}}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 解决方案 -->
        <div class="plan-container d-f j-c">
            <div class="plan">
                <div class="title-chinese d-f j-c wow fadeInDown">解决方案</div>
                <div class="title-english d-f j-c wow fadeInDown">SOLUTION</div>
                <div class="swiper-container-plan" id="swiper-container-plan">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in solutionList" @click="toSolutionDetail(item.id)">
                            <img :src="item.images" />
                            <div class="dust">
                                <h3>{{item.name}}</h3>
                                <h4>{{item.englishName}}</h4>
                                <p></p>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-button-prev-plan"></div>
                    <div class="swiper-button-next-plan"></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="video-dust" v-if="!videoOpen">
                        <img src="./img/temp/index_about_introduction_logo.png" class="logo">
                        <p>专业，创造奇迹！服务，体现价值!</p>
                        <img src="./img/temp/index_about_open.png" class="open" @click="openVideo">
                    </div>
                    <video width="1200" height="675" controls autoplay="autoplay" class="video" v-if="videoOpen"
                        style="object-fit: fill">
                        <source src="./video/video.mp4" type="video/mp4">
                        您的浏览器不支持Video标签。
                    </video>
                </div> -->
                <div class="detail d-f j-b f-w">
                    <img src="http://snyto.oss-cn-beijing.aliyuncs.com/website/building.png" class="wow fadeInLeft building">
                    <div class="wow fadeInRight">
                        <h6>上海深竹化工科技有限公司是国家高新技术企业，专业从事涂料助剂的研究、开发、生产及经营，公司获得当地政府的“杰出贡献奖”，获批“科技小巨人”企业称号，荣获高新技术成果转化项目证书，同时通过了ISO9001和14001认证，是国内主流的助剂供应商，产品远销海内外。
                        </h6>
                        <h6>
                            上海深竹化工科技有限公司成立于2007年，于2011年剥离表面处理业务后，开始从事涂料助剂行业，2013年底完成全套助剂的开发。公司主要销售及技术人员均有多年跨国公司工作背景，有丰富的助剂开发和涂料应用经验。
                        </h6>
                        <h6>
                            公司生产的SNYTO助剂包括分散剂、流平剂、消泡剂、防沉剂、特用助剂等，广泛应用于涂料、油墨、复合材料、化妆品、塑料等行业。我们同时销售水性工业漆用树脂，配套攸彩水性工业漆色浆，能提供全面的水性工业涂料解决方案。目前已达到涂料助剂年产销近6000吨、水性工业漆树脂年销量10000吨，年产值数亿元。以深竹化工对原料技术和涂料应用的专业了解，我们能为中国涂料工业提供完整的助剂解决方案，能为广大用户提供高性价比的水性树脂，更能为客户提供详尽的技术服务。
                        </h6>
                        <h6>
                            公司与多所知名大学科研人员进行合作，有多项发明专利。我们秉承“专业，创造奇迹！服务，体现价值”的宗旨，不断完善自已，以勇于进取和真诚互信与您携手共创美好的明天！
                        </h6>
                        <div class="more d-f a-c" @click="toAboutUs">
                            了解更多
                            <img src="./dist/images/index_about_arrow.png">
                        </div>
                    </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 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="more d-f j-c">
                    <div class="btn" @click="toNews">查看更多</div>
                </div>
            </div>
        </div>
        <!-- 合作伙伴 -->
        <div class="partner-container d-f j-c">
            <div class="partner">
                <div class="title-chinese d-f j-c wow fadeInDown">合作伙伴</div>
                <div class="title-english d-f j-c wow fadeInDown">COOPERATIVE PARTNER</div>
                <div class="swiper-container-partner" id="swiper-container-partner">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/temp/index_partner_1.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/temp/index_partner_3.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/temp/index_partner_4.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/temp/index_partner_5.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/temp/index_partner_2.png" />
                        </div>
                    </div>

                    <div class="swiper-button-prev-partner"></div>
                    <div class="swiper-button-next-partner"></div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer-container d-f j-c">
            <div class="footer">
                <div class=" main d-f j-b">
                    <div class="left">
                        <img src="./img/logo.png" width="180px" class="logo">
                        <p class="d-f a-c">电话：021-54331909</p>
                        <p class="d-f a-c">传真：021-54883473</p>
                        <p class="d-f a-c">邮箱：snyto@snyto</p>
                        <p class="d-f a-c">地址：上海市松江区车墩镇泖亭路188弄40号102</p>
                    </div>
                    <ul class="d-f j-b">
                        <li>
                            <div class="title" @click="toIndex">首页</div>
                        </li>
                        <li>
                            <div class="title">产品中心</div>
                            <a v-for="item in productList" @click="toProduct(item.id)">{{item.name}}</a>
                        </li>
                        <li>
                            <div class="title">技术中心</div>
                            <a @click="toSupport">技术文章</a>
                            <a @click="toSolution">解决方案</a>
                        </li>
                        <li>
                            <div class="title" @click="toNews">新闻动态</div>
                        </li>
                        <li>
                            <div class="title">关于深竹</div>
                            <a href="./about-us.html#introduction">深竹简介</a>
                            <a href="./about-us.html#culture">深竹文化</a>
                            <a href="./about-us.html#honor">资质荣誉</a>
                            <a href="./about-us.html#contact">联系方式</a>
                            <a href="./about-us.html#join">加入我们</a>
                        </li>
                        <li>
                            <div class="title">关注</div>
                            <div class="concern d-f">
                                <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="douyin d-f a-c j-c">
                                    <img src="./dist/images/index_footer_douyin.png" alt="">
                                </div>
                                <div class="douyin-hover">
                                    <img src="./img/temp/index_footer_douyin_hover.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="icp d-f a-c j-c">
                    Copyright © 1998-2023 Snyto. All Rights Reserved &nbsp;
                    <a href="http://beian.miit.gov.cn/" target="blank">沪ICP备20019009号-1</a> &nbsp;|&nbsp;互联网信息服务经营许可证编号: 沪(金)应急管危经许[2023]200591
                </div>
            </div>
        </div>
        <!-- 侧边固定 -->
        <div class="fixed-pc">
            <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>

    <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/wow.min.js"></script>
    <script type="text/javascript" src="dist/js/swiper.js"></script>
    <script type="text/javascript" src="dist/js/to-top.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: [
                        "http://snyto.oss-cn-beijing.aliyuncs.com/test/1642575898000_%E9%A6%96%E9%A1%B51-01.jpg",
                        "http://snyto.oss-cn-beijing.aliyuncs.com/test/1642575916000_%E6%9C%AA%E6%A0%87%E9%A2%98-1-01.jpg"
                    ], //轮播图
                    newsList: [], //新闻列表
                    autoplay: false,
                    videoOpen: false,
                    baseUrl: "http://website.snyto.com/api",
                    productList: [], //产品列表
                    productFourList: [], //产品列表前四个
                    solutionList: [] //解决方案列表
                }
            },
            filters: {
                //新闻内容过滤标签
                filtersText(text) { // 要判断一下,如果是空就返回空字符串,不然会报错
                    if (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");
                },
                //去产品中心
                toProduct(id) {
                    window.open("./product.html?id=" + id, "_self");
                },
                //去新闻动态
                toNews() {
                    window.open("./news.html", "_self");
                },
                //去技术文章
                toSupport() {
                    window.open("./support.html", "_self");
                },
                //去关于我们
                toAboutUs() {
                    window.open("./about-us.html", "_self");
                },
                //去解决方案
                toSolution() {
                    window.open("./solution.html", "_self");
                },
                //点击播放视频
                openVideo() {
                    this.videoOpen = true
                    this.autoplay = true
                },
                //获取轮播图
                getBannerList() {
                    $.ajax({
                        type: 'GET',
                        url: this.baseUrl + '/banner/query',
                        data: {
                            moduleType: 1,
                            platformValue: 1
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            // console.log(reponse);
                            this.bannerList = reponse.data.list[0].imageList

                            this.$nextTick(() => {
                                var mySwiper1 = new Swiper('#swiper-container', {
                                    autoplay: {
                                        delay: 5000,
                                        disableOnInteraction: false,
                                    },
                                    loop: true, // 循环模式选项
                                    speed: 1000, // 循环模式选项
                                    observer: true, //修改swiper自己或子元素时，自动初始化swiper
                                    observeParents: true, //修改swiper的父元素时，自动初始化swiper
                                    // 如果需要分页器
                                    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);
                        }
                    });
                },
                //获取新闻动态列表
                getNewsList() {
                    $.ajax({
                        type: 'GET',
                        url: this.baseUrl + '/news/queryByPage',
                        data: {
                            currentPage: 1,
                            pageSize: 4,
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            // console.log(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");
                },
                //产品列表
                getProductList() {
                    $.ajax({
                        type: 'GET',
                        url: this.baseUrl + '/additives/query',
                        dataType: 'json',
                        success: (reponse) => {
                            if (reponse.success) {
                                this.productList = reponse.data.list
                                this.productFourList = this.productList.slice(0, 4)
                            }
                        },
                        error: function(xhr, type) {
                            alert('加载出错!');
                        }
                    });
                },
                //解决方案列表
                getSolutionList() {
                    $.ajax({
                        type: 'GET',
                        url: this.baseUrl + '/solution/queryByPage',
                        dataType: 'json',
                        success: (reponse) => {
                            this.solutionList = reponse.data.list

                            this.$nextTick(() => {
                                var swiper2 = new Swiper("#swiper-container-plan", {
                                    direction: "horizontal",
                                    autoplay: {
                                        delay: 5000,
                                        disableOnInteraction: false,
                                    },
                                    loop: true, // 循环模式选项
                                    speed: 1000, // 循环模式选项
                                    initialSlide: 1,
                                    slidesPerView: 4,
                                    spaceBetween: 20,
                                    // 如果需要前进后退按钮
                                    navigation: {
                                        nextEl: '.swiper-button-next-plan',
                                        prevEl: '.swiper-button-prev-plan',
                                    },
                                });
                            })

                        },
                        error: function(xhr, type) {
                            // alert('加载出错!');
                            console.log(xhr, type);
                        }
                    });
                },
                //去解决方案详情
                toSolutionDetail(id) {
                    window.open(`./solution-detail.html?id=${id}`, "_self");
                },
            },
            created() {
                this.getProductList()
                this.getBannerList()
                this.getNewsList()
                this.getSolutionList()
            },
        })
    </script>

    <script>
        var mySwiper1 = new Swiper('#swiper-container', {
            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',
            },
        })
        var swiper3 = new Swiper("#swiper-container-partner", {
            direction: "horizontal",
            autoplay: false,
            // loop: true, // 循环模式选项
            speed: 1000, // 循环模式选项
            // initialSlide: 1,
            slidesPerView: 4,
            spaceBetween: 45,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next-partner',
                prevEl: '.swiper-button-prev-partner',
            },
        });
    </script>
</body>

</html>