189 lines
14 KiB
HTML
189 lines
14 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="px-[7%] py-[4rem] bg-gray-100">
|
|
<div class="text-2xl flex flex-col items-center text-[#ff2a2a]">
|
|
about us
|
|
</div>
|
|
<div class="mt-[.625rem] mb-[2.8125rem] text-4xl flex flex-col items-center font-bold">
|
|
关于我们
|
|
</div>
|
|
<div class="grid grid-cols-2 max-[930px]:grid-cols-1 gap-[3.125rem]">
|
|
<div class="col-span-1">
|
|
<div class="h-[33.0625rem] w-full"><img class="size-full object-cover object-center" src="static/images/about-img-1.jpg" alt=""></div>
|
|
</div>
|
|
<div class="col-span-1 max-[740px]:gap-[3.125rem] max-[930px]:mt-[2.5rem] max-[400px]:gap-[1.875rem]">
|
|
<div class="mb-[.9375rem]" style="text-indent: 2ch;">常州步科自动化科技有限公司位于江苏省常州市武进区，是一家集技术研发、生产销售、业务代理于一体的高新技术企业。公司下设水利自动化产品事业部、工业自动化工程事业部、工控产品事业部。主要从事水利水电站闸门电控系统（液压启闭机、固定卷扬式启闭机）、辅机系统、 工业自动化系统、生产线的控制系统、楼宇自动化系统、计算机监控系统、位移传感器等...
|
|
<a href="#" class="text-[#ff2a2a]">了解更多》</a>
|
|
</div>
|
|
<div class="mb-[1.25rem]"><strong>公司精神：</strong>严谨、诚信、务实</div>
|
|
<div class="mb-[1.25rem]"><strong>公司目标：</strong>制造完美产品，铸造永恒品牌</div>
|
|
<div class="mb-[1.25rem]"><strong>公司宗旨：</strong>专注於每个细节</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 关于我们 -->
|
|
<!-- 产品中心 -->
|
|
<div class="w-full pl-[7%] max-[700px]:pr-[7%] py-[6rem] max-[900px]:py-[2rem]">
|
|
<div class="flex flex-row justify-between max-[700px]:justify-center pr-[7%] max-[700px]:pr-[0rem] max-[700px]:flex-wrap mb-[4rem]">
|
|
<div class="max-[700px]:mb-[2rem]">
|
|
<div class="text-[3rem] text-[#333] mb-[.75rem]">产品中心</div>
|
|
<div class="text-[1rem] text-[#333] mb-[1rem]">公司崇尚专业、创新、务实的经营理念，着力为客户提供精品化的体验</div>
|
|
<div class="w-[2.25rem] h-[.25rem] bg-[#82b647]"></div>
|
|
</div>
|
|
<div class="flex flex-row items-center">
|
|
<div class="product-prev-button rounded-full size-[3.25rem] border-[.125rem] border-[#ccc] flex justify-center items-center cursor-pointer mr-[1rem]">
|
|
<div class="size-[.6875rem] border-l-[.125rem] border-b-[.125rem] border-[#ccc] rotate-[45deg] translate-x-[0.125rem]"></div>
|
|
</div>
|
|
<div class="product-next-button rounded-full size-[3.25rem] border-[.125rem] border-[#82b647] flex justify-center items-center cursor-pointer">
|
|
<div class="size-[.6875rem] border-l-[.125rem] border-b-[.125rem] border-[#82b647] rotate-[-135deg] translate-x-[-0.125rem]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper product-swiper select-none">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="bg-[url(static/images/product-bg-1.png)] bg-cover bg-center bg-no-repeat rounded-[1rem] flex flex-col justify-end px-[2rem] h-[28vw] max-[1600px]:h-[32vw] max-[1450px]:h-[36vw] max-[1200px]:h-[40vw] max-[1050px]:h-[55vw] max-[700px]:h-[90vw] max-[600px]:h-[100vw] w-full pb-[2rem] cursor-pointer">
|
|
<div class="text-white text-[1.5rem] mb-[.5rem]">氨基酸</div>
|
|
<div class="w-full h-[.125rem] bg-[#ffffff50] relative mb-[1rem]">
|
|
<div class="absolute left-0 top-0 w-[20%] h-[.125rem] bg-[#ffffff]"></div>
|
|
</div>
|
|
<div class="text-[.875rem] text-white tracking-[.0625rem]">氨基酸：生命基石，活力源泉。</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="bg-[url(static/images/product-bg-2.png)] bg-cover bg-center bg-no-repeat rounded-[1rem] flex flex-col justify-end px-[2rem] h-[28vw] max-[1600px]:h-[32vw] max-[1450px]:h-[36vw] max-[1200px]:h-[40vw] max-[1050px]:h-[55vw] max-[700px]:h-[90vw] max-[600px]:h-[100vw] w-full pb-[2rem] cursor-pointer">
|
|
<div class="text-white text-[1.5rem] mb-[.5rem]">维生素</div>
|
|
<div class="w-full h-[.125rem] bg-[#ffffff50] relative mb-[1rem]">
|
|
<div class="absolute left-0 top-0 w-[20%] h-[.125rem] bg-[#ffffff]"></div>
|
|
</div>
|
|
<div class="text-[.875rem] text-white tracking-[.0625rem]">氨基酸：生命基石，活力源泉。</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="bg-[url(static/images/product-bg-3.png)] bg-cover bg-center bg-no-repeat rounded-[1rem] flex flex-col justify-end px-[2rem] h-[28vw] max-[1600px]:h-[32vw] max-[1450px]:h-[36vw] max-[1200px]:h-[40vw] max-[1050px]:h-[55vw] max-[700px]:h-[90vw] max-[600px]:h-[100vw] w-full pb-[2rem] cursor-pointer">
|
|
<div class="text-white text-[1.5rem] mb-[.5rem]">色素</div>
|
|
<div class="w-full h-[.125rem] bg-[#ffffff50] relative mb-[1rem]">
|
|
<div class="absolute left-0 top-0 w-[20%] h-[.125rem] bg-[#ffffff]"></div>
|
|
</div>
|
|
<div class="text-[.875rem] text-white tracking-[.0625rem]">氨基酸：生命基石，活力源泉。</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="bg-[url(static/images/product-bg-4.png)] bg-cover bg-center bg-no-repeat rounded-[1rem] flex flex-col justify-end px-[2rem] h-[28vw] max-[1600px]:h-[32vw] max-[1450px]:h-[36vw] max-[1200px]:h-[40vw] max-[1050px]:h-[55vw] max-[700px]:h-[90vw] max-[600px]:h-[100vw] w-full pb-[2rem] cursor-pointer">
|
|
<div class="text-white text-[1.5rem] mb-[.5rem]">胡萝卜素</div>
|
|
<div class="w-full h-[.125rem] bg-[#ffffff50] relative mb-[1rem]">
|
|
<div class="absolute left-0 top-0 w-[20%] h-[.125rem] bg-[#ffffff]"></div>
|
|
</div>
|
|
<div class="text-[.875rem] text-white tracking-[.0625rem]">氨基酸：生命基石，活力源泉。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 产品中心 -->
|
|
|
|
<!-- 我们的客户 -->
|
|
<div class="w-full px-[7%] py-[4rem]">
|
|
<div class="flex flex-row items-center justify-between mb-[3rem] max-[1000px]:flex-wrap">
|
|
<div class="pr-[20vw] max-[1000px]:pr-[0] max-[1000px]:w-full min-[1000px]:flex-1 max-[1000px]:mb-[2rem]">
|
|
<div class="text-[2.5rem] mb-[1rem]">我们的客户</div>
|
|
<div>远销韩国，印度，泰国，美国，德国，西班牙，墨西哥，巴西，南非， 埃及， 阿根廷， 越南， 日本， 马来西亚， 法国， 乌克兰， 俄罗斯，乌兹别克斯坦， 土耳其， 阿联酋， 荷兰， 瑞典等国外市场。</div>
|
|
</div>
|
|
<div class="bg-[#82b647] text-white px-[2rem] py-[.5rem] rounded-[1.25rem] cursor-pointer">查看更多</div>
|
|
</div>
|
|
<div class="w-full max-[1200px]:h-[40rem] max-[1200px]:overflow-y-hidden max-[1200px]:overflow-x-scroll">
|
|
<div class="w-full max-[1200px]:w-[1920px] max-[1200px]:h-[40rem]">
|
|
<img class="size-full object-contain object-center" src="static/svg/map.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 我们的客户 -->
|
|
|
|
<!-- 新闻中心 -->
|
|
<div class="px-[7%] py-[4rem]">
|
|
<div class="flex flex-col items-center mb-[6rem] max-[1200px]:mb-[3rem]">
|
|
<div class="text-[rgb(0,39,94)] text-[2.5rem] font-bold">新闻中心</div>
|
|
<div class="w-[7.5rem] h-[.1875rem] bg-[rgb(237,115,50)]"></div>
|
|
</div>
|
|
<div class="grid grid-cols-3 max-[1200px]:grid-cols-1 gap-x-[1.25rem]">
|
|
<div class="col-span-2 max-[1200px]:col-span-1">
|
|
<div class="grid grid-cols-2 max-[756px]:grid-cols-1 max-[1200px]:mb-[1rem]">
|
|
<div class="h-[28.875rem] max-[756px]:h-[75vw] w-full"><img class="size-full object-cover object-center" src="static/images/news-img.webp" alt=""></div>
|
|
<div class="flex flex-col py-[2rem] px-[1.5rem] justify-between bg-[rgb(244,244,244)]">
|
|
<div class="flex flex-col">
|
|
<div class="line-clamp-2 text-[.875rem] mb-[1.5rem] hover:text-[rgb(237,115,50)] transition-colors">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<div class="line-clamp-5 text-[1rem] mb-[1.5rem] hover:text-[rgb(237,115,50)] transition-colors">vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div>2021-07-30</div>
|
|
<div class="flex flex-row justify-end">
|
|
<div class="cursor-pointer transition-all group hover:bg-[rgb(237,115,50)] size-[2.5rem] flex justify-center items-center rounded-full border-[.0625rem] border-[rgb(237,115,50)]">
|
|
<div class="size-[.5rem] group-hover:border-[#fff] border-[rgb(237,115,50)] border-b-[.0625rem] border-r-[.0625rem] translate-x-[-0.125rem] rotate-[-45deg]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 bg-[rgb(244,244,244)]">
|
|
<div class="flex flex-col">
|
|
<div class="px-[1.5rem] pt-[3rem] group hover:bg-[#f8750327] transition-colors cursor-pointer">
|
|
<div class="pb-[3rem] border-b-[.0625rem] border-[#f8750327]">
|
|
<div class="line-clamp-1 text-[.875rem] text-[#333] mb-[.75rem] hover:text-[rgb(237,115,50)]">aaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<div class="line-clamp-1 text-[1rem] text-[#bbb]">aaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-[1.5rem] pt-[3rem] group hover:bg-[#f8750327] transition-colors cursor-pointer">
|
|
<div class="pb-[3rem] border-b-[.0625rem] border-[#f8750327]">
|
|
<div class="line-clamp-1 text-[.875rem] text-[#333] mb-[.75rem] hover:text-[rgb(237,115,50)]">aaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<div class="line-clamp-1 text-[1rem] text-[#bbb]">aaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-[1.5rem] pt-[3rem] group hover:bg-[#f8750327] transition-colors cursor-pointer">
|
|
<div class="pb-[3rem] border-b-[.0625rem] border-[#f8750327]">
|
|
<div class="line-clamp-1 text-[.875rem] text-[#333] mb-[.75rem] hover:text-[rgb(237,115,50)]">aaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<div class="line-clamp-1 text-[1rem] text-[#bbb]">aaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新闻中心 -->
|
|
<!-- 联系我们 -->
|
|
<div class="px-[7%] py-[4rem] grid grid-cols-2 gap-4 bg-[#eeeeee] max-[600px]:grid-cols-1">
|
|
<div class="pr-[5rem] max-[600px]:pr-0">
|
|
<div class="text-[3rem] text-[#fd2424] font-bold max-[600px]:text-[2.90rem]">寻找优质原料？</div>
|
|
<div class="text-[2rem] font-bold mt-[1rem]">联系我们</div>
|
|
<div class="text-[1rem] text-[#707070] mt-[1rem] break-all">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
</div>
|
|
<div class="grid max-[600px]:grid-cols-1 gap-4 grid-cols-2">
|
|
<input id="contactus-first" class="w-full h-[3.125rem] rounded-[0.5rem] pl-[1rem]" type="text" placeholder="请输入您的姓"/>
|
|
<input id="contactus-last" class="w-full h-[3.125rem] rounded-[0.5rem] pl-[1rem]" type="text" placeholder="请输入您的名"/>
|
|
<input id="contactus-phone" class="w-full h-[3.125rem] rounded-[0.5rem] pl-[1rem]" type="text" placeholder="请输入您的电话"/>
|
|
<input id="contactus-address" class="w-full h-[3.125rem] rounded-[0.5rem] pl-[1rem]" type="text" placeholder="请输入您的地址"/>
|
|
<textarea id="contactus-content" class="h-[12rem] resize-none col-span-2 rounded-[0.5rem] pl-[1rem] pt-[.5rem] max-[600px]:col-span-1 max-[600px]:h-[10rem]" type="text" placeholder="请填写您的咨询内容"></textarea>
|
|
<button id="contactus-submit-button" class="w-full col-span-2 py-[0.5rem] bg-[#ff1b1b] text-center text-white max-[600px]:col-span-1">提 交</button>
|
|
</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> |