页面修改

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

 <style>
-.diynav-container {
-  min-height: 100px;
-  width: 100%;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.Headernav-item {
-  text-align: center;
-  font-size: 24px;
-  padding: 20px 0;
-}
-
-.Navabout-text {
-  color: #909399;
-  font-size: 12px;
-  margin-top: -10px;
-}
-
-.navigation_pic_boxDiv {
-  width: 70px;
-  height: 70px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  background-color: #fff;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-}
-
-.navigation_pic_boxDiv i {
-  font-size: 22px;
-  color: #909399;
-}
-
-.divbg_position {
-  width: 170px;
-  height: 180px;
-}
-
-.divbg_position>div {
-  height: 50px;
-  width: 50px;
-  margin-bottom: 10px;
-  cursor: pointer;
-  background-color: #F5F7F9;
-}
-
-.bg_active {
-  background-color: #E6F4FF;
-  border: 2px dashed #5CB3FD;
-}
-
-.edit-nav-item {
-  border: 1px solid #e2e2e2;
-  line-height: normal;
-  padding: 5px;
-  margin-bottom: 5px;
-}
-
-.nav-edit-options {
-  position: relative;
-}
-
-.navapp-image-upload {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.nav-edit-options .el-button {
-  height: 25px;
-  line-height: 25px;
-  width: 25px;
-  padding: 0;
-  text-align: center;
-  border: none;
-  border-radius: 0;
-  position: absolute;
-  margin-left: 0;
-}
-
-.nav-edit-options a {
-  color: #5CB3FD !important;
-}
-
-.navapp-image-upload .pic-box {
-  width: 70px;
-  height: 70px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  background-color: #fff;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-}
-
-.navapp-image-upload .pic-box i {
-  font-size: 22px;
-  color: #909399;
-}
-
-.navapp-image-upload .pic-box .size-tip {
-  line-height: 1.35;
-  text-align: center;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.2);
-  letter-spacing: -1px;
-}
-
-.navapp-image-upload .image-delete {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  padding: 5px;
-  visibility: hidden;
-  z-index: 1;
-}
-
-.navapp-image-upload .image-delete i {
-  font-size: 12px;
-  color: #fff;
-}
-
-.navapp-image-upload:hover .image-delete {
-  visibility: visible;
-}
-
-.Headernav-item img {
-  display: block;
-  width: 88px;
-  height: 88px;
-  margin: 0 auto 5px auto;
-}
-
-.Headernav-item>div {
-  height: 25px;
-  line-height: 25px;
-}
-
-.navigation_pic_boxDiv .image-delete {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  padding: 5px;
-  visibility: hidden;
-  z-index: 1;
-}
-
-.navigation_pic_boxDiv:hover .image-delete {
-  visibility: visible;
-}
-
-.navigation_pic_boxDiv .image-delete i {
-  font-size: 12px;
-  color: #fff;
-}
-
-.chooseformwork {
-  padding: 20px 0;
-  display: flex;
-  align-items: center;
-}
-
-.chooseformwork>div>div {
-  margin: 10px 0;
-}
-
-.chooseformwork>div {
-  flex: 1;
-}
-
-.chooseformwork .categroy {
-  padding-right: 32px;
-}
-
-.chooseformwork .isdisplay {
-  padding-right: 4px;
-}
-
-.chooseimgname-title {
-  margin-top: 10px;
-}
-
-.chooseformwork .chooseformwork-one {
-  display: flex;
-  align-items: center;
-}
+  .diynav-container {
+    min-height: 100px;
+    width: 100%;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .Headernav-item {
+    text-align: center;
+    font-size: 24px;
+    padding: 20px 0;
+  }
+
+  .Navabout-text {
+    color: #909399;
+    font-size: 12px;
+    margin-top: -10px;
+  }
+
+  .navigation_pic_boxDiv {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    background-color: #fff;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+  .navigation_pic_boxDiv i {
+    font-size: 22px;
+    color: #909399;
+  }
+
+  .divbg_position {
+    width: 170px;
+    height: 180px;
+  }
+
+  .divbg_position>div {
+    height: 50px;
+    width: 50px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    background-color: #F5F7F9;
+  }
+
+  .bg_active {
+    background-color: #E6F4FF;
+    border: 2px dashed #5CB3FD;
+  }
+
+  .edit-nav-item {
+    border: 1px solid #e2e2e2;
+    line-height: normal;
+    padding: 5px;
+    margin-bottom: 5px;
+  }
+
+  .nav-edit-options {
+    position: relative;
+  }
+
+  .navapp-image-upload {
+    display: inline-block;
+    margin-right: 5px;
+  }
+
+  .nav-edit-options .el-button {
+    height: 25px;
+    line-height: 25px;
+    width: 25px;
+    padding: 0;
+    text-align: center;
+    border: none;
+    border-radius: 0;
+    position: absolute;
+    margin-left: 0;
+  }
+
+  .nav-edit-options a {
+    color: #5CB3FD !important;
+  }
+
+  .navapp-image-upload .pic-box {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    background-color: #fff;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+  .navapp-image-upload .pic-box i {
+    font-size: 22px;
+    color: #909399;
+  }
+
+  .navapp-image-upload .pic-box .size-tip {
+    line-height: 1.35;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.2);
+    letter-spacing: -1px;
+  }
+
+  .navapp-image-upload .image-delete {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    padding: 5px;
+    visibility: hidden;
+    z-index: 1;
+  }
+
+  .navapp-image-upload .image-delete i {
+    font-size: 12px;
+    color: #fff;
+  }
+
+  .navapp-image-upload:hover .image-delete {
+    visibility: visible;
+  }
+
+  .Headernav-item img {
+    display: block;
+    width: 88px;
+    height: 88px;
+    margin: 0 auto 5px auto;
+  }
+
+  .Headernav-item>div {
+    height: 25px;
+    line-height: 25px;
+  }
+
+  .navigation_pic_boxDiv .image-delete {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    padding: 5px;
+    visibility: hidden;
+    z-index: 1;
+  }
+
+  .navigation_pic_boxDiv:hover .image-delete {
+    visibility: visible;
+  }
+
+  .navigation_pic_boxDiv .image-delete i {
+    font-size: 12px;
+    color: #fff;
+  }
+
+  .chooseformwork {
+    padding: 20px 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .chooseformwork>div>div {
+    margin: 10px 0;
+  }
+
+  .chooseformwork>div {
+    flex: 1;
+  }
+
+  .chooseformwork .categroy {
+    padding-right: 32px;
+  }
+
+  .chooseformwork .isdisplay {
+    padding-right: 4px;
+  }
+
+  .chooseimgname-title {
+    margin-top: 10px;
+  }
+
+  .chooseformwork .chooseformwork-one {
+    display: flex;
+    align-items: center;
+  }
 </style>
 <template>
   <div :class="{ 'active': navData.isCked }">
@@ -419,129 +419,131 @@
   </div>
 </template>
 <script>
-import ChooseImg from "@/components/global/ChooseImg.vue";
-import choiceModule from "@/components/common/choiceModule.vue";
-
-export default {
-  props: ["navData", "index", "dataLeng"],
-  data() {
-    return {
-      bgPostion: '',
-      //宽度
-      navWidth: '',
-      //数组下标
-      commonIndex: 0,
-      //选择图片弹窗
-      choicImg: false,
-      selectType: 1,
-      isShowModule: false, //是否显示选择模板
-      checkType: 1,
-    };
-  },
-  components: {
-    ChooseImg,
-    choiceModule
-  },
-  created() {
-
-  },
-  methods: {
-    Move(type, index) {
-      var currentItem = this.navData.data.navs[index];
-      if (type == 'up') {
-        var upItem = this.navData.data.navs[index - 1];
-        this.$set(this.navData.data.navs, index - 1, currentItem);
-        this.$set(this.navData.data.navs, index, upItem);
-      }
-      if (type == 'down') {
-        var downItem = this.navData.data.navs[index + 1];
-        this.$set(this.navData.data.navs, index + 1, currentItem);
-        this.$set(this.navData.data.navs, index, downItem);
-      }
-    },
-    //选择模板
-    getCustom(obj) {
-      if (this.commonIndex > -1) {
-        this.navData.data.navs[this.commonIndex].TemplateId = obj.Id;
-        this.navData.data.navs[this.commonIndex].TemplateShowName = '#' + obj.Id + ':' + obj.TemplateName;
-      }
-      this.isShowModule = false;
-    },
-    //是否显示背景图切换
-    showImgChange() {
-      if (!this.navData.data.showImg) {
-        this.navData.data.backgroundPicUrl = "";
-      }
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import choiceModule from "@/components/common/choiceModule.vue";
+
+  export default {
+    props: ["navData", "index", "dataLeng"],
+    data() {
+      return {
+        bgPostion: '',
+        //宽度
+        navWidth: '',
+        //数组下标
+        commonIndex: 0,
+        //选择图片弹窗
+        choicImg: false,
+        selectType: 1,
+        isShowModule: false, //是否显示选择模板
+        checkType: 1,
+      };
     },
-    //切换背景位置
-    selectPosition(po) {
-      this.bgPostion = po;
-    },
-    //改变宽度
-    getNavWidth(w) {
-      let str = ''
-      if (w == 3) {
-        str = '33.3333%'
-      } else if (w == 4) {
-        str = '25%'
-      } else {
-        str = '20%'
-      }
-      return str;
-    },
-    //添加导航图标
-    addNavigatiton() {
-      let obj = {
-        icon: '',
-
-        checkIcon: '', //选中导航图标
-        checkBgImg: '', //选中背景图片
-        name: '',
-        ShowType: 0, //0-组件,1-模板
-        ComponentName: "", //组件名称
-        url: "", //组件URL
-        TemplateId: 0,
-        TemplateShowName: "",
-        isShow: 1, //1-显示，0-隐藏
-      }
-      this.navData.data.navs.push(obj);
-    },
-    //删除导航图标
-    delIcon(index) {
-      this.navData.data.navs.splice(index, 1);
+    components: {
+      ChooseImg,
+      choiceModule
     },
+    created() {
 
-    //选择图片
-    SelectId(msg) {
-      if (this.selectType == 1) {
-        this.navData.data.backgroundPicUrl = msg.url;
-      } else {
-        if (this.checkType == 1) {
-          this.navData.data.navs[this.commonIndex].icon = msg.url;
+    },
+    methods: {
+      Move(type, index) {
+        var currentItem = this.navData.data.navs[index];
+        if (type == 'up') {
+          var upItem = this.navData.data.navs[index - 1];
+          this.$set(this.navData.data.navs, index - 1, currentItem);
+          this.$set(this.navData.data.navs, index, upItem);
+        }
+        if (type == 'down') {
+          var downItem = this.navData.data.navs[index + 1];
+          this.$set(this.navData.data.navs, index + 1, currentItem);
+          this.$set(this.navData.data.navs, index, downItem);
+        }
+      },
+      //选择模板
+      getCustom(obj) {
+        if (this.commonIndex > -1) {
+          this.navData.data.navs[this.commonIndex].TemplateId = obj.Id;
+          this.navData.data.navs[this.commonIndex].TemplateShowName = '#' + obj.Id + ':' + obj.TemplateName;
+        }
+        this.isShowModule = false;
+      },
+      //是否显示背景图切换
+      showImgChange() {
+        if (!this.navData.data.showImg) {
+          this.navData.data.backgroundPicUrl = "";
+        }
+      },
+      //切换背景位置
+      selectPosition(po) {
+        this.bgPostion = po;
+      },
+      //改变宽度
+      getNavWidth(w) {
+        let str = ''
+        if (w == 3) {
+          str = '33.3333%'
+        } else if (w == 4) {
+          str = '25%'
+        } else {
+          str = '20%'
+        }
+        return str;
+      },
+      //添加导航图标
+      addNavigatiton() {
+        let obj = {
+          icon: '',
+
+          checkIcon: '', //选中导航图标
+          checkBgImg: '', //选中背景图片
+          name: '',
+          ShowType: 0, //0-组件,1-模板
+          ComponentName: "", //组件名称
+          url: "", //组件URL
+          TemplateId: 0,
+          TemplateShowName: "",
+          isShow: 1, //1-显示，0-隐藏
+        }
+        this.navData.data.navs.push(obj);
+      },
+      //删除导航图标
+      delIcon(index) {
+        this.navData.data.navs.splice(index, 1);
+      },
+
+      //选择图片
+      SelectId(msg) {
+        if (this.selectType == 1) {
+          this.navData.data.backgroundPicUrl = msg.url;
         } else {
-          this.navData.data.navs[this.commonIndex].checkIcon = msg.url;
+          if (this.checkType == 1) {
+            this.navData.data.navs[this.commonIndex].icon = msg.url;
+          } 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;
+      },
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //选取图片
+      choiceMyImg(index, type) {
+        this.choicImg = true;
+        this.commonIndex = index;
+        this.selectType = 2;
+        this.checkType = type;
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
       }
-      this.choicImg = false;
     },
-    //向父组件传值 并调用排序
-    resetSord(IsUp) {
-      this.$emit('getSord', this.index, IsUp);
-    },
-    //选取图片
-    choiceMyImg(index, type) {
-      this.choicImg = true;
-      this.commonIndex = index;
-      this.selectType = 2;
-      this.checkType = type;
-    },
-    //点击触发父组件删除
-    delPlugin() {
-      this.$emit('comDelPlugin', this.index);
-    }
-  },
-  mounted() {
+    mounted() {
 
-  }
-};
+    }
+  };
 </script>
\ No newline at end of file