11

src/views/Zhsy/index.less

@@ -0,0 +1,35 @@
+.content{
+  position:relative;
+}
+
+.left-box{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.right-box{
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.box{
+  width: 30vw;
+  height: 28vh;
+  min-height: 200px;
+  margin-bottom: 10px;
+}
+
+.box-title{
+  display: flex;
+  align-items: center;
+  padding: 5px 30px;
+  background: url("../../../public/assets/title.png") 0 0 no-repeat;
+  background-size: contain;
+}
+
+.title-item{
+  margin-right: 20px;
+}
+

src/views/Zhsy/index.tsx

@@ -5,8 +5,43 @@ import "./index.less"
 const SyglPage: React.FC = () => {
 
   return (
-    <div className=''>
-      综合首页的页面
+    <div className='content'>
+      <div className='left-box'>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>工程概况</div>
+            <div className='title-item'>大事记</div>
+            <div className='title-item'>美丽水厂</div>
+          </div>
+        </div>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>工程投资</div>
+          </div>
+        </div>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>工程成效</div>
+          </div>
+        </div>
+      </div>
+      <div className='right-box'>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>洪水简报</div>
+          </div>
+        </div>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>在建工程</div>
+          </div>
+        </div>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>智慧化成效</div>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }