1
0

优化样式表,更新字体引用,调整背景色,增强响应式设计;更新首页轮播图,添加新图片;重构JavaScript功能,增加客服小部件;修复HTML结构,确保页面加载顺畅。

This commit is contained in:
2026-04-20 16:54:17 +08:00
parent 2356843b77
commit 12de99c55e
10 changed files with 199 additions and 80 deletions

View File

@@ -161,11 +161,6 @@ img {
max-width: 100%;
}
@font-face {
ß
src: url("/fonts/Flaticon.woff2") format("woff2"),
url("/fonts/themify.woff") format("woff");
}
/*--------------------------------------------------------------
#0.2 Global Elements
--------------------------------------------------------------*/
@@ -2832,6 +2827,7 @@ color:#ffffff;
display: flex;
position: relative;
z-index: 0;
background: #0d1f38;
}
@media (max-width: 991px) {
@@ -2848,7 +2844,10 @@ color:#ffffff;
.hero-slider .swiper-slide {
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #0d1f38;
color: #fff;
}
@@ -2861,15 +2860,16 @@ color:#ffffff;
}
.hero-slider .slide-inner {
width: 100%;
width: 132%;
height: 100%;
position: absolute;
background-size: cover;
left: 0;
left: -16%;
top: 0;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-color: #0d1f38;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -2880,6 +2880,25 @@ color:#ffffff;
-ms-flex-align: center;
align-items: center;
text-align: left;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@media (max-width: 991px) {
.hero-slider .slide-inner {
width: 120%;
left: -10%;
}
}
@media (max-width: 767px) {
.hero-slider .slide-inner {
width: 112%;
left: -6%;
}
}
.hero-slider .swiper-button-prev,
@@ -3485,7 +3504,7 @@ color:#ffffff;
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
.features-section {
margin-top: -101px;
margin-top: -96px;
}
}

View File

