乡村相册

src/saas/AppCountryAlbum/components/Daily.vue

@@ -1,12 +1,43 @@
 <template>
-  <div class="Daily">
+  <div class="WorkReport">
-
+    <div class="top">
+      <span>请输入汇报单位</span>
+    </div>
+    <div class="body">
+      <h2>今日工作</h2>
+      <div class="subtitle">工作拍照汇总</div>
+    </div>
+    <div class="bottom">
+      <div class="bottom-item__wrapper">
+        <div class="bottom-item">
+          <div class="left">
+            <label>汇报人：</label>
+            <span>鄢然</span>
+          </div>
+          <i>2022-04-14</i>
+        </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>
 
 <script>
   export default {
-    name: 'Daily',
+    name: 'WorkReport',
+
+    label: '工作汇报',
 
     data () {
       return {
@@ -25,5 +56,104 @@
 </script>
 
 <style lang="scss" scoped>
+  .WorkReport {
+    padding: 40px 32px 0;
+    background: #fff;
 
+    * {
+      box-sizing: border-box;
+    }
+
+    .top {
+      display: flex;
+      align-items: center;
+      padding: 8px 0 16px;
+      color: #333333;
+      font-size: 32px;
+      border-bottom: 4px solid #000;
+    }
+
+    .body {
+      margin-top: 16px;
+
+      h2 {
+        font-size: 68px;
+        color: #333;
+        font-weight: 600;
+      }
+
+      .subtitle {
+        margin-top: 24px;
+        margin-bottom: 24px;
+        color: #000;
+        font-size: 34px;
+      }
+    }
+
+    .bottom {
+      margin-top: 24px;
+
+      .bottom-item__wrapper {
+        .bottom-item {
+          display: flex;
+          justify-content: space-between;
+          line-height: 64px;
+          margin-bottom: 16px;
+          padding: 0 16px;
+          color: #fff;
+          font-size: 28px;
+          background: #D84A36;
+
+          i {
+            font-style: normal;
+          }
+
+          &:last-child {
+            height: auto;
+            line-height: 1.3;
+            padding: 12px 16px;
+            margin-bottom: 0;
+            color: #D84A36;
+            font-size: 28px;
+            text-align: justify;
+            border: 3px solid #DB6352;
+            background: #fff;
+
+            span {
+              flex: 1;
+            }
+          }
+        }
+      }
+
+      .add {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        height: 480px;
+        margin-top: 32px;
+        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>

src/saas/AppCountryAlbum/components/WorkReport.vue

@@ -70,7 +70,6 @@
       justify-content: space-between;
       align-items: center;
       padding: 8px 0;
-      width: 686px;
       color: #333333;
       font-size: 32px;
       border-bottom: 4px solid #E3464B;