From 06296781dbf64e0b8ca08e3a07c5efe1cdd99fc5 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 11 Apr 2024 18:45:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/content/Content.vue | 640 ++++++++++++-----------------
 1 file changed, 253 insertions(+), 387 deletions(-)

diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index a03961b..60cebe5 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  unref,
-  watch,
-} from "vue";
+import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from "vue";
 import { chunk, clone } from "lodash-es";
 import { useDialog, useMessage } from "naive-ui";
 import { useRoute, useRouter } from "vue-router";
@@ -125,16 +117,12 @@ function handleKeydown(event) {
       // 清除已经设置的定时器（如果有的话）
       clearTimeout(keyPressTimer);
       const item = taskDetailInfo.value;
-      if (
-        item?.userapprove?.statshis === 2 ||
-        item?.userapprove?.statshis == 3
-      ) {
+      if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
         overTask.value = null;
         return;
       }
 
-      if (validate([item]) == null && batch.value === false)
-        overTask.value = item;
+      if (validate([item]) == null && batch.value === false) overTask.value = item;
       // 执行想要的操作
       approvalHandler();
 
@@ -157,17 +145,13 @@ function handleKeydown(event) {
 
     // 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击
     if (now - lastKeyPressTime < doubleClickInterval) {
-       const item = taskDetailInfo.value;
-      if (
-        item?.userapprove?.statshis === 2 ||
-        item?.userapprove?.statshis == 3
-      ) {
+      const item = taskDetailInfo.value;
+      if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
         overTask.value = null;
         return;
       }
 
-      if (validate([item]) == null && batch.value === false)
-        overTask.value = item;
+      if (validate([item]) == null && batch.value === false) overTask.value = item;
       // 执行想要的操作
       const modal = unref(notPassModalRef)! as any;
       modal.showModal([taskDetailInfo.value]);
@@ -240,8 +224,7 @@ function approvalHandler(items?: any) {
     processItems = [cloneItem];
   }
 
-  if (items !== undefined && !(items instanceof PointerEvent))
-    processItems = items;
+  if (items !== undefined && !(items instanceof PointerEvent)) processItems = items;
 
   const msg = validate(processItems);
 
@@ -278,24 +261,25 @@ function approvalHandler(items?: any) {
     negativeText: "取消",
     onPositiveClick: () => {
       doAudit(param);
-       overTask.value = null;
+      overTask.value = null;
+    },
+    onNegativeClick: () => {
+      overTask.value = null;
     },
-    onNegativeClick: () => {overTask.value = null;},
   });
 }
-function approvalHandlerx(item?:any){
- 
-  console.log(item)
-    alert(1)
+function approvalHandlerx(item?: any) {
+  console.log(item);
+  alert(1);
 }
-function singleRejectHandlex(item?:any){
-  console.log(item)
- const modal = unref(notPassModalRef)! as any;
+function singleRejectHandlex(item?: any) {
+  console.log(item);
+  const modal = unref(notPassModalRef)! as any;
 
- modal.showModal([item]);
+  modal.showModal([item]);
 }
 function rejectHandler(items?: any) {
-  console.log(items)
+  console.log(items);
   const modal = unref(notPassModalRef)! as any;
   modal.showModal(items);
 }
@@ -348,14 +332,13 @@ async function handleDragEnd(event, item) {
   }
 }
 async function addSuspicious() {
-
-  console.log(taskDetailInfo.value.ocrPicture)
- if (taskDetailInfo.value.ocrPicture.pictureid) {
+  console.log(taskDetailInfo.value.ocrPicture);
+  if (taskDetailInfo.value.ocrPicture.pictureid) {
     const res = await dubiousfileyd({
       pictureid: taskDetailInfo.value.ocrPicture.id,
     });
 
-  if (res.code === "OK") {
+    if (res.code === "OK") {
       message.success("加入成功");
       setBatch(false);
       getTableData();
@@ -364,8 +347,8 @@ async function addSuspicious() {
       message.error(res.message);
     }
     taskStore.setInFile(false);
-  
-}}
+  }
+}
 async function getTableData() {
   const useInfo = userStore.getUserInfo;
   const listData = [];
@@ -431,7 +414,7 @@ function overTaskHandle() {
 
 function leaveTaskHandler() {
   overTask.value = null;
-   overTasktwo.value = null;
+  overTasktwo.value = null;
 }
 
 function showActionsModal() {
@@ -482,15 +465,13 @@ async function getDetail() {
 function notPassSuccess(param) {
   batchModalRef.value.reload();
   reloadList(param, "不通过");
-  overTask.value=null
+  overTask.value = null;
 }
 
 function reloadList(param, text) {
   // 修改左侧状态
   const id = currentTaskId();
-  const hasCurrentId = param.flowTaskInfoList.find(
-    (item) => item.formId === id
-  );
+  const hasCurrentId = param.flowTaskInfoList.find((item) => item.formId === id);
   finalStore.setListKey();
   if (hasCurrentId) emit("setAsideItemName", text);
 
@@ -515,9 +496,7 @@ function getrowValue(e) {
     const hostname = window.location.hostname;
     const port = window.location.port;
     const hostWithPort = protocol + "//" + hostname + ":" + port + "/";
-    window.open(
-      hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng
-    );
+    window.open(hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng);
   }
 }
 function overTaskHandelr(item: any) {
@@ -526,11 +505,10 @@ function overTaskHandelr(item: any) {
     return;
   }
 
-  if (validate([item]) == null && batchtwo.value === false)
-    overTasktwo.value = item;
+  if (validate([item]) == null && batchtwo.value === false) overTasktwo.value = item;
 }
-function closePassno(){
-    overTask.value=null
+function closePassno() {
+  overTask.value = null;
 }
 </script>
 
@@ -540,18 +518,8 @@ function closePassno(){
       <div class="left">
         <span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
         <template v-if="!isDetail">
-          <SvgIcon
-            size="22"
-            class="forward"
-            name="arrow-left"
-            @click="backHandler"
-          />
-          <SvgIcon
-            size="22"
-            class="back"
-            name="arrow-right"
-            @click="forwardHandler"
-          />
+          <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
+          <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
         </template>
       </div>
       <div v-if="!isDetail" class="right">
@@ -694,18 +662,10 @@ function closePassno(){
           />
         </div>
         <div class="mark">
-          <SvgIcon
-            v-show="taskDetailInfo?.iztrueorfalse === 0"
-            size="128"
-            name="jia"
-          />
+          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
         </div>
         <div class="mark">
-          <SvgIcon
-            v-show="taskDetailInfo?.iztrueorfalse === 1"
-            size="128"
-            name="zhen"
-          />
+          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
         </div>
         <div class="big-mark" />
         <div class="preview" @click="previewHandler">
@@ -715,11 +675,7 @@ function closePassno(){
           <n-grid x-gap="12" y-gap="10" :cols="12">
             <n-gi span="4" class="gi1">
               <span>
-                <img
-                  class="icon-status"
-                  src="@/assets/images/task/status.png"
-                  alt=""
-                />
+                <img class="icon-status" src="@/assets/images/task/status.png" alt="" />
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
@@ -738,41 +694,21 @@ function closePassno(){
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
-              <span class="value num"
-                >{{ totalCount }}<span class="unit">张</span>
-              </span>
+              <span class="value num">{{ totalCount }}<span class="unit">张</span> </span>
               <span class="label">相似匹配</span>
             </n-gi>
           </n-grid>
         </div>
         <div class="time">
           <div class="time-item">
-            <SvgIcon
-              class="svg-time"
-              color="#FFF"
-              size="16"
-              name="camera-time"
-            />
-            <span>{{
-              taskDetailInfo?.ocrPicture?.photoDateTimestamp
-                ? formatToDateHMS(
-                    Number(taskDetailInfo.ocrPicture.photoDateTimestamp)
-                  )
-                : "-"
-            }}</span>
+            <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+            <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
           </div>
           <div class="time-item time-item2">
-            <SvgIcon
-              class="svg-time"
-              color="#FFF"
-              size="16"
-              name="submit-time"
-            />
+            <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
             <span>{{
               taskDetailInfo?.ocrPicture?.submitDateTimestamp
-                ? formatToDateHMS(
-                    Number(taskDetailInfo.ocrPicture.submitDateTimestamp)
-                  )
+                ? formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp))
                 : "-"
             }}</span>
           </div>
@@ -840,12 +776,7 @@ function closePassno(){
                 />
                 <div class="time">
                   <div class="time-item">
-                    <SvgIcon
-                      class="svg-time"
-                      color="#FFF"
-                      size="8"
-                      name="camera-time"
-                    />
+                    <SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" />
                     <span>{{
                       item.photoDateTimestamp
                         ? formatToDateHMS(Number(item.photoDateTimestamp))
@@ -853,12 +784,7 @@ function closePassno(){
                     }}</span>
                   </div>
                   <div class="time-item time-item2">
-                    <SvgIcon
-                      class="svg-time"
-                      color="#FFF"
-                      size="8"
-                      name="submit-time"
-                    />
+                    <SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" />
                     <span>{{
                       item.submitDateTimestamp
                         ? formatToDateHMS(Number(item.submitDateTimestamp))
@@ -927,16 +853,10 @@ function closePassno(){
                       {{ item[0].value }}
                     </div>
                   </div>
-                  <div
-                    class="viewlabel"
-                    v-if="!(item[0].label == '拜访终端名称')"
-                  >
+                  <div class="viewlabel" v-if="!(item[0].label == '拜访终端名称')">
                     {{ item[0].label }}
                   </div>
-                  <div
-                    class="viewvalue"
-                    v-if="!(item[0].label == '拜访终端名称')"
-                  >
+                  <div class="viewvalue" v-if="!(item[0].label == '拜访终端名称')">
                     {{ item[0].value }}
                   </div>
                   <div
@@ -977,13 +897,7 @@ function closePassno(){
       </n-tab-pane>
     </n-tabs>
     <div v-else class="imgbottom">
-      <div
-        style="
-          display: flex;
-          justify-content: space-between;
-          padding: 12px 0px 3px 0;
-        "
-      >
+      <div style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0">
         <div>
           <span
             style="
@@ -1006,140 +920,100 @@ function closePassno(){
         >
           <div style="cursor: pointer" @click="sortHandler('createdate')">
             <span>时间排序</span>
-            <SvgIcon
-              style="margin-left: 5px"
-              name="sort"
-              size="12"
-            
-            />
-            <SvgIcon
-              style="margin-left: 5px"
-              name="active-sort"
-              size="12"
-       
-            />
+            <SvgIcon style="margin-left: 5px" name="sort" size="12" />
+            <SvgIcon style="margin-left: 5px" name="active-sort" size="12" />
           </div>
-          <div
-            style="margin-left: 15px; cursor: pointer"
-           
-          >
+          <div style="margin-left: 15px; cursor: pointer">
             <span>相似度排序</span>
-            <SvgIcon
-              style="margin-left: 5px"
-              name="sort"
-              size="12"
-           
-            />
-            <SvgIcon
-              style="margin-left: 5px"
-              name="active-sort"
-              size="12"
-      
-            />
+            <SvgIcon style="margin-left: 5px" name="sort" size="12" />
+            <SvgIcon style="margin-left: 5px" name="active-sort" size="12" />
           </div>
         </div>
       </div>
       <div class="allview">
-      <div class="list" >
+        <div class="list">
+          <div
+            v-for="item in taskDetailPictureList"
+            :key="item.id"
+            class="item"
+            draggable="true"
+            @dragend="
+              (event) => {
+                handleDragEnd(event, item);
+              }
+            "
+          >
+            <div
+              class="img-wrapper"
+              :style="{
+                'background-image': `url(${item.serverThumbnailUrl})`,
+              }"
+              @mouseover="overTaskHandelr(item)"
+              @mouseleave="leaveTaskHandler"
+            >
               <div
-                v-for="item in taskDetailPictureList"
-                :key="item.id"
-                class="item"
-                draggable="true"
-                @dragend="
-                  (event) => {
-                    handleDragEnd(event, item);
-                  }
-                "
+                v-show="overTasktwo && overTasktwo.id === item.id && !batch"
+                class="action"
               >
-                <div
-                  class="img-wrapper"
-                  :style="{
-                    'background-image': `url(${item.serverThumbnailUrl})`,
-                  }"
-                           @mouseover="overTaskHandelr(item)"
-        @mouseleave="leaveTaskHandler"
-                >
-             
-                 <div
-            v-show="overTasktwo&& overTasktwo.id === item.id&&!batch"
-            class="action"
-      
-       
-          >
-            <SvgIcon
-              style="cursor: pointer"
-              name="t1"
-              @click.stop="approvalHandler([item])"
-            />
-            <SvgIcon
-              style="cursor: pointer; margin-left: 40px"
-              name="t2"
-              @click.stop="singleRejectHandlex(item)"
-            />
-          </div>
-                </div>
-                <div class="small-mark" />
-                <div class="check">
-                  <n-checkbox
-                    v-show="batch && item.historyStates === 1"
-                    v-model:checked="item.checked"
-                    @click.stop
-                    @update:checked="onCheckChange($event, item)"
-                  />
-                </div>
-
-                <img
-                  v-if="item.historyStates === 2"
-                  class="tag-status"
-                  src="@/assets/images/task/tag-pass.png"
-                  alt=""
+                <SvgIcon
+                  style="cursor: pointer"
+                  name="t1"
+                  @click.stop="approvalHandler([item])"
                 />
-                <img
-                  v-if="item.historyStates === 3"
-                  class="tag-status"
-                  src="@/assets/images/task/tag-not-pass.png"
-                  alt=""
+                <SvgIcon
+                  style="cursor: pointer; margin-left: 40px"
+                  name="t2"
+                  @click.stop="singleRejectHandlex(item)"
                 />
-                <div class="time">
-                  <div class="time-item">
-                    <SvgIcon
-                      class="svg-time"
-                      color="#FFF"
-                      size="16"
-                      name="camera-time"
-                    />
-                    <span>{{
-                      item.photoDateTimestamp
-                        ? formatToDateHMS(Number(item.photoDateTimestamp))
-                        : "-"
-                    }}</span>
-                  </div>
-                  <div class="time-item time-item2">
-                    <SvgIcon
-                      class="svg-time"
-                      color="#FFF"
-                      size="16"
-                      name="submit-time"
-                    />
-                    <span>{{
-                      item.submitDateTimestamp
-                        ? formatToDateHMS(Number(item.submitDateTimestamp))
-                        : "-"
-                    }}</span>
-                  </div>
-                </div>
-                <div
-                  :class="{ 'percent-red': item.similarityScore === 100 }"
-                  class="percent"
-                >
-                  {{ item.similarityScore }}<span class="percent-unit">%</span>
-                </div>
               </div>
-              
             </div>
-    </div>
-     <!-- <div class="wrapper-list">
+            <div class="small-mark" />
+            <div class="check">
+              <n-checkbox
+                v-show="batch && item.historyStates === 1"
+                v-model:checked="item.checked"
+                @click.stop
+                @update:checked="onCheckChange($event, item)"
+              />
+            </div>
+
+            <img
+              v-if="item.historyStates === 2"
+              class="tag-status"
+              src="@/assets/images/task/tag-pass.png"
+              alt=""
+            />
+            <img
+              v-if="item.historyStates === 3"
+              class="tag-status"
+              src="@/assets/images/task/tag-not-pass.png"
+              alt=""
+            />
+            <div class="time">
+              <div class="time-item">
+                <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+                <span>{{
+                  item.photoDateTimestamp
+                    ? formatToDateHMS(Number(item.photoDateTimestamp))
+                    : "-"
+                }}</span>
+              </div>
+              <div class="time-item time-item2">
+                <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+                <span>{{
+                  item.submitDateTimestamp
+                    ? formatToDateHMS(Number(item.submitDateTimestamp))
+                    : "-"
+                }}</span>
+              </div>
+            </div>
+            <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+              {{ item.similarityScore }}<span class="percent-unit">%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="wrapper-list">
         <div
           v-for="(item, index) in taskDetailPictureList"
           :key="index"
@@ -1220,12 +1094,8 @@ function closePassno(){
         </div>
       </div>-->
     </div>
-    <NotPassed ref="notPassModalRef" @success="notPassSuccess"  @close="closePassno"/>
-    <BatchModal
-      ref="batchModalRef"
-      @reject="rejectHandler"
-      @approval="approvalHandler"
-    />
+    <NotPassed ref="notPassModalRef" @success="notPassSuccess" @close="closePassno" />
+    <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
     <CustomSettingModal ref="CustomSettingModalRef" @on-ok="getDetail" />
   </div>
 </template>
@@ -1882,145 +1752,141 @@ function closePassno(){
   margin: 3px 0 10px 0;
   max-width: 650px;
 }
- .allview {
-      flex: 0.5;
-      background: #f6f9fd;
-      border-radius: 8px;
-     // margin-left: 20px;
-      padding-top: 24px;
-      .action {
-        position: absolute;
-        z-index: 10;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        border-radius: 8px;
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-      .right-card {
-        padding: 3px;
-      }
-
-      .header {
-        display: flex;
-        justify-content: space-between;
-        font-size: 17px;
-        font-weight: bold;
-        color: #333333;
-        margin-bottom: 16px;
-      }
-
-      .list {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        justify-content: flex-start;
-        flex-shrink: 0;
-      }
-
-      .item {
-        // flex-basis: calc((100% - 48px) / 3);
-        box-sizing: border-box;
-        border-radius: 8px;
-        position: relative;
-        // overflow: hidden;
-        margin: 0px 16px 27px 0px;
-
-        .small-mark {
-          width: 100%;
-          height: 53px;
-          background: linear-gradient(
-            180deg,
-            rgba(0, 0, 0, 0.01),
-            rgba(0, 0, 0, 0.44) 88%
-          );
-          border-radius: 0px 8px 8px 8px;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          z-index: 0;
-        }
-
-        .tag-status {
-          width: 46px;
-          height: 22px;
-          position: absolute;
-          left: -4px;
-          top: 4px;
-        }
-
-        .time {
-          position: absolute;
-          z-index: 3;
-          left: 3px;
-          bottom: 3px;
+.allview {
+  flex: 0.5;
+  background: #f6f9fd;
+  border-radius: 8px;
+  // margin-left: 20px;
+  padding-top: 24px;
+  .action {
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .right-card {
+    padding: 3px;
+  }
 
-          .time-item {
-            display: flex;
-            align-items: center;
-            font-size: 16px;
-            font-family: PingFang SC, PingFang SC-Medium;
-            font-weight: 500;
-            color: #ffffff;
-            margin-bottom: 2px;
-            line-height: 12px;
-          }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 17px;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 16px;
+  }
 
-          .time-item2 {
-            margin-bottom: 0;
-          }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-shrink: 0;
+  }
 
-          .svg-time {
-            margin-right: 5px;
-          }
-        }
+  .item {
+    // flex-basis: calc((100% - 48px) / 3);
+    box-sizing: border-box;
+    border-radius: 8px;
+    position: relative;
+    // overflow: hidden;
+    margin: 0px 16px 27px 0px;
+
+    .small-mark {
+      width: 100%;
+      height: 53px;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.44) 88%);
+      border-radius: 0px 8px 8px 8px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 0;
+    }
 
-        .img-wrapper {
-          position: relative;
-          width: 230px;
-          height: 130px;
-          overflow: hidden;
-          background-size: cover;
-          background-position: center;
-          background-repeat: no-repeat;
-          border-radius: 8px;
-          cursor: n-resize;
-        }
+    .tag-status {
+      width: 46px;
+      height: 22px;
+      position: absolute;
+      left: -4px;
+      top: 4px;
+    }
 
-        .check {
-          position: absolute;
-          z-index: 5;
-          left: 6px;
-          top: 4px;
-        }
-      }
+    .time {
+      position: absolute;
+      z-index: 3;
+      left: 3px;
+      bottom: 3px;
 
-      .percent {
-        position: absolute;
+      .time-item {
         display: flex;
         align-items: center;
-        justify-content: center;
-        width: 35px;
-        height: 18px;
-        opacity: 0.9;
-        background: #6f92fd;
-        border-radius: 6px 0px 6px 0px;
-        z-index: 5;
-        right: 12px;
-        top: 2px;
-        color: #fff;
-        font-size: 14px;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 500;
+        color: #ffffff;
+        margin-bottom: 2px;
+        line-height: 12px;
       }
 
-      .percent-unit {
-        font-size: 8px;
-        margin-top: 4px;
+      .time-item2 {
+        margin-bottom: 0;
       }
 
-      .percent-red {
-        background: #ff4e4f;
+      .svg-time {
+        margin-right: 5px;
       }
     }
+
+    .img-wrapper {
+      position: relative;
+      width: 230px;
+      height: 130px;
+      overflow: hidden;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      border-radius: 8px;
+      cursor: n-resize;
+    }
+
+    .check {
+      position: absolute;
+      z-index: 5;
+      left: 6px;
+      top: 4px;
+    }
+  }
+
+  .percent {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 18px;
+    opacity: 0.9;
+    background: #6f92fd;
+    border-radius: 6px 0px 6px 0px;
+    z-index: 5;
+    right: 12px;
+    top: 2px;
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .percent-unit {
+    font-size: 8px;
+    margin-top: 4px;
+  }
+
+  .percent-red {
+    background: #ff4e4f;
+  }
+}
 </style>
-- 
2.39.3