972 lines
35 KiB
PHTML
Executable File
972 lines
35 KiB
PHTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>ORICO-USB Storage Adapters|Chargers|Hubs|Cable|Electronics</title>
|
||
<meta name="Keywords" content="ORICO,Computer Peripheral, HUB, Electronics，Mobile Storage，Car Charger " />
|
||
<meta name="Description" content="The official website of ORICO has mature computer / digital peripheral accessory products. It provides online purchase of USB patch panel, hard disk box, USB 3.0 hub, USB charger, data line, car charger and other digital 3C products, so that you can easily enjoy the fun of the digital era of science and technology! Customer service hotline: 400-6696-298" />
|
||
{include file="include/head" /}
|
||
<script type="text/javascript">
|
||
var navID = "1";
|
||
</script>
|
||
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/web/scripts/bxslider/jquery.bxslider.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/weben/css/swiper-bundle.min.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/weben/css/modal.min.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/weben/css/demo.css">
|
||
|
||
<script type="text/javascript" src="__PUBLIC__/weben/scripts/swiper-bundle.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/web/scripts/bxslider/jquery.bxslider.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/weben/scripts/booNavigation.js"></script>
|
||
<!--<script type="text/javascript" src="__PUBLIC__/weben/scripts/modal.min.js"></script>-->
|
||
|
||
</head>
|
||
<body οnlοad="openwin()">
|
||
<!--top-->
|
||
<header class="header-PC header-Index">
|
||
<div id="header">
|
||
|
||
{include file="include/tophome-header2023" /}
|
||
</div>
|
||
</header>
|
||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
...
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--{include file="include/top-header-mobile" /}-->
|
||
<!--top End-->
|
||
{include file="include/banner1" /}
|
||
<?php if ($bigbanners): ?>
|
||
<!-- phone s-->
|
||
<div class="swiper-container deimg">
|
||
<div class="swiper-wrapper">
|
||
<?php foreach ($bigbanners as $k => $banner): ?>
|
||
<div class="swiper-slide"><a href="<?php echo $banner['url']; ?>"><img src="<?php echo getImage($banner['picture']); ?>"></a></div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<!-- Add Pagination -->
|
||
<div class="swiper-pagination bandot"></div>
|
||
</div>
|
||
<script>
|
||
var swiper = new Swiper('.deimg', {
|
||
loop: true,
|
||
autoplay: true,
|
||
pagination: {
|
||
el: '.bandot',
|
||
},
|
||
});
|
||
</script>
|
||
<!-- phone e -->
|
||
<?php endif; ?>
|
||
<!-- 品类探索 s -->
|
||
<?php if ($productCategory): ?>
|
||
<div class="lj_index_img_01">
|
||
<div class="lj_its_img">
|
||
<ul>
|
||
<?php foreach ($productCategory as $k => $pc): if ($k > 8) break; ?>
|
||
<li>
|
||
<div class="lj-port-1 effect-1">
|
||
<div class="image-box"> <a href="__ORICOROOT__<?php echo url_rewrite('product', ['id' => $pc['id']]); ?>"><img src="<?php echo $pc['image']; ?>" >
|
||
<div class="groups_a"><?php echo $pc['name']; ?></div>
|
||
</a></div>
|
||
<div class="text-desc"> <a href="__ORICOROOT__<?php echo url_rewrite('product', ['id' => $pc['id']]); ?>"> <img src="<?php echo getImage($pc['picture']); ?>" alt=""/> </a></div>
|
||
</div>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
<div style="clear:both"></div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var pl_length = $(".lj_its_img li").length
|
||
var pl_slier_width = $(".lj_its_img").width();
|
||
//var pl_li_width = pl_slier_width * 0.1429;
|
||
if(pl_slier_width>960){
|
||
var pl_li_width = pl_slier_width * 0.1111;
|
||
}else if(pl_slier_width<640){
|
||
var pl_li_width = pl_slier_width * 0.3333;
|
||
}else{
|
||
var pl_li_width = pl_slier_width * 0.25;
|
||
}
|
||
if((pl_li_width * pl_length)>pl_slier_width){
|
||
$(document).ready(function(){
|
||
$('.lj_index_img_01 ul').bxSlider({
|
||
slideWidth: pl_li_width,
|
||
minSlides: 1,
|
||
maxSlides: 8,
|
||
moveSlides: 1,
|
||
slideMargin: 0,
|
||
auto:true,
|
||
controls:true,
|
||
pager:false,
|
||
infiniteLoop:false
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
<?php endif; ?>
|
||
|
||
<!--产品分类信息-->
|
||
<div class="Container backwhite">
|
||
<div class="swt-Container swt1-Container">
|
||
<div class="da1">
|
||
<?php
|
||
$categoryList = getBannerList(71, 5);
|
||
if ($categoryList):
|
||
?>
|
||
<?php foreach ($categoryList as $k => $category): ?>
|
||
<div class="col swiper-slide"><a href="<?php echo $category['url']; ?>" target="_blank"><img src="<?php echo getImage($category['picture']); ?>"/><?php echo $category['name']; ?></a></div>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--特色专题及公司实力-->
|
||
<div class="swt-Container">
|
||
<div class="home_new">
|
||
<?php
|
||
$collectionList = getBannerList(72, 3);
|
||
if ($collectionList):
|
||
?>
|
||
<?php foreach ($collectionList as $kc => $collection): ?>
|
||
|
||
<div class="workshop_all f-black">
|
||
<?php
|
||
if($kc%2 == 0):
|
||
?>
|
||
<div class="content">
|
||
<div class="content_text">
|
||
<a href="<?php echo $collection['url']; ?>" target="_blank">
|
||
<div class="title"><p><?php echo $collection['name']; ?></p></div>
|
||
<div class="subtitle">View all
|
||
<div class="tpicture">
|
||
</div>
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="content1">
|
||
<div class="element-backimg" >
|
||
<a href="<?php echo $collection['url']; ?>"><img src="<?php echo getImage($collection['picture']); ?>" /> </a>
|
||
</div>
|
||
|
||
</div>
|
||
<?php
|
||
else:
|
||
?>
|
||
<div class="content1 ">
|
||
<div class="element-backimg" >
|
||
<a href="<?php echo $collection['url']; ?>"><img src="<?php echo getImage($collection['picture']); ?>" /> </a>
|
||
</div>
|
||
</div>
|
||
<div class="content12">
|
||
<div class="content_text">
|
||
<a href="<?php echo $collection['url']; ?>" target="_blank">
|
||
<div class="title"><p><?php echo $collection['name']; ?></p></div>
|
||
<div class="subtitle">View all
|
||
<div class="tpicture">
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品列表 s -->
|
||
<?php
|
||
if (!empty($recomment_items)):
|
||
?>
|
||
<div class="swt-Container swiper-box">
|
||
<p class="biaoti">Featured Products</p>
|
||
<div class="swiper mySwiper0" id="swiper1">
|
||
<div class="swiper-wrapper">
|
||
<?php foreach ($recomment_items as $kr => $item): ?>
|
||
<div class="swiper-slide picture1">
|
||
<div class="picture1-div"> <a href="__ORICOROOT__<?php echo url_rewrite('productdetail', ['id' => $item['id']]); ?>"><img title="<?php echo $item['name']; ?>" src="<?php echo getImage($item['list_bk_img']); ?>"></a></div>
|
||
<div class="title"><p><?php echo $item['name']; ?></p></div>
|
||
<div class="subtitle"><?php echo $item['shortname']; ?></div>
|
||
<a class="more" href="__ORICOROOT__<?php echo url_rewrite('productdetail', ['id' => $item['id']]); ?>">Learn More ></a>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
|
||
</div>
|
||
<div class="swiperasd">
|
||
<div class="swiper-container1">
|
||
<div class="slideshow-pag swiper-pagination"></div>
|
||
</div>
|
||
<div class="swiper-container swi1">
|
||
<img class="slideshow-btn swiper-button-next" src="__PUBLIC__/weben/images/indeximg/rightcheck.png">
|
||
<img class="slideshow-btn swiper-button-prev" src="__PUBLIC__/weben/images/indeximg/lefta.png">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!--明星产品 / 热门产品-->
|
||
<?php
|
||
$recomendList = getBannerList(81, 2);
|
||
if ($recomendList):
|
||
?>
|
||
<div class="Container swta-Container">
|
||
<?php
|
||
foreach ($recomendList as $kr => $recomend):
|
||
$styles='center';
|
||
if($recomend['style']==3) {
|
||
$styles='right';
|
||
}
|
||
elseif($recomend['style']==2){
|
||
$styles='left';
|
||
}
|
||
|
||
?>
|
||
<div class="docking1 " >
|
||
|
||
<div class="s4-video hid-mob video-container" >
|
||
<!--<img class="video-img" src="__PUBLIC__/weben/images/indeximg/PC-videoimg.jpg">-->
|
||
<!--video data-poster-m="" data-poster-p="" data-poster-wx="" webkit-playsinline="" playsinline="" x5-video-player-type="h5" autoplay="autoplay" loop="" muted="" poster="">
|
||
<source type="video/mp4" data-src-p="/frontend/weben/images/home/UFSD-I-en.mp4" autoplay data-src-m="/frontend/weben/images/home/UFSD-I-en.mp4" src="/frontend/weben/images/home/UFSD-I-en.mp4">
|
||
</video-->
|
||
<iframe width="100%" style="height:50rem;z-index:9999; " src="<?php echo $recomend['videourl']; ?>?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen id="videoElement"></iframe>
|
||
|
||
</div>
|
||
<img id="loadingImage" class="video-img" src="__PUBLIC__/weben/images/indeximg/PC-videoimg.jpg">
|
||
|
||
</div>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
$hotList = getBannerList(74, 4);
|
||
if ($hotList):
|
||
?>
|
||
<div class="docking2 swta-Container">
|
||
<?php foreach ($hotList as $kh => $hot): ?>
|
||
<?php
|
||
if($kh==2):
|
||
?>
|
||
</div>
|
||
<div class="docking2 swta-Container">
|
||
<?php endif; ?>
|
||
<div class="docking2a">
|
||
<div class="docking2a-text">
|
||
<div class="title"><a style="color:#<?php echo $hot['alt'];?>" href="<?php echo $hot['url']; ?>"><p><?php echo $hot['name']; ?></p></a></div>
|
||
<div class="subtitle" style="color:#<?php echo $hot['alt'];?>"><p><?php echo $hot['description']; ?></p></div>
|
||
<div style=" text-align: center;"><a class="more" href="<?php echo $hot['url']; ?>">Learn More ></a></div>
|
||
</div>
|
||
<div class="docking2-1 " style="background-image: url('<?php echo $hot["picture"]; ?>');">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!--场景介绍-->
|
||
<div class="dwt-Container " >
|
||
<main role="main" id="main" class="anchor">
|
||
<section id="shopify-section-template--19206104285484__b0dd93e2-8ffa-4771-a65d-402ac18f05ce"
|
||
class="shopify-section shopify-section--rich-text">
|
||
|
||
|
||
<div class="section section-blends section-designed">
|
||
<div class="rich-text justify-center ">
|
||
<div class="rich-text__wrapper">
|
||
<div class="prose justify-items-center text-center">
|
||
<p class="h1 hyphenate">ORICO Technology</p>
|
||
<div>
|
||
<p>Designed to be just as easy to learn as iPhone.Chatting with friends.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="shopify-section-template--19206104285484__before-after-image"
|
||
class="shopify-section shopify-section--before-after-image" style="--clip-path-offset: -191px;">
|
||
|
||
<div class="section section-blends section-full swt-Container">
|
||
<div class="section-stack section-stack--center ">
|
||
<div class="section-stack__main">
|
||
<div class="before-after shadow text-custom ba-slider" style="--text-color: 255 255 255;">
|
||
<img src="uploads/default/home/indeximg1.jpg">
|
||
<div class="resize">
|
||
<img src="uploads/default/home/indeximg2.jpg">
|
||
</div>
|
||
|
||
<span class="handle"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<!--品牌故事-->
|
||
<?php
|
||
$brandList = getBannerList(75, 3);
|
||
if ($brandList):
|
||
?>
|
||
<div class="Container1">
|
||
<div class="swt-Container">
|
||
<div class="swiper mySwiper1" style="padding-bottom: 20px;">
|
||
<div class="swiper-wrapper">
|
||
<?php foreach ($brandList as $kb => $brand): ?>
|
||
<div class="swiper-slide picture2">
|
||
<div class="item-img">
|
||
<div class="item-img-div"><img src="<?php echo $brand['picture']; ?>"></div>
|
||
</div>
|
||
<div>
|
||
<div class="title"><?php echo $brand['name']; ?></div>
|
||
<div class="subtitle"><?php echo $brand['description']; ?></div>
|
||
<a class="more" href="<?php echo $brand['url']; ?>">Learn More ></a>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
|
||
</div>
|
||
<div class="swiperasd swiperasd1" id="timeline">
|
||
<div class="swiper-container1">
|
||
<div class=" swiper-pagination swiper-pagination1"></div>
|
||
<hr>
|
||
<?php foreach ($brandList as $kd => $itm): ?>
|
||
<span class="time<?php echo $kd+1; ?>"><?php echo $itm['sort']; ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="swiper-container swi1">
|
||
<img class="slideshow-btn swiper-button-next" src="__PUBLIC__/weben/images/indeximg/rightcheck.png">
|
||
<img class="slideshow-btn swiper-button-prev" src="__PUBLIC__/weben/images/indeximg/lefta.png">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
$dataList = getBannerList(78, 3);
|
||
if ($dataList):
|
||
?>
|
||
<!--***数据统计*** -->
|
||
<div class="Container11 swta-Container" >
|
||
<div class="swt-Container number-con">
|
||
<?php foreach ($dataList as $kd => $feed): ?>
|
||
<div>
|
||
<div class="number-scroll" data-target="<?php echo $feed['name']; ?>"></div>
|
||
<div class="tex-scroll" ><?php echo $feed['description']; ?></div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
//$newsList = getBannerList(77, 10);
|
||
$blog_list = getBlogList();
|
||
if ($blog_list):
|
||
?>
|
||
<!-- banner3--->
|
||
<div class="Container1 swta-Container" style="display: flex;">
|
||
<div class="swiper mySwiper2">
|
||
<div class="swiper-wrapper">
|
||
<?php foreach ($blog_list as $kc => $news): ?>
|
||
|
||
<div class="swiper-slide picture3">
|
||
|
||
<div class="picture3-div">
|
||
<a href="<?php echo '/us/blog/detail/id/'.$news['id'];?>.html"><img src="<?php echo $news['icon']; ?>"></a>
|
||
|
||
</div>
|
||
<div class="title">
|
||
<p><a href="<?php echo '/us/blog/detail/id/'.$news['id'];?>.html"><?php echo $news['title']; ?></a></p>
|
||
</div>
|
||
<!--<img class="addimg" src="__PUBLIC__/weben/images/indeximg/add.png">-->
|
||
</div>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
</div>
|
||
|
||
<div class="swiperasd swiperasd2" id="timeline">
|
||
<div class="swiper-container">
|
||
<img class="slideshow-btn swiper-button-next" src="__PUBLIC__/weben/images/indeximg/rightcheck.png">
|
||
<img class="slideshow-btn swiper-button-prev" src="__PUBLIC__/weben/images/indeximg/lefta.png">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
if ($faqData):
|
||
?>
|
||
<div class="swt-Container Container9">
|
||
<div class="divleft">
|
||
<div class="title">FAQ</div>
|
||
<div class="subtitle">What are you most concerned about</div>
|
||
<div class="subtitle1">Our customer support is available Manday to Friday 9am600pmAverage arswer time 24h</div>
|
||
</div>
|
||
<div class="divright">
|
||
<div class="accordion">
|
||
<?php foreach ($faqData as $kf => $faq): ?>
|
||
<div class="accordion-item" class="myButton">
|
||
<div class="accordion-header">
|
||
<h3 class="text-name"><?php echo $faq['name']; ?></h3>
|
||
<span class="xiala">+</span>
|
||
</div>
|
||
<div class="accordion-content">
|
||
<p> <?php echo str_replace("\r",'',nl2br($faq['content'])); ?></p>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<?php endif; ?>
|
||
|
||
<div class="down-nav Container1">
|
||
<div class="down-nav-p"><p>We use cookies to ensure you get the best experience on our website. By continuing to browse, you agree to our use of cookies.</p></div>
|
||
<div class="down-nav-button"><button class="close-btn2">OK,got it!</button></div>
|
||
<div class="down-nav-span"><span class="close-btn1" id="closeModalBtn1">×</span></div>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
$(".close-btn1").on("click", function() {
|
||
$(".down-nav").addClass('down-hidden');
|
||
});
|
||
});
|
||
$(document).ready(function() {
|
||
$(".close-btn2").on("click", function() {
|
||
$(".down-nav").addClass('down-hidden');
|
||
});
|
||
});
|
||
(function() {
|
||
// 搜素弹窗
|
||
$('#booNavigation').booNavigation({
|
||
slideSpeed: 400
|
||
});
|
||
|
||
$('#booNavigationTwo').booNavigation({
|
||
slideSpeed: 200
|
||
});
|
||
|
||
})();
|
||
|
||
// 数字滚动
|
||
var numberScroll = document.querySelector('.number-scroll');
|
||
var digits = numberScroll.querySelectorAll('.digit');
|
||
var target = 200000000; // 目标数字
|
||
var duration = 800; // 动画持续时间，单位为毫秒
|
||
var interval = 10; // 更新数字的间隔时间，单位为毫秒
|
||
var step = Math.ceil(target / (duration / interval));
|
||
var current = 0;
|
||
|
||
var timer = setInterval(function () {
|
||
current += step;
|
||
if (current >= target) {
|
||
clearInterval(timer);
|
||
current = target;
|
||
}
|
||
var digitsText = current.toString().padStart(digits.length, '0');
|
||
digits.forEach(function (digit, index) {
|
||
digit.setAttribute('data-digit', digitsText[index]);
|
||
});
|
||
}, interval);
|
||
|
||
|
||
$("#searchdiv1").click(function(){
|
||
$("#myModal").modal('show');
|
||
})
|
||
|
||
// var isDisplay = true;
|
||
// var maxRand,minRand;
|
||
|
||
// $(function() {
|
||
// $(".section-stack").on("mouseover",function(){
|
||
|
||
|
||
// isDisplay = false;
|
||
// clearInterval(maxRand);
|
||
// clearInterval(minRand);
|
||
|
||
|
||
// });
|
||
// $(".section-stack").on("mouseleave",function(){
|
||
// isDisplay = true;
|
||
|
||
// maxRand = setInterval('showRand(99)',4000);
|
||
// minRand = setInterval('showRand(0.91)',4000);
|
||
|
||
|
||
// });
|
||
|
||
// if(isDisplay) {
|
||
|
||
// maxRand = setInterval('showRand(99)',4000);
|
||
// minRand = setInterval('showRand(0.91)',4000);
|
||
|
||
// }
|
||
|
||
// });
|
||
|
||
|
||
// function setRand(){
|
||
// setInterval('showRand(99)',4000);
|
||
// setInterval('showRand(0.91)',4000);
|
||
|
||
// }
|
||
|
||
// function showRand(randFeed){
|
||
|
||
// $(".resize").animate({width: randFeed + '%'}, 10000,'linear');
|
||
// $(".handle").animate({left: randFeed + '%'}, 10000,'linear');
|
||
|
||
// }
|
||
|
||
// FAQ展开收起
|
||
$(document).ready(function() {
|
||
|
||
$(".accordion").on('click',".accordion-item",function() {
|
||
|
||
|
||
if($(this).children("div.accordion-content").is(':visible')){
|
||
$(".accordion-item").removeClass('active');
|
||
$(".accordion-content").hide();
|
||
$(".xiala").text('+');
|
||
$(".text-name").addClass('text-hidden');
|
||
|
||
}
|
||
else{
|
||
$(".accordion-item").removeClass('active');
|
||
$(".accordion-content").hide();
|
||
$(".xiala").text('+');
|
||
$(".text-name").addClass('text-hidden')
|
||
|
||
$(this).addClass('active');
|
||
$(this).children('div.accordion-content').show();
|
||
$(this).children('div.accordion-header').find('span').text('-');
|
||
$(this).children('div.accordion-header').find('h3').removeClass('text-hidden');
|
||
|
||
}
|
||
|
||
|
||
|
||
})
|
||
|
||
|
||
});
|
||
// 轮播
|
||
$(function() {
|
||
$('.before-after').beforeAfter();
|
||
});
|
||
var swiper = new Swiper(".mySwiper0", {
|
||
slidesPerView: 3,
|
||
spaceBetween: 30,
|
||
slidesPerGroup: 1,
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 5000,
|
||
pauseOnMouseEnter: true,
|
||
disableOnInteraction: false,
|
||
},
|
||
|
||
slidesPerView: "auto",
|
||
centeredSlides: true,
|
||
loopFillGroupWithBlank: true,
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
type: "progressbar",
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
|
||
});
|
||
var swiper = new Swiper(".mySwiper1", {
|
||
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
});
|
||
var swiper = new Swiper(".mySwiper2", {
|
||
loop: true,
|
||
spaceBetween: 30,
|
||
autoplay: {
|
||
delay: 5000,
|
||
pauseOnMouseEnter:true,
|
||
disableOnInteraction: false,
|
||
},
|
||
//slidesPerView: 1,
|
||
|
||
slidesPerView: "auto",
|
||
centeredSlides: true,
|
||
spaceBetween: 30,
|
||
|
||
pagination: {
|
||
|
||
el: ".swiper-pagination",
|
||
click:true
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
|
||
});
|
||
|
||
/*新闻轮播*/
|
||
$(function(){
|
||
$('.newBox ul').bxSlider({
|
||
controls:true,
|
||
pager:false,
|
||
infiniteLoop:true,
|
||
auto:true,
|
||
pause:2000
|
||
});
|
||
});
|
||
// 动画
|
||
var numberScrolls = document.querySelectorAll('.number-scroll');
|
||
|
||
numberScrolls.forEach(function (numberScroll) {
|
||
var target = parseInt(numberScroll.dataset.target);
|
||
var duration = 2500; // 动画持续时间，单位为毫秒
|
||
var interval = 10; // 更新数字的间隔时间，单位为毫秒
|
||
var step = Math.ceil(target / (duration / interval));
|
||
var current = 0;
|
||
|
||
var timer = setInterval(function () {
|
||
current += step;
|
||
if (current >= target) {
|
||
clearInterval(timer);
|
||
current = target;
|
||
}
|
||
|
||
numberScroll.textContent = addCommasToNumber(current);
|
||
|
||
}, interval);
|
||
});
|
||
// 数字
|
||
function addCommasToNumber(number) {
|
||
// 将数字转换为字符串
|
||
let numStr = number.toString();
|
||
|
||
// 使用正则表达式匹配数字的整数部分和小数部分（如果有）
|
||
let parts = numStr.split(".");
|
||
|
||
// 获取整数部分
|
||
let integerPart = parts[0];
|
||
|
||
// 将整数部分每3位添加一个逗号
|
||
integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||
|
||
// 如果有小数部分，重新组合整数部分和小数部分
|
||
if (parts.length > 1) {
|
||
let decimalPart = parts[1];
|
||
numStr = integerPart + "." + decimalPart;
|
||
} else {
|
||
numStr = integerPart;
|
||
}
|
||
|
||
return numStr;
|
||
}
|
||
|
||
$(document).ready(function() {
|
||
// 首先隐藏视频元素和加载中的图片
|
||
$("#videoElement").hide();
|
||
// $("#loadingImage").hide();
|
||
|
||
// 监听视频的加载事件
|
||
setTimeout(function() {
|
||
$("#videoElement").on("load", function() {
|
||
// 视频加载完成时，显示视频元素，隐藏加载中的图片
|
||
$("#videoElement").show();
|
||
$("#loadingImage").hide();
|
||
console.log('加载完')
|
||
});
|
||
}, 1000);
|
||
// 监听视频的加载失败事件
|
||
setTimeout(function() {
|
||
$("#videoElement").on("error", function() {
|
||
// 视频加载失败时，显示加载中的图片，隐藏视频元素
|
||
$("#loadingImage").show();
|
||
$("#videoElement").hide();
|
||
console.log('加载失败')
|
||
});
|
||
}, 1500);
|
||
});
|
||
|
||
|
||
</script>
|
||
</div>
|
||
<!-- 合作伙伴 e -->
|
||
<!-- bottom s -->
|
||
{include file="include/bottom" /}
|
||
<!-- bottom e -->
|
||
<style>
|
||
.swta-Container{
|
||
width: 1903px;
|
||
margin: 0 auto;
|
||
}
|
||
@media screen and (max-width:1459px){
|
||
.swta-Container{
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.ba-slider {
|
||
border-radius: 26px;
|
||
}
|
||
|
||
.ba-slider {
|
||
position: relative;
|
||
/*height: 750px;*/
|
||
overflow: hidden;
|
||
}
|
||
|
||
.section-stack__main {
|
||
width: var(--section-stack-main, 100%);
|
||
}
|
||
|
||
.ba-slider {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ba-slider img {
|
||
width: 100%;
|
||
display: block;
|
||
max-width: none;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.ba-slider .resize {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 50%;
|
||
overflow: hidden
|
||
}
|
||
|
||
.ba-slider .handle {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
margin-left: -2px;
|
||
display: block;
|
||
background: rgba(255, 255, 255, .5);
|
||
}
|
||
|
||
.ba-slider .handle.ba-draggable:after {
|
||
transform: scale(.8)
|
||
}
|
||
|
||
/* 使用transform(scale)属性 */
|
||
.element-backimg {
|
||
height: 100%;
|
||
background-repeat: no-repeat;
|
||
transition: transform .3s ease-in-out;
|
||
/* 图片缩放过渡效果 */
|
||
background-size: 100% 100%;
|
||
}
|
||
.element-backimg img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.element-backimg:hover {
|
||
transform: scale(1.09);
|
||
/* 图片放大 */
|
||
}
|
||
|
||
.searchdiv{
|
||
position: flex;
|
||
/*display: none;*/
|
||
width: 40%;
|
||
height: 80%;
|
||
background-color: white;
|
||
}
|
||
.ba-slider .handle:after {
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 48px;
|
||
height: 48px;
|
||
margin: -24px 0 0 -24px;
|
||
content: '';
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff url("__PUBLIC__/weben/images/indeximg/ba-arrow.png") center center / 22px 22px no-repeat;
|
||
border: 1px solid #fff;
|
||
border-radius: 50%;
|
||
transition: all .3s ease;
|
||
transform: scale(1);
|
||
z-index: 5;
|
||
}
|
||
|
||
.workshop_all .content1{ width:47%; height: 30rem; z-index: 2; float:left;
|
||
background-position: center!important;
|
||
background-repeat: no-repeat!important;
|
||
background-size: cover!important; overflow: hidden;}
|
||
.workshop_all .content11{ width:47%; height: 30rem; z-index: 2; float:left;border-radius: 26px 0 0 26px ;background-position: center!important;
|
||
background-repeat: no-repeat!important;
|
||
background-size: cover!important;
|
||
}
|
||
|
||
@media screen and (max-width:1459px){
|
||
.workshop_all .content1{ width:47%; height: 24.3rem; z-index: 2; float:left;
|
||
background-position: center!important;
|
||
background-repeat: no-repeat!important;
|
||
background-size: cover!important; overflow: hidden;}
|
||
.workshop_all .content11{ width:47%; height: 24.3rem; z-index: 2; float:left;border-radius: 26px 0 0 26px ;background-position: center!important;
|
||
background-repeat: no-repeat!important;
|
||
background-size: cover!important;}
|
||
}
|
||
@media screen and (max-width:1239px){
|
||
.workshop_all .content1{ width:47%; height: 21.3rem; z-index: 2; float:left;
|
||
background-position: center!important;
|
||
background-repeat: no-repeat!important;
|
||
background-size: cover!important; overflow: hidden;}
|
||
.workshop_all .content11{ width:47%; height: 21.3rem; z-index: 2; float:left;border-radius: 26px 0 0 26px ;background-position: center!important;
|
||
background-repeat: no-repeat!important;
|
||
background-size: cover!important;}
|
||
}
|
||
.workshop_all .content111{}
|
||
.docking1{
|
||
/*display: flex;*/
|
||
width: 100%;
|
||
height: 50rem;
|
||
overflow: hidden;
|
||
transform-origin: center center;
|
||
background-size: 100% 100%;
|
||
transform: scale(1.0);
|
||
transition: transform .3s ease-in-out; /* 图片缩放过渡效果 */
|
||
background-size: 100% 100%;
|
||
background-position: center center;
|
||
animation: breath 4s linear infinite;
|
||
}
|
||
|
||
@keyframes breath{
|
||
0% {background-size: 100% auto;}
|
||
50% {background-size: 120% auto;}
|
||
100% {background-size: 100% auto;}
|
||
}
|
||
|
||
.docking2-2{
|
||
background: url('__PUBLIC__/weben/images/indeximg/pt3.png') 100% 100% no-repeat;
|
||
}
|
||
.docking2-3{
|
||
background: url('__PUBLIC__/weben/images/indeximg/pt4.png') 100% 100% no-repeat;
|
||
}
|
||
.docking2-4{
|
||
background: url('__PUBLIC__/weben/images/indeximg/pt5.png') 100% 100% no-repeat;
|
||
}
|
||
|
||
#head-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
transition: background-color 0.3s ease-in-out;
|
||
}
|
||
|
||
#navbar.scrolled {
|
||
background-color: black; /* 滚动时导航栏的背景颜色 */
|
||
}
|
||
.tpicture{
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-left: 60%;
|
||
margin-top: -25px;
|
||
background: url('__PUBLIC__/weben/images/indeximg/more2.png') no-repeat;
|
||
background-position:-26px 0px;
|
||
}
|
||
|
||
.video-img .title{
|
||
z-index: 99;
|
||
color: white;
|
||
font-size: 2.25rem;
|
||
text-align: center;
|
||
line-height: 2.375rem;
|
||
font-weight: 700;
|
||
position: absolute;
|
||
top: 12rem;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.video-img .subtitle{
|
||
z-index: 99;
|
||
color: white;
|
||
font-size: 1.25em;
|
||
text-align: center;
|
||
width: 55%;
|
||
left: 23%;
|
||
position: absolute;
|
||
top: 16rem;
|
||
margin-bottom: 10px;
|
||
line-height: 1.375rem;
|
||
font-weight: lighter;
|
||
}
|
||
.video-img{
|
||
position: relative;
|
||
z-index: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
.s4-video{
|
||
position: relative;
|
||
z-index: 9999 !important;
|
||
}
|
||
</style>
|
||
</body>
|
||
</html>
|