手机对象封装

packages/canvas/src/card.vue

@@ -19,6 +19,8 @@
     <div style="width: 100%; height: 100%;">
       <span v-if="!data.bg">{{ data.n }}</span>
       <div v-if="data.bg" :style="`background-image:url(${data.bg})`" alt="" class="bg"/>
+      <div v-if="data.bbg" :style="`background-image:url(${data.bbg})`" alt="" class="bg bbg"/>
+      <div v-if="data.tbg" :style="`background-image:url(${data.tbg})`" alt="" class="bg tbg"/>
     </div>
   </div>
 </template>
@@ -71,7 +73,7 @@ export default {
       styles.height = `${h}px`
       styles.top = `${y}px`
       styles.left = `${x}px`
-      styles.zIndex = showOptions ? '999999' : z || 0
+      styles.zIndex = showOptions ? '999999' : z * 100 || 0
       styles.transform = `rotateZ(${deg}deg)`
       styles.opacity = o
       return styles
@@ -103,8 +105,9 @@ export default {
         o: 1, // 透明度
         bg: '', // 背景图
         deg: 0, // 旋转角度
-        mbg: '', // 遮罩图片
+        bbg: '', // 底部图片
         tbg: '', // 顶部图片
+        tags: [], // 标签
         ...value
       }
       return data
@@ -128,6 +131,20 @@ export default {
     height: 100%;
     background-size: 100% 100%;
     background-repeat: no-repeat;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    user-select: none;
+    pointer-events: none;
+    &.bbg{
+      z-index: 1;
+    }
+    &.tbg{
+      z-index: 3;
+    }
   }
 
   // 操作按钮区域

packages/canvas/src/index.vue

@@ -128,7 +128,7 @@ export default {
     //   bg: '', // 背景图
     //   deg: 0, // 旋转角度
     //   mbg: '', // 遮罩图片
-    //   tbg: '', // 顶部图片
+    //   bbg: '', // 顶部图片
     // }
     // index：传值则是编辑，传空字符串则是添加新的板块
     setCardData(data, index) {