时空算子库初版

src/views/Sksjgl.vue

@@ -47,9 +47,34 @@
                 </div>
             </div>
         </div>
-        <div>
+        <div class="time-space-operator-lib">
+            <!-- 标题区域 -->
+            <div class="title-section">
+                <h1>时空算子库</h1>
+            </div>
+            <!-- 描述区域 -->
+            <div class="desc-section">
+                <p>
+                    时空算子库具备丰富且强大的功能能力，在空间计算方面，涵盖量托轮廓下的宽度和面积计算，可利用投影坐标系结合既定定理与比例尺换算公式计算宽度，将多边形分割成三角形计算面积；还能判断点线面体的相互状态，通过计算点到线距离、射线法等方式判断点与线、面关系，利用计算几何方法判断线与线、线与面、体与点线面的关系；可进行缓冲区计算，以点、线、面为基础按给定距离生成缓冲区，支持线面体分割，依据指定规则对其进行分割并重新构建边和拓扑关系。在时空分析方面，能够对个面进行时空差异分析，判断空间重叠部分并通过求差来得到不相交面，同时考虑时间因素分析不同时间点面的状态变化。
+                </p>
+            </div>
+            <!-- 业务专区区域 -->
+            <div class="business-section">
+                <div class="business-header">
+                    <span>业务专属时空数据</span>
+                    <button class="more-btn">查看更多</button>
+                </div>
+                <!-- 功能卡片列表 -->
+                <!-- 单个功能卡片 -->
+                <div class="card-item" v-for="(item, index) in cardList" :key="index">
+                    <div class="card-title">{{ item.title }}</div>
+                    <div class="card-bg" :style="{ backgroundColor: item.bgColor }"></div>
+                    <div class="card-desc">{{ item.desc }}</div>
+                </div>
+            </div>
 
         </div>
+
     </div>
 </template>
 
@@ -59,7 +84,40 @@ export default {
         return {
             activePanel: 'sjzljc',
             funcList: systemConfig.sksjgl.funcList,
-            nowFuncContent: []
+            nowFuncContent: [],
+
+            cardList: [
+                {
+                    title: "量托计算宽度面积",
+                    bgColor: "#1a4b8e",
+                    desc: "城市水系承载空间分析数据，包括主干道网和街道直径"
+                },
+                {
+                    title: "设置障碍的路径计算",
+                    bgColor: "#3a3a4a",
+                    desc: "城市大气降水水位时空监测，数据的历史分析"
+                },
+                {
+                    title: "判断点线面体的相互状态",
+                    bgColor: "#5a3a7a",
+                    desc: "公共服务设施分布分析，包含医院、教育、交通等场所"
+                },
+                {
+                    title: "缓冲区计算",
+                    bgColor: "#2a7a5a",
+                    desc: "农业用地分布现状与种植结构空间数据、全域耕地空间"
+                },
+                {
+                    title: "线面体分割",
+                    bgColor: "#1a5a8a",
+                    desc: "主要河网分布与水文监测数据、流域相关大数据"
+                },
+                {
+                    title: "时空差异分析",
+                    bgColor: "#1a6a9a",
+                    desc: "主要河网分布与水文监测数据、流域相关大数据"
+                }
+            ]
         };
     },
     mounted() {
@@ -106,7 +164,6 @@ export default {
                 font-size: 22px;
             }
         }
-
     }
 
     .checkModule {
@@ -226,5 +283,89 @@ export default {
             }
         }
     }
+
+
+    .time-space-operator-lib {
+        background-color: #1e407c;
+        color: #fff;
+        padding: 50px 150px;
+        height: 700px;
+        box-sizing: border-box;
+
+        /* 标题区域 */
+        .title-section {
+            text-align: center;
+            margin-bottom: 20px;
+
+            h1 {
+                font-size: 28px;
+                font-weight: bold;
+            }
+        }
+
+        /* 描述区域 */
+        .desc-section {
+            margin-bottom: 30px;
+            line-height: 1.6;
+            font-size: 14px;
+            opacity: 0.9;
+        }
+
+        /* 业务专区区域 */
+        .business-section {
+            margin-top: 20px;
+
+            .business-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 15px;
+                font-size: 16px;
+
+                .more-btn {
+                    background-color: transparent;
+                    border: 1px solid #fff;
+                    color: #fff;
+                    padding: 4px 12px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        /* 卡片列表 */
+        .card-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 20px;
+
+            .card-item {
+                background-color: rgba(255, 255, 255, 0.1);
+                padding: 15px;
+                border-radius: 8px;
+                height: 180px;
+                display: flex;
+                flex-direction: column;
+
+                .card-title {
+                    font-size: 15px;
+                    font-weight: 500;
+                    margin-bottom: 10px;
+                }
+
+                .card-bg {
+                    flex: 1;
+                    border-radius: 4px;
+                    margin: 8px 0;
+                }
+
+                .card-desc {
+                    font-size: 12px;
+                    opacity: 0.8;
+                    line-height: 1.4;
+                }
+            }
+        }
+    }
 }
 </style>