<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="baidu-site-verification" content="codeva-b5QDGHtppg" />
    <meta name="keywords" content="首环,首环触控,排队机,排队取号机,排队叫号机.触摸屏,触摸查询一体机,广告机,自助服务终端，政务自助服务终端,LED显示屏,排队预约系统,好差评评价器,PDA手持终端,触控一体机,医疗检验单自助打印机,多媒体信息发布系统,自助填表机,自助取单机">
    <meta name="description" content="福州首环触控科技有限公司成立于1999年,专业研发、生产、销售排队机,排队取号机,排队叫号机.触摸屏,触摸查询一体机,
    广告机,政务自助服务终端,LED显示屏,排队预约系统,好差评评价器,PDA手持终端,触控一体机,医疗检验单自助打印机,多媒体信息发布系统,自助填表机,自助取单机。首环触控产品均获得国家3C认证,实用新型专利证,软件著作权证。">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>福州首环触控科技有限公司-首页</title>
    <link rel="stylesheet" href="./resource/swiper-bundle.min.css">
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script src="./resource/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./resource/vue.js"></script>
    <script src="./resource/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/public.js"></script>
    
    
</head>

<body>
    <!-- 移动端导航 -->
    <li class="nav-menu-mobile-sw">
        <label class="nav-menu-mobile-sw-btn" for="menu-toggle">
            更多
            <!-- <svg t="1689061139581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="28851">
                <path
                    d="M81.28 222.016h861.44c27.264 0 49.28-21.504 49.28-48s-22.016-48-49.28-48H81.28c-27.2 0-49.28 21.504-49.28 48s22.08 48 49.28 48zM942.72 462.016H81.28c-27.264 0-49.28 21.504-49.28 48s22.016 48 49.28 48h861.44c27.264 0 49.28-21.504 49.28-48s-22.144-48-49.28-48zM942.72 801.984H81.28c-27.2 0-49.28 21.504-49.28 48s22.08 48 49.28 48h861.44c27.264 0 49.28-21.504 49.28-48s-22.016-48-49.28-48z"
                    p-id="28852"></path>
            </svg> -->
        </label>
    </li>
    <input type="checkbox" id="menu-toggle" class="menu-checkbox">
    <label class="nav-menu-mobile-close-btn" for="menu-toggle"></label>
    <div class="nav-menu-mobile">
        <ul>
            <li>
                <svg t="1689061139581" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="28851">
                    <path
                        d="M81.28 222.016h861.44c27.264 0 49.28-21.504 49.28-48s-22.016-48-49.28-48H81.28c-27.2 0-49.28 21.504-49.28 48s22.08 48 49.28 48zM942.72 462.016H81.28c-27.264 0-49.28 21.504-49.28 48s22.016 48 49.28 48h861.44c27.264 0 49.28-21.504 49.28-48s-22.144-48-49.28-48zM942.72 801.984H81.28c-27.2 0-49.28 21.504-49.28 48s22.08 48 49.28 48h861.44c27.264 0 49.28-21.504 49.28-48s-22.016-48-49.28-48z"
                        p-id="28852"></path>
                </svg>
            </li>
            <li data-page="index" ><a href="index.html">网站首页</a> </li>
            <li data-page="introduction" ><a href="introduction.html">公司简介</a></li>
            <li data-page="produc-move" class="dropdown-mobile"  >产品中心
                
            </li>
            <!-- 产品中心详情 -->
            <ol class="dropdown-content-mobile" data-page="produc-moves" data-id="produc"   >
                 
                
                
            </ol>
            <li data-page="news">工程展示</li>
            <li data-page="maintain">售后服务</li>
            <li data-page="download-move" class="dropdown-mobile" >驱动下载</li>
            <ol class="dropdown-content-mobile" data-page="download-moves"  data-id="dropdown"  >
                 
                
                    
                
            </ol>
            <li data-page="contact">联系我们</li>
            <li data-page="custom">企业荣誉
                 
            </li>
            <ol class="dropdown-content-mobile" data-page="more-moves"   >
                 
                <li data-page="custom" >企业荣誉</li>
                    
                    <li data-page="login">登录</li>
                
            </ol>
        </ul>
    </div>



   

    <!-- 右侧悬浮导航条弹出对话框 -->
    <div class="dialog-shadow fade-in" onclick="closeDialog()">
        <div class="dialog-cancel">
            <svg t="1688956564121" class="icon rotate-in-2-cw" viewBox="0 0 1024 1024" version="1.1" fill="white"
                xmlns="http://www.w3.org/2000/svg" p-id="6098">
                <path
                    d="M512 21.333333C241.066667 21.333333 21.333333 241.066667 21.333333 512s219.733333 490.666667 490.666667 490.666667 490.666667-219.733333 490.666667-490.666667S782.933333 21.333333 512 21.333333z m0 917.333334C277.333333 938.666667 85.333333 746.666667 85.333333 512S277.333333 85.333333 512 85.333333s426.666667 192 426.666667 426.666667-192 426.666667-426.666667 426.666667z"
                    p-id="6099"></path>
                <path
                    d="M716.8 328.533333c-12.8-12.8-32-12.8-44.8 0l-147.2 147.2-147.2-147.2c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l147.2 147.2-147.2 147.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466667 8.533334s17.066667-2.133333 23.466666-8.533334l147.2-147.2 147.2 147.2c6.4 6.4 14.933333 8.533333 23.466667 8.533334s17.066667-2.133333 23.466667-8.533334c12.8-12.8 12.8-32 0-44.8l-147.2-147.2 147.2-147.2c6.4-10.666667 6.4-32-4.266667-44.8z"
                    p-id="6100"></path>
            </svg>
        </div>
    </div>
    <div class="dialog dialog-wx fade-in"></div>
    <div class="dialog dialog-sh fade-in"></div>

     <!-- 左侧悬浮导航条 -->
     <div class="fl-nav-left" style="display: none;">
        <div class="banner-text-box">
            <div class="container">
                <div class="button left blue">
                    <div style="transform: skew(-20deg);">产品</div>
                </div>
                
                <div class="button right">
                    <div style="transform: skew(-20deg);">驱动</div>
                </div>
            </div>
            <ul class="produc_left active"   >
                 

            </ul>
            <ul class="download_right" >
                 
                 
                

            </ul>

        </div>
     </div>
    <!-- 页面内容 -->
    <div class="box">

        <!-- 普通顶部导航 -->
        <div class="nav">
            <div class="SH-logo">
                <img class="logo-img" src="./img/logo2.png">
            </div>
            <div class="logo_1" style="width: 2px;height: 3rem;background-color: #2f80b7;margin-left: 30px;margin-right: 10px;" >
                 
            </div >
            <div class="SH-logo-txt">
                成立于1999年
            </div >
             
                <ul class="nav-list">
                   
                    <li onclick="showDialog('dialog-wx')">
                        <svg t="1688697650378" class="fl-nav-icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3293">
                            <path
                                d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
                                fill="#5D5D5D" p-id="3294"></path>
                        </svg>
                        <p>添加微信</p>
                    </li>
                    
                    <li onclick="showDialog('dialog-sh')">
                        <svg t="1688697742790" class="fl-nav-icon" viewBox="0 0 1076 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5291">
                            <path
                                d="M931.328 470.016c66.048-67.072 86.016-166.912 50.176-253.952l-122.88 122.88c-35.84 33.792-91.648 31.744-125.44-4.096-32.256-34.304-32.256-87.04 0-121.344l122.88-122.88c-87.04-35.328-186.88-15.872-254.464 49.664-66.56 66.56-86.016 166.912-49.664 253.44L466.944 478.72l-215.04-215.04 14.848-30.72L150.528 153.6 77.312 227.328l76.8 114.688 34.816-17.408 216.576 215.04-251.392 251.392c-15.872 15.872-16.384 41.472-0.512 57.344l0.512 0.512 76.8 77.312c15.872 15.872 41.984 15.872 57.856 0l251.392-250.88 35.84 35.84-9.728 9.728c-13.824 9.728-17.408 28.672-7.68 43.008 1.024 1.536 2.048 3.072 3.584 4.096l170.496 169.984c14.336 14.848 37.888 16.384 54.272 3.072l79.36-79.36c14.336-16.384 14.336-40.448 0-56.32l-170.496-169.984c-13.824-14.336-34.816-8.192-49.664 6.656l-7.168 7.168-35.84-35.328 89.088-89.6c83.456 28.672 176.128 7.68 239.104-54.272z"
                                p-id="5292" fill="#5D5D5D"></path>
                        </svg>
                        <p>售后支持</p>
                    </li>
                     
                </ul>
          
            <!-- <div class="SH-logo">
                <img class="logo-img" src="./img/logo1.png">
            </div> -->
            
        </div>
        <div class="nav-down">
            <ul class="nav-menu">
                <li data-page="index" class="click_nav_li"    ><p  ><a href="index.html">网站首页</a></p></li>
                <li data-page="introduction" ><p ><a href="introduction.html">公司简介</a></p></li>
                <li data-page="produc" class="dropdown"><p ><a href="produc.html">产品中心</a> </p> 
                  <!--   <ul class="dropdown-content" data-id="produc">
                      
                        
                    </ul> -->
                </li>
                <li data-page="news"><p><a href="news.html"> 工程展示</a></p></li>
                <li data-page="maintain"><p><a href="maintain.html"> 售后服务</a></p></li>

                <li data-page="download" class="dropdown"><p><a href="download.html"> 驱动下载</a></p>
                    <ul class="dropdown-content " data-id="dropdown">
                        
                    </ul>
                </li>
                <li data-page="contact"><p><a href="contact.html"> 联系我们</a></p></li>
                <li data-page="custom"><p><a href="custom.html"> 企业荣誉</a></p>
                </li>
            </ul>
        </div>
         

        <!-- 主图 -->
        <div id="app" style="overflow: auto;width: 100%;height: 100%;background-color: rgb(255, 255, 255);" >
            
            
            <div  class="main-content" >
               
                <p style="font-size: 1.2rem;color: #2f80b7;">科技改变生活</p>
                <p style="font-size: 1.2rem;margin-bottom: 20px;color:#2f80b7;">Technology is changing the lives...</p>
                <div class="product-grid">
                    <div
                    @click="ToProduc(item.product)"
                        class="column"
                        v-for="(item, index) in Datas"
                        :key="item.id"
                        
                    >
                        <img :src="imgUrl + item.img" :alt="'产品' + (index * 2 + 1)" />
                        <div>{{item.title.name}}</div>
                    </div>
                </div>
                
                
            </div>
           

        </div>
         

        <!-- 底部 -->
        <div class="foot">
            <p>copyright ©2012  福州首环触控科技有限公司版权所有 <a  href="http://beian.miit.gov.cn/#/Integrated/index">闽ICP备08002426号</a></p>
            
        </div>
        <script>

