feat: 康保学院大数据主页样式模拟

src/main/resources/static/app/main/bigdata/kbxy/css/style.css

@@ -311,3 +311,55 @@
 	height: 35px;
 }
 
+.rongyu-box{
+	display: flex;
+	color: #FFC196;
+}
+
+.jiangbei-box {
+	padding-top: 40px;
+	margin-right: 60px;
+}
+
+.jiangbei-box p {
+	text-align: center;
+	font-size: 30px;
+	margin-bottom: 15px;
+}
+
+.jiangbei-image{
+	width: 200px;
+	height: 200px;
+	background-image: url("../images/jiangbei.png");
+	background-size: 100%;
+}
+
+.rongyu-info{
+	flex: 1;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: space-between;
+}
+
+/* 选择 rongyu-info 下除第一个外的所有子级 div */
+.rongyu-info > .rongyu—info-box:not(:first-child) > .rongyu-title {
+	background-color: rgba(132, 27, 16, 0.6);
+}
+
+.rongyu—info-box{
+	width: 100%;
+	display: flex;
+}
+
+.rongyu—info-box > .rongyu-title{
+	width: 25%;
+	text-align: center;
+	background-color: rgba(151, 34, 17, 0.9);
+	margin-right: 10px;
+	padding: 5px;
+}
+
+.rongyu—info-box > .rongyu-content{
+	flex: 1;
+}

src/main/resources/static/app/main/bigdata/kbxy/home.html

@@ -50,8 +50,60 @@
             </div>
 
             <div class="map-content">
-                <div class="box-2" style="padding: 0px 0px;">
-                    <!-- 图表容器 -->
+                <!-- 党支部荣誉 -->
+                <div class="box-2 rongyu-box" style="padding: 0 80px; height: 335px">
+                    <!-- 奖杯图片 -->
+                    <div class="jiangbei-box">
+                        <p>支部荣誉</p>
+                        <div class="jiangbei-image"></div>
+                    </div>
+                    <!-- 荣誉数据 -->
+                    <div class="rongyu-info">
+                        <div class="rongyu—info-box">
+                            <div class="rongyu-title">
+                                <p style="font-size: 20px; margin-bottom: 5px">2024</p>
+                                <p style="font-size: 14px">省级样板支部</p>
+                            </div>
+                            <div class="rongyu-content">
+                                <p>
+                                    省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部
+                                </p>
+                            </div>
+                        </div>
+                        <div class="rongyu—info-box">
+                            <div class="rongyu-title">
+                                <p style="font-size: 20px; margin-bottom: 5px">2024</p>
+                                <p style="font-size: 14px">省级样板支部</p>
+                            </div>
+                            <div class="rongyu-content">
+                                <p>
+                                    省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部
+                                </p>
+                            </div>
+                        </div>
+                        <div class="rongyu—info-box">
+                            <div class="rongyu-title">
+                                <p style="font-size: 20px; margin-bottom: 5px">2024</p>
+                                <p style="font-size: 14px">省级样板支部</p>
+                            </div>
+                            <div class="rongyu-content">
+                                <p>
+                                    省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部
+                                </p>
+                            </div>
+                        </div>
+                        <div class="rongyu—info-box">
+                            <div class="rongyu-title">
+                                <p style="font-size: 20px; margin-bottom: 5px">2024</p>
+                                <p style="font-size: 14px">省级样板支部</p>
+                            </div>
+                            <div class="rongyu-content">
+                                <p>
+                                    省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部省级样板支部
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>