diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 19076e4..c58ef34 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -737,7 +737,6 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
         isFullScreen
           ? {
               height: '596px',
-             
             }
           : {}
       "
@@ -753,7 +752,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
           width: '2px',
           height: '91.5vh',
         }"
-      ></div>
+      />
       <div
         v-show="!imgbigshow"
         class="aside-collapse-btn"
@@ -787,7 +786,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
               : {
                   height: '92vh',
                   //flex: 1,
-             
+
                   'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
                 }
             : {
@@ -839,11 +838,15 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
             class="img-status"
             src="@/assets/images/task/not_pass.png"
             alt=""
+            HEAD
           />
         </div>
         <div class="mark">
           <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
         </div>
+        <div class="mark">
+          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
+        </div>
         <div class="mark">
           <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
         </div>
@@ -855,7 +858,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
           <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="" />t
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
@@ -909,15 +912,16 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
         class="right"
         :style="
           isFullScreen
-            ? {flex: 0.3,
-                 // flex: 0,
+            ? {
+                flex: 0.3,
+                // flex: 0,
                 //width: '30vw',
                 borderLeft: '2px solid #507AFD',
                 position: 'relative',
                 borderRadius: 0,
-                height:'596px'
+                height: '596px',
               }
-            : { flex: 0.5}
+            : { flex: 0.5 }
         "
       >
         <div
@@ -938,8 +942,8 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
           />
         </div>
         <n-scrollbar v-if="totalCount > 0" style="max-height: 100%">
-         <div class="right-card">
-        <div v-show="!isFullScreen" class="header">
+          <div class="right-card">
+            <div v-show="!isFullScreen" class="header">
               <span>相似图片({{ totalCount }})</span>
               <SvgIcon
                 style="margin-right: 20px; cursor: pointer"
@@ -1015,12 +1019,10 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
               </div>
             </div>
             <n-scrollbar v-else style="max-height: 100%">
-              <div
-                :style="{ fontSize: '22px', fontWeight: 500, color: '#0D0B22' }"
-              >
+              <div :style="{ fontSize: '22px', fontWeight: 500, color: '#0D0B22' }">
                 {{ taskDetailInfo.fromtaskname }}
               </div>
-           <div class="tags">
+              <div class="tags">
                 <div
                   v-if="taskDetailInfo?.userapprove?.statshis == 1"
                   class="tag tag-submiting"
diff --git a/src/views/worksheet/aside/ListItem.vue b/src/views/worksheet/aside/ListItem.vue
index aca8520..53265ec 100644
--- a/src/views/worksheet/aside/ListItem.vue
+++ b/src/views/worksheet/aside/ListItem.vue
@@ -132,7 +132,7 @@ onMounted(async () => {
     <template
       v-if="showFieldList?.length > 5"
     >
-      <div class="absolute bottom-0 py-[8px] pl-[36px] item-action">
+      <div class="absolute bottom-0 py-[8px] pl-[36px] text-[#666] item-action">
         <span class="cursor-pointer" @click.stop="showFull = !showFull">
           <SvgIcon style="margin-left: 6px" name="expand" size="16" />
           <SvgIcon style="margin-left: 6px" name="collapse" size="16" />
diff --git a/src/views/worksheet/aside/WorkSheetList.vue b/src/views/worksheet/aside/WorkSheetList.vue
index dd98716..f5a741f 100644
--- a/src/views/worksheet/aside/WorkSheetList.vue
+++ b/src/views/worksheet/aside/WorkSheetList.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { throttle } from "lodash-es";
-import { useInfiniteScroll } from "@vueuse/core";
-import { useMessage } from "naive-ui";
-import ApprovalModal from "../modal/ApprovalModal.vue";
-import ListItem from "./ListItem.vue";
-import { deletePackage } from "@/api/home/main";
-import { useWorkOrder } from "@/store/modules/workOrder";
-import { isEmpty } from "@/utils";
-import type { PackageListItem } from "/#/workorder";
-import NotPassed from "@/components/NotPassed.vue";
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { throttle } from 'lodash-es'
+import { useInfiniteScroll } from '@vueuse/core'
+import { useMessage } from 'naive-ui'
+import ApprovalModal from '../modal/ApprovalModal.vue'
+import ListItem from './ListItem.vue'
+import { deletePackage } from '@/api/home/main'
+import { useWorkOrder } from '@/store/modules/workOrder'
+import { isEmpty } from '@/utils'
+import type { PackageListItem } from '/#/workorder'
+import NotPassed from '@/components/NotPassed.vue'
 
 defineProps({
   showFieldList: {
@@ -20,57 +20,59 @@ defineProps({
     type: Array,
     default: () => [],
   },
-});
+})
 
-const emit = defineEmits(["ApprovalOver"]);
+const emit = defineEmits(['ApprovalOver'])
 
-const workStore = useWorkOrder();
-const data = ref<PackageListItem[]>([]);
-const activeId = ref("");
-const el = ref<HTMLDivElement | null>(null);
-const keyword = ref("");
-const canloadMore = ref(true);
-const isLoading = ref(false);
+const workStore = useWorkOrder()
+const data = ref<PackageListItem[]>([])
+const activeId = ref('')
+const el = ref<HTMLDivElement | null>(null)
+const keyword = ref('')
+const canloadMore = ref(true)
+const isLoading = ref(false)
 
 const pagination = reactive({
   pageNo: 0,
   pageSize: 10,
-});
+})
 
-const approvalModalRef: any = ref(null);
-const notPassedRef: any = ref(null);
-const overTask = ref<any>(null);
+const approvalModalRef: any = ref(null)
+const notPassedRef: any = ref(null)
+const overTask = ref<any>(null)
 
 function selectHandler(id: string, index: number) {
   // console.log('selectHandler',id)
-  workStore.setActive(index);
+  workStore.setActive(index)
   // showModal(approvalModalRef, id)
 }
 
 useInfiniteScroll(
   el as any,
   () => {
-    loadMore();
+    loadMore()
   },
   {
     distance: 10,
     interval: 1500,
     canLoadMore: () => canloadMore.value,
-  }
-);
+  },
+)
 
 async function loadMore() {
-  if (isLoading.value || el.value == null) return;
-  isLoading.value = true;
+  if (isLoading.value || el.value == null)
+    return
+  isLoading.value = true
   try {
-    const more = await fetchList();
+    const more = await fetchList()
     more.forEach((ele) => {
-      ele.search = JSON.parse(ele.search);
+      ele.search = JSON.parse(ele.search)
       // ele.search.createTime = ele.search.submit_date_timestamp
-    });
-    data.value.push(...more);
-  } finally {
-    isLoading.value = false;
+    })
+    data.value.push(...more)
+  }
+  finally {
+    isLoading.value = false
   }
 }
 
