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

feat:first push

Browse Source
This commit is contained in:
Nightwindsss committed 2025-03-28 00:10:38 +08:00
1 parent fffadf328f
commit 25a92a3f62
18 files changed
+327
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+189
View File
@@ -0,0 +1,189 @@
<!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>
static/css/common.css
+39
View File
@@ -0,0 +1,39 @@
body {
overflow-x: hidden;
overflow-y: auto;
padding: 0rem;
margin: 0rem;
}
html {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
font-size: 0.835vw;
}
@media screen and (max-width: 1920px) {
html {
font-size: 1rem;
}
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 .375rem rgba(255, 255, 255, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 .375rem rgba(255, 255, 255, 0.3);
background-color: #b3b3b3;
}
static/css/index.css
View File
Whitespace-only changes.
static/images/about-img-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

static/images/about-img-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 MiB

static/images/about-img-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 MiB

static/images/about-img-4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 MiB

static/images/about-img-5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

static/images/about-img-6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 MiB

static/images/about-img-7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 MiB

static/images/partners-img-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

static/images/product-bg-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

static/images/product-bg-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

static/images/product-bg-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

static/images/product-bg-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

static/js/common.js
+3
View File
@@ -0,0 +1,3 @@
AOS.init({
once: true
})
static/js/index.js
+74
View File
@@ -0,0 +1,74 @@
var product_swiper = new Swiper(".product-swiper", {
loop: true,
slidesPerView: 4,
spaceBetween: 20,
centeredSlides: true,
grabCursor: true,
breakpoints: {
0: {
slidesPerView: 1,
centeredSlides: true,
},
700: {
slidesPerView: 2,
centeredSlides: true,
},
1050: {
slidesPerView: 3,
centeredSlides: false,
},
1450: {
slidesPerView: 4,
centeredSlides: false,
},
1920: {
slidesPerView: 4,
centeredSlides: false,
},
},
});
$(document).ready(() => {
$(".product-prev-button").click(() => {
console.log("1")
product_swiper.slidePrev()
})
$(".product-next-button").click(() => {
product_swiper.slideNext()
})
})
$('#contactus-submit-button').click(() => {
let comment_title = $('#contactus-first').val() + $('#contactus-last').val()
let comment_contact = $('#contactus-phone').val() + '|' + $('#contactus-address').val()
let comment_content = $('#contactus-content').val()
if ($('#contactus-first').val().length < 1) {
alert('请输入姓')
} else if ($('#contactus-last').val().length < 1) {
alert('请输入名')
} else if ($('#contactus-phone').val().length < 1) {
alert('请输入电话')
} else if ($('#contactus-address').val().length < 1) {
alert('请输入地址')
} else if ($('#contactus-content').val().length < 1) {
alert('请输入您的需求内容')
} else {
$.ajax({
"url": base_url + "/site/comment/add?auth_id=" + "1" + "&auth_key=" + "97a73b7e-9fde-474f-ba2b-ae4703d1e7bb",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json"
},
"data": JSON.stringify({
comment_title: comment_title,
comment_contact: comment_contact,
comment_content: comment_content
}),
}).done(function (response) {
alert(response.errorMessage)
}).catch(() => {
alert('网络错误')
});
}
})
template.html
+22
View File
@@ -0,0 +1,22 @@
<!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>
<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>