From 79527573940d9f27514995073915e0809910ee52 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Thu, 18 Jul 2024 15:06:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=85=E6=B0=91=E4=B8=8A=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../weiyang/AppPhotoReport/AppPhotoReport.vue |  93 ++++++----
 .../weiyang/AppPhotoReport/PhotoDetail.vue    | 159 ++++++++++++------
 .../weiyang/AppPhotoReport/PhotoForm.vue      |  80 ++++++---
 .../weiyang/AppPhotoReport/PhotoResult.vue    |  25 ++-
 4 files changed, 240 insertions(+), 117 deletions(-)

diff --git a/src/project/weiyang/AppPhotoReport/AppPhotoReport.vue b/src/project/weiyang/AppPhotoReport/AppPhotoReport.vue
index 8fb84b2..871108a 100644
--- a/src/project/weiyang/AppPhotoReport/AppPhotoReport.vue
+++ b/src/project/weiyang/AppPhotoReport/AppPhotoReport.vue
@@ -27,7 +27,7 @@
               <i :class="'status-' + item.eventStatus"></i>
               <span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
             </div>
-            <AiEvaluation :bid="item.id" v-if="item.eventStatus>1">
+            <AiEvaluation :bid="item.id" v-if="item.eventStatus>1" >
               <div class="itemBtn">去评价</div>
               <div slot="finish" class="finish">已评价</div>
             </AiEvaluation>
@@ -36,8 +36,11 @@
       </div>
       <AiEmpty v-if="!list.length"/>
     </div>
-    <div class="btn-wrapper">
+    <!-- <div class="btn-wrapper">
       <div class="btn" @click="toReport" hover-class="text-hover">我要上报</div>
+    </div> -->
+    <div class="footer" @click="toReport">
+      <div class="btn">我要上报</div>
     </div>
   </div>
 </template>
@@ -133,50 +136,46 @@ export default {
     }
   }
 
+  .photo-list__wrapper {
+    padding: 16px 0 252px 0;
+  }
+
   .photo-item {
-    width: 686px;
-    margin: 0 32px 24px;
-    background: #FFFFFF;
-    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
-    border-radius: 16px;
-    overflow: hidden;
+    width: calc(100% - 64px);
+    margin: 0 0 32px 32px;
 
     .photo-item__top {
-      padding: 32px;
+      padding: 32px 32px 24px 32px;
       text-align: justify;
 
       h2 {
-        margin-bottom: 32px;
-        line-height: 1.4;
-        color: #333333;
+        width: 100%;
+        line-height: 44px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
         font-size: 32px;
-        font-weight: 600;
+        color: #333;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
+        margin-bottom: 24px;
       }
 
       .photo-item__top--info-item {
-        // display: flex;
-        // align-items: center;
-
-        &:last-child {
-          margin-bottom: 8px;
-        }
+        line-height: 40px;
+        font-family: PingFangSC-Regular;
+        font-size: 28px;
+        margin-bottom: 8px;
 
         label {
           display: inline-block;
-          margin-right: 32px;
-          color: #999999;
-          font-size: 26px;
+          margin-right: 24px;
+          color: #999;
         }
-
         span {
-          display: inline-block;
-          color: #333333;
-          font-size: 26px;
+          color: #333;
         }
       }
     }
@@ -187,22 +186,23 @@ export default {
       height: 104px;
       padding: 0 32px;
       border-top: 1px solid #DDDDDD;
-
+      font-family: PingFangSC-Regular;
+      font-size: 24px;
+      line-height: 40px;
       i {
-        width: 8px;
-        height: 8px;
-        margin-right: 8px;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin-right: 16px;
         border-radius: 50%;
         background: #FF883C;
       }
 
       .itemBtn {
         border: 1px solid #4181FF;
-        border-radius: 8px;
+        border-radius: 4px;
         color: #4181FF;
-        padding: 8px 22px;
-
-
+        padding: 8px 24px;
       }
 
       .finish {
@@ -232,5 +232,30 @@ export default {
       }
     }
   }
+
+  ::v-deep .u-swipe-action {
+    border-radius: 16px;
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #F4F5FA;
+    padding: 64px 64px 68px 64px;
+    z-index: 9;
+    .btn {
+      width: calc(100% - 128px);
+      line-height: 88px;
+      background: #026AF2;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #FFF;
+      text-align: center;
+    }
+  }
 }
 </style>
