优化样式表,更新字体引用,调整背景色,增强响应式设计;更新首页轮播图,添加新图片;重构JavaScript功能,增加客服小部件;修复HTML结构,确保页面加载顺畅。
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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 |
BIN
assets/images/tangshanshiye.jpg
Normal file
BIN
assets/images/tangshanshiye.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -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: "0535-2106025",
|
||||
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();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user