@@ -82,112 +84,117 @@ async function loadMore() {
 
 async function fetchList() {
   try {
-    pagination.pageNo += 1;
-    const result = await workStore.fetchOrderList(pagination, keyword.value);
-    const { data, pageCount } = result;
-    if (pageCount !== 0) canloadMore.value = pageCount >= pagination.pageNo;
-    else canloadMore.value = false;
-
-    return data || [];
-  } catch (error) {
-    canloadMore.value = false;
-    return [];
+    pagination.pageNo += 1
+    const result = await workStore.fetchOrderList(pagination, keyword.value)
+    const { data, pageCount } = result
+    if (pageCount !== 0)
+      canloadMore.value = pageCount >= pagination.pageNo
+    else canloadMore.value = false
+
+    return data || []
+  }
+  catch (error) {
+    canloadMore.value = false
+    return []
   }
 }
 
 watch(
   () => workStore.activeId,
   (newVal) => {
-    if (isEmpty(newVal)) return;
-    activeId.value = newVal;
-    approvalModalRef.value.showModal(workStore.dataId);
-  }
-);
+    if (isEmpty(newVal))
+      return
+    activeId.value = newVal
+    approvalModalRef.value.showModal(workStore.dataId)
+  },
+)
 
 function reset() {
-  pagination.pageNo = 0;
-  pagination.pageSize = 10;
-  canloadMore.value = true;
-  data.value.length = 0;
+  pagination.pageNo = 0
+  pagination.pageSize = 10
+  canloadMore.value = true
+  data.value.length = 0
 
-  workStore.reset();
+  workStore.reset()
 }
 
 function notPass(value) {
-  notPassedRef.value.showModal(value);
+  notPassedRef.value.showModal(value)
 }
 
 async function search(word: string) {
-  keyword.value = word;
-  reset();
+  keyword.value = word
+  reset()
   useInfiniteScroll(
     el as any,
     () => {
-      loadMore();
+      loadMore()
     },
-    { distance: 10, canLoadMore: () => canloadMore.value }
-  );
+    { distance: 10, canLoadMore: () => canloadMore.value },
+  )
 }
 function overTaskHandelr(item: any) {
-  overTask.value = item;
+  overTask.value = item
 }
 function leaveTaskHandler(event) {
-  if (event?.relatedTarget?.id !== "taskPopconfirmRef") overTask.value = null;
+  if (event?.relatedTarget?.id !== 'taskPopconfirmRef')
+    overTask.value = null
 }
