diff --git a/images/slide1.jpg b/images/slide1.jpg new file mode 100644 index 0000000..216cc01 Binary files /dev/null and b/images/slide1.jpg differ diff --git a/images/slide2.jpg b/images/slide2.jpg new file mode 100644 index 0000000..b50a57b Binary files /dev/null and b/images/slide2.jpg differ diff --git a/images/slide3.jpg b/images/slide3.jpg new file mode 100644 index 0000000..3ef83e6 Binary files /dev/null and b/images/slide3.jpg differ diff --git a/images/slide4.jpg b/images/slide4.jpg new file mode 100644 index 0000000..eb1b561 Binary files /dev/null and b/images/slide4.jpg differ diff --git a/images/slide5.jpg b/images/slide5.jpg new file mode 100644 index 0000000..a2cd556 Binary files /dev/null and b/images/slide5.jpg differ diff --git a/index.html b/index.html index c303b2c..a1dfb43 100644 --- a/index.html +++ b/index.html @@ -663,7 +663,7 @@ } } - /* 更新移动的二维码样式 */ + /* 更新移动的二维码样 */ @media (max-width: 768px) { .qr-row .social-item { width: 100%; @@ -833,7 +833,7 @@ margin-bottom: 15px; } - /* 确保所有卡片内容紧凑排列 */ + /* ��保所有卡片内容紧凑排列 */ .social-item { gap: 10px; } @@ -854,6 +854,329 @@ width: fit-content; align-self: center; } + + .factory-showcase { + padding: 40px 20px; + background: #f5f5f5; + } + + .factory-title { + text-align: center; + font-size: 32px; + color: #333; + margin-bottom: 40px; + } + + .factory-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + max-width: 1200px; + margin: 0 auto; + } + + .factory-item { + background: white; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + transition: transform 0.3s ease; + } + + .factory-item:hover { + transform: translateY(-5px); + } + + .factory-item img { + width: 100%; + height: 250px; + object-fit: cover; + } + + .factory-info { + padding: 20px; + } + + .factory-info h3 { + font-size: 20px; + color: #333; + margin-bottom: 10px; + } + + .factory-info p { + color: #666; + line-height: 1.6; + } + + @media (max-width: 768px) { + .factory-grid { + grid-template-columns: 1fr; + } + + .factory-item img { + height: 200px; + } + } + + .slideshow-section { + padding: 40px 0; + background: #f5f5f5; + overflow: hidden; + } + + .slideshow-container { + max-width: 1200px; + position: relative; + margin: auto; + overflow: hidden; + } + + .slides-wrapper { + display: flex; + transition: transform 0.5s ease; + width: 500%; /* 5张图片，每张占20% */ + } + + .slides { + flex: 0 0 20%; /* 每张图片占wrapper的20% */ + width: 20%; + } + + .slides img { + width: 100%; + height: 600px; + object-fit: cover; + border-radius: 8px; + } + + @media (max-width: 768px) { + .slides img { + height: 300px; + } + } + + .dots-container { + text-align: center; + padding: 10px 0; + position: absolute; + bottom: 10px; + width: 100%; + z-index: 2; + } + + .dot { + cursor: pointer; + height: 10px; + width: 10px; + margin: 0 5px; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 50%; + display: inline-block; + transition: background-color 0.3s ease; + } + + .dot.active { + background-color: #fff; + transform: scale(1.2); + } + + @media (max-width: 768px) { + .dot { + height: 8px; + width: 8px; + margin: 0 4px; + } + } + + /* 修改 header 的样式 */ + header { + background: linear-gradient(145deg, #2c3e50 0%, #3498db 100%); /* 恢复渐变背景 */ + padding: 15px 20px; + width: 100%; + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; + position: static; /* 保持静态定位 */ + box-shadow: 0 2px 5px rgba(0,0,0,0.2); + } + + .logo { + color: #fff; /* 恢复logo文字颜色 */ + font-size: 24px; + font-weight: bold; + } + + nav ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: 20px; + } + + nav ul li a { + color: #fff; /* 恢复导航链接文字颜色 */ + text-decoration: none; + font-size: 16px; + transition: color 0.3s ease; + } + + nav ul li a:hover { + color: #f1c40f; /* 鼠标悬停时的颜色 */ + } + + .current-language { + display: flex; + align-items: center; + gap: 5px; + color: #fff; /* 语言选择器文字颜色 */ + } + + .current-flag { + width: 20px; + height: 20px; + border-radius: 50%; + } + + .slides { + position: relative; + } + + .slide-caption { + position: absolute; + bottom: 60px; + left: 0; + right: 0; + text-align: center; + color: #fff; + padding: 20px; + background: rgba(0, 0, 0, 0.5); + z-index: 2; + } + + .slide-caption h3 { + font-size: 24px; + margin: 0 0 10px 0; + font-weight: bold; + } + + .slide-caption p { + font-size: 16px; + margin: 0; + line-height: 1.4; + } + + @media (max-width: 768px) { + .slide-caption { + bottom: 40px; + padding: 10px; + } + + .slide-caption h3 { + font-size: 18px; + margin-bottom: 5px; + } + + .slide-caption p { + font-size: 14px; + } + } + + .back-to-top { + position: fixed; + right: 30px; + bottom: 80px; + width: 50px; + height: 50px; + background: linear-gradient(145deg, #2c3e50 0%, #3498db 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: white; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); + z-index: 1000; + } + + .back-to-top.show { + opacity: 1; + visibility: visible; + } + + .back-to-top:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(0,0,0,0.3); + } + + .back-to-top i { + font-size: 20px; + } + + @media (max-width: 768px) { + .back-to-top { + right: 20px; + bottom: 60px; + width: 40px; + height: 40px; + } + + .back-to-top i { + font-size: 16px; + } + } + + /* 添加或修改语言选择器相关的样式 */ + .language-selector { + position: relative; + z-index: 1000; /* 确保在轮播图之上 */ + } + + .language-menu { + position: absolute; + top: 100%; + right: 0; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + padding: 10px 0; + min-width: 150px; + z-index: 1000; /* 确保下拉菜单在轮播图之上 */ + display: none; + } + + .language-menu.show { + display: block; + } + + .language-option { + display: flex; + align-items: center; + padding: 8px 15px; + cursor: pointer; + transition: background 0.3s ease; + } + + .language-option:hover { + background: #f5f5f5; + } + + .language-option img { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + } + + /* 调整轮播图的z-index，确保它低于语言选择器 */ + .slideshow-section { + position: relative; + z-index: 1; /* 降低轮播图的层级 */ + } @@ -878,15 +1201,52 @@ -