样式调整

src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './LedgerCenter.less';
 
-const LedgerCenter = () => <div className="ledger-center">待开发三个字</div>;
+const LedgerCenter = () => <div className="ledger-center">33待开发三个字</div>;
 
 export default LedgerCenter;

src/pages/business_envInformation_monthly/components/content_component_bbtz/ReportTask.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './ReportTask.less';
 
-const ReportTask = () => <div className="report-task">待开发三个字</div>;
+const ReportTask = () => <div className="report-task">待开2发三个字</div>;
 
 export default ReportTask;

src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.js

@@ -1,6 +1,149 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Button, Select, Row, Col, Pagination } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import templateImg from '@/assets/business_envmonitoring/Frame 427319422.svg';
 import './TemplateLibrary.less';
 
-const TemplateLibrary = () => <div className="template-library">待开发三个字</div>;
+const { Option } = Select;
+
+const TemplateLibrary = () => {
+  const [category, setCategory] = useState(undefined);
+  const [templateName, setTemplateName] = useState(undefined);
+  const [currentPage, setCurrentPage] = useState(6);
+
+  // 模拟数据
+  const mockData = Array(6).fill(null).map((_, index) => ({
+    id: index + 1,
+    title: '污染治理设施运行台账及维护记录',
+    createTime: '2025-08-24 18:24:25',
+    useCount: 3,
+    thumbnail: '/img/template-preview.png',
+  }));
+
+  const handleCreate = () => {
+    console.log('创建模板');
+  };
+
+  const handleSearch = () => {
+    console.log('查找', { category, templateName });
+  };
+
+  const handleUse = (item) => {
+    console.log('使用模板', item);
+  };
+
+  const handlePreview = (item) => {
+    console.log('预览模板', item);
+  };
+
+  return (
+    <div className="template-library">
+      {/* A块：顶部操作栏 */}
+      <div className="template-header">
+        <Row justify="space-between" align="middle">
+          <Col>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              className="create-btn"
+              onClick={handleCreate}
+            >
+              创建
+            </Button>
+          </Col>
+          <Col>
+            <div className="filter-group">
+              <span className="filter-label">模板分类</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 200 }}
+                value={category}
+                onChange={setCategory}
+                allowClear
+              >
+                <Option value="1">分类1</Option>
+                <Option value="2">分类2</Option>
+                <Option value="3">分类3</Option>
+              </Select>
+              
+              <span className="filter-label">模板名称</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 200 }}
+                value={templateName}
+                onChange={setTemplateName}
+                allowClear
+              >
+                <Option value="1">模板1</Option>
+                <Option value="2">模板2</Option>
+                <Option value="3">模板3</Option>
+              </Select>
+              
+              <Button type="primary" onClick={handleSearch}>
+                查找
+              </Button>
+            </div>
+          </Col>
+        </Row>
+      </div>
+
+      {/* B块：卡片列表区域 */}
+      <div className="template-content">
+        <div className="card-container">
+          {mockData.map((item) => (
+            <div key={item.id} className="card-wrapper">
+              <div className="template-card">
+                <div className="card-header">
+                  <h3 className="card-title">污染治理设施运行台及维护记录</h3>
+                </div>
+                <div className="card-body">
+                  <div className="card-left">
+                    <div className="info-item">
+                      <span className="info-label">创建时间</span>
+                      <span className="info-value">{item.createTime}</span>
+                    </div>
+                    <div className="info-item">
+                      <span className="info-label">使用次数</span>
+                      <span className="info-value">{item.useCount}</span>
+                    </div>
+                    <div className="card-actions">
+                      <Button
+                        type="primary"
+                        className="use-btn"
+                        onClick={() => handleUse(item)}
+                      >
+                        使用
+                      </Button>
+                      <Button
+                        className="preview-btn"
+                        onClick={() => handlePreview(item)}
+                      >
+                        预览
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="card-right">
+                    <img src={templateImg} alt="预览图" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* 分页 */}
+        <div className="pagination-wrapper">
+          <Pagination
+            current={currentPage}
+            total={50}
+            pageSize={6}
+            showSizeChanger={false}
+            onChange={(page) => setCurrentPage(page)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default TemplateLibrary;

src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.less

@@ -1,6 +1,196 @@
 .template-library {
-  font-size: 20px;
-  color: #888;
-  text-align: center;
-  padding: 40px 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // padding: 20px;
+  // background: #f5f5f5;
+
+  // A块：顶部操作栏
+  .template-header {
+    // background: #fff;
+    // padding: 16px 24px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .create-btn {
+      background: rgba(0, 212, 138, 1);
+      border-color: rgba(0, 212, 138, 1);
+      color: #fff;
+      height: 32px;
+      font-size: 14px;
+
+      &:hover {
+        background: rgba(0, 232, 151, 1);
+        border-color: rgba(0, 232, 151, 1);
+      }
+    }
+
+    .filter-group {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .filter-label {
+        color: #333;
+        font-size: 14px;
+        white-space: nowrap;
+      }
+
+      .ant-select {
+        min-width: 150px;
+      }
+
+      .ant-btn-primary {
+        background: #1890ff;
+        border-color: #1890ff;
+
+        &:hover {
+          background: #40a9ff;
+          border-color: #40a9ff;
+        }
+      }
+    }
+  }
+
+  // B块：内容区域
+  .template-content {
+    flex: 1;
+    // background: #fff;
+    // padding: 24px;
+    // border-radius: 4px;
+    overflow-y: auto;
+    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    .card-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px;
+      height: 100%;
+    }
+
+    .card-wrapper {
+      width: 32%;
+      height:44%;
+    }
+    .template-card {
+      height: 100%;
+      background: #fff;
+      border-radius: 2px;
+      // transition: all 0.3s;
+      border: 1px solid #3333;
+      padding: 15px;
+      display: flex;
+      flex-direction: column;
+
+      &:hover {
+        // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        // transform: translateY(-2px);
+      }
+
+      .card-header {
+        margin-bottom: 12px;
+        .card-title {
+          font-size: 16px;
+          font-weight: 500;
+          color: #333;
+          margin: 0;
+          line-height: 1.5;
+        }
+      }
+      .card-body {
+        flex: 1;
+        display: flex;
+        gap: 12px;
+      }
+
+      .card-left {
+        width: 60%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .info-item {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #333;
+
+        .info-label {
+          color: #666;
+          margin-right: 8px;
+          white-space: nowrap;
+        }
+
+        .info-value {
+          color: #333;
+        }
+      }
+
+      .card-actions {
+        margin-top: auto;
+        display: flex;
+        gap: 12px;
+
+        .ant-btn {
+          flex: 1;
+          height: 32px;
+          font-size: 14px;
+        }
+
+        .use-btn {
+          background: rgba(0, 212, 138, 1);
+          border-color: rgba(0, 212, 138, 1);
+          color: #fff;
+
+          &:hover {
+            background: rgba(0, 232, 151, 1);
+            border-color: rgba(0, 232, 151, 1);
+          }
+        }
+
+        .preview-btn {
+          color: #13c2c2;
+          border-color: #13c2c2;
+
+          &:hover {
+            color: #36cfc9;
+            border-color: #36cfc9;
+          }
+        }
+      }
+
+      .card-right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+
+    .pagination-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid #f0f0f0;
+
+      .ant-pagination {
+        .ant-pagination-item-active {
+          border-color: rgba(0, 212, 138, 1);
+          background-color: rgba(0, 212, 138, 1);
+
+          a {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
 }