-const message = useMessage();
+const message = useMessage()
 function dismisClick(packageId: string) {
   deletePackage({ packageId }).then((res) => {
-    if (res.code === "OK") {
-      message.success("解散任务包成功");
-      reset();
-      loadMore();
+    if (res.code === 'OK') {
+      message.success('解散任务包成功')
+      reset()
+      loadMore()
     }
-  });
+  })
 }
 function ApprovalOver(packageId) {
-  emit("ApprovalOver", packageId);
+  emit('ApprovalOver', packageId)
 }
 
 defineExpose({
   search,
-});
+})
 
 const onKeydown = throttle((event) => {
-  const eles = ["INPUT", "TEXTAREA"];
-  if (eles.includes(event.target.tagName)) return;
+  const eles = ['INPUT', 'TEXTAREA']
+  if (eles.includes(event.target.tagName))
+    return
 
-  if (event.defaultPrevented) return; // 如果已取消默认操作，则不应执行任何操作
+  if (event.defaultPrevented)
+    return // 如果已取消默认操作，则不应执行任何操作
 
-  const handled = false;
+  const handled = false
   if (event.key !== undefined) {
     // 使用 KeyboardEvent.key 处理事件，并将 handled 设置为 true。
-  } else if (event.keyCode !== undefined) {
+  }
+  else if (event.keyCode !== undefined) {
     // 使用 KeyboardEvent.keyCode 处理事件并将 handled 设置为 true。
   }
 
   if (handled) {
     // 如果事件已处理，则禁止“双重操作”
-    event.preventDefault();
-  }
-  if (event.key === "ArrowUp") {
-    const prev = data.value[workStore.currentIndex - 1]?.id;
-    if (prev) selectHandler(prev, workStore.currentIndex - 1);
+    event.preventDefault()
   }
-  if (event.key === "ArrowDown") {
-    const next = data.value[workStore.currentIndex + 1]?.id;
-    if (next) selectHandler(next, workStore.currentIndex + 1);
+  if (event.key === 'ArrowLeft') {
+    const prev = data.value[workStore.currentIndex - 1]?.id
+    if (prev)
+      selectHandler(prev, workStore.currentIndex - 1)
   }
-  if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
-    if (activeId.value) activeId.value = "";
-    else activeId.value = data.value[workStore.currentIndex]?.checkDuplicateId;
+  if (event.key === 'ArrowRight') {
+    const next = data.value[workStore.currentIndex + 1]?.id
+    if (next)
+      selectHandler(next, workStore.currentIndex + 1)
   }
-}, 500);
+}, 500)
 onMounted(() => {
-  document.addEventListener("keydown", onKeydown, true);
-});
+  document.addEventListener('keydown', onKeydown, true)
+})
 onUnmounted(() => {
-  document.removeEventListener("keydown", onKeydown);
-});
+  document.removeEventListener('keydown', onKeydown)
+})
 </script>
 
 <template>
