ct

src/apps/AppIntegralAudit/AppIntegralAudit.vue

@@ -26,7 +26,7 @@
         </div>
       </div>
 
-    <!-- $dict.getDict('yesOrNo') -->
+      <!-- $dict.getDict('yesOrNo') -->
       <u-select v-model="showType" :list="typeList" label-name="dictName" value-name="dictValue"
               @confirm="confirmTypeSelect"/>
     </div>

src/apps/AppIntegralAudit/detail.vue

@@ -1,26 +1,72 @@
 <template>
   <div class="detail">
     <div class="detail-list">
-      <div>
+      <div class="detail-info">
-        <div>申请人:<div>李毅</div></div>
+        <div class="detail-name">申请人:<span>李毅</span></div>
-        <div>新冠疫苗接种</div>
+        <div class="detail-type">新冠疫苗接种</div>
       </div>
-      <div>
+      <div class="detail-area">
-        <div>2020-05-06 13:45</div>
+        <div class="time">2020-05-06 13:45</div>
-        <div>
+        <div class="address">
-          <img src="" alt="">
+          <img src="" alt="" class="addr-img">
           <div>新港镇三联村</div>
         </div>
       </div>
-      <div>
+      <div class="detail-text">
         经村两委及村篮球队青年商讨决定，我村赴黎平参加百村杯篮球赛经费分两阶段分发，第一阶段为小组循环赛，第二阶段为淘汰赛。
         第一阶段费用预计一万元整，其中包括队员球服两套，住宿、饮食
       </div>
-      <div>
+      <div class="detail-img">
         <img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.url)" />
       </div>
     </div>
 
+    <!-- 审核通过、不通过 -->
+    <div class="integral">
+
+    </div>
+
+
+    <!-- 只读通过、不通过 -->
+    <div class="readOnly">
+      <div class="item">
+        <div>积分审核</div>
+        <div>通过</div>
+      </div>
+      <!-- 通过 -->
+      <div v-if="nopass === 0">  
+        <div class="item">
+          <div>积分类别</div>
+          <div>乡村建设类</div>
+        </div>
+        <div class="item">
+          <div>积分事项</div>
+          <div>多字段显示</div>
+        </div>
+        <div class="item">
+          <div>积分方式</div>
+          <div>+20</div>
+        </div>
+      </div>
+      <!-- 不通过 -->
+      <div v-else>
+        <div class="item nopass">
+          <div>不通过的理由</div>
+          <div class="textarea">我村赴黎平参加百村杯篮球赛经费分两阶段分发， 第一阶段为小组循环赛，第二阶段为淘汰赛。第一 其中包括队员球服两套，住宿、饮食</div>
+        </div>
+      </div>
+      <div class="item">
+        <div>审核人</div>
+        <div>李维民</div>
+      </div>
+      <div class="item last">
+        <div>审核时间</div>
+        <div>2022-02-18 18:16:27</div>
+      </div>
+    </div>
+
+    <div style="height: 56px"></div>
+    <div class="saveBtn">保存</div>
   </div>
 </template>
 
@@ -30,8 +76,9 @@ export default {
   data () {
     return {
       data: {
-        files: []
+        files: [],
-      }
+      },
+      nopass: 1
     }
   },
   methods: {
@@ -50,13 +97,115 @@ export default {
 <style lang="scss" scoped>
 .detail {
 
-  img {
+  .detail-list {
+    padding: 20px 30px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    margin-bottom: 16px;
+
+    .detail-info {
+      display: flex;
+      justify-content: space-between;
+      height: 50px;
+      line-height: 50px;
+      .detail-name {
+        font-size: 30px;
+        font-weight: 600;
+        color: #333333;
+      }
+
+      .detail-type {
+        height: 50px;
+        line-height: 50px;
+        color: #135AB8;
+        font-size: 24px;
+        background-color: #e6edf7;
+        padding: 0 25px;
+        border-radius: 16px;
+      }
+
+    }
+
+    .detail-area {
+      display: flex;
+      color: #999999;
+      font-size: 22px;
+      margin-top: 15px;
+
+      .address {
+        display: flex;
+        margin-left: 30px;
+
+        .addr-img {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+
+    .detail-text {
+      color: #333333;
+      font-size: 30px;
+    }
+
+    .detail-img {
+      
+      img {
       width: 220px;
       height: 220px;
       margin-right: 8px;
+      }
+      img:nth-child(3n) {
+        margin-right: 0;
+      }
     }
-    img:nth-child(3n) {
+  }
-      margin-right: 0;
+
+  .integral {}
+
+  .readOnly {
+    padding: 20px 30px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      padding: 30px 0;
+      font-size: 32px;
+      color: #333333;
+      border-bottom: 1px solid #D8DDE6;
+
+      .textarea {
+        margin-top: 30px;
+        color: #999999;
+      }
     }
+
+    .nopass {
+      flex-direction: column;
+      border-bottom: 1px solid #D8DDE6;
+    }
+
+    .last {
+      border-bottom: none;
+    }
+    // .item:nth-last-child(1) {
+    //   border-bottom: none;
+    // }
+  }
+  
+  .saveBtn {
+    position: fixed;
+    bottom: 0;
+    height: 112px;
+    width: 100%;
+    line-height: 112px;
+    background-color: #3975C6;
+    font-size: 32px;
+    color: #FFFFFF;
+    text-align: center;
+  }
+  
 }
 </style>