给网格添加设置背景功能

src/views/design/main/index.vue

@@ -129,12 +129,29 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585",
+        "rgba(255, 69, 0, 0.68)",
+        "rgb(255, 120, 0)",
+        "hsv(51, 100, 98)",
+        "hsva(120, 40, 94, 0.5)",
+        "hsl(181, 100%, 37%)",
+        "hsla(209, 100%, 56%, 0.73)",
+        "#c7158577"
+      ],
       actionList: [],
       actionList: [],
       checkList: [],
       checkList: [],
       oldImgList: [],
       oldImgList: [],
       hasSize: false,
       hasSize: false,
       parentWidth: 0,
       parentWidth: 0,
       backColor: "#77797a",
       backColor: "#77797a",
+      gridBg: "#ffffff",
       systemSetting: {},
       systemSetting: {},
       detail: {},
       detail: {},
       imgHeight: 0,
       imgHeight: 0,
@@ -1149,7 +1166,7 @@ export default {
           <div v-if="isView" id="img">
           <div v-if="isView" id="img">
             <div
             <div
               id="line"
               id="line"
-              style="left: 22%;top: 52%;background-color: transparent;overflow: hidden;cursor: none;"
+              style="left: 22%;top: 52%;background-color: transparent;overflow: hidden"
             >
             >
               <div
               <div
                 class="sucaitu vieWsucaitu"
                 class="sucaitu vieWsucaitu"
@@ -1208,11 +1225,16 @@ export default {
             v-else
             v-else
             style="width: 100%;height: 100%;background-color:#77797a "
             style="width: 100%;height: 100%;background-color:#77797a "
           >
           >
-            <div id="line" class="boxShaow">
+            <div :style="{background:gridBg}" id="line" class="boxShaow">
               <!-- <div
               <!-- <div
             class="sucaitu"
             class="sucaitu"
             :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
             :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
           > -->
           > -->
+              <div class="left-bg-color">
+                <el-color-picker
+                                  color-format="hex"
+                                  :predefine="predefineColors" size="small" v-model="gridBg"></el-color-picker>
+              </div>
               <div class="sucaitu" :style="{ width: '100%', height: '100%' }">
               <div class="sucaitu" :style="{ width: '100%', height: '100%' }">
                 <vue-drag-resize-rotate
                 <vue-drag-resize-rotate
                   :w="item.w"
                   :w="item.w"
@@ -1653,6 +1675,11 @@ img {
 .boxShaow {
 .boxShaow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
     0 0 20px rgba(0, 0, 0, 0.12);
     0 0 20px rgba(0, 0, 0, 0.12);
+  position: relative;
+  .left-bg-color{
+    position: absolute;
+    left: -57px;
+  }
 }
 }
 .vieWsucaitu {
 .vieWsucaitu {
   .active::before {
   .active::before {