画布经典背景色

src/features/mark/CommonMarkBody.vue

@@ -81,13 +81,12 @@ import {
 import { dragImage } from "./use/draggable";
 import MultiMediaMarkBody from "./MultiMediaMarkBody.vue";
 
-const props =
-  defineProps<{
-    useMarkResult?: boolean;
-    makeTrack: Function;
-    store: MarkStore; // 实际上不是同一个store!!!
-    uniquePropName: string; // TODO: 这个字段不需要了，是以前的rendering字段附带要求的
-  }>();
+const props = defineProps<{
+  useMarkResult?: boolean;
+  makeTrack: Function;
+  store: MarkStore; // 实际上不是同一个store!!!
+  uniquePropName: string; // TODO: 这个字段不需要了，是以前的rendering字段附带要求的
+}>();
 
 const emit = defineEmit(["error"]);
 
@@ -498,9 +497,15 @@ const innerMakeTrack = (event: MouseEvent, item: SliceImage) => {
 .mark-body-container {
   height: calc(100vh - 41px);
   overflow: auto;
-  background-size: 8px 8px;
+  /* background-size: 8px 8px;
   background-image: linear-gradient(to right, #e7e7e7 4px, transparent 4px),
-    linear-gradient(to bottom, transparent 4px, #e7e7e7 4px);
+    linear-gradient(to bottom, transparent 4px, #e7e7e7 4px); */
+  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 .mark-body-container img {
   width: 100%;
@@ -509,6 +514,6 @@ const innerMakeTrack = (event: MouseEvent, item: SliceImage) => {
   position: relative;
 }
 .image-seperator {
-  border: 2px solid rgba(120, 120, 120, 0.1);
+  border: 2px solid transparent;
 }
 </style>