diff --git a/src/views/worksheet/components/pictureCard.vue b/src/views/worksheet/components/pictureCard.vue
new file mode 100644
index 0000000..310c6b2
--- /dev/null
+++ b/src/views/worksheet/components/pictureCard.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  imgurl: String,
+  isFullScreen: Boolean,
+  imgbigshow: Boolean,
+  taskDetailInfo: Object,
+  batch: Boolean,
+
+})
+const imageRef = ref<ComponentElRef | null>()
+const overTask = ref<any>(null)
+const overTasktwo = ref<any>(null)
+
+function overTaskHandle() {
+  const item = props.taskDetailInfo
+  if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
+    overTask.value = null
+    return
+  }
+
+  if (validate([item]) == null && props.batch === false)
+    overTask.value = item
+}
+// states:1未提交，2待审批，3通过，4不通过
+function validate(items: any[]) {
+  if (items.length === 0)
+    return '至少选中一个任务'
+
+  // const useInfo = userStore.getUserInfo
+  // const username = useInfo.loginname
+
+  // for (const item of items) {
+  //   const { iztrueorfalse, states, assignee } = item
+  //   if (iztrueorfalse === null)
+  //     return '未判别真假'
+
+  //   else if (states !== 2)
+  //     return '审批状态不合法'
+
+  //   else if (assignee !== username)
+  //     return '审批人不一致'
+  // }
+
+  return null
+}
+function leaveTaskHandler() {
+  overTask.value = null
+  overTasktwo.value = null
+}
+function previewHandler(event: MouseEvent) {
+  event.stopImmediatePropagation()
+  event.stopPropagation()
+
+  if (imageRef.value && (imageRef.value as any).src)
+    (imageRef.value as any).mergedOnClick()
+}
+</script>
+
+<template>
+  <div
+    class="left"
+    :style="
+      isFullScreen
+        ? imgbigshow
+          ? {
+            'position': 'relative',
+            'flex': 2,
+            'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+          }
+          : {
+            'height': '92vh',
+            'flex': 2,
+            'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+          }
+        : {
+          'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+        }
+    "
+    @mouseover="overTaskHandle"
+    @mouseleave="leaveTaskHandler"
+    @click="previewHandler"
+  >
+    <div v-show="overTask" class="action">
+      <SvgIcon
+        style="cursor: pointer"
+        name="t1"
+        size="74.95"
+        @click.stop="approvalHandler"
+      />
+      <SvgIcon
+        style="cursor: pointer; margin-left: 32px"
+        name="t2"
+        size="74.95"
+        @click.stop="singleRejectHandler"
+      />
+      <SvgIcon
+        style="cursor: pointer; margin-left: 32px"
+        name="t9"
+        size="74.95"
+        @click.stop="addSuspicious"
+      />
+    </div>
+    <div class="check">
+      <n-checkbox
+        v-show="batch && taskDetailInfo?.userapprove?.statshis === 1"
+        v-model:checked="taskDetailInfo?.checked"
+        @click.stop
+        @update:checked="onCheckChange($event, taskDetailInfo)"
+      />
+    </div>
+
+    <div class="status">
+      <img
+        v-show="taskDetailInfo?.userapprove?.statshis === 2"
+        class="img-status"
+        src="@/assets/images/task/pass.png"
+        alt=""
+      >
+      <img
+        v-show="taskDetailInfo?.userapprove?.statshis === 3"
+        class="img-status"
+        src="@/assets/images/task/not_pass.png"
+        alt=""
+      >
+    </div>
+    <div class="mark">
+      <SvgIcon
+        v-show="taskDetailInfo?.iztrueorfalse === 0"
+        size="128"
+        name="jia"
+      />
+    </div>
+    <div class="mark">
+      <SvgIcon
+        v-show="taskDetailInfo?.iztrueorfalse === 1"
+        size="128"
+        name="zhen"
+      />
+    </div>
+    <div class="big-mark" />
+    <div class="preview" @click="previewHandler">
+      <SvgIcon size="16" name="zoom-out" />
+    </div>
+    <div class="info img-info">
+      <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=""
+            >
+          </span>
+        </n-gi>
+        <n-gi span="8" class="gi2">
+          <span class="value">{{
+            TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis]
+          }}</span>
+          <span class="label">审批状态</span>
+        </n-gi>
+        <n-gi span="4" class="gi1">
+          <span>
+            <img
+              class="icon-status"
+              src="@/assets/images/task/similarity.png"
+              alt=""
+            >
+          </span>
+        </n-gi>
+        <n-gi span="8" class="gi2">
+          <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 ?? "-" }}</span>
+      </div>
+      <div class="time-item time-item2">
+        <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+
+        <span>{{
+          taskDetailInfo?.ocrPicture?.submitDateTimestamp
+            ? formatToDateHMS(
+              Number(taskDetailInfo.ocrPicture.submitDateTimestamp),
+            )
+            : "-"
+        }}</span>
+      </div>
+    </div>
+    <div style="display: none">
+      <n-image
+        ref="imageRef"
+        :img-props="{ onClick: hideDownload }"
+        :src="taskDetailInfo?.ocrPicture?.imgurl"
+      />
+    </div>
+    <div class="leftback" />
+  </div>
+</template>
+
+<style>
+</style>
diff --git a/src/views/worksheet/content/Content.vue b/src/views/worksheet/content/Content.vue
index e47ae9e..7f57b74 100644
--- a/src/views/worksheet/content/Content.vue
+++ b/src/views/worksheet/content/Content.vue
@@ -114,7 +114,6 @@ function reset() {
   loading.value = false;
   canloadMore = true;
 }
