qwq/wig
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
qwq
2026-04-20 16:13:01 +08:00
commit 4d53815955
19 changed files with 13340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contact.html
+529
View File
@@ -0,0 +1,529 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
screens: {
'tablet': '1024px',
'sm': '640px',
'md': '768px',
'lg': '1280px',
'xl': '1536px',
},
extend: {
colors: {
primary: '#3b82f6',
secondary: '#0E42D2',
accent: '#69b1ff',
dark: '#0f172a',
light: '#f8fafc',
darkBg: '#ffffff',
darkerBg: '#f8fafc',
darkCard: '#ffffff'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
</style>
<style>
/* ========== WordPress 样式覆盖 ========== */
.contact-section p,
.contact-section p.text-slate-500,
.contact-section .text-slate-500 {
margin: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
line-height: 1.5 !important;
}
.contact-info-card p {
margin: 0 !important;
padding: 0 !important;
line-height: 1.6 !important;
}
.address-card p {
margin: 0 !important;
padding: 0 !important;
margin-top: 4px !important;
line-height: 1.5 !important;
}
.contact-section .section-desc {
margin: 0 auto !important;
padding: 0 !important;
line-height: 1.6 !important;
}
.contact-section div p {
margin-top: 0 !important;
margin-bottom: 2px !important;
}
.contact-section div p:last-child {
margin-bottom: 0 !important;
}
/* ========== 办公地址区域布局 ========== */
.address-section {
display: flex;
gap: 24px;
transition: all 0.4s ease;
}
.address-list {
flex: 0 0 280px;
min-width: 280px;
transition: all 0.4s ease;
}
.map-panel {
flex: 1.5;
opacity: 1;
overflow: hidden;
transition: all 0.4s ease;
border-radius: 12px;
}
.map-panel-inner {
height: 100%;
min-height: 400px;
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);;
overflow: hidden;
position: relative;
}
.map-panel-inner iframe {
width: 100%;
height: 100%;
border: none;
position: absolute;
top: 0;
left: 0;
}
.map-panel-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0));
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
}
.map-panel-header h4 {
color: #0f172a;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
margin: 0 !important;
padding: 0 !important;
}
.map-panel-header h4 i {
margin-right: 8px;
color: #165DFF;
}
/* ========== 地址卡片样式 ========== */
.address-card {
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
position: relative;
}
.address-card:hover {
border-color: #165DFF !important;
background-color: rgba(22, 93, 255, 0.05);
}
.address-card.active {
border-color: #165DFF !important;
background-color: rgba(22, 93, 255, 0.15);
}
.address-card.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #165DFF;
border-radius: 3px 0 0 3px;
}
.address-card .card-icon {
transition: transform 0.3s ease, color 0.3s ease;
}
.address-card.active .card-icon {
transform: scale(1.1);
color: #165DFF;
}
.address-card h4 {
margin: 0 !important;
padding: 0 !important;
}
/* ========== 加载动画 ========== */
.map-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 400px;
color: #9ca3af;
font-size: 14px;
}
.map-loading i {
font-size: 32px;
margin-bottom: 12px;
animation: spin 1s linear infinite;
color: #165DFF;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
.address-section {
flex-direction: column;
}
.address-list {
flex: 1;
min-width: 100%;
}
.map-panel {
flex: none;
height: 300px;
order: -1;
margin-bottom: 16px;
}
.map-panel-inner {
min-height: 300px;
}
}
/* ========== 联系信息区域 ========== */
.contact-info-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}
@media (min-width: 768px) {
.contact-info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.contact-info-card h3 {
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
</style>
</head>
<body class="font-inter bg-darkerBg text-slate-700 min-h-screen">
<!-- 联系我们 -->
<section class="contact-section py-16 md:py-24 bg-darkBg">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-6 text-slate-900" style="margin-bottom: 24px !important;">联系我们</h2>
<p class="section-desc text-slate-500 max-w-2xl mx-auto" style="margin: 0 auto !important;">
如果您想了解更多关于我们的产品和服务，或者有任何合作意向，欢迎随时与我们联系
</p>
</div>
<div class="max-w-6xl mx-auto">
<div class="bg-darkCard shadow-lg p-8 rounded-xl shadow-lg border border-slate-200">
<!-- 联系信息区域 -->
<div class="contact-info-grid mb-8 pb-8 border-b border-slate-200">
<div class="contact-info-card flex items-start space-x-4">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa fa-phone text-primary text-xl"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-slate-900" style="margin: 0 0 8px 0 !important;">热线电话</h3>
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">025-58181916</p>
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">0755-86978994</p>
</div>
</div>
<div class="contact-info-card flex items-start space-x-4">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa fa-user-o text-primary text-xl"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-slate-900" style="margin: 0 0 8px 0 !important;">商务代表</h3>
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">Jack 吴 | 17372837832</p>
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">jack.wu@wingsemitech.com</p>
</div>
</div>
</div>
<!-- 办公地址区域 -->
<div>
<h3 class="text-lg font-semibold mb-6 text-slate-900 flex items-center" style="margin-bottom: 24px !important;">
<i class="fa fa-map-marker text-primary mr-2"></i>
办公地址
<span class="text-xs text-gray-500 ml-2 font-normal">（点击切换查看不同城市）</span>
</h3>
<div class="address-section">
<!-- 地址列表 -->
<div class="address-list space-y-3" id="addressList">
<!-- 广州办公室 - 默认激活 -->
<div class="address-card active p-4 border border-slate-200 rounded-lg"
data-city="guangzhou"
data-title="广州办公室"
data-address="广州市海珠区新港东路2429号三层319-320房">
<div class="flex items-center">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
<i class="fa fa-building-o text-primary card-icon"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">广州市</h4>
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">海珠区新港东路2429号三层319-320房</p>
</div>
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
</div>
</div>
<!-- 上海办公室 -->
<div class="address-card p-4 border border-slate-200 rounded-lg"
data-city="shanghai"
data-title="上海办公室"
data-address="上海市浦东新区郭守敬路498号19号楼502室">
<div class="flex items-center">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
<i class="fa fa-building-o text-primary card-icon"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">上海市</h4>
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">浦东新区郭守敬路498号19号楼502室</p>
</div>
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
</div>
</div>
<!-- 深圳办公室 -->
<div class="address-card p-4 border border-slate-200 rounded-lg"
data-city="shenzhen"
data-title="深圳办公室"
data-address="深圳市南山区科苑路16号东方科技大厦809室">
<div class="flex items-center">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
<i class="fa fa-building-o text-primary card-icon"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">深圳市</h4>
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">南山区科苑路16号东方科技大厦809室</p>
</div>
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
</div>
</div>
<!-- 珠海办公室 -->
<div class="address-card p-4 border border-slate-200 rounded-lg"
data-city="zhuhai"
data-title="珠海办公室"
data-address="珠海市横琴区国际科技创新中心7栋607-1室">
<div class="flex items-center">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
<i class="fa fa-building-o text-primary card-icon"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">珠海市</h4>
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">横琴区国际科技创新中心7栋607-1室</p>
</div>
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
</div>
</div>
</div>
<!-- 地图面板 - 默认显示 -->
<div class="map-panel" id="mapPanel">
<div class="map-panel-inner">
<div class="map-panel-header">
<h4 id="mapTitle">
<i class="fa fa-map-marker"></i>
<span>广州办公室</span>
</h4>
</div>
<div id="mapContent" class="w-full h-full">
<div class="map-loading">
<i class="fa fa-spinner"></i>
<span>地图加载中...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<div class="inline-block px-6 py-3 bg-primary text-slate-900 rounded-lg hover:bg-primary/90 transition-colors shadow-lg hover:shadow-xl font-medium text-lg cursor-pointer popupbox">
联系我们
</div>
</div>
</div>
</div>
</section>
<!-- JavaScript -->
<script>
(function() {
'use strict';
// 地图数据
var mapData = {
'guangzhou': {
coords: '23.094218,113.39969',
address: '广州市海珠区海珠科技大楼'
},
'shanghai': {
coords: '31.209377,121.597416',
address: '上海市浦东新区郭守敬路498号19号楼'
},
'shenzhen': {
coords: '22.547742,113.945943',
address: '深圳市南山区科苑路16号东方科技大厦'
},
'zhuhai': {
coords: '22.131082,113.466422',
address: '珠海市横琴区国际科技创新中心'
}
};
var currentCity = 'guangzhou';
// 加载地图
function loadMap(city, title) {
var mapContent = document.getElementById('mapContent');
var mapTitle = document.getElementById('mapTitle');
if (!mapContent) return;
// 更新标题
if (mapTitle) {
mapTitle.innerHTML = '<i class="fa fa-map-marker"></i><span>' + title + '</span>';
}
// 如果是同一个城市，不重新加载
if (city === currentCity && mapContent.querySelector('iframe')) {
return;
}
// 显示加载状态
mapContent.innerHTML = '<div class="map-loading"><i class="fa fa-spinner"></i><span>地图加载中...</span></div>';
// 使用腾讯地图
var data = mapData[city];
if (data) {
var encodedAddress = encodeURIComponent(data.address);
var mapUrl = 'https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' + data.coords + ';title:隼瞻科技;addr:' + encodedAddress + '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
// 延迟加载iframe
setTimeout(function() {
mapContent.innerHTML = '<iframe src="' + mapUrl + '" style="width:100%;height:100%;border:none;position:absolute;top:0;left:0;" allowfullscreen loading="lazy"></iframe>';
}, 300);
}
currentCity = city;
}
// 初始化地址卡片点击事件
function initAddressCards() {
var addressCards = document.querySelectorAll('.address-card');
addressCards.forEach(function(card) {
card.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
var city = this.getAttribute('data-city');
var title = this.getAttribute('data-title');
// 如果点击的是当前已选中的城市，不做任何操作
if (city === currentCity) {
return;
}
// 移除其他卡片的激活状态
addressCards.forEach(function(c) {
c.classList.remove('active');
});
// 激活当前卡片
this.classList.add('active');
// 加载地图
loadMap(city, title);
});
});
}
// 初始化默认地图
function initDefaultMap() {
setTimeout(function() {
loadMap('guangzhou', '广州办公室');
}, 500);
}
function initContact() {
// 初始化地址卡片
initAddressCards();
// 初始化默认地图
initDefaultMap();
}
// 确保DOM加载完成后执行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initContact);
} else {
initContact();
}
})();
</script>
</body>
</html>