new Vue({
    el: '#app',  
    data: {

        data1:[],
        data2:[],
        data3:[],
        Datas:[],
        imgUrl:"",

         
         
    },
    mounted() {
         this.getIP()
         this.getData()

    },
    methods: {
        getIP(){
                this.imgUrl = baseUrl + "/static/"
        },
        ToProduc(url){
            window.open(url, '_self');
        },
        getData(){
                postFDataRequest("/api/carousel/list").then(res=>{
                  console.log(res)
                      if ( res && res.code && res.code == 0) {
                         
                        res.data.forEach(item => {
                            if (typeof item.title === 'string') {
                                try {
                                    item.title = JSON.parse(item.title);
                                     
                                } catch (e) {
                                    console.error("Error parsing title JSON:", e);
                                }
                            }
                            if (typeof item.img === 'string') {
                                try {
                                    item.img = JSON.parse(item.img);
                                } catch (e) {
                                    console.error("Error parsing img JSON:", e);
                                }
                            }
                        });
                                   
                                  this.Datas = res.data.sort((a, b) => {
                                                    return b.title.grade - a.title.grade;
                                                });
                                     /*  this.Datas = res.data
                                      let i = this.Datas.length / 3
                                      console.log("i="+i)
                                      this.data1 = this.Datas.slice(0,i)
                                      this.data2 = this.Datas.slice(i,i+i)
                                      this.data3 = this.Datas.slice(i*2,i*3)
                                      console.log(this.data1) */
                                      console.log("****")
                                        
                      }else if(res && res.data.code && res.data.code == 3){
                                  Public_Login()
                                  console.error( "登录时间超时","错误");
                      } else {
                        console.error( "获取失败","错误");
                                        
                      }
                }).catch(error => {
                    console.error("失败","错误");
                            console.error('失败:', error);
                });
              },
    }
})



             
           
        </script>

    </div>
    <link rel="stylesheet" href="./css/fitter.css">
</body>

</html>