@@ -3,8 +3,6 @@
Smart Timeline Component - Horizontal Expansion
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Oswald:wght@400;700&display=swap');
:root {
--tl-bg-color: #f8fafc;
--tl-line-color: rgba(20, 129, 255, 0.3);
@@ -12,6 +10,10 @@
--tl-text-color: #2a3e5d;
--tl-year-color: #102541;
--tl-transition-speed: 0.5s;
--tl-font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
--tl-font-display: "DIN Alternate", "Arial Narrow", "Helvetica Neue",
Arial, sans-serif;
}
/* Section 容器 */
@@ -20,7 +22,7 @@
background-image:
radial-gradient(circle at 10% 20%, rgba(20, 129, 255, 0.08) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(20, 129, 255, 0.05) 0%, transparent 20%);
font-family: 'Noto Sans SC', sans-serif;
font-family: var(--tl-font-sans);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -124,7 +126,7 @@
transform-origin: 0 0;
transform: rotate(90deg);
font-family: 'Oswald', sans-serif;
font-family: var(--tl-font-display);
font-size: 14px;
color: var(--tl-year-color);
white-space: nowrap;
@@ -140,7 +142,7 @@
/* 竖向文字中的简短描述 */
.short-desc {
font-family: 'Noto Sans SC', sans-serif;
font-family: var(--tl-font-sans);
font-size: 12px;
opacity: 0.6;
font-weight: 300;
@@ -194,7 +196,7 @@
.content-date {
display: block;
color: var(--tl-active-color);
font-family: 'Oswald', sans-serif;
font-family: var(--tl-font-display);
font-size: 2rem;
margin-bottom: 15px;
font-weight: bold;

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -50,11 +50,11 @@
// Function for small menu
function smallNavFunctionality() {
var windowWidth = window.innerWidth;
var mainNav = $(".navigation-holder");
var smallNav = $(".navigation-holder > .small-nav");
var subMenu = smallNav.find(".sub-menu");
function smallNavFunctionality() {
var windowWidth = window.innerWidth;
var mainNav = $(".navigation-holder");
var smallNav = $(".navigation-holder > .small-nav");
var subMenu = smallNav.find(".sub-menu");
var megamenu = smallNav.find(".mega-menu");
var menuItemWidthSubMenu = smallNav.find(".menu-item-has-children > a");
@@ -70,10 +70,30 @@
} else if (windowWidth > 991) {
mainNav.find(".sub-menu").show();
mainNav.find(".mega-menu").show();
}
}
smallNavFunctionality();
}
}
function initKefuWidget() {
if (typeof Kefu !== "function" || !document.body || document.querySelector(".kefubox")) {
return;
}
new Kefu({
tel: "05352106025",
qq: "278294683",
wechatPerson: {
state: false,
imgURL: "./imgs/2wm.png"
},
wechatofficial: {
state: true,
imgURL: "assets/images/wechat.webp"
}
});
}
smallNavFunctionality();
initKefuWidget();
// Parallax background
@@ -95,11 +115,86 @@
}
}
function getSlideBackgroundUrls() {
var backgroundUrls = [];
$(".hero-slider .slide-bg-image[data-background]").each(function() {
var backgroundUrl = $(this).data("background");
if (backgroundUrl && $.inArray(backgroundUrl, backgroundUrls) === -1) {
backgroundUrls.push(backgroundUrl);
}
});
return backgroundUrls;
}
function waitForHeroBackgrounds(onComplete) {
var backgroundUrls = getSlideBackgroundUrls();
var remaining = backgroundUrls.length;
var hasCompleted = false;
function finish() {
if (hasCompleted) {
return;
}
hasCompleted = true;
onComplete();
}
if (!remaining) {
finish();
return;
}
var fallbackTimer = setTimeout(finish, 2500);
$.each(backgroundUrls, function(index, backgroundUrl) {
var image = new Image();
var resolved = false;
function markResolved() {
if (resolved) {
return;
}
resolved = true;
remaining -= 1;
if (!remaining) {
clearTimeout(fallbackTimer);
finish();
}
}
image.onload = markResolved;
image.onerror = markResolved;
image.src = backgroundUrl;
if (image.complete) {
markResolved();
}
});
}
// DATA BACKGROUND IMAGE
var sliderBgSetting = $(".slide-bg-image");
sliderBgSetting.each(function(indx){
if ($(this).attr("data-background")){
$(this).css("background-image", "url(" + $(this).data("background") + ")");
var backgroundUrl = $(this).attr("data-background");
var $slide = $(this).closest(".swiper-slide");
if (backgroundUrl){
$(this).css("background-image", "url(" + backgroundUrl + ")");
if ($slide.length) {
$slide.css({
"background-image": "url(" + backgroundUrl + ")",
"background-position": "center center",
"background-repeat": "no-repeat",
"background-size": "cover"
});
}
}
});
@@ -110,9 +205,13 @@
jQuery('.swiper-slide').each( function(index){
menu.push( jQuery(this).find('.slide-inner').attr("data-text") );
});
var interleaveOffset = 0.5;
var totalSlides = jQuery(".swiper-slide").length;
var interleaveOffset = 0.16;
var swiperOptions = {
loop: true,
loopedSlides: totalSlides,
preloadImages: true,
updateOnImagesReady: true,
speed: 1000,
parallax: true,
autoplay: {
@@ -137,8 +236,12 @@
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
var slideInner = swiper.slides[i].querySelector(".slide-inner");
if (slideInner) {
slideInner.style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
}
},
@@ -153,8 +256,11 @@
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
var slideInner = swiper.slides[i].querySelector(".slide-inner");
if (slideInner) {
slideInner.style.transition = speed + "ms";
}
}
}
}
@@ -168,19 +274,23 @@
/*------------------------------------------
= HIDE PRELOADER
-------------------------------------------*/
function hidePreloader() {
$('.preloader').delay(100).fadeOut(500, function() {
//active wow
if (wow) {
wow.init();
}
});
}
function preloader() {
if($('.preloader').length) {
$('.preloader').delay(100).fadeOut(500, function() {
//active wow
if (wow) {
wow.init();
}
});
waitForHeroBackgrounds(hidePreloader);
}
}
}
/*------------------------------------------
@@ -701,16 +811,17 @@
/*==========================================================================
WHEN DOCUMENT LOADING
==========================================================================*/
$(window).on('load', function() {
preloader();
toggleMobileNavigation();
smallNavFunctionality();
});
$(window).on('load', function() {
preloader();
toggleMobileNavigation();
smallNavFunctionality();
initKefuWidget();
});