80 lines
4.8 KiB
HTML
80 lines
4.8 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/honor-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-[4%]">
|
|
<div class="grid grid-rows-3 gap-[1.25rem] max-[1200px]:grid-rows-6 max-[1050px]:grid-rows-9 max-[600px]:grid-rows-18">
|
|
<div class="grid grid-cols-6 gap-[1.25rem] row-span-1 max-[1200px]:grid-cols-3 max-[1050px]:grid-cols-2 max-[600px]:grid-cols-1">
|
|
<a href="#">
|
|
<div class="relative">
|
|
<div class="size-full group">
|
|
<div class="size-full overflow-hidden cursor-pointer">
|
|
<img class="size-full object-cover object-center transition-transform duration-500 group-hover:scale-105" src="/copyweb/static/images/honor-img-1.jpg" alt="">
|
|
</div>
|
|
<div class="absolute top-0 left-0 size-full 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 size-full 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>
|
|
</a>
|
|
<a href="#">
|
|
<div class="relative">
|
|
<div class="size-full group">
|
|
<div class="size-full overflow-hidden cursor-pointer">
|
|
<img class="size-full object-cover object-center transition-transform duration-500 group-hover:scale-105" src="/copyweb/static/images/honor-img-1.jpg" alt="">
|
|
</div>
|
|
<div class="absolute top-0 left-0 size-full 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 size-full 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>
|
|
</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> |