CINXE.COM

-<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="zh-CN" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=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 name="keywords" content="正泰在持续推进落实“产业化、科技化、国际化”的战略部署中，形成了“绿色能源、智能电气、智慧低碳”三大产业集群和“正泰国际、科创孵化”两大平台。" /> <meta name="description" content="绿色能源、智能电气、智慧低碳、正泰国际、科创孵化" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>构筑“3+2”产业发展新动能</title> <link href="favicon.ico" rel="shortcut icon"> <link href="css/hamburgers.css" rel="stylesheet" type="text/css" /> <link href="css/boc_reset.css" rel="stylesheet" type="text/css" /> <link href="js/swiper/swiper.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.transit.js"></script> <script type="text/javascript" src="js/html5.js"></script> <script type="text/javascript" src="js/new_bocfe.js"></script> <script type="text/javascript" src="js/swiper/swiper.min.js"></script> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript" src="js/axios.min.js"></script> <script type="text/javascript" src="./inc/header.js"></script> <script type="text/javascript" src="./inc/comm.js"></script> <style> .technology-list3 .contentbox2 .tab-container:before{ content: ""; position: absolute; width: 100%; height: 2px; background: #e2e2e2; left: 0; top: 2px; z-index: 1; } .swiper-slide, .swiper-wrapper { height: auto; position: relative; transform-style: preserve-3d; width: 100%; } </style> </head> <body class="cssanimations"> <div id="header"></div> <div id="app" v-cloak> <div class="nbanner"> <div class="bg img-cover pc-block-768 anim_emt scale_down a-del1" :style="{backgroundImage:'url('+banner.photo+')'}"></div> <div class="bg img-cover m-block-768 anim_emt scale_down a-del1" :style="{backgroundImage:'url('+banner.mphoto+')'}"></div> <div class="tit2 tran-middle col-fff tit-50 text-bold line-2 anim_emt fade_in a-del4">{{banner.title}}</div> </div> <div class="n-technology"> <div class="technology-list3 por ovh position"> <div class="contentbox"> <div class="title col-000 tit-36 line-1 text-bold por anim_emt b_to_t a-del1">{{itemlist3.title}}</div> <div class="p tit-16 col-fff anim_emt b_to_t a-del2" v-html="itemlist3.subtitle"> </div> <div class="img anim_emt b_to_t a-del3"> <img :src="itemlist3.photo" alt=""> </div> <div class="ul f-no-b-start"> <div class="li f-no-b-center anim_emt b_to_t" :class="'a-del'+(i+1)" v-for="(v,i) in itemlist4" :key="i" v-if="i === 0"> <div class="lileft f-no"> <div class="icon f-no-s-center"> <img :src="v.photo" alt=""> </div> <div class="num tit-50 f-no-end-center enfon text-bold"><span class="counter">{{v.digit}}</span><span class="numtip" v-html="v.unit"></span></div> </div> <div class="sp tit-16 line-2">{{v.title}}</div> </div> <div class="li f-no-b-center anim_emt b_to_t" :class="'a-del'+(i+1)" v-for="(v,i) in itemlist4" :key="i"> <div class="lileft f-no"> <div class="icon f-no-s-center"> <img :src="v.photo" alt=""> </div> <div class="num tit-50 f-no-end-center enfon text-bold"><span class="counter">{{v.digit}}</span><span class="numtip" v-html="v.unit"></span></div> </div> <div class="sp tit-16 line-2">{{v.title}}</div> </div> </div> </div> <div class="contentbox2"> <div class="warpbox por ovh anim_emt b_to_t a-del1"> <div class="imgswiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(v,i) in itemlist5" :key="i"> <img :src="v.photo" alt=""> <div class="tit3 tit-36 text-bold line-4 col-fff" v-html=v.title></div> </div> </div> </div> </div> <div class="warptab por ovh anim_emt b_to_t a-del2"> <div class="tab-container por ovh"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(v,i) in itemlist5" :key="i"> <div class="item tit-16 col-999 line-2" v-html=v.title></div> </div> </div> </div> </div> </div> </div> <div class="technology-list5 por ovh position"> <div class="bg img-cover" style="background-image:url(img/interbg.jpg);"></div> <div class="title col-000 tit-36 line-1 text-bold por anim_emt b_to_t a-del1" v-html="itemlist6.title"></div> <div class="contentbox"> <div class="warpbox f-no-b-start"> <div class="text tit-15 anim_emt b_to_t a-del2" v-html="itemlist6.content"> </div> <div class="img anim_emt b_to_t a-del3"> <img :src="itemlist6.photo" alt=""> </div> </div> <div class="ul f-no"> <div class="li anim_emt r_to_l" :class="'a-del'+(i+1)" v-for="(v,i) in itemlist7" :key="i"> <img :src="v.photo" alt=""> </div> </div> </div> </div> </div> </div> <div class="warpfooter" include="inc/footer.html"></div> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/countup/jquery.waypoints.min.js"></script> <script type="text/javascript" src="js/countup/jquery.countup.js"></script> <script type="text/javascript">var technology =new Vue({el:'#app',data:{banner:{},itemlist3:{},itemlist4:{},itemlist5:{},itemlist6:{},itemlist7:{} },mounted() {setTimeout(() =>{},200);const url =baseURL + 'business_international';axios.get(url).then(res =>{console.log(res.data);var alldata =res.data;this.banner =res.data.banner this.banner.photo =this.banner.photo this.banner.mobilePhoto =this.banner.mphoto this.banner.title =this.banner.title this.itemlist3.subtitle =alldata.item.subtitle;this.itemlist3.photo =alldata.item.photo;this.itemlist3.title =alldata.item.title;this.itemlist4 =alldata.item1;this.itemlist5 =alldata.item2;this.itemlist6.content =alldata.item3.content;this.itemlist6.photo =alldata.item3.photo;this.itemlist6.title =alldata.item3.title;this.itemlist7 =alldata.item3_photo;this.$nextTick(function () {var imgswiper =new Swiper('.technology-list3 .imgswiper',{slidesPerView:1.4,spaceBetween:60,speed:600,paginationClickable :true,preventClicks :false,centeredSlides :true,slidesPerGroup :1,onlyExternal :true,breakpoints:{767:{slidesPerView:1.2,spaceBetween:10,} } }) setTimeout(function(){var tabswiper =new Swiper('.technology-list3 .tab-container',{slidesPerView:"auto",spaceBetween:0,speed:600,paginationClickable :true,}) if ($(window).width()>767) {$(".technology-list3 .contentbox2 .tab-container .swiper-slide").on("click",function(){tabswiper.slideTo($(this).index()-2,1000,false);$(this).addClass("cur").siblings().removeClass("cur");imgswiper.slideTo($(this).index(),1000,false);}) }else{$(".technology-list3 .contentbox2 .tab-container .swiper-slide").on("click",function(){tabswiper.slideTo($(this).index(),1000,false);$(this).addClass("cur").siblings().removeClass("cur");imgswiper.slideTo($(this).index(),1000,false);}) } $(".technology-list3 .contentbox2 .tab-container .swiper-slide").eq(1).click();},500) var _id =getUrlParam('md');if(_id){setTimeout(function(){$('html,body').stop().animate({scrollTop:$('.position').eq(_id).offset().top},500) },1000) } scrollAni();setTimeout(function (){$('.counter').countUp({delay:5,time:1000 });},1000) }) }) },methods:{},watch:{},}) </script> </body> </html>