diff --git a/src/project/weiyang/AppPhotoReport/PhotoDetail.vue b/src/project/weiyang/AppPhotoReport/PhotoDetail.vue
index b13058a..4f3ccef 100644
--- a/src/project/weiyang/AppPhotoReport/PhotoDetail.vue
+++ b/src/project/weiyang/AppPhotoReport/PhotoDetail.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="photo-detail">
-    <u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32" 
+    <u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32" 
       :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
     <div class="header-content-bg">
       <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
     </div>
-    <AiGroup noBorder>
-      <h2>{{ info.content }}</h2>
-      <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
-    </AiGroup>
-    <AiGroup description noBorder labelColor="#999">
-      <AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
-      <AiItem label="事件类型" :value="info.groupName"/>
-      <AiItem label="所属网格" :value="info.girdName"/>
-      <AiItem label="上报时间" :value="info.createTime"/>
-      <AiItem label="照片" top-label>
-        <div class="flex wrap">
-          <image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
-        </div>
-        <span v-if="!info.files.length">暂无照片</span>
-      </AiItem>
-    </AiGroup>
+    <div class="border-r">
+      <AiGroup noBorder description abelColor="#999">
+        <h2>{{ info.content }}</h2>
+        <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
+        <AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
+        <AiItem label="事件类型" :value="info.groupName"/>
+        <AiItem label="所属网格" :value="info.girdName"/>
+        <AiItem label="上报时间" :value="info.createTime"/>
+        <AiItem label="照片" top-label>
+          <div class="flex wrap">
+            <image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+          </div>
+          <span v-if="!info.files.length">暂无照片</span>
+        </AiItem>
+      </AiGroup>
+    </div>
     <!-- <u-gap height="24"/>
     <AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
       <AiItem label="处理结果" top-label :value="result.doExplain"/>
@@ -33,28 +33,33 @@
     </AiGroup> -->
     <!-- <u-gap height="24"/> -->
     <!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> -->
-    <div class="tab-content">
-      <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
-        <span class="active-line" v-if="currentTab == index"/>
+    <div class="border-r pad-b252">
+      <div class="tab-content">
+        <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
+          <span class="active-line" v-if="currentTab == index"/>
+        </div>
       </div>
+      <u-gap height="24"/>
+      <AiGroup noBorder v-if="currentTab=='0'">
+        <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
+          <div class="start">
+            <div class="fill stepTitle" v-text="item.systemExplain"/>
+            <div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
+          </div>
+          <div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
+          <div class="imgs">
+            <img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
+          </div>
+          <u-gap height="48"/>
+        </AiStep>
+      </AiGroup>
     </div>
-    <u-gap height="24"/>
-    <AiGroup noBorder v-if="currentTab=='0'">
-      <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
-        <div class="flex start">
-          <div class="fill stepTitle" v-text="item.systemExplain"/>
-          <div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
-        </div>
-        <div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
-        <div class="imgs">
-          <img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
-        </div>
-        <u-gap height="48"/>
-      </AiStep>
-    </AiGroup>
+    
     <AiEvaluation v-if="currentTab=='1' && showEvaluation" :bid="info.id" type="show"/>
     <AiEvaluation v-if="info.eventStatus > 1 && showEvaluation" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
-      <div class="bottomBtn">去评价</div>
+      <div class="footer">
+        <div class="btn">去评价</div>
+      </div>
     </AiEvaluation>
   </div>
 </template>