-console.log(listData);
 async function refreshHandler() {
   reset();
 
@@ -268,11 +267,11 @@ function onEsc() {
     isFullScreen.value = false;
 }
 
-const resizeImage = () => {
+function resizeImage() {
   const container = document.querySelector(".image-container")!;
   const containerWidth = container.offsetWidth;
   const containerHeight = container.offsetHeight;
-};
+}
 
 onUnmounted(() => {
   workStore.reset();
@@ -296,8 +295,9 @@ function showAction() {
   if (batch.value === false) overTask.value = item;
 }
 
-function hideAction() {
-  overTask.value = null;
+function hideAction(event) {
+  // overTask.value = null
+  previewHandler(event);
 }
 
 function previewHandler(event: MouseEvent) {
@@ -542,7 +542,8 @@ defineExpose({
           <div
             class="left"
             :style="{ 'background-image': `url(${taskDetailInfo?.imgurl})` }"
-            @click="showAction"
+            @click="previewHandler"
+            @mouseover="showAction"
             @mouseleave="leaveTaskHandler"
           >
             <div class="footer-times">
@@ -611,7 +612,7 @@ defineExpose({
               </n-grid>
             </div>
             <!-- 右上点击大图 -->
-            <div class="preview" @click="previewHandler">
+            <div class="preview" style="z-index: 5" @click="previewHandler">
               <SvgIcon size="16" name="zoom-out" />
             </div>
             <!-- 预览大图组件 -->
@@ -748,56 +749,77 @@ defineExpose({
                 @update:checked="onCheckChange($event, item)"
               />
             </div>
-            <div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }">
-              <SvgIcon
-                size="42"
-                :name="item.maxSimilarity == 100 ? 'error_tag' : 'tag'"
-              />
-              <div class="val">
-                {{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0)
-                }}<span class="percent-unit">%</span>
+            <<<<<<< HEAD
+            <div class="percent">
+              =======
+              <div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }">
+                >>>>>>> test
+                <SvgIcon
+                  size="42"
+                  :name="item.maxSimilarity == 100 ? 'error_tag' : 'tag'"
+                />
+                <div class="val">
+                  {{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0)
+                  }}<span class="percent-unit">%</span>
+                </div>
+              </div>
+              <div v-if="item.historyStates === 2" class="pass-status">
+                <SvgIcon name="pass-icon" style="width: 52; height: 24px" />
+              </div>
+              <div v-else-if="item.historyStates === 3" class="pass-status">
+                <SvgIcon name="no-pass-icon" style="width: 52; height: 24px" />
               </div>
-            </div>
-            <div v-if="item.historyStates === 2" class="pass-status">
-              <SvgIcon name="pass-icon" style="width: 52; height: 24px" />
-            </div>
-            <div v-else-if="item.historyStates === 3" class="pass-status">
-              <SvgIcon name="no-pass-icon" style="width: 52; height: 24px" />
-            </div>
 
-            <div v-show="overTask && overTask.id === item.id" class="action">
-              <SvgIcon
-                v-if="item.historyStates === 1"
-                style="cursor: pointer"
-                name="t1"
-                @click.stop="approvalHandler"
-              />
-              <SvgIcon
-                v-if="[1, 3].includes(item.historyStates)"
-                style="cursor: pointer; margin-left: 40px"
-                name="t2"
-                @click.stop="singleRejectHandler(item)"
-              />
-              <SvgIcon
-                style="cursor: pointer; margin-left: 30px"
-                name="t9"
-                @click.stop="handleRejectdubiousfileyd"
-              />
+              <div v-show="overTask && overTask.id === item.id" class="action">
+                <SvgIcon
+                  v-if="item.historyStates === 1"
+                  style="cursor: pointer"
+                  name="t1"
+                  @click.stop="approvalHandler"
+                />
+                <SvgIcon
+                  v-if="[1].includes(item.historyStates)"
+                  style="cursor: pointer; margin-left: 40px"
+                  name="t2"
+                  @click.stop="singleRejectHandler(item)"
+                />
+                <SvgIcon
+                  style="cursor: pointer; margin-left: 30px"
+                  name="t9"
+                  @click.stop="handleRejectdubiousfileyd"
+                />
+              </div>
             </div>
-          </div>
-          <n-back-top :listen-to="wrapperListRef" :bottom="220" :visibility-height="10">
-            <div
-              style="
-                width: 100px;
-                height: 40px;
-                line-height: 40px;
-                text-align: center;
-                font-size: 14px;
-              "
+            <n-back-top
+              :listen-to="wrapperListRef"
+              :bottom="220"
+              :visibility-height="10"
+              style="height: 64px; width: 64px; border-radius: 32px"
             >
-              回到顶部
-            </div>
-          </n-back-top>
+              <div
+                style="
+                  width: 64px;
+                  height: 64px;
+                  /* line-height: 40px; */
+                  text-align: center;
+                  font-size: 14px;
+                  position: relative;
+                "
+              >
+                <svg-icon
+                  name="top"
+                  style="
+                    width: 84px;
+                    height: 84px;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                  "
+                />
+              </div>
+            </n-back-top>
+          </div>
         </div>
       </div>
     </n-spin>
@@ -995,7 +1017,12 @@ defineExpose({
         border-radius: 8px;
         align-items: center;
         justify-content: center;
-        background-color: rgba(0, 0, 0, 0.48);
+        background: linear-gradient(
+          180deg,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 0) 29%,
+          rgba(3, 0, 0, 0.73)
+        );
       }
 
       .info {
@@ -1301,7 +1328,7 @@ defineExpose({
         border-radius: 8px;
         align-items: center;
         justify-content: center;
-        background-color: rgba(0, 0, 0, 0.48);
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.44) 88%);
       }
     }
   }