Hermes CI Fix
9569fea59e
- images/*.webp 已生成 (WebP格式) - 弃用原始PNG (未被页面引用) - 创建 optimize-images.py 优化管道
1097 lines
48 KiB
Plaintext
1097 lines
48 KiB
Plaintext
<html lang="zh-CN"><head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>陕西博海网络科技 · 专业IT服务</title>
|
||
<meta name="description" content="陕西博海网络科技 — 电脑维修、打印机维修、网络工程、电子产品销售、Web开发、IT运维，一站式IT解决方案。">
|
||
<meta name="keywords" content="榆林电脑维修,定边IT服务,陕西博海网络科技,电脑维修,打印机维修,网络工程,IT运维,Web开发,电子产品销售,榆林IT服务,定边电脑维修">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||
<meta http-equiv="Pragma" content="no-cache">
|
||
<meta http-equiv="Expires" content="0">
|
||
<meta property="og:title" content="陕西博海网络科技 · 专业IT服务">
|
||
<meta property="og:description" content="电脑维修、打印机维修、网络工程、电子产品销售、Web开发、IT运维 — 一站式IT解决方案，30分钟响应，2小时上门。">
|
||
<meta property="og:image" content="https://sxbh.ltd/og-image.png">
|
||
<meta property="og:url" content="https://sxbh.ltd">
|
||
<meta property="og:type" content="website">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="陕西博海网络科技 · 专业IT服务">
|
||
<meta name="twitter:description" content="电脑维修、打印机维修、网络工程、电子产品销售、Web开发、IT运维 — 一站式IT解决方案。">
|
||
<!-- Fonts: Inter + Noto Serif SC (通过国内镜像加速) -->
|
||
<link rel="preconnect" href="https://fonts.loli.net">
|
||
<link rel="preconnect" href="https://gstatic.loli.net" crossorigin="">
|
||
<link href="https://fonts.loli.net/css2?family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ===== Reset & Variables ===== */
|
||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||
html { scroll-behavior:smooth; }
|
||
|
||
:root {
|
||
--navy-900:#0a132e;
|
||
--navy-800:#0f1f4a;
|
||
--navy-700:#1a3380;
|
||
--teal-500:#06b6d4;
|
||
--teal-400:#22d3ee;
|
||
--amber-400:#fbbf24;
|
||
--amber-500:#f59e0b;
|
||
--white:#ffffff;
|
||
--gray-50:#f8fafc;
|
||
--gray-100:#f1f5f9;
|
||
--gray-200:#e2e8f0;
|
||
--gray-300:#cbd5e1;
|
||
--gray-400:#94a3b8;
|
||
--gray-500:#64748b;
|
||
--gray-600:#475569;
|
||
|
||
--font-display:'Noto Serif SC','PingFang SC',serif;
|
||
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
|
||
--font-logo:'Noto Serif SC','KaiTi',cursive;
|
||
|
||
--radius-sm:8px;
|
||
--radius-md:12px;
|
||
--radius-lg:20px;
|
||
|
||
--shadow-sm:0 1px 3px rgba(0,0,0,.06);
|
||
--shadow-md:0 4px 16px rgba(0,0,0,.08);
|
||
--shadow-lg:0 8px 32px rgba(0,0,0,.12);
|
||
--transition:all .3s cubic-bezier(.4,0,.2,1);
|
||
}
|
||
|
||
body {
|
||
font-family:var(--font-body);
|
||
background:var(--gray-50);
|
||
color:var(--navy-900);
|
||
line-height:1.6;
|
||
overflow-x:hidden;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
|
||
/* ===== SVG icon helper ===== */
|
||
.icon-svg { display:inline-flex; align-items:center; justify-content:center; }
|
||
.icon-svg svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
|
||
|
||
/* ===== HEADER ===== */
|
||
header {
|
||
position:fixed; top:0; left:0; right:0; z-index:100;
|
||
background:rgba(255,255,255,.88);
|
||
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
|
||
border-bottom:1px solid var(--gray-200);
|
||
transition:var(--transition);
|
||
}
|
||
.header-inner {
|
||
max-width:1200px; margin:0 auto;
|
||
display:flex; align-items:center; justify-content:space-between;
|
||
padding:0 24px; height:68px;
|
||
}
|
||
.logo {
|
||
font-size:20px; font-weight:700; color:var(--navy-800);
|
||
display:flex; align-items:center; gap:12px;
|
||
text-decoration:none;
|
||
}
|
||
.logo-icon {
|
||
width:36px; height:36px;
|
||
background:linear-gradient(135deg,var(--navy-700),var(--teal-500));
|
||
border-radius:10px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
color:#fff; font-size:16px; font-weight:700;
|
||
}
|
||
.logo span { color:var(--gray-400); font-weight:400; font-size:14px; }
|
||
nav { display:flex; gap:36px; }
|
||
nav a {
|
||
color:var(--gray-600); text-decoration:none; font-size:14px;
|
||
font-weight:500; position:relative; transition:color .2s;
|
||
padding:4px 0;
|
||
}
|
||
nav a::after {
|
||
content:''; position:absolute; bottom:-2px; left:0; right:0;
|
||
height:2px; background:var(--teal-500); border-radius:1px;
|
||
transform:scaleX(0); transition:transform .2s;
|
||
}
|
||
nav a:hover { color:var(--navy-800); }
|
||
nav a:hover::after { transform:scaleX(1); }
|
||
.mobile-toggle {
|
||
display:none; background:none; border:none; cursor:pointer;
|
||
color:var(--gray-600); padding:4px;
|
||
}
|
||
.mobile-toggle svg { width:24px; height:24px; }
|
||
|
||
/* ===== HERO ===== */
|
||
.hero {
|
||
padding:140px 24px 100px;
|
||
position:relative; overflow:hidden; color:var(--white);
|
||
background:
|
||
linear-gradient(135deg,rgba(10,19,46,.92) 0%,rgba(15,31,74,.75) 50%,rgba(26,51,128,.6) 100%),
|
||
url('https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1920')
|
||
center/cover no-repeat fixed;
|
||
}
|
||
.hero::before {
|
||
content:''; position:absolute; top:-40%; right:-10%; width:60%; height:180%;
|
||
background:radial-gradient(ellipse,rgba(6,182,212,.1) 0%,transparent 70%);
|
||
pointer-events:none;
|
||
}
|
||
.hero::after {
|
||
content:''; position:absolute; bottom:0; left:0; right:0; height:100px;
|
||
background:linear-gradient(to top,var(--gray-50),transparent);
|
||
}
|
||
.hero-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
|
||
.hero-badge {
|
||
display:inline-flex; align-items:center; gap:8px;
|
||
padding:7px 18px; border-radius:20px;
|
||
background:rgba(255,255,255,.1); font-size:13px; font-weight:500; margin-bottom:20px;
|
||
border:1px solid rgba(255,255,255,.12);
|
||
backdrop-filter:blur(8px);
|
||
}
|
||
.hero-badge svg { width:16px; height:16px; color:var(--amber-400); }
|
||
.hero h1 {
|
||
font-family:var(--font-display);
|
||
font-size:clamp(38px,5vw,60px); font-weight:700;
|
||
line-height:1.12; margin-bottom:18px;
|
||
}
|
||
.hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--amber-400),var(--teal-400)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
|
||
/* Fallback for browsers that don't support bg-clip:text */
|
||
@supports not (background-clip:text) {
|
||
.hero h1 em { color:var(--amber-400); -webkit-text-fill-color:var(--amber-400); }
|
||
}
|
||
.hero p {
|
||
font-size:17px; color:rgba(255,255,255,.75);
|
||
max-width:580px; margin-bottom:34px; line-height:1.75;
|
||
}
|
||
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
|
||
.btn {
|
||
display:inline-flex; align-items:center; gap:8px;
|
||
padding:14px 30px; border-radius:var(--radius-sm); font-size:15px;
|
||
font-weight:600; text-decoration:none; transition:var(--transition);
|
||
border:none; cursor:pointer; font-family:var(--font-body);
|
||
}
|
||
.btn svg { width:18px; height:18px; }
|
||
.btn-primary {
|
||
background:var(--white); color:var(--navy-800);
|
||
box-shadow:0 4px 14px rgba(0,0,0,.15);
|
||
}
|
||
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
|
||
.btn-outline {
|
||
background:transparent; color:var(--white);
|
||
border:1.5px solid rgba(255,255,255,.25);
|
||
}
|
||
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }
|
||
|
||
/* ===== SECTION ===== */
|
||
section { padding:80px 24px; }
|
||
.section-inner { max-width:1200px; margin:0 auto; }
|
||
.section-label {
|
||
display:inline-flex; align-items:center; gap:6px;
|
||
font-size:12px; font-weight:600; letter-spacing:2px;
|
||
text-transform:uppercase; color:var(--teal-500); margin-bottom:8px;
|
||
}
|
||
.section-label svg { width:14px; height:14px; }
|
||
.section-title {
|
||
font-family:var(--font-display);
|
||
font-size:clamp(26px,3.5vw,38px); font-weight:700;
|
||
color:var(--navy-800); margin-bottom:10px;
|
||
}
|
||
.section-desc {
|
||
font-size:16px; color:var(--gray-500);
|
||
max-width:560px; margin-bottom:44px; line-height:1.7;
|
||
}
|
||
|
||
/* ===== SERVICES ===== */
|
||
.services-grid {
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
|
||
gap:24px;
|
||
}
|
||
.service-card {
|
||
background:var(--white); border-radius:var(--radius-md); padding:32px;
|
||
box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
|
||
transition:var(--transition);
|
||
}
|
||
.service-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300); }
|
||
.service-icon {
|
||
width:48px; height:48px; border-radius:12px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
margin-bottom:18px;
|
||
}
|
||
.service-icon svg { width:24px; height:24px; }
|
||
.service-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
|
||
.service-card p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:14px; }
|
||
.service-tags { display:flex; flex-wrap:wrap; gap:6px; }
|
||
.service-tags span {
|
||
font-size:12px; padding:3px 10px; border-radius:6px;
|
||
background:var(--gray-100); color:var(--gray-500);
|
||
}
|
||
|
||
/* Link wrapper around service card */
|
||
.service-card-link {
|
||
text-decoration:none; color:inherit; display:block;
|
||
}
|
||
.service-card-link:hover .service-card {
|
||
box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300);
|
||
}
|
||
|
||
/* ===== PRODUCTS ===== */
|
||
.products-grid {
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
|
||
gap:24px;
|
||
}
|
||
.product-card {
|
||
background:var(--white); border-radius:var(--radius-md); overflow:hidden;
|
||
box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
|
||
transition:var(--transition); display:flex; flex-direction:column;
|
||
}
|
||
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
|
||
.product-img {
|
||
height:130px; display:flex; align-items:center; justify-content:center;
|
||
background:linear-gradient(135deg,#eef2ff,#e0e7ff);
|
||
}
|
||
.product-img svg { width:44px; height:44px; }
|
||
.product-body { padding:24px; flex:1; display:flex; flex-direction:column; }
|
||
.product-body h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
|
||
.product-body p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:12px; flex:1; }
|
||
.product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
|
||
.product-tags span {
|
||
font-size:12px; padding:3px 10px; border-radius:6px;
|
||
background:var(--gray-100); color:var(--gray-500);
|
||
}
|
||
.product-btn {
|
||
display:inline-flex; align-items:center; gap:6px;
|
||
padding:10px 20px; border-radius:6px; font-size:14px; font-weight:600;
|
||
background:var(--navy-800); color:var(--white); text-decoration:none;
|
||
transition:var(--transition); border:none; cursor:pointer;
|
||
font-family:var(--font-body);
|
||
}
|
||
.product-btn svg { width:16px; height:16px; }
|
||
.product-btn:hover { background:var(--navy-700); }
|
||
|
||
/* ===== WHY US ===== */
|
||
.why-section { background:var(--white); }
|
||
.why-section .section-inner { text-align:center; }
|
||
.why-section .section-desc { margin:0 auto 44px; }
|
||
.why-grid {
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
|
||
gap:24px;
|
||
}
|
||
.why-card {
|
||
text-align:center; padding:44px 28px;
|
||
background:var(--gray-50); border-radius:var(--radius-md);
|
||
border:1px solid var(--gray-200); transition:var(--transition);
|
||
}
|
||
.why-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300); }
|
||
.why-icon {
|
||
width:48px; height:48px; border-radius:14px;
|
||
display:inline-flex; align-items:center; justify-content:center;
|
||
margin-bottom:16px;
|
||
}
|
||
.why-icon svg { width:24px; height:24px; }
|
||
.why-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
|
||
.why-card p { font-size:14px; color:var(--gray-500); line-height:1.8; }
|
||
|
||
/* ===== PERSPECTIVE (博海视角) ===== */
|
||
.perspective-section {
|
||
background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
|
||
border-top: 1px solid var(--gray-200);
|
||
}
|
||
.perspective-section .section-desc { margin:0 auto 44px; text-align:left; }
|
||
.perspective-grid {
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
|
||
gap:20px;
|
||
}
|
||
.perspective-card {
|
||
background:var(--white); border-radius:var(--radius-md);
|
||
padding:24px; border:1px solid var(--gray-200);
|
||
box-shadow:var(--shadow-sm);
|
||
transition:var(--transition);
|
||
display:flex; flex-direction:column;
|
||
}
|
||
.perspective-card:hover {
|
||
box-shadow:var(--shadow-md); transform:translateY(-4px);
|
||
border-color:var(--amber-400);
|
||
}
|
||
.perspective-card .cat {
|
||
font-size:11px; font-weight:600; letter-spacing:1px;
|
||
text-transform:uppercase; color:var(--teal-500); margin-bottom:6px;
|
||
}
|
||
.perspective-card h3 {
|
||
font-size:16px; font-weight:600; color:var(--navy-800);
|
||
margin-bottom:8px; line-height:1.4;
|
||
}
|
||
.perspective-card .meta {
|
||
font-size:12px; color:var(--gray-400); margin-top:auto;
|
||
}
|
||
.perspective-link {
|
||
display:flex; align-items:center; gap:6px;
|
||
font-size:13px; font-weight:500; color:var(--navy-700);
|
||
text-decoration:none; margin-top:12px;
|
||
transition:color .2s;
|
||
}
|
||
.perspective-link:hover { color:var(--teal-500); }
|
||
.perspective-link svg { width:14px; height:14px; }
|
||
.perspective-actions {
|
||
margin-top:36px; text-align:center;
|
||
}
|
||
.perspective-btn {
|
||
display:inline-flex; align-items:center; gap:8px;
|
||
padding:12px 28px; border-radius:var(--radius-sm);
|
||
font-size:15px; font-weight:600; text-decoration:none;
|
||
background:var(--navy-800); color:var(--white);
|
||
transition:var(--transition); border:none; cursor:pointer;
|
||
font-family:var(--font-body);
|
||
}
|
||
.perspective-btn svg { width:16px; height:16px; }
|
||
.perspective-btn:hover {
|
||
background:var(--navy-700); transform:translateY(-2px);
|
||
box-shadow:0 6px 20px rgba(15,31,74,.2);
|
||
}
|
||
|
||
/* ===== CONTACT ===== */
|
||
.contact-section {
|
||
background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 100%);
|
||
color:var(--white);
|
||
position:relative; overflow:hidden;
|
||
}
|
||
.contact-section::before {
|
||
content:''; position:absolute; top:-30%; right:-15%; width:50%; height:150%;
|
||
background:radial-gradient(ellipse,rgba(6,182,212,.06) 0%,transparent 70%);
|
||
pointer-events:none;
|
||
}
|
||
.contact-section .section-title { color:var(--white); }
|
||
.contact-section .section-desc { color:rgba(255,255,255,.55); }
|
||
.contact-grid {
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
|
||
gap:24px;
|
||
position:relative; z-index:1;
|
||
}
|
||
.contact-item {
|
||
padding:24px; border-radius:var(--radius-md);
|
||
background:rgba(255,255,255,.05);
|
||
border:1px solid rgba(255,255,255,.06);
|
||
transition:var(--transition);
|
||
}
|
||
.contact-item:hover { background:rgba(255,255,255,.08); transform:translateY(-2px); }
|
||
.contact-item .icon {
|
||
width:40px; height:40px; border-radius:10px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
margin-bottom:14px;
|
||
background:rgba(6,182,212,.12);
|
||
color:var(--teal-400);
|
||
}
|
||
.contact-item .icon svg { width:20px; height:20px; }
|
||
.contact-item h4 {
|
||
font-size:13px; font-weight:500; color:rgba(255,255,255,.45);
|
||
margin-bottom:6px; letter-spacing:1px; text-transform:uppercase;
|
||
}
|
||
.contact-item .value {
|
||
font-size:16px; color:var(--white); font-weight:500;
|
||
}
|
||
.contact-item .value a { color:var(--amber-400); text-decoration:none; }
|
||
.contact-item .value a:hover { text-decoration:underline; }
|
||
.contact-item .value .divider { color:rgba(255,255,255,.2); margin:0 10px; font-size:14px; }
|
||
.contact-item .sub { font-size:13px; color:rgba(255,255,255,.3); margin-top:4px; }
|
||
|
||
/* ===== FOOTER ===== */
|
||
footer {
|
||
background:#060d1f; color:rgba(255,255,255,.35);
|
||
padding:32px 24px; text-align:center; font-size:13px;
|
||
}
|
||
footer a { color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; }
|
||
footer a:hover { color:var(--teal-400); }
|
||
footer .sep { margin:0 10px; color:rgba(255,255,255,.1); }
|
||
|
||
/* ===== CONSULT MODAL ===== */
|
||
.consult-overlay {
|
||
position:fixed; top:0; left:0; right:0; bottom:0;
|
||
background:rgba(0,0,0,.5); z-index:1000;
|
||
display:flex; align-items:center; justify-content:center;
|
||
opacity:0; visibility:hidden;
|
||
transition:opacity .3s, visibility .3s;
|
||
padding:24px;
|
||
}
|
||
.consult-overlay.open { opacity:1; visibility:visible; }
|
||
.consult-modal {
|
||
background:#fff; border-radius:16px; padding:32px;
|
||
max-width:440px; width:100%;
|
||
box-shadow:0 24px 48px rgba(0,0,0,.2);
|
||
position:relative; transform:scale(.95);
|
||
transition:transform .3s;
|
||
}
|
||
.consult-overlay.open .consult-modal { transform:scale(1); }
|
||
.consult-close {
|
||
position:absolute; top:12px; right:16px;
|
||
background:none; border:none;
|
||
font-size:28px; color:var(--gray-400);
|
||
cursor:pointer; line-height:1;
|
||
}
|
||
.consult-close:hover { color:var(--gray-600); }
|
||
.consult-modal h3 {
|
||
font-family:"Noto Serif SC",serif;
|
||
font-size:22px; font-weight:700; color:var(--navy-900);
|
||
margin-bottom:6px;
|
||
}
|
||
.consult-desc { font-size:14px; color:var(--gray-500); margin-bottom:24px; }
|
||
.form-group { margin-bottom:16px; }
|
||
.form-group label {
|
||
display:block; font-size:13px; font-weight:600;
|
||
color:var(--navy-800); margin-bottom:6px;
|
||
}
|
||
.form-group input,.form-group textarea {
|
||
width:100%; padding:10px 14px;
|
||
border:1px solid var(--gray-300); border-radius:8px;
|
||
font-size:14px; font-family:inherit;
|
||
transition:border-color .2s;
|
||
background:#fff;
|
||
}
|
||
.form-group input:focus,.form-group textarea:focus {
|
||
outline:none; border-color:var(--teal-500);
|
||
box-shadow:0 0 0 3px rgba(6,182,212,.12);
|
||
}
|
||
.consult-submit {
|
||
width:100%; padding:12px; border:none; border-radius:8px;
|
||
background:linear-gradient(135deg,var(--teal-500),#0891b2);
|
||
color:#fff; font-size:15px; font-weight:600;
|
||
cursor:pointer; transition:opacity .2s;
|
||
}
|
||
.consult-submit:hover { opacity:.9; }
|
||
.consult-submit:disabled { opacity:.5; cursor:not-allowed; }
|
||
.consult-tip { text-align:center; font-size:13px; color:var(--gray-400); margin-top:12px; }
|
||
.consult-tip strong { color:var(--teal-600); }
|
||
.consult-success { text-align:center; padding:20px 0; }
|
||
.consult-success .success-icon {
|
||
width:56px; height:56px; border-radius:50%;
|
||
background:#10b981; color:#fff;
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:24px; margin:0 auto 16px;
|
||
}
|
||
.consult-success h4 { font-size:18px; color:var(--navy-900); margin-bottom:6px; }
|
||
.consult-success p { font-size:14px; color:var(--gray-500); }
|
||
|
||
/* ===== FLOAT CONSULT ===== */
|
||
.float-btn {
|
||
position:fixed; bottom:28px; right:28px; z-index:99;
|
||
width:56px; height:56px; border-radius:50%;
|
||
display:flex; align-items:center; justify-content:center;
|
||
text-decoration:none;
|
||
background:linear-gradient(135deg,var(--teal-500),#0891b2);
|
||
color:var(--white);
|
||
box-shadow:0 6px 20px rgba(6,182,212,.35);
|
||
transition:var(--transition);
|
||
border:none; cursor:pointer;
|
||
}
|
||
.float-btn svg { width:26px; height:26px; }
|
||
.float-btn:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 28px rgba(6,182,212,.45); }
|
||
|
||
/* ===== ANIMATIONS ===== */
|
||
.fade-in { opacity:0; transform:translateY(30px); transition:all .7s ease-out; }
|
||
.fade-in.visible { opacity:1; transform:translateY(0); }
|
||
.fade-in-d1 { transition-delay:.08s; }
|
||
.fade-in-d2 { transition-delay:.16s; }
|
||
.fade-in-d3 { transition-delay:.24s; }
|
||
.fade-in-d4 { transition-delay:.32s; }
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width:768px) {
|
||
nav { display:none; }
|
||
nav.open {
|
||
display:flex; flex-direction:column; position:absolute; top:68px;
|
||
left:0; right:0; background:rgba(255,255,255,.98);
|
||
backdrop-filter:blur(16px);
|
||
padding:16px 24px; border-bottom:1px solid var(--gray-200);
|
||
gap:16px;
|
||
}
|
||
.mobile-toggle { display:flex; }
|
||
.hero { padding:120px 24px 70px; background-attachment:scroll; }
|
||
.hero-actions { flex-direction:column; }
|
||
.btn { width:100%; justify-content:center; }
|
||
.services-grid { grid-template-columns:1fr; }
|
||
.contact-grid { grid-template-columns:1fr; }
|
||
.perspective-grid { grid-template-columns:1fr; }
|
||
}
|
||
|
||
@media (max-width:480px) {
|
||
.hero h1 { font-size:clamp(28px,8vw,36px); }
|
||
.logo { font-size:17px; }
|
||
.logo span { display:none; }
|
||
}
|
||
</style>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"name": "陕西博海网络科技有限公司",
|
||
"url": "https://sxbh.ltd",
|
||
"telephone": "+86-912-4223980",
|
||
"email": "service@sxbh.ltd",
|
||
"description": "电脑维修、打印机维修、网络工程、电子产品销售、Web开发、IT运维一站式IT解决方案",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"addressLocality": "定边县",
|
||
"addressRegion": "榆林市",
|
||
"addressCountry": "CN",
|
||
"streetAddress": "二道西街"
|
||
},
|
||
"areaServed": ["定边县", "榆林市"],
|
||
"openingHours": "Mo-Sa 08:30-18:00",
|
||
"priceRange": "¥¥"
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<header>
|
||
<div class="header-inner">
|
||
<a href="#" class="logo">
|
||
<div class="logo-icon">博</div>
|
||
博海网络科技 <span>· BHWL</span>
|
||
</a>
|
||
<nav id="nav">
|
||
<a href="#services">服务项目</a>
|
||
<a href="#products">产品销售</a>
|
||
<a href="#perspective">博海视角</a>
|
||
<a href="#why">为什么选择我们</a>
|
||
<a href="#contact">联系我们</a>
|
||
</nav>
|
||
<button class="mobile-toggle" onclick="document.getElementById('nav').classList.toggle('open')" aria-label="菜单">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<div class="hero-badge fade-in visible">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5C7 4 7 7 9 7c0-2.5 2-5 5.5-4 .5 1 .5 2.5 1 3 2 .5 3 2 3 4 0 .5-2.5 2.5-2.5 4"></path>
|
||
<path d="M13 17H8l-2 5h10l-2-5"></path>
|
||
<path d="M20 11a2.5 2.5 0 1 0-3 4.2M10 13a2.5 2.5 0 1 0-1-4.7"></path>
|
||
</svg>
|
||
定边本地专业IT服务商 · 25年+行业经验
|
||
</div>
|
||
<h1 class="fade-in visible fade-in-d1">您的<em>专业IT服务</em>管家</h1>
|
||
<p class="fade-in visible fade-in-d2">深耕IT服务与数字化领域，集设备维修、产品销售、网络工程、Web应用开发于一体，为企业和个人提供一站式IT解决方案。</p>
|
||
<div class="hero-actions fade-in visible fade-in-d3">
|
||
<a href="tel:09124223980" class="btn btn-primary">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 7.32 6.18 2 2 0 0 1 9.5 4.5h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L13.5 13.5a12.06 12.06 0 0 0 5.67 5.67l1.78-1.78a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||
</svg>
|
||
立即咨询：0912-4223980
|
||
</a>
|
||
<a href="#services" class="btn btn-outline">
|
||
查看服务项目
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SERVICES -->
|
||
<section id="services">
|
||
<div class="section-inner">
|
||
<div class="section-label fade-in">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||
</svg>
|
||
OUR SERVICES
|
||
</div>
|
||
<h2 class="section-title fade-in">我们的服务</h2>
|
||
<p class="section-desc fade-in">覆盖您全方位IT需求的专业服务，30分钟响应，2小时上门</p>
|
||
<div class="services-grid">
|
||
|
||
<!-- 电脑维修 -->
|
||
<div class="service-card fade-in fade-in-d1">
|
||
<div class="service-icon" style="background:#ede9fe;color:#7c3aed;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||
</svg>
|
||
</div>
|
||
<h3>电脑维修</h3>
|
||
<p>台式机/笔记本故障诊断、硬件更换升级、系统安装优化、数据备份恢复、清灰保养</p>
|
||
<div class="service-tags">
|
||
<span>硬件维修</span><span>系统安装</span><span>数据恢复</span><span>清灰保养</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 打印机维修 -->
|
||
<div class="service-card fade-in fade-in-d1">
|
||
<div class="service-icon" style="background:#e0f2fe;color:#0284c7;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="6 9 6 2 18 2 18 9"></polyline>
|
||
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
|
||
<rect x="6" y="14" width="12" height="8"></rect>
|
||
</svg>
|
||
</div>
|
||
<h3>打印机维修</h3>
|
||
<p>激光/喷墨打印机维修、驱动安装调试、加粉换墨、不进纸修复、网络打印配置</p>
|
||
<div class="service-tags">
|
||
<span>打印机维修</span><span>加粉换墨</span><span>驱动安装</span><span>网络打印</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 网络工程监控 -->
|
||
<div class="service-card fade-in fade-in-d2">
|
||
<div class="service-icon" style="background:#dcfce7;color:#16a34a;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3>网络工程监控</h3>
|
||
<p>综合布线、无线覆盖、企业组网、监控安防、弱电工程、机房建设</p>
|
||
<div class="service-tags">
|
||
<span>综合布线</span><span>无线覆盖</span><span>监控安防</span><span>弱电工程</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 行业应用开发 -->
|
||
<a href="https://learn.sxbh.ltd" target="_blank" class="service-card-link">
|
||
<div class="service-card fade-in fade-in-d2">
|
||
<div class="service-icon" style="background:#fff7ed;color:#ea580c;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="5" y="2" width="14" height="20" rx="2"></rect>
|
||
<line x1="12" y1="18" x2="12" y2="18"></line>
|
||
</svg>
|
||
</div>
|
||
<h3>行业应用开发</h3>
|
||
<p>企业官网、管理后台、小程序、移动应用、行业管理系统定制、网站运维升级</p>
|
||
<div class="service-tags">
|
||
<span style="display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;background:#0f1f4a;color:#fff;font-size:13px;font-weight:500;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
||
</svg>
|
||
全栈学习网
|
||
</span>
|
||
<span style="display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;background:#f1f5f9;color:#94a3b8;font-size:13px;font-weight:500;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;">
|
||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||
</svg>
|
||
管理会计OS
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- IT运维服务 -->
|
||
<div class="service-card fade-in fade-in-d3">
|
||
<div class="service-icon" style="background:#fce7f3;color:#db2777;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="3"></circle>
|
||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3>IT运维服务</h3>
|
||
<p>驻场IT技术支持、服务器运维、网站建设维护、办公设备年度维保、IT规划咨询</p>
|
||
<div class="service-tags">
|
||
<span>驻场运维</span><span>服务器维护</span><span>IT规划</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRODUCTS -->
|
||
<section id="products" style="background:var(--gray-100);">
|
||
<div class="section-inner">
|
||
<div class="section-label fade-in">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
||
</svg>
|
||
PRODUCTS
|
||
</div>
|
||
<h2 class="section-title fade-in">产品销售</h2>
|
||
<p class="section-desc fade-in">正品行货，品质保障，电话下单2小时送达，免费安装</p>
|
||
<div class="products-grid">
|
||
|
||
<!-- 联想电脑 -->
|
||
<div class="product-card fade-in fade-in-d1">
|
||
<div class="product-img" style="background:linear-gradient(135deg,#eef2ff,#e0e7ff);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:#6366f1;">
|
||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||
</svg>
|
||
</div>
|
||
<div class="product-body">
|
||
<h3>联想电脑</h3>
|
||
<p>联想 ThinkPad / 小新 / 拯救者系列笔记本、扬天 / ThinkCentre 台式机、工作站</p>
|
||
<div class="product-tags">
|
||
<span>笔记本</span><span>台式机</span><span>工作站</span><span>ThinkPad</span><span>小新</span><span>拯救者</span>
|
||
</div>
|
||
<a href="/products/lenovo.html" class="product-btn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
查看详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 办公设备 -->
|
||
<div class="product-card fade-in fade-in-d1">
|
||
<div class="product-img" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:#16a34a;">
|
||
<polyline points="6 9 6 2 18 2 18 9"></polyline>
|
||
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
|
||
<rect x="6" y="14" width="12" height="8"></rect>
|
||
</svg>
|
||
</div>
|
||
<div class="product-body">
|
||
<h3>办公设备</h3>
|
||
<p>打印机、复印机、扫描仪、多功能一体机、投影仪、碎纸机、会议设备</p>
|
||
<div class="product-tags">
|
||
<span>打印机</span><span>复印机</span><span>扫描仪</span><span>投影仪</span><span>一体机</span><span>会议设备</span>
|
||
</div>
|
||
<a href="/products/office.html" class="product-btn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
查看详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配件耗材 -->
|
||
<div class="product-card fade-in fade-in-d2">
|
||
<div class="product-img" style="background:linear-gradient(135deg,#fefce8,#fef9c3);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:#ca8a04;">
|
||
<circle cx="12" cy="12" r="3"></circle>
|
||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="product-body">
|
||
<h3>配件耗材</h3>
|
||
<p>原装/品牌硒鼓、墨盒、碳粉、色带、打印纸、网线、水晶头、电源、键鼠、内存、硬盘</p>
|
||
<div class="product-tags">
|
||
<span>硒鼓墨盒</span><span>碳粉</span><span>打印纸</span><span>网线</span><span>键鼠</span><span>内存硬盘</span>
|
||
</div>
|
||
<a href="/products/consumables.html" class="product-btn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
查看详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHY US -->
|
||
<section id="why" class="why-section">
|
||
<div class="section-inner">
|
||
<div class="section-label fade-in">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 20h9"></path>
|
||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||
</svg>
|
||
WHY CHOOSE US
|
||
</div>
|
||
<h2 class="section-title fade-in">为什么选择我们</h2>
|
||
<p class="section-desc fade-in">专业值得信赖，服务创造价值</p>
|
||
<div class="why-grid">
|
||
<div class="why-card fade-in fade-in-d1">
|
||
<div class="why-icon" style="background:#fef3c7;color:#d97706;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
|
||
</svg>
|
||
</div>
|
||
<h3>快速响应</h3>
|
||
<p>30分钟内响应您的需求<br>2小时内上门服务<br>紧急情况随叫随到</p>
|
||
</div>
|
||
<div class="why-card fade-in fade-in-d1">
|
||
<div class="why-icon" style="background:#ede9fe;color:#7c3aed;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="8" r="6"></circle>
|
||
<path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"></path>
|
||
</svg>
|
||
</div>
|
||
<h3>专业资质</h3>
|
||
<p>资深认证工程师团队<br>十年以上行业经验<br>持续技术培训更新</p>
|
||
</div>
|
||
<div class="why-card fade-in fade-in-d2">
|
||
<div class="why-icon" style="background:#dbeafe;color:#2563eb;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3>售后保障</h3>
|
||
<p>维修后质保3个月<br>所有报价公开透明<br>无隐形消费承诺</p>
|
||
</div>
|
||
<div class="why-card fade-in fade-in-d2">
|
||
<div class="why-icon" style="background:#fce7f3;color:#db2777;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||
</svg>
|
||
</div>
|
||
<h3>全品类覆盖</h3>
|
||
<p>一站式IT服务解决方案<br>电脑·打印机·网络·服务器<br>省心省力·降本增效</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 博海视角（PERSPECTIVE） -->
|
||
<section id="perspective" class="perspective-section">
|
||
<div class="section-inner">
|
||
<div class="section-label fade-in">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
||
</svg>
|
||
博海视角
|
||
</div>
|
||
<h2 class="section-title fade-in">洞察 · 思考 · 观点</h2>
|
||
<p class="section-desc fade-in">博海公司出品 · 一切皆如 — 品宣BOT同步发布的热点洞察与人文思考</p>
|
||
<div class="perspective-grid" id="perspective-list">
|
||
<!-- 动态由 JavaScript 加载 -->
|
||
</div>
|
||
<div class="perspective-actions fade-in fade-in-d3">
|
||
<a href="/perspective/" class="perspective-btn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
查看全部 48 篇文章
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTACT -->
|
||
<section class="contact-section" id="contact">
|
||
<div class="section-inner">
|
||
<div class="section-label fade-in" style="color:rgba(255,255,255,.4);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||
<polyline points="22,6 12,13 2,6"></polyline>
|
||
</svg>
|
||
CONTACT US
|
||
</div>
|
||
<h2 class="section-title fade-in">联系我们</h2>
|
||
<p class="section-desc fade-in">随时为您服务，期待您的来电</p>
|
||
<div class="contact-grid">
|
||
<div class="contact-item fade-in fade-in-d1">
|
||
<div class="icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 7.32 6.18 2 2 0 0 1 9.5 4.5h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L13.5 13.5a12.06 12.06 0 0 0 5.67 5.67l1.78-1.78a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||
</svg>
|
||
</div>
|
||
<h4>服务热线 · 售后专线</h4>
|
||
<div class="value">
|
||
<a href="tel:09124223980">0912-4223980</a> / <a href="tel:09124221786">0912-4221786</a>
|
||
<span class="divider">|</span>
|
||
<a href="tel:09124215944">0912-4215944</a>
|
||
</div>
|
||
<div class="sub">服务热线 8:30-18:00 · 售后技术支持 · 周末紧急报修</div>
|
||
</div>
|
||
<div class="contact-item fade-in fade-in-d1">
|
||
<div class="icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||
<circle cx="12" cy="10" r="3"></circle>
|
||
</svg>
|
||
</div>
|
||
<h4>公司地址</h4>
|
||
<div class="value">陕西省榆林市定边县二道西街</div>
|
||
<div class="sub">定边县内均可上门服务</div>
|
||
</div>
|
||
<div class="contact-item fade-in fade-in-d2">
|
||
<div class="icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
</div>
|
||
<h4>服务时间</h4>
|
||
<div class="value">周一至周六 8:30 - 18:00</div>
|
||
<div class="sub">周日及节假日接受预约服务</div>
|
||
</div>
|
||
<div class="contact-item fade-in fade-in-d2">
|
||
<div class="icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||
<polyline points="22,6 12,13 2,6"></polyline>
|
||
</svg>
|
||
</div>
|
||
<h4>电子邮箱</h4>
|
||
<div class="value"><a href="mailto:service@sxbh.ltd">service@sxbh.ltd</a></div>
|
||
<div class="sub">24小时内回复邮件</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div>
|
||
© 2026 陕西博海网络科技有限公司
|
||
<span class="sep">|</span> 专业IT服务 · 值得信赖
|
||
</div>
|
||
<div style="margin-top:8px;">
|
||
<a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">陕ICP备2023001969号-3</a>
|
||
<span class="sep">|</span>
|
||
<a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">陕ICP备2023001969号</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- FLOAT CONSULT - 电话 + 微信 + 在线咨询 -->
|
||
<button class="float-btn consult-btn" onclick="toggleConsultModal()" aria-label="在线咨询" style="bottom:164px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||
</svg>
|
||
</button>
|
||
<a href="tel:09124223980" class="float-btn phone-btn" aria-label="电话咨询" style="bottom:96px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 7.32 6.18 2 2 0 0 1 9.5 4.5h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L13.5 13.5a12.06 12.06 0 0 0 5.67 5.67l1.78-1.78a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="https://work.weixin.qq.com/kfid/kfc6da6e0b52878c725" target="_blank" class="float-btn wecom-btn" aria-label="微信咨询" style="bottom:28px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||
</svg>
|
||
</a>
|
||
|
||
<!-- CONSULT MODAL -->
|
||
<div id="consultOverlay" class="consult-overlay" onclick="closeConsultModal(event)">
|
||
<div class="consult-modal" onclick="event.stopPropagation()">
|
||
<button class="consult-close" onclick="closeConsultModal()">×</button>
|
||
<h3>在线咨询</h3>
|
||
<p class="consult-desc">请留下您的联系方式，我们将尽快与您取得联系</p>
|
||
<form id="consultForm" onsubmit="submitConsult(event)">
|
||
<div class="form-group">
|
||
<label for="consultName">姓名</label>
|
||
<input type="text" id="consultName" name="name" required placeholder="请输入您的姓名">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="consultPhone">联系电话</label>
|
||
<input type="tel" id="consultPhone" name="phone" required placeholder="请输入您的手机号">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="consultMsg">需求描述</label>
|
||
<textarea id="consultMsg" name="message" rows="3" placeholder="请简要描述您的需求（如：需要购买联想电脑、办公设备采购等）"></textarea>
|
||
</div>
|
||
<button type="submit" class="consult-submit">提交咨询</button>
|
||
<p class="consult-tip">或直接拨打 <strong>0912-4223980</strong></p>
|
||
</form>
|
||
<div id="consultSuccess" class="consult-success" style="display:none;">
|
||
<div class="success-icon">✓</div>
|
||
<h4>提交成功！</h4>
|
||
<p>感谢您的咨询，我们将尽快与您联系。</p>
|
||
<p style="font-size:13px;color:var(--gray-400);margin-top:4px;">或直接拨打 0912-4223980</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// ===== 咨询弹窗 =====
|
||
function toggleConsultModal() {
|
||
document.getElementById('consultOverlay').classList.toggle('open');
|
||
document.body.style.overflow = document.getElementById('consultOverlay').classList.contains('open') ? 'hidden' : '';
|
||
}
|
||
function closeConsultModal(e) {
|
||
if (e && e.target !== e.currentTarget) return;
|
||
document.getElementById('consultOverlay').classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
function submitConsult(e) {
|
||
e.preventDefault();
|
||
const btn = document.querySelector('.consult-submit');
|
||
btn.disabled = true; btn.textContent = '提交中...';
|
||
const name = document.getElementById('consultName').value.trim();
|
||
const phone = document.getElementById('consultPhone').value.trim();
|
||
const msg = document.getElementById('consultMsg').value.trim();
|
||
const text = `📩 新咨询\n姓名: ${name}\n电话: ${phone}\n需求: ${msg || '未填写'}`;
|
||
|
||
// 通过 gotify 发送通知 - 尝试本地通知服务
|
||
fetch('https://sxbh.ltd/api/consult', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({name, phone, message: msg})
|
||
}).catch(() => {
|
||
// 静默失败 - 通知可能失败但咨询已记录
|
||
});
|
||
|
||
// 显示成功
|
||
document.getElementById('consultForm').style.display = 'none';
|
||
document.getElementById('consultSuccess').style.display = 'block';
|
||
setTimeout(() => { closeConsultModal(); }, 3000);
|
||
}
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) e.target.classList.add('visible');
|
||
});
|
||
}, { threshold: .1 });
|
||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||
|
||
// ===== 加载博海视角最新文章 =====
|
||
(async function() {
|
||
const container = document.getElementById('perspective-list');
|
||
try {
|
||
const resp = await fetch('/perspective-articles.json?t=' + Date.now());
|
||
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
||
const data = await resp.json();
|
||
const articles = data.articles || [];
|
||
if (articles.length === 0) {
|
||
container.innerHTML = '<p style="text-align:center;color:var(--gray-400);padding:40px;">暂无文章</p>';
|
||
return;
|
||
}
|
||
container.innerHTML = articles.slice(0, 6).map(a => `
|
||
<a href="${a.url}" target="_blank" class="service-card-link">
|
||
<div class="perspective-card fade-in">
|
||
<div class="cat">${a.category || '博海视角'}</div>
|
||
<h3>${a.title}</h3>
|
||
<div class="meta">${a.date || ''}</div>
|
||
<span class="perspective-link">
|
||
阅读全文
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
`).join('');
|
||
// Trigger fade-in animation
|
||
requestAnimationFrame(() => {
|
||
container.querySelectorAll('.perspective-card').forEach(el => {
|
||
observer.observe(el);
|
||
// Force a quick reflow so the fade-in triggers
|
||
el.getBoundingClientRect();
|
||
});
|
||
});
|
||
} catch(e) {
|
||
console.error('加载博海视角文章失败:', e);
|
||
container.innerHTML = '<p style="text-align:center;color:var(--gray-400);padding:40px;">博海视角文章正在加载中…</p>';
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
</body></html>
|