<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML5 Template">
<!-- Site Title -->
<title>亿能通达-首页</title>
<!-- Site Favicon -->
<link rel="icon" type="image/x-icon" href="assets/imgs/icon/favicon.png">
<style>
.image-style {
width: 200px;
height: 150px;
/* 设置图片外边距，上右下左分别为10px、20px、10px、20px */
margin: 10px 20px 10px 20px;
/* 设置图片浮动到左侧 */
float: left;
}
.beian {
text-align: center; /* 文本居中 */
padding: 10px 0; /* 内边距 */
width: 100%; /* 宽度为100% */
position: fixed; /* 固定位置 */
left: 0; /* 左侧对齐 */
bottom: 0; /* 底部对齐 */
color: #6c757d; /* 文本颜色 */
text-decoration: none; /* 去除下划线 */
}
.main .item::after {
content: "";
pointer-events: auto;
position: absolute;
right: 20px;
bottom: 20px;
width: 25px;
height: 25px;
cursor: pointer;
border-radius: 50%;
z-index: 4;
background: url("assets/imgs/index/plus.webp") 100% 100%;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
flex-direction: column;
}
.timeline {
width: 100%;
background-color: #fff;
#box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
}
.timeline .swiper-container {
height: 600px;
width: 100%;
position: relative;
}
@media screen and (max-width: 768px) {
.timeline .swiper-container {
height: 100%;
width: 100%;
position: relative;
}
}
.timeline .swiper-wrapper {
#width:71%;
#flex: 0 0 auto;
#width: 58.33333333%
transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.timeline1 .swiper-slide {
position: relative;
color: #fff;
#overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.timeline1 .swiper-slide {
#width: auto!important;
#width: auto;
}
.timeline1 .swiper-slide::after {
content: "";
position: absolute;
z-index: 1;
right: -115%;
bottom: -10%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
border-radius: 100%;
}
.timeline1 .swiper-slide-content1 {
position: relative;
#text-align: center;
width: 80%;
max-width: 750px;
right: 20%;
top: 13%;
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
font-size: 12px;
z-index: 2;
}
.thumb {
background: #f5f3ef;
padding: 40px 0 40px 0;
margin-right: 40px;
border-radius: 20px;
}
.thumb img {
width: 100%;
margin-right: -80px;
border-radius: 20px;
}
.timeline .swiper-slide .timeline-year {
display: block;
font-style: italic;
font-size: 42px;
#margin-bottom: 50px;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
color: #d4a024;
font-weight: 300;
opacity: 1;
transition: .2s ease .4s;
}
.timeline .swiper-slide .timeline-title {
font-weight: 800;
font-size: 34px;
margin: 0 0 30px;
opacity: 0;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
transition: .2s ease .5s;
}
.timeline .swiper-slide .timeline-text {
line-height: 1.5;
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
transition: .2s ease .6s;
}
@media screen and (min-width: 768px) {
.timeline .swiper-slide-content {
position: relative;
#text-align: center;
#max-width: 750px;
top: 4%;
float:left;
width:100%;
height:600px;
padding-left:310px;
padding-right:45px;
# -webkit-transform: translate(50%, 0);
# transform: translate(50%, 0);
font-size: 12px;
z-index: 2;
}
.timeline .swiper-slide-content img{
position: relative;
#text-align: center;
#display: block;
#top: 20px;
#right: 13%;
width: 100%;
#height: 300px;
border-radius: 20px;
}
}
@media screen and (max-width: 768px) {
.timeline .swiper-slide {
height: 100%;
#top:80px;
padding-top:40px;
position: relative;
color: #fff;
#overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.timeline .swiper-slide-content {
position: relative;
#text-align: center;
#width: 100%;
#max-width: 750px;
#right: 33%;
#left:3%;
top: 13%;
padding-left:10px;
padding-right:10px;
#-webkit-transform: translate(50%, 0);
# transform: translate(50%, 0);
font-size: 12px;
z-index: 2;
}
.timeline .swiper-slide-content img{
position: relative;
text-align: center;
#display: block;
#top: 20px;
#right: 5%;
#left:5%;
padding-left:5px;
padding-right:5px;
#width: 100%;
#height: 300px;
border-radius: 20px;
}
.timeline .swiper-slide-next .timeline-year {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .1s ease 1.2s;
}
.timeline .swiper-slide .timeline-year {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .1s ease 1.2s;
}
.timeline .swiper-slide .timeline-text {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.timeline .swiper-slide p {
padding-top:7px;
}
.timeline .swiper-slide-active .timeline-year {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .1s ease 1.2s;
}
.timeline .swiper-slide-active .timeline-title {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .2s ease 1.7s;
}
.timeline .swiper-slide-active .timeline-text {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/*transition: .1s ease 1.2s;*/
}
.timeline .swiper-pagination {
#right: 15% !important;
height: 100%;
display: none;
flex-direction: column;
justify-content: center;
#font-style: italic;
font-weight: 300;
font-size: 18px;
z-index: 6;
width: 200px;
}
.timeline .swiper-pagination::before {
content: "";
position: absolute;
left: -30px;
top: 0;
height: 100%;
width: 1px;
background-color: rgba(118, 112, 112, 0.2);
}
.timeline .swiper-pagination-bullet {
width: 210px;
height: auto;
text-align: left;
opacity: 1;
background: transparent;
#color: #d4a024;
margin: 15px 0 !important;
position: relative;
padding-left: 5px;
transition: padding-left .5s;
font-weight: 550;
line-height: 1;
letter-spacing: 0.16px;
#color: var(--secondary);
text-transform: capitalize;
}
.timeline1 .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 8px;
left: -32.5px;
width: 6px;
height: 6px;
border-radius: 100%;
background-color: #d4a024;
-webkit-transform: scale(0);
transform: scale(0);
transition: .2s;
}
.timeline .swiper-pagination-bullet-active {
#color: #d4a024;
}
.timeline .swiper-pagination-bullet-active::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
background-size: 20px 20px;
top: 15%;
width: 20px;
height: 20px;
margin-top: 0;
z-index: 2;
transition: .2s;
}
.timeline .swiper-button-prev {
left: 8%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-prev:hover {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
.timeline .swiper-button-next {
right: 8%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-next:hover {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
@media screen and (min-width: 768px) {
.timeline1 .swiper-slide::after {
right: -30%;
bottom: -8%;
width: 240px;
height: 50%;
box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);
}
.timeline1 .swiper-slide-content {
right: 30%;
top: 250px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
###width: 310px;
font-size: 11px;
###text-align: right;
}
.timeline .swiper-slide .timeline-year {
margin-bottom: 0;
font-size: 32px;
}
.timeline .swiper-slide .timeline-title {
font-size: 46px;
margin: 0;
}
.timeline .swiper-pagination {
display: flex;
}
.timeline .swiper-button-prev {
top: 15%;
left: auto;
right: 15%;
-webkit-transform: rotate(90deg) translate(0, 10px);
transform: rotate(90deg) translate(0, 10px);
}
.timeline .swiper-button-prev:hover {
-webkit-transform: rotate(90deg) translate(-3px, 10px);
transform: rotate(90deg) translate(-3px, 10px);
}
.timeline .swiper-button-next {
top: auto;
bottom: 15%;
right: 15%;
-webkit-transform: rotate(90deg) translate(0, 10px);
transform: rotate(90deg) translate(0, 10px);
}
.timeline .swiper-button-next:hover {
-webkit-transform: rotate(90deg) translate(3px, 10px);
transform: rotate(90deg) translate(3px, 10px);
}
}
@media screen and (min-width: 1024px) {
.timeline1 .swiper-slide::after {
right: -20%;
bottom: -12%;
width: 240px;
height: 50%;
box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
}
.timeline1 .swiper-slide-content {
right: 35%;
}
.timeline .swiper-button-prev {
}
}
@media screen and (max-width: 768px) {
.timeline .swiper-button-prev {
display:none;
}
.timeline .swiper-button-next {
display:none;
}
}
.hover-text {
transition: transform 0.3s ease; /* 平滑过渡效果 */
display: block;
#font-size: 18px;
#padding: 30px 8px;
text-transform: capitalize;
font-weight: 550;
line-height: 1;
letter-spacing: 0.16px;
text-transform: capitalize;
color: #0E1E2A;
transition: .3s;
}
.hover-text:hover {
color: #B69974;
transform: translateX(5px); /* 向后略微移动 */
}
</style>
<!-- All CSS Files -->
<link rel="stylesheet" href="assets/css/all.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/aos.css">
<link rel="stylesheet" href="assets/css/progressbar.css">
<link rel="stylesheet" href="assets/css/master.css">
<link rel="stylesheet" href="assets/css/index.css">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="loader"></div>
</div>
<!-- Scroll to top -->
<button id="scroll_top" class="scroll-top"><i class="fa-solid fa-arrow-up"></i></button>
<!-- Offcanvas area start -->
<div class="offcanvas__area">
<div class="offcanvas__inner">
<div class="offcanvas__top" style="display:block;">
<img style="width:50px;height:45px" src="assets/imgs/logo/logo4.png" alt="Logo">
<span style="font-size:18px;line-height: 45px;color:white;">亿能通达</span>
<span style="font-size:18px;line-height: 45px;color:white;"> </span>
<button id="offcanvas_close" style="display:inline"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="offcanvas__menu">
<div class="offcanvas-menu">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="software-details.html">业务简介</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
<div class="offcanvas__btm">
<div class="footer__address-3">
<ul>
<li>
<span><i class="fa-solid fa-location-dot"></i></span>
<p class="text-white">中国（四川）自由贸易试验区成都高新区天府大道北段1700号6栋1单元3层303号</p>
</li>
<li>
<span><i class="fa-solid fa-phone"></i></span>
<div>
<a href=""></a>
</div>
</li>
<li>
<span><i class="fa-solid fa-envelope"></i></span>
<div>
<a href=""></a>
</div>
</li>
</ul>
</div>
<div class="footer__social-3">
</div>
</div>
</div>
</div>
<!-- Offcanvas area end -->
<div id="smooth-wrapper">
<div id="smooth-content">
<!-- Header area start -->
<header class="header__area pos-abs plr-100">
<div class="header__inner">
<div class="header__logo">
<a href="index.html"><img style="width:50px;height:45px" src="assets/imgs/logo/logo4.png" alt="Site Logo"></a>
<span style="margin-bottom: 3px;vertical-align: middle;display:inline-block;font-size:25px;line-height: 45px;">亿能通达</span>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul>
<li><a href="index.html">首页</a>
</li>
<li><a href="about.html">关于我们</a></li>
<li><a href="software-details.html">业务简介</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
<div class="header__others">
<div class="header__offcanvas">
<button class="menu_icon">
<img src="assets/imgs/icon/menu.png" alt="Menu Icon">
</button>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<main class="main">
<div class="container pt-150">
<div class="timeline">
<div class="swiper-container swiper-container-vertical">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-prev" data-year="国际贸易金融服务" data-pos="公司简介">
<div class="swiper-slide-content">
<div class="timeline-year" style="background-image: url('assets/imgs/index/all.jpg'); height: 90%;"></div>
</div>
</div>
</div>
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" style="left:6%;top:30%;">
<a class="hover-text" href="finance-details.html" target="_blank">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active">公交智能调度系统</span>
</a>
<a class="hover-text" href="service-energy.html" target="_blank"><span class="swiper-pagination-bullet">网约车出租车管理系统</span></a>
<a class="hover-text" href="service.html" target="_blank"><span class="swiper-pagination-bullet">充换电运营管理系统</span></a>
<a class="hover-text" href="finance-productline.html" target="_blank"><span class="swiper-pagination-bullet">实时监控系统</span></a>
</div>
</div>
</div>
</div>
<script src="assets/js/swiper.min.js"></script>
<script>
var timelineSwiper = new Swiper ('.timeline1 .swiper-container', {
slidesPerView:"auto",
//direction: 'vertical',
direction: 'vertical',
loop: false,
speed: 1000,
//mousewheelControl : true,
pagination: '.swiper-pagination',
paginationBulletRender: function (swiper, index, className) {
var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
var pos = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-pos');
return '<span class="' + className + '">' + year + '</span>';
//return '<span class="' + className + '">' + year + '</span>';
},
paginationClickable: true,
//nextButton: '.swiper-button-next',
//prevButton: '.swiper-button-prev',
breakpoints: {
768: {
direction: 'horizontal',
}
}
});
</script>
<!-- <section class="about__area " style="padding-top:128px;">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-xl-3 col-md-3" style="height:350px;margin-bottom:25px;">
<a href="finance-details.html">
<div class="item11 top" style="position:relative;margin:0 0 7px 0;height:62%;padding: 0px;background: url('assets/imgs/index/finance-2.png') 0% 0% / 100% 100%;">
<div style="background:rgba(255,255,255,.15);position:absolute;top:0px;width:100%;padding: 3px 10px;">
<span style="color:#fff;font-weight: 600;font-size:20px;">国际贸易金融服务</span>
</div>
</div>
</a>
<a href="service-energy.html">
<div class="top" style="position:relative;margin:0 0 0 0;height:36%;padding: 0px;background: url('assets/imgs/index/1.png') 0% 0% / 100% 100%;">
<div style="background:rgba(255,255,255,.15);position:absolute;top:0px;width:100%;padding: 3px 10px;">
<span style="color:#fff;font-weight: 600;font-size:20px;">能源补给服务</span>
</div>
</div>
</a>
</div>
<div class="col-xxl-3 col-xl-3 col-xl-3 col-md-3" style="height:350px;margin-bottom:25px;">
<a href="service.html">
<div class="top" style="position:relative;margin:0 0 0 0;height:100%;padding: 0px;background: url('assets/imgs/index/car-1.png') 0% 0% / 100% 100%;">
<div style="background:rgba(255,255,255,.15);position:absolute;top:0px;width:100%;padding: 3px 10px;">
<span style="color:#fff;font-weight: 600;font-size:20px;">新能源汽车、摩托车出口</span>
</div>
</div>
</a>
</div>
<div class="col-xxl-3 col-xl-3 col-xl-3 col-md-3" style="height:350px;margin-bottom:25px;">
<a href="finance-productline.html">
<div class="top" style="position:relative;margin: 0 0 0 0;height:100%;padding: 0px;background: url('assets/imgs/index/gui-2.png') 0% 0% / 100% 100%;">
<div style="background:rgba(255,255,255,.15);position:absolute;top:0px;width:100%;padding: 3px 10px;">
<span style="color:#fff;font-weight: 600;font-size:20px;">新能源产线海外投资</span>
</div>
</div>
</a>
</div>
<div class="col-xxl-3 col-xl-3 col-xl-3 col-md-3" style="height:350px;margin-bottom:25px;">
<a href="software-details.html">
<div class="top" style="position:relative;margin:0;height:100%;padding: 0px;background: url('assets/imgs/index/small.png') 0% 0% / 100% 100%;">
<div style="background:rgba(255,255,255,.15);position:absolute;top:0px;width:100%;padding: 3px 10px;">
<span style="color:#fff;font-weight: 600;font-size:20px;">移动数字平台技术服务</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section> -->
</main>
<!-- Footer area start -->
<footer class="footer__area footer_two_area">
<div class="footer__widgets" style="padding-top:30px;">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6">
<div class="footer__logo">
<img style="width:50px;height:45px" src="assets/imgs/logo/logo4.png"
style="display:inline;" alt="Footer Logo">
<span style="margin-bottom: 20px;vertical-align: middle;display:inline-block;font-size:25px;color: var(--white);line-height: 45px;">亿能通达</span>
<p>现代化智慧城市管理的行业定制化软件开发及硬件集成</p>
</div>
</div>
<div class="col-xxl-9 col-xl-9 col-lg-6 col-md-6">
<div class="footer__address">
<h2 class="footer__title" style="padding-top:8px;padding-bottom:20px;">联系方式</h2>
<ul>
<li>
<span><i class="fa-solid fa-paper-plane"></i></span>
<p>中国（四川）自由贸易试验区成都高新区天府大道北段1700号6栋1单元3层303号</p>
</li>
<li>
<span><i class="fa-solid fa-phone"></i></span>
<a href=""></a>
</li>
<li>
<span><i class="fa-solid fa-envelope"></i></span>
<a href=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a href="https://beian.miit.gov.cn/" class="beian" target="_blank">蜀ICP备2025124674号-1</a>
</div>
</footer>
<!-- Footer area end -->
</div>
</div>
<!-- All JS Files -->
<script src="assets/js/jquery-3.6.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.meanmenu.min.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/counter.js"></script>
<script src="assets/js/progressbar.js"></script>
<script src="assets/js/aos.js"></script>
<script src="assets/js/gsap.min.js"></script>
<script src="assets/js/SplitText.min.js"></script>
<script src="assets/js/ScrollSmoother.min.js"></script>
<script src="assets/js/ScrollTrigger.min.js"></script>
<script src="assets/js/vanilla-tilt.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>