@@ -154,9 +159,9 @@ export default {
 
 <style lang="scss">
 .photo-detail {
-  padding: 32px 0 160px;
-  margin-bottom: 60px;
-  background: #fff;
+  // padding: 32px 0 160px;
+  // margin-bottom: 60px;
+  // background: #fff;
   .header-content-bg {
     width: 100%;
     position: fixed;
@@ -166,28 +171,63 @@ export default {
       height: 592px;
     }
   }
+  .border-r {
+    width: calc(100% - 64px);
+    margin: 0 0 32px 32px;
+    background-color: #fff;
+    border-radius: 16px;
+  }
+  .pad-b252 {
+    padding-bottom: 252px;
+  }
+  ::v-deep .AiGroup {
+    padding: 32px 0 32px 32px;
+    box-sizing: border-box;
+    background-color: none!important;
+  }
   h2 {
-    width: calc(100% - 32px);
-    line-height: 1.3;
-    margin-bottom: 26px;
-    color: #333333;
-    text-align: justify;
-    font-size: 40px;
+    font-family: PingFangSC-SNaNpxibold;
+    font-weight: 600;
+    font-size: 36px;
+    color: #333;
+    letter-spacing: 0;
+    line-height: 56px;
+    margin-bottom: 16px;
   }
 
-  ::v-deep.stepTitle {
-    min-height: 44px;
+  ::v-deep .normal {
+    line-height: 44px;
     font-family: PingFangSC-Regular;
-    font-weight: 400;
     font-size: 32px;
+    color: #333;
+  }
+
+  ::v-deep .topLabel {
+    border-bottom: 0!important;
+  }
+
+  ::v-deep .stepTitle {
+    line-height: 44px;
+    font-family: PingFangSC-Regular;
+    font-size: 32px;
+    color: #333;
+    margin-bottom: 8px;
   }
 
   .stepTime {
-    line-height: 44px;
+    line-height: 40px;
+    font-family: PingFangSC-Regular;
+    font-size: 28px;
+    color: #999;
+    margin-bottom: 16px;
   }
 
   .stepContent {
-    color: #343D65;
+    line-height: 40px;
+    font-family: PingFangSC-Regular;
+    font-size: 28px;
+    color: #333;
+    margin-bottom: 16px;
   }
 
   .status-name {
@@ -265,5 +305,26 @@ export default {
       color: #333;
     }
   }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #F4F5FA;
+    padding: 64px 64px 68px 64px;
+    z-index: 9;
+    .btn {
+      width: calc(100% - 128px);
+      line-height: 88px;
+      background: #026AF2;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #FFF;
+      text-align: center;
+    }
+  }
 }
 </style>
diff --git a/src/project/weiyang/AppPhotoReport/PhotoForm.vue b/src/project/weiyang/AppPhotoReport/PhotoForm.vue
index 920d96e..4b2243f 100644
--- a/src/project/weiyang/AppPhotoReport/PhotoForm.vue
+++ b/src/project/weiyang/AppPhotoReport/PhotoForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="album">
-    <u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32" 
+    <u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32" 
       :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
     <div class="header-content-bg">
       <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
@@ -45,7 +45,7 @@
         </div>
       </div>
       <div class="form-item">
-        <div class="form-item__wrapper">
+        <div class="form-item__wrapper form-gird">
           <div class="form-item__title">
             <i>*</i>
             <h2>所属网格</h2>
@@ -95,8 +95,11 @@
         </div>
       </div>
     </div>
-    <div class="btn-wrapper">
+    <!-- <div class="btn-wrapper">
       <div class="btn" hover-class="text-hover" @click="submit">提交</div>
+    </div> -->
+    <div class="footer" @click="submit">
+      <div class="btn">保存</div>
     </div>
     <AiLogin ref="login"/>
   </div>
@@ -253,9 +256,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .album {
-  padding-bottom: 140px;
+  padding-bottom: 252px;
   .header-content-bg {
     width: 100%;
     position: fixed;
@@ -268,20 +271,23 @@ export default {
   .form-item__group {
     margin-bottom: 24px;
     background: #fff;
+    width: calc(100% - 64px);
+    margin: 16px 0 32px 32px;
+    border-radius: 16px;
   }
 
   .form-item {
     padding-left: 32px;
+    position: relative;
 
     .form-item__wrapper {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      height: 128px;
-      padding-right: 28px;
-      border-bottom: 1px solid #DDDDDD;
+      border-bottom: 1px solid #DDD;
       position: relative;
-
+      line-height: 44px;
+      padding: 34px 32px 34px 0;
       input {
         flex: 1;
         height: 100%;
@@ -292,7 +298,7 @@ export default {
       .form-item__right {
         display: flex;
         align-items: center;
-        font-size: 32px;
+        font-size: 28px;
 
         span {
           max-width: 400px;
@@ -305,7 +311,7 @@ export default {
 
         i {
           margin-right: 8px;
-          color: #999999;
+          color: #999;
         }
       }
     }
@@ -319,22 +325,29 @@ export default {
     .form-item__title {
       display: flex;
       align-items: center;
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      color: #333;
 
       i {
         font-size: 32px;
-        color: #FF4466;
+        position: absolute;
+        left: -14px;
+        font-family: PingFangSC-Regular;
+        font-size: 32px;
+        color: #F46;
       }
 
       span {
         font-size: 28px;
-        color: #999999;
+        color: #999;
       }
 
       h2 {
         padding: 0 4px;
-        font-weight: 600;
+        font-weight: 400;
         font-size: 32px;
-        color: #333333;
+        color: #333;
       }
     }
 
@@ -352,21 +365,50 @@ export default {
       }
 
       .form-item__title {
-        padding: 32px 0;
+        // padding: 32px 0;
+        margin-bottom: 16px;
       }
 
       .form-item__right {
-        padding-left: 18px;
+        // padding-left: 18px;
       }
     }
   }
+  .form-gird {
+    padding-bottom: 64px!important;
+  }
   .tips {
     font-size: 24px;
     color: #f46;
     line-height: 36px;
     position: absolute;
-    bottom: 8px;
-    left: 22px;
+    bottom: 16px;
+  }
+  ::v-deep .AiMore {
+    .u-icon__label {
+      font-size: 28px!important;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #F4F5FA;
+    padding: 64px 64px 68px 64px;
+    z-index: 9;
+    .btn {
+      width: calc(100% - 128px);
+      line-height: 88px;
+      background: #026AF2;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #FFF;
+      text-align: center;
+    }
   }
 }
 </style>
diff --git a/src/project/weiyang/AppPhotoReport/PhotoResult.vue b/src/project/weiyang/AppPhotoReport/PhotoResult.vue
index 18119d6..7b9572f 100644
--- a/src/project/weiyang/AppPhotoReport/PhotoResult.vue
+++ b/src/project/weiyang/AppPhotoReport/PhotoResult.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="result">
-    <u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32" 
+    <u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32" 
       :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
     <div class="header-content-bg">
-      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
+      <image src="/static/img/result.png" class="success-img" />
+      <h2>上报成功！</h2>
+      <div class="result-btn" hover-class="text-hover" @click="back">前往查看</div>
     </div>
-    <image src="/static/img/result.png" />
-    <h2>上报成功！</h2>
-    <div class="result-btn" hover-class="text-hover" @click="back">前往查看</div>
+    
   </div>
 </template>
 
@@ -41,21 +41,16 @@
 
 <style lang="scss">
   .result {
-    min-height: 100vh;
-    padding-top: 160px;
     box-sizing: border-box;
     text-align: center;
-    background: #fff;
     .header-content-bg {
       width: 100%;
-      position: fixed;
-      z-index: -1;
-      img {
-        width: 100%;
-        height: 592px;
-      }
+      height: 592px;
+      background-image: url('https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png');
+      background-size: 100%;
     }
-    image {
+    .success-img {
+      padding-top: 80px;
       width: 220px;
       height: 220px;
     }