962 lines
32 KiB
PHTML
Executable File
962 lines
32 KiB
PHTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>ORICO官网|数据线|硬盘盒|电脑配件|插线板</title>
|
||
<meta name="Keywords" content="ORICO,奥睿科,插线板,HUB,充电器,移动硬盘盒,USB3.0,车充,排插,数据线" />
|
||
<meta name="Description" content="ORICO官网拥有成熟的电脑/数码周边外设配件产品，提供USB插线板，硬盘盒，USB3.0 HUB，USB充电器，数据线，车充等数码3C产品的在线选购，让您轻松享受科技数码时代的乐趣！客服电话：400-6696-298" />
|
||
<!-- <script name="baidu-koubei-verification" src="//ikoubei.baidu.com/embed/1ba921d43f25f664afbdc9bd646d2ce2"></script>-->
|
||
{include file="include/head" /}
|
||
<script type="text/javascript">
|
||
var navID = "1";
|
||
</script>
|
||
|
||
|
||
</head>
|
||
|
||
<body οnlοad="openwin()">
|
||
<!--top-->
|
||
<header class="header-PC header-Index">
|
||
<div id="header">
|
||
{include file="include/top-head2023" /}
|
||
</div>
|
||
</header>
|
||
|
||
<!--top End-->
|
||
|
||
<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(92, 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(93, 6);
|
||
if ($collectionList):
|
||
?>
|
||
<div class="workshop_all f-black">
|
||
<?php foreach ($collectionList as $kc => $collection): ?>
|
||
|
||
|
||
<?php
|
||
if($kc%2 == 0):
|
||
?>
|
||
</div>
|
||
<div class="workshop_all f-black" id='<?php echo $kc; ?>'>
|
||
|
||
<?php endif; ?>
|
||
<?php
|
||
if($kc == 2):
|
||
?>
|
||
<div class="content1" id='<?php echo $kc; ?>'>
|
||
<div class="element-backimg" >
|
||
<a href="<?php echo $collection['url']; ?>"><img src="<?php echo getImage($collection['picture']); ?>" /> </a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
if($kc == 0 || $kc == 4 ):
|
||
?>
|
||
<div class="content" id='<?php echo $kc; ?>'>
|
||
<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">查看所有
|
||
<div class="tpicture">
|
||
</div>
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
if($kc == 3):
|
||
?>
|
||
<div class="content12" id='<?php echo $kc; ?>'>
|
||
<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">查看所有
|
||
<div class="tpicture">
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
if($kc == 1 || $kc == 5):
|
||
?>
|
||
<div class="content1 " id='<?php echo $kc; ?>'>
|
||
<div class="element-backimg" >
|
||
<a href="<?php echo $collection['url']; ?>"><img src="<?php echo getImage($collection['picture']); ?>" /> </a>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
|
||
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品列表 s -->
|
||
<?php
|
||
if (!empty($recomment_items)):
|
||
?>
|
||
<div class="swt-Container swiper-box">
|
||
<p class="biaoti">明星产品/热点产品</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']]); ?>">了解更多 ></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(94, 1);
|
||
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" muted="" poster="" width="100%" style="height:67rem;z-index:9999; " ref="videoPlayer" controls :muted="isMute">
|
||
<source type="video/mp4" data-src-p="__PUBLIC__/web/images/video/ORICO UFSD-I U盘 中文-16比9-19s.mp4" autoplay data-src-m="__PUBLIC__/web/images/video/ORICO UFSD-I U盘 中文-16比9-19s.mp4" src="__PUBLIC__/web/images/video/ORICO UFSD-I U盘 中文-16比9-19s.mp4">
|
||
</video>
|
||
|
||
<!--<iframe width="100%" style="height:50rem;z-index:9999; " src="__PUBLIC__/web/images/video/indexvideo.mp4" 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-videoimg1.jpg">
|
||
|
||
</div>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
$hotList = getBannerList(95, 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;">
|
||
|
||
<?php
|
||
if($kh==0):
|
||
?>
|
||
<a class="more" href="<?php echo $hot['url']; ?>">了解更多 ></a>
|
||
<!--<span class="more"> 即将上市 </span>-->
|
||
<?php else: ?>
|
||
<a class="more" href="<?php echo $hot['url']; ?>">了解更多 ></a>
|
||
<?php endif; ?>
|
||
</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 技术</p>
|
||
<div>
|
||
<p>强大功能、简单使用</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(96, 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']; ?>">了解更多 ></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(99, 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 swt-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 '/article/detail/'.$news['id'];?>.html"><img src="<?php echo $news['picture']; ?>"></a>
|
||
|
||
</div>
|
||
<div class="title">
|
||
<p><a href="<?php echo '/article/detail/'.$news['id'];?>.html"><?php echo $news['name']; ?></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">常见问题</div>
|
||
<div class="subtitle">回答您最关心的问题</div>
|
||
<div class="subtitle1">客服团队的工作时间：周一到周五，早9点到晚6点
|
||
平均应答时间：24小时内</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; ?>
|
||
|
||
|
||
|
||
<!-- bottom s -->
|
||
{include file="include/bottom2023" /}
|
||
|
||
|
||
</body>
|
||
<style>
|
||
.home_new {
|
||
background-color: #f2f2f2;
|
||
}
|
||
.docking2-1 {
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
height: 34rem;
|
||
text-align: center;
|
||
}
|
||
.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: 67rem;
|
||
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;
|
||
}
|
||
.Container9 {
|
||
margin-bottom: 80px;
|
||
}
|
||
.Footer_icon_orico {
|
||
position: absolute;
|
||
left: 0%;
|
||
top: 12%;
|
||
height: 50px;
|
||
margin-top: -25px;
|
||
}
|
||
.picture1 .subtitle {
|
||
font-size: 1em;
|
||
text-align: center;
|
||
margin-top: 1rem;
|
||
line-height: 1.125rem;
|
||
font-size: medium;
|
||
width: 80%;
|
||
margin: auto;
|
||
margin-bottom: auto;
|
||
margin-top: 1rem;
|
||
margin-bottom: 2.55rem;
|
||
max-height: 36px;
|
||
overflow: hidden;
|
||
}
|
||
.da1{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
|
||
(function() {
|
||
// 搜素弹窗
|
||
$('#booNavigation').booNavigation({
|
||
slideSpeed: 400
|
||
});
|
||
|
||
$('#booNavigationTwo').booNavigation({
|
||
slideSpeed: 200
|
||
});
|
||
|
||
})();
|
||
|
||
// 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,
|
||
centeredSlides: false,
|
||
spaceBetween: 30,
|
||
autoplay: {
|
||
delay: 5000,
|
||
pauseOnMouseEnter:true,
|
||
disableOnInteraction: true,
|
||
// stopOnLastSlide: false,博客版块自动播放
|
||
// 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);
|
||
});
|
||
|
||
$(function(){
|
||
$('.newBox ul').bxSlider({
|
||
controls:true,
|
||
pager:false,
|
||
infiniteLoop:true,
|
||
auto:true,
|
||
pause:2000
|
||
});
|
||
});
|
||
</script>
|
||
</html>
|