From b8b9db8294247ea5edaa69fabfc3593cf2faa487 Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Tue, 26 Mar 2024 00:01:41 +0800
Subject: [PATCH] ui

---
 src/views/task/content/Content.vue      |  9 +++
 src/views/task/content/History.vue      | 53 ++++++++++++++---
 src/views/task/content/PictureTable.vue | 75 ++++++++++++++++++++++---
 3 files changed, 121 insertions(+), 16 deletions(-)

diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index b445f99..5733124 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -582,6 +582,15 @@ function getPercent(pictureid: string) {
 </template>
 
 <style lang="less" scoped>
+::v-deep(.n-tabs-tab__label) {
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  color: #666666;
+}
+::v-deep(.n-tabs-tab--active .n-tabs-tab__label) {
+  color: #507AFD;
+}
 .wrapper {
   display: flex;
   flex: 1;
diff --git a/src/views/task/content/History.vue b/src/views/task/content/History.vue
index f4be090..c84f668 100644
--- a/src/views/task/content/History.vue
+++ b/src/views/task/content/History.vue
@@ -92,14 +92,16 @@ onMounted(() => {
             <div class="card">
               <n-collapse arrow-placement="right" :default-expanded-names="['1']">
                 <template #header-extra>
-                  审批结果：{{ getLabel(props.data.states) }}
+                  <div class="status">
+                    审批结果：{{ getLabel(props.data.states) }}
+                  </div>
                 </template>
 
                 <n-collapse-item title="收起" name="1">
                   <div v-for="items in props.data.userapproveList" :key="items.nodeName" class="item">
                     <div class="header">
                       <SvgIcon class="icon" name="approve" size="16" />
-                      <div class="title">
+                      <div class="item-title">
                         {{ items.nodeName }}
                       </div>
                     </div>
@@ -131,11 +133,23 @@ onMounted(() => {
 </template>
 
 <style lang="less" scoped>
+  ::v-deep(.n-timeline-item-timeline__line) {
+    width: 1px!important;
+  }
+  ::v-deep(.n-collapse-item__header) {
+    flex-direction: row-reverse;
+  }
+  ::v-deep(.n-collapse-item__header-main) {
+    flex: none!important;
+  }
+  ::v-deep(.n-collapse-item__header-extra) {
+    flex: 1;
+  }
   .info-header {
     display: flex;
+    padding: 6px 0 15px 0;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 18px;
     .left_box {
       display: flex;
       align-items: center;
@@ -144,15 +158,13 @@ onMounted(() => {
         align-items: center;
         font-size: 16px;
         font-family: PingFang SC, PingFang SC-Medium;
-        font-weight: Medium;
-        text-align: left;
+        font-weight: 500;
         color: #333333;
-        line-height: 22px;
 
         &:before {
           content: "";
           width: 4px;
-          height: 18px;
+          height: 12px;
           background: #507afd;
           border-radius: 3px;
           display: inline-block;
@@ -160,6 +172,18 @@ onMounted(() => {
         }
       }
     }
+    .right_box {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC-Regular;
+      color: #666666;
+
+      .icon{
+        margin-left: 7px
+      }
+    }
   }
 
   .point-line{
@@ -210,6 +234,14 @@ onMounted(() => {
     padding: 16px;
   }
 
+  .status{
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: 500;
+    text-align: center;
+    color: #333333;
+  }
+
   .point{
     width: 4px;
     height: 4px;
@@ -218,6 +250,13 @@ onMounted(() => {
     margin-right: 6px;
   }
 
+  .item-title{
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: 500;
+    color: #333333;
+  }
+
   .header{
     display: flex;
     align-items: center;
diff --git a/src/views/task/content/PictureTable.vue b/src/views/task/content/PictureTable.vue
index a2192f9..d2fa022 100644
--- a/src/views/task/content/PictureTable.vue
+++ b/src/views/task/content/PictureTable.vue
@@ -8,6 +8,13 @@ defineProps({
 </script>
 
 <template>
+  <div class="info-header">
+    <div class="left_box">
+      <div class="title">
+        基本信息
+      </div>
+    </div>
+  </div>
   <table class="description">
     <tr>
       <th>图片名称</th>
@@ -15,15 +22,13 @@ defineProps({
         {{ data?.ocrPicture?.imgname }}
       </td>
       <th>图片格式</th>
-      <td class="blue">
-        
-      </td>
+      <td class="blue" />
     </tr>
     <tr>
       <th>图片大小</th>
-      <td></td>
+      <td />
       <th>图片尺寸</th>
-      <td></td>
+      <td />
     </tr>
     <tr>
       <th>上传时间</th>
@@ -33,18 +38,62 @@ defineProps({
     </tr>
     <tr>
       <th>标记时间</th>
-      <td> </td>
+      <td />
       <th>色彩空间</th>
       <td>{{ data?.ocrPicture?.space }}</td>
     </tr>
     <tr>
-      <th>来源</th>
-      <td> {{ data?.ocrPicture?.source }}</td>
+      <th>
+        来源
+      </th>
+      <td colspan="3">
+        {{ data?.ocrPicture?.source }}
+      </td>
     </tr>
   </table>
 </template>
 
 <style lang="less" scoped>
+.info-header {
+  display: flex;
+  padding: 6px 0 15px 0;
+  align-items: center;
+  justify-content: space-between;
+  .left_box {
+    display: flex;
+    align-items: center;
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 500;
+      color: #333333;
+
+      &:before {
+        content: "";
+        width: 4px;
+        height: 12px;
+        background: #507afd;
+        border-radius: 3px;
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .right_box {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    color: #666666;
+
+    .icon{
+      margin-left: 7px
+    }
+  }
+}
 .description {
   width: 100%;
   font-size: 14px;
@@ -54,16 +103,24 @@ th {
   width: 20%;
   background-color: #fafafa;
   color: #666666;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  line-height: 22px;
 }
 
 td {
   width: 30%;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  color: #666666;
 }
 
 th,
 td {
   border: 1px solid #ebebeb;
-  padding: 12px 24px;
+  padding: 10px 24px;
   text-align: left;
 }