|
|
@@ -296,6 +296,50 @@
|
|
|
color: #fff;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+
|
|
|
+ /* 带底部标题的横幅样式 */
|
|
|
+ .banner-item-with-title {
|
|
|
+ width: 386px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-image-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 216px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-image-wrapper img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.5s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-item-with-title:hover .banner-image-wrapper img {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-title-bottom {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-title-bottom h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -447,45 +491,33 @@
|
|
|
<!-- 底部模块 -->
|
|
|
<div class="banner-row">
|
|
|
<!-- 第一个横幅 -->
|
|
|
- <div class="banner-item wow fadeInUp" data-wow-delay="0.5s">
|
|
|
- <img src="__CDN__/assets/addons/material/images/culture/footer-1.png" alt="城市景观">
|
|
|
- <!--<div class="banner-content one-column">-->
|
|
|
- <!-- <h3 class="banner-title">广告语</h3>-->
|
|
|
- <!-- <p class="banner-subtitle">FIVE CADRES</p>-->
|
|
|
- <!-- <p class="banner-text">我们生产凝聚力</p>-->
|
|
|
- <!--</div>-->
|
|
|
+ <div class="banner-item-with-title wow fadeInUp" data-wow-delay="0.5s">
|
|
|
+ <div class="banner-image-wrapper">
|
|
|
+ <img src="__CDN__/assets/addons/material/images/culture/footer_1.png" alt="平安全家福">
|
|
|
+ </div>
|
|
|
+ <div class="banner-title-bottom">
|
|
|
+ <h3>平安全家福</h3>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第二个横幅 -->
|
|
|
- <div class="banner-item wow fadeInUp" data-wow-delay="0.5s">
|
|
|
- <img src="__CDN__/assets/addons/material/images/culture/footer-2.png" alt="商务团队">
|
|
|
- <!--<div class="banner-content">-->
|
|
|
- <!-- <h3 class="banner-title">行为准则</h3>-->
|
|
|
- <!-- <p class="banner-subtitle">FIVE CADRES</p>-->
|
|
|
- <!-- <div class="banner-grid two-column">-->
|
|
|
- <!-- <span>敬畏</span>-->
|
|
|
- <!-- <span>感恩</span>-->
|
|
|
- <!-- <span>谦虚</span>-->
|
|
|
- <!-- <span>得体</span>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!--</div>-->
|
|
|
+ <div class="banner-item-with-title wow fadeInUp" data-wow-delay="0.5s">
|
|
|
+ <div class="banner-image-wrapper">
|
|
|
+ <img src="__CDN__/assets/addons/material/images/culture/footer_2.png" alt="全体党员参观沂蒙革命纪念馆">
|
|
|
+ </div>
|
|
|
+ <div class="banner-title-bottom">
|
|
|
+ <h3>全体党员参观沂蒙革命纪念馆</h3>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第三个横幅 -->
|
|
|
- <div class="banner-item wow fadeInUp" data-wow-delay="0.5s">
|
|
|
- <img src="__CDN__/assets/addons/material/images/culture/footer-3.png" alt="会议场景">
|
|
|
- <!--<div class="banner-content">-->
|
|
|
- <!-- <h3 class="banner-title">三宽三力</h3>-->
|
|
|
- <!-- <p class="banner-subtitle">FIVE CADRES</p>-->
|
|
|
- <!-- <div class="banner-grid two-column">-->
|
|
|
- <!-- <span>待人宽厚</span>-->
|
|
|
- <!-- <span>处事宽容</span>-->
|
|
|
- <!-- <span>环境宽松</span>-->
|
|
|
- <!-- <span>向心力</span>-->
|
|
|
- <!-- <span>亲和力</span>-->
|
|
|
- <!-- <span>凝聚力</span>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!--</div>-->
|
|
|
+ <div class="banner-item-with-title wow fadeInUp" data-wow-delay="0.5s">
|
|
|
+ <div class="banner-image-wrapper">
|
|
|
+ <img src="__CDN__/assets/addons/material/images/culture/footer_3.png" alt="党风廉政月月谈">
|
|
|
+ </div>
|
|
|
+ <div class="banner-title-bottom">
|
|
|
+ <h3>党风廉政月月谈</h3>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
super-yimizi