bug

src/saas/AppCountryAlbum/AddReport.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="report">
-    <components :is="component"></components>
+    <components class="report-item" :is="component"></components>
     <div class="report-list">
       <image @click="component = 'WorkReport'" :class="[component === 'WorkReport' ? 'active' : '']" src="./images/report1.png" />
-      <image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report2.png" />
+      <image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report4.png" />
-      <image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report3.png" />
+      <image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report2.png" />
-      <image @click="component = 'MeetingMminutes'" :class="[component === 'MeetingMminutes' ? 'active' : '']" src="./images/report4.png" />
+      <image @click="component = 'MeetingMminutes'" :class="[component === 'MeetingMminutes' ? 'active' : '']" src="./images/report3.png" />
     </div>
   </div>
 </template>
@@ -46,10 +46,17 @@
 
 <style lang="scss" scoped>
   .report {
+    height: 100vh;
+
     * {
       box-sizing: border-box;
     }
 
+    .report-item {
+      min-height: calc(100% - 240px);
+      overflow-y: auto;
+    }
+
     .report-list {
       display: flex;
       justify-content: center;
@@ -74,4 +81,4 @@
       }
     }
   }
-</style>
+</style>

src/saas/AppCountryAlbum/components/WorkReport.vue

@@ -1,6 +1,36 @@
 <template>
   <div class="WorkReport">
-
+    <div class="top">
+      <span>请输入汇报单位</span>
+      <span>2022-03-09</span>
+    </div>
+    <div class="body">
+      <h2>工作汇报</h2>
+      <div class="subtitle">千言街巡查情况汇报</div>
+      <div class="partition">
+        <div><i></i></div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="bottom-item__wrapper">
+        <div class="bottom-item">
+          <label>汇报人：</label>
+          <span>鄢然</span>
+        </div>
+        <div class="bottom-item">
+          <label>备注：</label>
+          <span>鄢然</span>
+        </div>
+      </div>
+      <div class="add">
+        <div class="add-btn">
+          <span>添加图片</span>
+        </div>
+        <div class="add-btn">
+          <span>添加文字</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,6 +38,8 @@
   export default {
     name: 'WorkReport',
 
+    label: '工作汇报',
+
     data () {
       return {
 
@@ -25,5 +57,130 @@
 </script>
 
 <style lang="scss" scoped>
+  .WorkReport {
+    padding: 40px 32px 0;
+    background: #F6F4F0;
 
-</style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      width: 686px;
+      color: #333333;
+      font-size: 32px;
+      border-bottom: 4px solid #E3464B;
+    }
+
+    .body {
+      margin-top: 8px;
+
+      h2 {
+        font-size: 112px;
+        color: #E3464B;
+        font-weight: 600;
+        text-align: center;
+        border-top: 2px solid #E3464B;
+      }
+
+      .subtitle {
+        margin-top: 8px;
+        margin-bottom: 10px;
+        height: 60px;
+        line-height: 60px;
+        border-radius: 30px;
+        color: #E3464B;
+        font-size: 32px;
+        text-align: center;
+        border: 3px solid #E3464B;
+      }
+
+      .partition {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+
+        div {
+          position: relative;
+          z-index: 1;
+          padding: 0 6px;
+          background: #F6F4F0;
+
+          i {
+            display: block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #E3464B;
+          }
+        }
+
+        &::after {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 100%;
+          height: 2px;
+          background: #E3464B;
+          transform: translateY(-50%);
+          content: '';
+        }
+      }
+    }
+
+    .bottom {
+      margin-top: 6px;
+      padding-top: 16px;
+      border-top: 4px solid #E3464B;
+
+      .bottom-item__wrapper {
+        .bottom-item {
+          display: flex;
+          line-height: 44px;
+          margin-bottom: 16px;
+          color: #333333;
+          font-size: 32px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .add {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        height: 480px;
+        margin-top: 32px;
+        background: #FFFFFF;
+        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>