|
@@ -5,7 +5,8 @@
|
|
--color-secondary: #ac361e;
|
|
--color-secondary: #ac361e;
|
|
--color-text: #333;
|
|
--color-text: #333;
|
|
--color-text-light: #fff;
|
|
--color-text-light: #fff;
|
|
- --color-border: #999;
|
|
|
|
|
|
+ --color-text-secondary: #888;
|
|
|
|
+ --color-border: #ddd;
|
|
--color-box: #f9fafb;
|
|
--color-box: #f9fafb;
|
|
--color-mask: rgba(0, 0, 0, 0.4);
|
|
--color-mask: rgba(0, 0, 0, 0.4);
|
|
--swiper-navigation-color: var(--color-primary);
|
|
--swiper-navigation-color: var(--color-primary);
|
|
@@ -77,30 +78,30 @@ button i {
|
|
}
|
|
}
|
|
|
|
|
|
/* 导航样式 */
|
|
/* 导航样式 */
|
|
-nav {
|
|
|
|
|
|
+nav.main-nav {
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
-nav .nav-list {
|
|
|
|
|
|
+nav.main-nav .nav-list {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
-nav .nav-item {
|
|
|
|
|
|
+nav.main-nav .nav-item {
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
-nav .nav-item.active a {
|
|
|
|
|
|
+nav.main-nav .nav-item.active a {
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
-nav a {
|
|
|
|
|
|
+nav.main-nav a {
|
|
display: block;
|
|
display: block;
|
|
color: var(--color-text);
|
|
color: var(--color-text);
|
|
padding: 12px 20px;
|
|
padding: 12px 20px;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
transition: background-color 0.3s;
|
|
transition: background-color 0.3s;
|
|
}
|
|
}
|
|
-nav a:hover, nav a:active {
|
|
|
|
|
|
+nav.main-nav a:hover, nav.main-nav a:active {
|
|
color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
|
|
@@ -153,7 +154,9 @@ nav a:hover, nav a:active {
|
|
/* 标题样式 */
|
|
/* 标题样式 */
|
|
.section-title {
|
|
.section-title {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ flex-direction: row;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid var(--color-primary);
|
|
border-bottom: 2px solid var(--color-primary);
|
|
@@ -295,7 +298,6 @@ nav a:hover, nav a:active {
|
|
transform: scale(1.05);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
|
|
-/* 工作动态和党建工作区域 */
|
|
|
|
.news-item {
|
|
.news-item {
|
|
padding: 12px 0;
|
|
padding: 12px 0;
|
|
border-bottom: 1px dashed #ddd;
|
|
border-bottom: 1px dashed #ddd;
|
|
@@ -456,6 +458,98 @@ footer {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.sidebar .title {
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ background-color: var(--color-primary);
|
|
|
|
+ color: var(--color-text-light);
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ background-image: url(/images/tab-active.png);
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ height: 100px;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ border: 1px solid var(--color-border);
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+}
|
|
|
|
+.sidebar .title h2 {
|
|
|
|
+ position: relative;
|
|
|
|
+ margin: 0;
|
|
|
|
+ font-size: 40px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ z-index: 2;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.sidebar-menu {
|
|
|
|
+ list-style: none;
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+}
|
|
|
|
+.sidebar-menu li {
|
|
|
|
+ border-bottom: 1px solid var(--color-border);
|
|
|
|
+}
|
|
|
|
+.sidebar-menu li.active a {
|
|
|
|
+ color: var(--color-primary);
|
|
|
|
+}
|
|
|
|
+.sidebar-menu li a {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 15px 20px;
|
|
|
|
+ color: var(--color-text);
|
|
|
|
+ text-decoration: none;
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
+}
|
|
|
|
+.sidebar-menu li a i {
|
|
|
|
+ color: var(--color-primary);
|
|
|
|
+}
|
|
|
|
+.sidebar-menu li a:hover {
|
|
|
|
+ color: var(--color-primary);
|
|
|
|
+}
|
|
|
|
+.sidebar-menu li:last-child {
|
|
|
|
+ border-bottom: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pagination {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+}
|
|
|
|
+.pagination li {
|
|
|
|
+ margin: 0 5px;
|
|
|
|
+ border: 1px solid var(--color-border);
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ padding: 6px 10px;
|
|
|
|
+}
|
|
|
|
+.pagination li.active {
|
|
|
|
+ border-color: var(--color-primary);
|
|
|
|
+}
|
|
|
|
+.pagination li.active a {
|
|
|
|
+ color: var(--color-primary);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.news-detail h1 {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+}
|
|
|
|
+.news-detail .times {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: var(--color-text-secondary);
|
|
|
|
+ padding: 20px 0;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ border-bottom: 1px solid var(--color-border);
|
|
|
|
+}
|
|
|
|
+.news-detail .times p {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+}
|
|
|
|
+
|
|
@media (max-width: 992px) {
|
|
@media (max-width: 992px) {
|
|
.featured-image {
|
|
.featured-image {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -464,20 +558,36 @@ footer {
|
|
.featured-grid {
|
|
.featured-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
+ header .inner {
|
|
|
|
+ padding: 0 30px;
|
|
|
|
+ }
|
|
|
|
+ header .logo {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ nav.main-nav .nav-item {
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+ nav.main-nav .nav-item a {
|
|
|
|
+ padding: 10px 5px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
@media (max-width: 768px) {
|
|
- .nav-list {
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
+ header .inner {
|
|
|
|
+ padding: 0 30px;
|
|
}
|
|
}
|
|
- .nav-item a {
|
|
|
|
- padding: 10px 15px;
|
|
|
|
|
|
+ header .logo {
|
|
|
|
+ font-size: 20px;
|
|
}
|
|
}
|
|
- .services-grid {
|
|
|
|
- grid-template-columns: 1fr;
|
|
|
|
|
|
+ header .mobile-menu-toggle {
|
|
|
|
+ display: unset;
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
}
|
|
}
|
|
-}
|
|
|
|
-@media (max-width: 576px) {
|
|
|
|
- header nav {
|
|
|
|
|
|
+ header .search-bar button {
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ }
|
|
|
|
+ nav.main-nav {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
opacity: 0;
|
|
@@ -490,32 +600,22 @@ footer {
|
|
transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
z-index: 100;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
- header nav.show {
|
|
|
|
|
|
+ nav.main-nav.show {
|
|
display: block;
|
|
display: block;
|
|
opacity: 1;
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
- .nav-list {
|
|
|
|
|
|
+ nav.main-nav .nav-list {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
- .nav-item {
|
|
|
|
|
|
+ nav.main-nav .nav-item {
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
- header .inner {
|
|
|
|
- padding: 0 20px;
|
|
|
|
- }
|
|
|
|
- header .mobile-menu-toggle {
|
|
|
|
- display: unset;
|
|
|
|
- width: 40px;
|
|
|
|
- height: 40px;
|
|
|
|
- }
|
|
|
|
- .search-bar button {
|
|
|
|
- width: 40px;
|
|
|
|
- height: 40px;
|
|
|
|
- }
|
|
|
|
- header .logo {
|
|
|
|
- font-size: 18px;
|
|
|
|
|
|
+ .services-grid {
|
|
|
|
+ grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
+@media (max-width: 576px) {
|
|
.featured-grid {
|
|
.featured-grid {
|
|
grid-template-columns: 1fr;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@@ -528,6 +628,12 @@ footer {
|
|
.services-grid {
|
|
.services-grid {
|
|
padding: 210px 30px 40px 30px;
|
|
padding: 210px 30px 40px 30px;
|
|
}
|
|
}
|
|
|
|
+ header .inner {
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ }
|
|
|
|
+ header .logo {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
/*# sourceMappingURL=style.css.map */
|
|
/*# sourceMappingURL=style.css.map */
|