yuan.wenxu/copyweb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:首页完成

Browse Source
This commit is contained in:
Nightwindsss committed 2025-03-31 23:28:57 +08:00
1 parent 80d78819ec
commit 6cd4ceb6e2
3 files changed
+28 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+15 -16
View File
@@ -15,14 +15,13 @@
<!-- 轮播图 -->
<div class="w-full relative select-none">
<div class="swiper carousel-swiper w-full h-[100vh]">
<!-- 遮罩层 -->
<div class="sweep-overlay absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 z-5 pointer-events-none hidden"></div>
<div class="swiper-button-prev group absolute top-1/2 left-4 transform -translate-y-1/2 z-10 cursor-pointer text-white"></div>
<div class="swiper-button-next group absolute top-1/2 right-4 transform -translate-y-1/2 z-10 cursor-pointer text-white"></div>
<div class="overlay absolute top-0 left-0 w-full h-full bg-black bg-opacity-20 z-10"></div>
<div class="swiper-button-prev group absolute top-1/2 left-4 transform -translate-y-1/2 z-20 cursor-pointer text-white"></div>
<div class="swiper-button-next group absolute top-1/2 right-4 transform -translate-y-1/2 z-20 cursor-pointer text-white"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="size-full">
<img class="size-full object-cover object-center" src="/static/images/index-img-1.jpg" alt="">
<img class="size-full object-cover object-center" src="/copyweb/static/images/index-img-1.jpg" alt="">
</div>
<div class="absolute top-0 left-[10vw] h-full w-full flex flex-row justify-start items-center">
<div class="flex flex-col items-start justify-between w-[45.625rem]">
@@ -34,7 +33,7 @@
</div>
<div class="swiper-slide">
<div class="size-full">
<img class="size-full object-cover object-center" src="/static/images/index-img-2.jpg" alt="">
<img class="size-full object-cover object-center" src="/copyweb/static/images/index-img-2.jpg" alt="">
</div>
<div class="absolute top-0 left-[10vw] h-full w-full flex flex-row justify-start items-center">
<div class="flex flex-col items-start justify-between w-[45.625rem]">
@@ -97,9 +96,9 @@
</div>
</div>
</div>
<div class="swiper product-swiper select-none">
<div class="swiper product-swiper select-none" data-aos="fade-up" data-aos-duration="800" data-aos-delay="0">
<div class="swiper-wrapper">
<div class="swiper-slide group" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
<div class="swiper-slide group">
<a href="#">
<div class="w-full h-[24vw] overflow-hidden max-[1600px]:h-[32vw] max-[1450px]:h-[36vw] max-[1200px]:h-[40vw] max-[1050px]:h-[55vw] max-[700px]:h-[90vw] max-[600px]:h-[100vw] cursor-pointer">
<img class="size-full object-cover object-center transition-transform duration-500 group-hover:scale-125" src="static/images/product-img-1.jpg" alt="">
@@ -172,31 +171,31 @@
</div>
</div>
<div class="grid grid-cols-3 max-[1200px]:grid-cols-1 gap-x-[1.25rem]">
<div class="col-span-1 max-[756px]:h-[75vw] w-full group">
<div class="col-span-1 w-full group">
<div class="w-full h-[24.1875rem] overflow-hidden" data-aos="fade-right" data-aos-duration="800" data-aos-delay="0">
<img class="size-full object-cover object-center transition-transform duration-500 group-hover:scale-125" src="static/images/news.jpg" alt="">
</div>
<div class="flex flex-col items-center" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
<div class="w-full flex flex-col items-center" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
<div class="text-[1.5rem] my-[.625rem] group-hover:text-[#ff2a2a] font-bold">工业自动化生产线的发展背景</div>
<div class="line-clamp-2">自动化生产线一、自动化生产线是在自动化专机不断完善的基础上发展起来的。自动化专机是单台的自动化设备，只能完成产品生产过程中的单一的某项工序，功能有限。在完成好某道工序后，已完成的半成品又需要采用人工方式传递给其他专机设备上继续下一道的生产工序。完成整个生产需要一系列不同功能的专机和人工参与才能完成</div>
</div>
</div>
<div class="col-span-1 flex flex-col justify-between" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-up" data-aos-duration="800" data-aos-delay="0">
<div class="col-span-1 flex flex-col justify-between">
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
<div class="flex flex-row justify-between">
<div class="text-[1.1rem] group-hover:font-bold">关于楼宇自动化系统你必须了解的那些事</div>
<div class="text-[1.1rem] mr-[2rem]">2021/09/28</div>
</div>
<div class="line-clamp-2 text-[.9rem] mt-[1.25rem]">近年来，楼宇自动化系统(BAS)取得了巨大进步。他们不仅在改变建筑物的处理、操作和控制方式，而且也在改变这种自动化结构与网络和网格的相互作用以增强通信。如今，随着技术的创新发展，楼宇自动化系统的功能已不仅仅是运行楼宇的通风和制冷系统。现在，楼宇自控系统可以控制温度、建筑物压力、调节湿度、调节照明、监视功能性能、查找设备故障，获得访问控制等等。</div>
</div>
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-up" data-aos-duration="800" data-aos-delay="50">
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-down" data-aos-duration="800" data-aos-delay="100">
<div class="flex flex-row justify-between">
<div class="text-[1.1rem] group-hover:font-bold">楼宇自动化系统</div>
<div class="text-[1.1rem] mr-[2rem]">2021/09/28</div>
</div>
<div class="line-clamp-2 text-[.9rem] mt-[1.25rem]">楼宇自控是指楼宇中电力设备，如电梯、水泵、风机、空调等，其主要工作性质是强电驱动。通常这些设备是开放性的工作状态，也就是说没有形成一个闭环回路。只要接通电源，设备就在工作，至于工作状态、进程、能耗等，无法在线及时得到数据，更谈不上合理使用和节约能源。现在楼宇自控是将上述的电器设备进行在线监控，通过设</div>
</div>
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-down" data-aos-duration="800" data-aos-delay="200">
<div class="flex flex-row justify-between">
<div class="text-[1.1rem] group-hover:font-bold line-clamp-1">艾利特机器人荣获OFweek2021工业自动化数字化行业年度优秀产品奖</div>
<div class="text-[1.1rem] mr-[2rem]">2021/09/28</div>
@@ -212,14 +211,14 @@
</div>
<div class="line-clamp-2 text-[.9rem] mt-[1.25rem]">虽说现的智能楼宇被更多人所关注，但仍有不少人对于楼宇自动化系统不是很了解的。下面，小编就跟大家聊聊楼宇自动化系统的功能及设计。楼宇自动化系统的功能：⒈设备控制自动化（1）变配电及应急发电设备测控（2）照明设备测控（3）通风空调设备测控（4）给排水设备测控（5）电梯设备测控（6）停车场管理与控制⒉设备管理自</div>
</div>
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-left" data-aos-duration="800" data-aos-delay="50">
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100">
<div class="flex flex-row justify-between">
<div class="text-[1.1rem] group-hover:font-bold">9月27日海川智能涨停分析</div>
<div class="text-[1.1rem] mr-[2rem]">2021/09/28</div>
</div>
<div class="line-clamp-2 text-[.9rem] mt-[1.25rem]">证券之星数据中心讯，海川智能涨停收盘，收盘价14.57元。该股于13点24分涨停，1次打开涨停，截止收盘封单资金为2857.4万元，占其流通市值1.97%。资金流向数据方面，当日主力资金净流入7427.21万元，游资资金净流入7980.44万元，散户资金净流出3099.26万元。近5日资金流向一览见下表：该股为RCEP概念，智能制造，工业</div>
</div>
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100">
<div class="w-full bg-[rgb(244,244,244)] px-[1.25rem] py-[1.5rem] group border-l-[3px] border-transparent hover:border-red-600" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
<div class="flex flex-row justify-between">
<div class="text-[1.1rem] group-hover:font-bold line-clamp-1">风口财经对话全球工业自动化专家：推进转型升级！</div>
<div class="text-[1.1rem] mr-[2rem]">2021/09/28</div>
static/css/index.css
+8
View File
@@ -0,0 +1,8 @@
.overlay {
transition: transform 2s ease-in-out;
transform: translateX(-100%);
}
.overlay.active {
transform: translateX(0);
}
static/js/index.js
+5 -15
View File
@@ -35,7 +35,6 @@ var product_swiper = new Swiper(".product-swiper", {
$(document).ready(() => {
$(".product-prev-button").click(() => {
console.log("1")
product_swiper.slidePrev()
})
$(".product-next-button").click(() => {
@@ -50,7 +49,7 @@ const carousel_swiper = new Swiper(".carousel-swiper", {
delay: 4000,
disableOnInteraction: false,
},
snpeed: 300,
speed: 300,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
@@ -59,23 +58,14 @@ const carousel_swiper = new Swiper(".carousel-swiper", {
slideChangeTransitionStart: function () {
$('.carousel-aos').hide(0);
$('.carousel-aos').removeClass('aos-init').removeClass('aos-animate');
$('.sweep-overlay').removeClass('hidden');
$('.sweep-overlay').addClass('animate');
$('.overlay').hide(0);
$('.overlay').removeClass('active');
},
slideChangeTransitionEnd: function () {
$('.carousel-aos').show(0);
$('.carousel-aos').addClass('aos-init').addClass('aos-animate');
$('.sweep-overlay').removeClass('animate');
$('.sweep-overlay').addClass('hidden');
},
slideChange: function () {
$(".carousel-pagination-item").each((index, elem) => {
if (index == this.realIndex) {
$(elem).addClass("carousel-pagination-item-active")
} else {
$(elem).removeClass("carousel-pagination-item-active")
}
})
$('.overlay').show(0);
$('.overlay').addClass('active');
},
},
});