Zhanglj/BigStickNewOfficialWebsite-V2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add customer service chat, optimize case and homepage, fix api proxy

Browse Source 
这一提交完成了多项功能升级与优化：
1.  新增全局浮动客服组件，集成腾讯云TRTC聊天能力并添加错误格式化工具
2.  新增图片资源并调整部分静态文件结构
3.  优化案例页面：重构筛选逻辑、新增空状态处理、添加加载更多功能
4.  优化首页布局：修复统计数字动画、调整移动端适配样式、优化轮播逻辑
5.  重构官方内容获取工具：添加缓存机制、优化媒体资源处理
6.  优化API代理配置，移除默认本地代理并新增环境变量配置
7.  新增页面数据恢复刷新逻辑，优化页面交互体验
8.  修复按钮组件冗余代码，调整头部导航移动端样式
This commit is contained in:
Zhanglj
2026-07-24 18:55:51 +08:00
parent 314cd6ccd7
commit 2ff1064de7
25 changed files with 4596 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+154 -68
View File
@@ -275,8 +275,8 @@ a:focus-visible {
background 0.32s ease;
}
.stat-item img {
width: 86px;
height: 86px;
width: 150px;
height: 150px;
object-fit: contain;
margin-bottom: 19px;
}
@@ -465,10 +465,10 @@ a:focus-visible {
}
.lead-advantage {
display: grid;
grid-template-columns: 47% 1fr;
align-items: center;
grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
align-items: stretch;
gap: 24px;
height: 182px;
min-height: 182px;
overflow: hidden;
margin-top: 56px;
border-radius: 13px;
@@ -478,12 +478,16 @@ a:focus-visible {
box-shadow 0.32s ease;
}
.lead-advantage > img {
display: block;
width: 100%;
height: 100%;
height: 182px;
max-height: 182px;
object-fit: cover;
transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.lead-advantage > div {
align-self: center;
min-width: 0;
padding: 16px 30px;
}
.lead-advantage h3,
@@ -593,15 +597,31 @@ a:focus-visible {
.industries-section {
padding: 80px 0 111px;
}
.industries-content {
width: 100%;
}
.industry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: max-content;
max-width: 100%;
display: flex;
flex-wrap: nowrap;
gap: 30px;
margin-top: 76px;
overflow-x: auto;
margin: 76px auto 0;
padding: 0 24px;
scrollbar-width: none;
}
.industry-grid::-webkit-scrollbar {
display: none;
}
.industry-grid article {
position: relative;
min-height: 311px;
flex: 0 0 min(560px, calc(100vw - 48px));
display: grid;
grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
grid-template-rows: auto 25px auto minmax(0, 1fr) auto;
column-gap: 18px;
min-height: 324px;
overflow: hidden;
padding: 26px;
border-radius: 12px;
@@ -611,31 +631,41 @@ a:focus-visible {
box-shadow 0.32s ease;
}
.industry-grid h3 {
grid-column: 1 / -1;
margin: 0;
color: #414141;
font-size: 26px;
}
.industry-grid img {
width: 45%;
height: 150px;
object-fit: contain;
float: left;
margin: 25px 15px 0 -8px;
grid-row: 3 / 6;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
float: none;
margin: 0;
border-radius: 9px;
}
.quote {
margin-top: 33px;
grid-column: 2;
grid-row: 3;
margin-top: 8px;
color: #787878;
font-weight: 700;
font-size: 43px;
line-height: 0.55;
}
.industry-grid p {
margin: 19px 0 14px;
grid-column: 2;
grid-row: 4;
margin: 12px 0 14px;
color: #777;
font-size: 15px;
line-height: 1.5;
}
.tags {
grid-column: 2;
grid-row: 5;
display: flex;
gap: 9px;
}
@@ -696,24 +726,34 @@ a:focus-visible {
padding: 88px 0 78px;
background: #fff;
}
.testimonial-section .page-width {
overflow: hidden;
}
.testimonial-track {
--testimonial-gap: 24px;
--testimonial-loop-offset: 12px;
display: flex;
gap: 24px;
width: max-content;
gap: var(--testimonial-gap);
width: 100%;
margin-top: 62px;
transform: translateX(-520px);
}
.testimonial-track.is-centered {
justify-content: center;
}
.testimonial-track.is-carousel {
width: max-content;
animation: testimonial-carousel 34s linear infinite;
}
.testimonial-track.is-carousel:hover {
animation-play-state: paused;
}
.testimonial-track article {
width: 460px;
flex: 0 0 400px;
min-height: 216px;
padding: 25px 27px;
border-radius: 10px;
background: #f9fbff;
color: #767676;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
.testimonial-track header {
display: flex;
@@ -726,6 +766,7 @@ a:focus-visible {
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #516b71, #f3bc94);
object-fit: cover;
}
.testimonial-track time {
margin-left: auto;
@@ -736,6 +777,11 @@ a:focus-visible {
font-size: 15px;
line-height: 1.65;
}
@keyframes testimonial-carousel {
to {
transform: translate3d(calc(-50% - var(--testimonial-loop-offset)), 0, 0);
}
}
.cta-section {
position: relative;
@@ -803,11 +849,6 @@ a:focus-visible {
box-shadow: 0 15px 30px rgba(63, 135, 239, 0.16);
transform: translateY(-5px);
}
.testimonial-track article:hover {
background: #fff;
box-shadow: 0 16px 28px rgba(72, 135, 226, 0.13);
transform: translateY(-6px);
}
}
@media (min-width: 761px) {
@@ -815,19 +856,7 @@ a:focus-visible {
will-change: transform;
}
.section-title h2::after {
position: absolute;
right: 42%;
bottom: -13px;
left: 42%;
height: 2px;
content: '';
border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(20, 120, 251, 0.78), transparent);
opacity: 0;
transform: scaleX(0);
transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.45s ease;
display: none;
}
.section-title.is-visible h2::after {
opacity: 1;
@@ -855,12 +884,14 @@ a:focus-visible {
box-shadow: inset 0 0 0 1px rgba(113, 169, 255, 0.24);
opacity: var(--spot-opacity);
}
.case-content .motion-card::after {
box-shadow: none;
}
.motion-card img {
will-change: transform;
}
.case-background,
.delivery-banner,
.testimonial-track {
.delivery-banner {
will-change: transform;
}
}
@@ -874,6 +905,11 @@ a:focus-visible {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.testimonial-track.is-carousel {
width: 100%;
overflow-x: auto;
animation: none !important;
}
}
@media (max-width: 1050px) {
@@ -895,35 +931,72 @@ a:focus-visible {
width: min(100% - 32px, 560px);
}
.hero-section {
height: min(720px, calc(100svh - 58px));
min-height: 570px;
height: auto;
min-height: min(700px, calc(100svh - 58px));
overflow: hidden;
background:
radial-gradient(circle at 82% 78%, rgba(68, 165, 255, 0.24), transparent 36%),
linear-gradient(180deg, #f7fbff 0%, #eaf3ff 56%, #dfeeff 100%);
}
.hero-section::after {
position: absolute;
z-index: 0;
inset: 0;
content: '';
pointer-events: none;
background: linear-gradient(
180deg,
rgba(247, 251, 255, 0.98) 0%,
rgba(247, 251, 255, 0.92) 38%,
rgba(247, 251, 255, 0.46) 62%,
rgba(247, 251, 255, 0.08) 100%
);
}
.hero-art {
background-position: right bottom;
background-size: auto 74%;
opacity: 0.72;
z-index: 0;
inset: auto -54% -28px -50%;
height: 58%;
background-position: center bottom;
background-size: min(760px, 170vw) auto;
opacity: 0.9;
filter: saturate(1.06) contrast(1.02);
-webkit-mask-image: linear-gradient(to top, #000 76%, transparent 100%);
mask-image: linear-gradient(to top, #000 76%, transparent 100%);
will-change: transform;
}
.hero-content {
position: relative;
z-index: 1;
min-height: inherit;
align-items: flex-start;
padding-top: clamp(72px, 13vh, 112px);
padding-top: clamp(62px, 10svh, 92px);
padding-bottom: min(43vh, 310px);
}
.hero-copy {
margin: 0;
max-width: 340px;
max-width: 360px;
}
.hero-copy h1 {
font-size: clamp(28px, 8.2vw, 36px);
line-height: 1.28;
letter-spacing: -0.5px;
letter-spacing: 0;
text-wrap: balance;
}
.hero-points {
display: grid;
margin: 22px 0 27px;
gap: 10px;
gap: 9px;
font-size: 13px;
max-width: 300px;
max-width: 320px;
}
.hero-points span {
width: fit-content;
padding: 7px 10px;
border: 1px solid rgba(70, 139, 230, 0.12);
border-radius: 6px;
background: rgba(255, 255, 255, 0.74);
box-shadow: 0 8px 20px rgba(57, 124, 216, 0.08);
backdrop-filter: blur(10px);
}
.button-row {
width: min(100%, 310px);
@@ -962,7 +1035,7 @@ a:focus-visible {
}
.section-title p {
max-width: 34em;
margin: 11px auto 0;
margin: 15px auto 0;
font-size: 12px;
line-height: 1.6;
}
@@ -1048,7 +1121,6 @@ a:focus-visible {
padding: 19px;
}
.advantage-grid,
.industry-grid,
.delivery-grid {
grid-template-columns: 1fr;
gap: 16px;
@@ -1089,16 +1161,21 @@ a:focus-visible {
}
.industry-grid {
margin-top: 40px;
gap: 16px;
padding: 0 16px;
}
.industry-grid article {
min-height: 280px;
flex-basis: min(92vw, 430px);
grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
min-height: 290px;
padding: 23px;
}
.industry-grid h3 {
font-size: 23px;
}
.industry-grid img {
height: 130px;
height: auto;
min-height: 0;
}
.delivery-banner {
height: 118px;
@@ -1114,19 +1191,19 @@ a:focus-visible {
font-size: 18px;
}
.testimonial-track {
transform: none;
overflow-x: auto;
width: 100%;
--testimonial-gap: 16px;
--testimonial-loop-offset: 8px;
gap: var(--testimonial-gap);
margin-top: 35px;
padding: 0 16px 16px;
margin-right: -16px;
margin-left: -16px;
}
.testimonial-track.is-centered {
overflow-x: auto;
padding-bottom: 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.testimonial-track article {
min-width: min(82vw, 330px);
width: min(82vw, 330px);
flex-basis: min(82vw, 330px);
scroll-snap-align: center;
}
.cta-section {
@@ -1153,11 +1230,20 @@ a:focus-visible {
width: calc(100% - 24px);
}
.hero-content {
padding-top: 62px;
padding-top: 54px;
padding-bottom: 260px;
}
.hero-copy h1 {
font-size: 28px;
}
.hero-art {
right: -72%;
left: -70%;
height: 54%;
}
.button-row {
width: min(100%, 300px);
}
.stats-panel {
gap: 9px;
padding: 10px;