上报记录

src/mods/conv/AppHealthReport/Detail.vue

@@ -36,12 +36,16 @@
               <span></span><span>2020-07-20</span><span>（自主上报）</span>
             </div>
             <div class="right">
-              <span>异常</span>
-              <u-icon name="arrow-down" color="#999" size="28"></u-icon>
+              <span :class="'status0'">异常</span>
+              <!-- :class="item.check ? 'img-active' : ''" -->
+              <img src="./components/down-icon.png" :class="checked == true ? '': 'img-active'" alt="" @click="putOn" />
             </div>
           </div>
-          <div class="item_info">
-            
+          <div class="item_info" v-if="checked">
+            <div class="items">
+              <label>当前健康状况</label>
+              <div>发烧、乏力、咳嗽</div>
+            </div>
           </div>
         </div>
       </div>
@@ -55,7 +59,8 @@
     data () {
       return {
         info: {},
-        pageShow: false
+        pageShow: false,
+        checked: true,
       }
     },
 
@@ -74,6 +79,11 @@
         })
       },
 
+      // 收起展开
+      putOn() {
+        this.checked = !this.checked
+      },
+
       getInfo (id) {
         this.$instance.post(`/app/appepidemichealthreport/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
@@ -163,14 +173,13 @@
 
     .detail-info {
       margin-top: 24px;
-      background: #FFF;
-      padding: 32px;
-      box-sizing: border-box;
-
       .title {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        background: #FFF;
+        padding: 32px;
+        box-sizing: border-box;
         .left {
           h2 {
             font-size: 38px;
@@ -184,11 +193,13 @@
           }
         }
         .right {
+          display: flex;
           color: #999999;
           font-size: 28px;
           span:first-child {
             color: #4181FF;
           }
+          
         }
       }
 
@@ -198,7 +209,9 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 26px 0;
+            padding: 26px 32px;
+            background: #FFF;
+            
             .left {
               span:first-child {
                 display: inline-block;
@@ -209,8 +222,49 @@
                 margin-right: 12px;
               }
             }
+            .right {
+              span {
+                display: inline-block;
+                vertical-align: center;
+                margin-right: 16px;
+                padding: 4px 8px;
+              }
+              .status0 {
+                color: #FF4466;
+                background: #FFF5F7;
+              }
+              .status1 {
+                color: #1AAAFF;
+                background: #E8F6FF;
+              }
+              .status2 {
+                color: #42D784;
+                background: #ECFBF2;
+              }
+
+              img {
+                width: 48px;
+                height: 48px;
+                transition: all 0.3s ease-in-out;
+                transform: rotate(180deg);
+                vertical-align: bottom;
+              }
+
+              .img-active {
+                transform: rotate(0deg);
+              }
+            }
+          }
+
+          .item_info {
+            padding: 16px 32px;
+            background: #FAFAFA;
+            .items {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
           }
-          
         }
       }
     }