乡村相册

src/saas/AppCountryAlbum/AddReport.vue

@@ -47,13 +47,15 @@
 <style lang="scss" scoped>
   .report {
     height: 100vh;
+    overflow: hidden;
 
     * {
       box-sizing: border-box;
     }
 
     .report-item {
-      min-height: calc(100% - 240px);
+      height: calc(100% - 240px);
+      padding-bottom: 20px;
       overflow-y: auto;
     }
 

src/saas/AppCountryAlbum/components/MeetingMminutes.vue

@@ -1,6 +1,48 @@
 <template>
   <div class="MeetingMminutes">
-
+    <table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE">
+      <tr>
+        <th colspan="4" class="title">会议纪要</th>
+      </tr>
+      <tr>
+        <td class="nowrap">会议日期</td>
+        <td>2022-01-21 周五</td>
+        <td class="nowrap">天气</td>
+        <td>24℃ 晴</td>
+      </tr>
+      <tr>
+        <td class="nowrap">会议主题</td>
+        <td colspan="3">会议主题会议主题会议主题会议主题会议主题</td>
+      </tr>
+      <tr>
+        <td class="nowrap">主持人</td>
+        <td>鄢然</td>
+        <td class="nowrap">记录人</td>
+        <td>刘烨</td>
+      </tr>
+      <tr>
+        <td class="nowrap">参与人</td>
+        <td colspan="3">2022-01-21 周五</td>
+      </tr>
+      <tr>
+        <td class="nowrap">会议地点</td>
+        <td colspan="3">2022-01-21 周五</td>
+      </tr>
+      <tr colspan="2">
+        <td class="nowrap">会议内容</td>
+        <td colspan="3">2022-01-21 周五</td>
+      </tr>
+    </table>
+    <div class="bottom">
+      <div class="add">
+        <div class="add-btn">
+          <span>添加图片</span>
+        </div>
+        <div class="add-btn">
+          <span>添加文字</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,6 +50,8 @@
   export default {
     name: 'MeetingMminutes',
 
+    label: '会议纪要',
+
     data () {
       return {
 
@@ -25,5 +69,67 @@
 </script>
 
 <style lang="scss" scoped>
+  .MeetingMminutes {
+    padding: 48px 32px 0;
+    background: #fff;
 
+    .table {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      border-spacing: none;
+
+      .title {
+        color: #2774CE;
+        font-size: 58px;
+        font-weight: 600;
+        letter-spacing: 2px;
+      }
+
+      .nowrap {
+        word-break: keep-all;
+        white-space: nowrap;
+        color: #2774CE;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .bottom {
+      margin-top: 48px;
+
+      .add {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        height: 480px;
+        margin-top: 72px;
+        background: #F7F7F7;
+        border-radius: 8px;
+
+        .add-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 232px;
+          height: 80px;
+          color: #FFFFFF;
+          font-size: 32px;
+          background: #408EF6;
+          border-radius: 40px;
+
+          &:last-child {
+            margin-top: 48px;
+            color: #408EF6;
+            background: #E7F5FE;
+          }
+        }
+      }
+    }
+  }
 </style>