73 lines
4.0 KiB
HTML
73 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title></title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/7.4.1/swiper-bundle.min.css" type="text/css"
|
|
rel="stylesheet" />
|
|
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/aos/3.0.0-beta.6/aos.css" type="text/css"
|
|
rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="./static/css/common.css">
|
|
<link rel="stylesheet" href="./static/css/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 产品中心 -->
|
|
<div class="relative">
|
|
<div class="size-full"><img class="size-full object-cover object-center"
|
|
src="/copyweb/static/images/product-img-head.jpg" alt=""></div>
|
|
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center">
|
|
<div class="flex flex-col justify-center items-center">
|
|
<div class="text-[2rem] text-white font-bold tracking-widest">产品中心</div>
|
|
<div class="flex flex-row text-white mt-[.625rem]">
|
|
<img class="w-[1.25rem] h-[1.25rem] object-cover object-center"
|
|
src="/copyweb/static/images/introduction-img-2.png" alt="">
|
|
<div class="ml-[.625rem]">您现在的位置： </div><a href="" class="hover:text-[#ff2a2a]">首页</a>-<a href=""
|
|
class="hover:text-[#ff2a2a]">产品中心</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 产品中心 -->
|
|
<!-- 产品内容 -->
|
|
<div class="py-[4.0625rem] px-[7%]">
|
|
<div class="grid grid-rows-3 gap-[1.25rem] max-[1200px]:grid-rows-4 max-[1050px]:grid-rows-6 max-[600px]:grid-rows-12">
|
|
<div class="grid grid-cols-4 row-span-1 gap-[1.25rem] max-[1200px]:grid-cols-3 max-[1050px]:grid-cols-2 max-[600px]:grid-cols-1">
|
|
<a href="#">
|
|
<div class="h-[24vw] max-[1200px]:h-[35vw] max-[1050px]:h-[55vw] max-[700px]:h-[100vw] relative">
|
|
<div class="w-full h-[85%] group">
|
|
<div class="size-full overflow-hidden cursor-pointer">
|
|
<img class="size-full object-cover object-center transition-transform duration-500 group-hover:scale-110" src="static/images/product-img-1.jpg" alt="">
|
|
</div>
|
|
<div class="absolute top-0 left-0 w-full h-[85%] bg-black bg-opacity-0 z-10 group-hover:bg-opacity-50 transition duration-300 ease-in-out"></div>
|
|
<div class="absolute top-0 left-0 w-full h-[85%] opacity-0 translate-x-[50%] z-10 group-hover:opacity-100 group-hover:translate-x-0 transition duration-500 ease-in-out flex flex-row items-center justify-center">
|
|
<div class="border-[.0625rem] border-white text-white px-[.875rem] py-[.4375rem] shadow">
|
|
查看详情
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-center h-[15%] w-full group bg-gray-100">
|
|
<div class="text-[1rem] tracking-[.0625rem] group-hover:text-[#ff5454]">闸门自动化系统</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 产品内容 -->
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"
|
|
type="application/javascript"></script>
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/7.4.1/swiper-bundle.min.js"
|
|
type="application/javascript"></script>
|
|
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aos/3.0.0-beta.6/aos.js"
|
|
type="application/javascript"></script>
|
|
<script src="./static/js/common.js"></script>
|
|
<script src="./static/js/index.js"></script>
|
|
</body>
|
|
|
|
</html> |