增加企业产品分类
This commit is contained in:
@@ -12,13 +12,16 @@
|
||||
--------------------------------------------------------------*/
|
||||
/* Fonts */
|
||||
:root {
|
||||
--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--heading-font: "Montserrat", sans-serif;
|
||||
--nav-font: "Raleway", sans-serif;
|
||||
--default-font:
|
||||
"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
|
||||
Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--heading-font: "Montserrat", sans-serif;
|
||||
--nav-font: "Raleway", sans-serif;
|
||||
}
|
||||
|
||||
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
|
||||
:root {
|
||||
:root {
|
||||
--background-color: #ffffff; /* Background color for the entire website, including individual sections */
|
||||
--default-color: #2b180d; /* Default color used for the majority of the text content across the entire website */
|
||||
--heading-color: #1b2f45; /* Color for headings, subheadings and title throughout the website */
|
||||
@@ -29,7 +32,12 @@
|
||||
|
||||
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
|
||||
:root {
|
||||
--nav-color: rgba(255, 255, 255, 0.6); /* The default color of the main navmenu links */
|
||||
--nav-color: rgba(
|
||||
255,
|
||||
255,
|
||||
255,
|
||||
0.6
|
||||
); /* The default color of the main navmenu links */
|
||||
--nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
|
||||
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
|
||||
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
|
||||
@@ -85,8 +93,12 @@ h5,
|
||||
h6 {
|
||||
color: var(--heading-color);
|
||||
font-family: var(--heading-font);
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.h520 {
|
||||
height: 520px;
|
||||
}
|
||||
/* PHP Email Form Messages
|
||||
------------------------------*/
|
||||
.php-email-form .error-message {
|
||||
@@ -225,7 +237,7 @@ h6 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navmenu li:hover>a,
|
||||
.navmenu li:hover > a,
|
||||
.navmenu .active,
|
||||
.navmenu .active:focus {
|
||||
color: var(--nav-hover-color);
|
||||
@@ -264,11 +276,11 @@ h6 {
|
||||
|
||||
.navmenu .dropdown ul a:hover,
|
||||
.navmenu .dropdown ul .active:hover,
|
||||
.navmenu .dropdown ul li:hover>a {
|
||||
.navmenu .dropdown ul li:hover > a {
|
||||
color: var(--nav-dropdown-hover-color);
|
||||
}
|
||||
|
||||
.navmenu .dropdown:hover>ul {
|
||||
.navmenu .dropdown:hover > ul {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
@@ -280,7 +292,7 @@ h6 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.navmenu .dropdown .dropdown:hover>ul {
|
||||
.navmenu .dropdown .dropdown:hover > ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
@@ -383,7 +395,7 @@ h6 {
|
||||
background-color: rgba(33, 37, 41, 0.1);
|
||||
}
|
||||
|
||||
.navmenu .dropdown>.dropdown-active {
|
||||
.navmenu .dropdown > .dropdown-active {
|
||||
display: block;
|
||||
background-color: rgba(33, 37, 41, 0.03);
|
||||
}
|
||||
@@ -410,7 +422,7 @@ h6 {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.mobile-nav-active .navmenu>ul {
|
||||
.mobile-nav-active .navmenu > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -627,7 +639,11 @@ h6 {
|
||||
|
||||
.page-title:before {
|
||||
content: "";
|
||||
background-color: color-mix(in srgb, var(--background-color), transparent 40%);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--background-color),
|
||||
transparent 40%
|
||||
);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
@@ -653,11 +669,11 @@ h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page-title .breadcrumbs ol li+li {
|
||||
.page-title .breadcrumbs ol li + li {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.page-title .breadcrumbs ol li+li::before {
|
||||
.page-title .breadcrumbs ol li + li::before {
|
||||
content: "/";
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
@@ -677,7 +693,6 @@ section,
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
section,
|
||||
.section {
|
||||
scroll-margin-top: 66px;
|
||||
@@ -735,7 +750,13 @@ section,
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 44%;
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--background-color), transparent 15%), color-mix(in srgb, var(--background-color), transparent 15%) 100%), linear-gradient(180deg, rgb(0, 0, 0), rgb(0, 0, 0) 100%);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--background-color), transparent 15%),
|
||||
color-mix(in srgb, var(--background-color), transparent 15%) 100%
|
||||
),
|
||||
linear-gradient(180deg, rgb(0, 0, 0), rgb(0, 0, 0) 100%);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
@@ -1441,14 +1462,15 @@ section,
|
||||
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.service-details .service-box+.service-box {
|
||||
.service-details .service-box + .service-box {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.service-details .service-box h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
|
||||
border-bottom: 2px solid
|
||||
color-mix(in srgb, var(--default-color), transparent 92%);
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -1497,7 +1519,8 @@ section,
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
transition: 0.3s;
|
||||
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
|
||||
border-top: 1px solid
|
||||
color-mix(in srgb, var(--default-color), transparent 90%);
|
||||
}
|
||||
|
||||
.service-details .download-catalog a:first-child {
|
||||
@@ -1676,14 +1699,20 @@ section,
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
|
||||
.portfolio-details
|
||||
.portfolio-details-slider
|
||||
.swiper-pagination
|
||||
.swiper-pagination-bullet {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
|
||||
.portfolio-details
|
||||
.portfolio-details-slider
|
||||
.swiper-pagination
|
||||
.swiper-pagination-bullet-active {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
@@ -1698,7 +1727,8 @@ section,
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
|
||||
border-bottom: 1px solid
|
||||
color-mix(in srgb, var(--default-color), transparent 85%);
|
||||
}
|
||||
|
||||
.portfolio-details .portfolio-info ul {
|
||||
@@ -1707,7 +1737,7 @@ section,
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.portfolio-details .portfolio-info ul li+li {
|
||||
.portfolio-details .portfolio-info ul li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -1824,7 +1854,7 @@ section,
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.contact .info-item+.info-item {
|
||||
.contact .info-item + .info-item {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@@ -1859,31 +1889,35 @@ section,
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contact .php-email-form input[type=text],
|
||||
.contact .php-email-form input[type=email],
|
||||
.contact .php-email-form input[type="text"],
|
||||
.contact .php-email-form input[type="email"],
|
||||
.contact .php-email-form textarea {
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
color: var(--default-color);
|
||||
background-color: color-mix(in srgb, var(--background-color), transparent 50%);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--background-color),
|
||||
transparent 50%
|
||||
);
|
||||
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
|
||||
}
|
||||
|
||||
.contact .php-email-form input[type=text]:focus,
|
||||
.contact .php-email-form input[type=email]:focus,
|
||||
.contact .php-email-form input[type="text"]:focus,
|
||||
.contact .php-email-form input[type="email"]:focus,
|
||||
.contact .php-email-form textarea:focus {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.contact .php-email-form input[type=text]::placeholder,
|
||||
.contact .php-email-form input[type=email]::placeholder,
|
||||
.contact .php-email-form input[type="text"]::placeholder,
|
||||
.contact .php-email-form input[type="email"]::placeholder,
|
||||
.contact .php-email-form textarea::placeholder {
|
||||
color: color-mix(in srgb, var(--default-color), transparent 70%);
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type=submit] {
|
||||
.contact .php-email-form button[type="submit"] {
|
||||
color: var(--contrast-color);
|
||||
background: var(--accent-color);
|
||||
border: 0;
|
||||
@@ -1892,17 +1926,97 @@ section,
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type=submit]:hover {
|
||||
.contact .php-email-form button[type="submit"]:hover {
|
||||
background: color-mix(in srgb, var(--accent-color), transparent 20%);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Blog Layout — 左侧分类导航
|
||||
--------------------------------------------------------------*/
|
||||
.blog-layout-sidebar {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.blog-category-nav {
|
||||
background-color: var(--surface-color);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 10px;
|
||||
padding: 0 0 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.blog-category-nav .nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
padding: 16px 20px 12px;
|
||||
margin: 0;
|
||||
color: var(--heading-color);
|
||||
border-bottom: 1px solid
|
||||
color-mix(in srgb, var(--default-color), transparent 90%);
|
||||
}
|
||||
|
||||
.blog-category-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-category-nav li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: var(--default-color);
|
||||
text-decoration: none;
|
||||
transition: 0.25s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.blog-category-nav li a:hover {
|
||||
color: var(--accent-color);
|
||||
background: color-mix(in srgb, var(--accent-color), transparent 94%);
|
||||
}
|
||||
|
||||
.blog-category-nav li a.active {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--accent-color);
|
||||
background: color-mix(in srgb, var(--accent-color), transparent 92%);
|
||||
}
|
||||
|
||||
.blog-category-nav li ul.children {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.blog-category-nav li ul.children li a {
|
||||
font-size: 14px;
|
||||
padding: 8px 20px;
|
||||
color: color-mix(in srgb, var(--default-color), transparent 30%);
|
||||
}
|
||||
|
||||
.blog-category-nav li ul.children li a:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.blog-category-nav li ul.children li a.active {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.blog-layout-sidebar {
|
||||
position: static;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Blog Posts Section
|
||||
--------------------------------------------------------------*/
|
||||
.blog-posts article {
|
||||
background-color: var(--surface-color);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
padding: 30px;
|
||||
padding: 15px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@@ -1927,7 +2041,7 @@ section,
|
||||
|
||||
/* 新结构：blog.php 中的预览图容器 */
|
||||
.blog-posts .post-media {
|
||||
height: 240px;
|
||||
height: 125px;
|
||||
margin: -30px -30px 15px -30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -1971,7 +2085,7 @@ section,
|
||||
}
|
||||
|
||||
.blog-posts .post-author-img {
|
||||
width: 50px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
@@ -1979,10 +2093,11 @@ section,
|
||||
.blog-posts .post-author {
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.blog-posts .post-date {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -2092,9 +2207,99 @@ section,
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.blog-details .content span {
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.45em;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.blog-details .content code {
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 0.92em;
|
||||
color: var(--heading-color);
|
||||
background-color: color-mix(in srgb, var(--default-color), transparent 92%);
|
||||
padding: 0.15em 0.45em;
|
||||
border-radius: 4px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.blog-details .content pre {
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--default-color);
|
||||
background-color: color-mix(in srgb, var(--default-color), transparent 94%);
|
||||
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||
border-radius: 6px;
|
||||
padding: 18px 20px;
|
||||
margin: 1.25em 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.blog-details .content pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.blog-details .content .article-code-block {
|
||||
position: relative;
|
||||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.blog-details .content .article-code-block pre {
|
||||
margin: 0;
|
||||
padding-top: 42px;
|
||||
}
|
||||
|
||||
.blog-details .content .article-code-copy {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
font-family: var(--default-font, system-ui, sans-serif);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 6px 12px;
|
||||
color: var(--contrast-color);
|
||||
background-color: var(--accent-color);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.15s ease;
|
||||
}
|
||||
|
||||
.blog-details .content .article-code-copy:hover {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.blog-details .content .article-code-copy:focus-visible {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.blog-details .content .article-code-copy.is-done {
|
||||
background-color: color-mix(in srgb, var(--accent-color), #000 18%);
|
||||
}
|
||||
|
||||
.blog-details .meta-top {
|
||||
margin-top: 20px;
|
||||
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||
padding-bottom: 25px;
|
||||
border-bottom: 1px solid
|
||||
color-mix(in srgb, var(--default-color), transparent 90%);
|
||||
}
|
||||
|
||||
.blog-details .meta-top ul {
|
||||
@@ -2106,7 +2311,7 @@ section,
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-details .meta-top ul li+li {
|
||||
.blog-details .meta-top ul li + li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@@ -2126,7 +2331,8 @@ section,
|
||||
|
||||
.blog-details .meta-bottom {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
|
||||
border-top: 1px solid
|
||||
color-mix(in srgb, var(--default-color), transparent 90%);
|
||||
}
|
||||
|
||||
.blog-details .meta-bottom i {
|
||||
@@ -2165,7 +2371,7 @@ section,
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blog-details .meta-bottom .tags li+li::before {
|
||||
.blog-details .meta-bottom .tags li + li::before {
|
||||
padding-right: 6px;
|
||||
color: var(--default-color);
|
||||
content: ",";
|
||||
@@ -2414,7 +2620,7 @@ section,
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.search-widget form input[type=text] {
|
||||
.search-widget form input[type="text"] {
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
@@ -2423,7 +2629,7 @@ section,
|
||||
color: var(--default-color);
|
||||
}
|
||||
|
||||
.search-widget form input[type=text]:focus {
|
||||
.search-widget form input[type="text"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -2554,4 +2760,4 @@ section,
|
||||
padding-left: 5px;
|
||||
color: color-mix(in srgb, var(--default-color), transparent 60%);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user