wangsong/e-extend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
606c7871142db067a70ca3736eca0236be7537bc
e-extend/about.html
T

683 lines
20 KiB
HTML
Raw Normal View History

first commit
2025-02-09 14:29:00 +08:00
<!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">
<!-- 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/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/swiper.min.css">
<style>
.my_breadcrumb__area {
padding-top: 180px;
padding-bottom: 132px;
background-image: url(assets/imgs/hero/breadcrumb.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.beian {
text-align: center; /* 文本居中 */
padding: 10px 0; /* 内边距 */
width: 100%; /* 宽度为100% */
position: fixed; /* 固定位置 */
left: 0; /* 左侧对齐 */
bottom: 0; /* 底部对齐 */
color: #6c757d; /* 文本颜色 */
text-decoration: none; /* 去除下划线 */
}
.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: 10%;
float:left;
width:100%;
height:600px;
padding-left:45px;
padding-right:230px;
# -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: 1;
}
.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: auto;
height: auto;
text-align: left;
opacity: 1;
background: transparent;
color: #0E1E2A;
margin: 15px 0 !important;
position: relative;
font-size:18px;
font-weight: 550;
line-height: 1;
letter-spacing: 0.16px;
#color: var(--secondary);
text-transform: capitalize;
}
.timeline .swiper-pagination-bullet:hover {
color: #B69974;
transform: translateX(5px); /* 向后略微移动 */
}
.timeline .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: #B69974;
}
.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;
}
}
</style>
</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>
<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">
亿能通达初改
2025-02-24 16:16:28 +08:00
<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>
first commit
2025-02-09 14:29:00 +08:00
</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 -->
<!-- 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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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">
亿能通达初改
2025-02-24 16:16:28 +08:00
<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>
first commit
2025-02-09 14:29:00 +08:00
</div>
</div>
<div class="offcanvas__btm">
<div class="footer__address-3">
<ul>
<li>
<span><i class="fa-solid fa-location-dot"></i></span>
亿能通达初改
2025-02-24 16:16:28 +08:00
<p class="text-white">中国（四川）自由贸易试验区成都高新区天府大道北段1700号6栋1单元3层303号</p>
first commit
2025-02-09 14:29:00 +08:00
</li>
<li>
<span><i class="fa-solid fa-phone"></i></span>
<div>
亿能通达初改
2025-02-24 16:16:28 +08:00
<a href=""></a>
first commit
2025-02-09 14:29:00 +08:00
</div>
</li>
<li>
<span><i class="fa-solid fa-envelope"></i></span>
<div>
亿能通达初改
2025-02-24 16:16:28 +08:00
<a href=""></a>
first commit
2025-02-09 14:29:00 +08:00
</div>
</li>
</ul>
</div>
<div class="footer__social-3">
</div>
</div>
</div>
</div>
<!-- Offcanvas area end -->
<main>
<div class="container pt-150">
<div class="timeline">
<div class="swiper-container swiper-container-vertical">
<!-- <div class="row"> -->
<!-- <div class="col-xxl-9 col-xl-9 col-xl-9 col-md-9"> -->
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-prev" data-year="亿能通达" data-pos="公司简介">
<div class="swiper-slide-content">
<span class="timeline-year">公司简介</span>
<!--<h4 class="timeline-title">Our nice super title</h4>-->
亿能通达初改
2025-02-24 16:16:28 +08:00
<p class="timeline-text" style="text-indent: 2em;padding: 20px 0 20px;">四川亿能通达科技有限公司成立于2020年，位于成都。作为一家智慧城市管理领域的高新技术企业，公司专注于为城市现代化建设提供定制化软件系统开发与智能化硬件集成解决方案。依托成都高新技术产业聚集的区位优势，公司已构建起专业的研发团队。目前产品分类为：</p>
<p class="timeline-text">
<span style="font-weight: bold">【智慧城市车辆管理系统】：</span>
<span style="font-size: 14px;">通过AI识别与大数据分析技术，构建覆盖城市停车管理、新能源车辆监管、智慧交通调度等功能的综合管理平台，助力城市交通资源优化配置。</span>
</p>
<p class="timeline-text">
<span style="font-weight: bold">【智慧能源交易管理系统】：</span>
<span style="font-size: 14px;">基于区块链与物联网技术，打造能源供需智能匹配平台，实现电力、燃气等能源的数字化交易与碳排放监测，推动绿色低碳城市建设。</span>
</p>
<p class="timeline-text">
<span style="font-weight: bold">【智慧城市安全预警系统】：</span>
<span style="font-size: 14px;">整合视频监控、传感器网络与GIS地理信息系统，建立覆盖市政设施、公共建筑的安全监测网络，提供实时风险预警与应急指挥支持。</span>
</p>
<p class="timeline-text">
<span style="font-weight: bold">【智慧校园管理系统】：</span>
<span style="font-size: 14px;">涵盖校园安防、能耗管控、教务信息化等模块的集成化平台，通过智能硬件与云端管理相结合，助推教育机构数字化转型。</span>
</p>
</div>
first commit
2025-02-09 14:29:00 +08:00
</div>
</div>
<!-- </div> -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- <div class="col-xxl-3 col-xl-3 col-xl-3 col-md-3"> -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active">intro</span>
<span class="swiper-pagination-bullet">2015</span>
<span class="swiper-pagination-bullet">2016</span>
<span class="swiper-pagination-bullet">2017</span>
<span class="swiper-pagination-bullet">2018</span>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
<script src="assets/js/swiper.min.js"></script>
<script>
var timelineSwiper = new Swiper ('.timeline .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 style="font-size:12px;padding-left:12px;">'+pos+'</span></span>';
//return '<span class="' + className + '">' + year + '</span>';
},
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
768: {
direction: 'horizontal',
}
}
});
</script>
</main>
<!-- Footer area start -->
<footer class="footer__area footer_two_area">
<div class="footer__widgets" style="padding-top:110px;">
<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>
亿能通达初改
2025-02-24 16:16:28 +08:00
<div class="col-xxl-9 col-xl-9 col-lg-6 col-md-6">
first commit
2025-02-09 14:29:00 +08:00
<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>
亿能通达初改
2025-02-24 16:16:28 +08:00
<p>中国（四川）自由贸易试验区成都高新区天府大道北段1700号6栋1单元3层303号</p>
first commit
2025-02-09 14:29:00 +08:00
</li>
<li>
<span><i class="fa-solid fa-phone"></i></span>
亿能通达初改
2025-02-24 16:16:28 +08:00
<a href=""></a>
first commit
2025-02-09 14:29:00 +08:00
</li>
<li>
<span><i class="fa-solid fa-envelope"></i></span>
亿能通达初改
2025-02-24 16:16:28 +08:00
<a href=""></a>
first commit
2025-02-09 14:29:00 +08:00
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
备案号修改
2025-02-24 16:26:44 +08:00
<a href="https://beian.miit.gov.cn/" class="beian" target="_blank">蜀ICP备2025124674号</a>
first commit
2025-02-09 14:29:00 +08:00
</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/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>
Reference in New Issue Copy Permalink