页面修改

src/components/sallCenter/plugin/nav-page.vue

 <style>
-.diynav-container {
+  .diynav-container {
     min-height: 100px;
     width: 100%;
     background-size: 100% 100%;
     background-repeat: no-repeat;
-}
+  }
 
-.Headernav-item {
+  .Headernav-item {
     text-align: center;
     font-size: 24px;
     padding: 20px 0;
-}
+  }
 
-.Navabout-text {
+  .Navabout-text {
     color: #909399;
     font-size: 12px;
     margin-top: -10px;
-}
+  }
 
-.navigation_pic_boxDiv {
+  .navigation_pic_boxDiv {
     width: 70px;
     height: 70px;
     border: 1px solid #ccc;
@@ -28,48 +28,48 @@
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
-}
+  }
 
-.navigation_pic_boxDiv i {
+  .navigation_pic_boxDiv i {
     font-size: 22px;
     color: #909399;
-}
+  }
 
-.divbg_position {
+  .divbg_position {
     width: 170px;
     height: 180px;
-}
+  }
 
-.divbg_position>div {
+  .divbg_position>div {
     height: 50px;
     width: 50px;
     margin-bottom: 10px;
     cursor: pointer;
     background-color: #F5F7F9;
-}
+  }
 
-.bg_active {
+  .bg_active {
     background-color: #E6F4FF;
     border: 2px dashed #5CB3FD;
-}
+  }
 
-.edit-nav-item {
+  .edit-nav-item {
     border: 1px solid #e2e2e2;
     line-height: normal;
     padding: 5px;
     margin-bottom: 5px;
-}
+  }
 
-.nav-edit-options {
+  .nav-edit-options {
     position: relative;
-}
+  }
 
-.navapp-image-upload {
+  .navapp-image-upload {
     display: inline-block;
     margin-right: 5px;
-}
+  }
 
-.nav-edit-options .el-button {
+  .nav-edit-options .el-button {
     height: 25px;
     line-height: 25px;
     width: 25px;
@@ -79,13 +79,13 @@
     border-radius: 0;
     position: absolute;
     margin-left: 0;
-}
+  }
 
-.nav-edit-options a {
+  .nav-edit-options a {
     color: #5CB3FD !important;
-}
+  }
 
-.navapp-image-upload .pic-box {
+  .navapp-image-upload .pic-box {
     width: 70px;
     height: 70px;
     border: 1px solid #ccc;
@@ -95,14 +95,14 @@
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
-}
+  }
 
-.navapp-image-upload .pic-box i {
+  .navapp-image-upload .pic-box i {
     font-size: 22px;
     color: #909399;
-}
+  }
 
-.navapp-image-upload .pic-box .size-tip {
+  .navapp-image-upload .pic-box .size-tip {
     line-height: 1.35;
     text-align: center;
     position: absolute;
@@ -116,86 +116,86 @@
     color: #fff;
     background: rgba(0, 0, 0, 0.2);
     letter-spacing: -1px;
-}
+  }
 
-.navapp-image-upload .image-delete {
+  .navapp-image-upload .image-delete {
     position: absolute;
     top: -10px;
     right: -10px;
     padding: 5px;
     visibility: hidden;
     z-index: 1;
-}
+  }
 
-.navapp-image-upload .image-delete i {
+  .navapp-image-upload .image-delete i {
     font-size: 12px;
     color: #fff;
-}
+  }
 
-.navapp-image-upload:hover .image-delete {
+  .navapp-image-upload:hover .image-delete {
     visibility: visible;
-}
+  }
 
-.Headernav-item img {
+  .Headernav-item img {
     display: block;
     width: 88px;
     height: 88px;
     margin: 0 auto 5px auto;
-}
+  }
 
-.Headernav-item>div {
+  .Headernav-item>div {
     height: 25px;
     line-height: 25px;
-}
+  }
 
-.navigation_pic_boxDiv .image-delete {
+  .navigation_pic_boxDiv .image-delete {
     position: absolute;
     top: -10px;
     right: -10px;
     padding: 5px;
     visibility: hidden;
     z-index: 1;
-}
+  }
 
-.navigation_pic_boxDiv:hover .image-delete {
+  .navigation_pic_boxDiv:hover .image-delete {
     visibility: visible;
-}
+  }
 
-.navigation_pic_boxDiv .image-delete i {
+  .navigation_pic_boxDiv .image-delete i {
     font-size: 12px;
     color: #fff;
-}
+  }
 
-.chooseformwork {
+  .chooseformwork {
     padding: 20px 0;
     display: flex;
     align-items: center;
-}
+  }
 
-.chooseformwork>div>div {
+  .chooseformwork>div>div {
     margin: 10px 0;
-}
+  }
 
-.chooseformwork>div {
+  .chooseformwork>div {
     flex: 1;
-}
+  }
 
-.chooseformwork .categroy {
+  .chooseformwork .categroy {
     padding-right: 32px;
-}
+  }
 
-.chooseformwork .isdisplay {
+  .chooseformwork .isdisplay {
     padding-right: 4px;
-}
+  }
 
-.chooseimgname-title {
+  .chooseimgname-title {
     margin-top: 10px;
-}
+  }
 
-.chooseformwork .chooseformwork-one {
+  .chooseformwork .chooseformwork-one {
     display: flex;
     align-items: center;
-}
+  }
 </style>
 <template>
   <div :class="{ 'active': navData.isCked }">
@@ -419,10 +419,10 @@
   </div>
 </template>
 <script>
-import ChooseImg from "@/components/global/ChooseImg.vue";
-import choiceModule from "@/components/common/choiceModule.vue";
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import choiceModule from "@/components/common/choiceModule.vue";
 
-export default {
+  export default {
     props: ["navData", "index", "dataLeng"],
     data() {
       return {
@@ -518,8 +518,10 @@ export default {
         } else {
           if (this.checkType == 1) {
             this.navData.data.navs[this.commonIndex].icon = msg.url;
-        } else {
+          } else if (this.checkType == 2) {
             this.navData.data.navs[this.commonIndex].checkIcon = msg.url;
+          } else if (this.checkType == 3) {
+            this.navData.data.navs[this.commonIndex].checkBgImg = msg.url;
           }
         }
         this.choicImg = false;
@@ -543,5 +545,5 @@ export default {
     mounted() {
 
     }
-};
+  };
 </script>
\ No newline at end of file