页面更新

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 }">
@@ -261,9 +261,14 @@
                 </a>
               </div>
               <div class="chooseimgname">
+                <span style="padding-right:5px;">名称</span>
+                <el-input v-model="navData.data.navs[index].name" style="width:200px; margin: 10px 0;" placeholder="名称">
+                </el-input>
                 <div>
                   <div class="navapp-image-upload">
                     <p class="chooseimgname-title">默认图标</p>
+                    <div>
+                    </div>
                     <div flex="main:center cross:center" @click="choiceMyImg(index, 1)" class="pic-box"
                       :style="{ backgroundImage: 'url(' + getIconLink(item.icon) + ')' }">
                       <i class="el-icon-picture-outline" v-if="item.icon == ''"></i>
@@ -283,6 +288,7 @@
                         <div class="size-tip">88 × 88</div>
                         <el-button type="danger" v-if="item.checkIcon != ''" class="image-delete" size="mini"
                           icon="el-icon-close" @click.stop="item.checkIcon = ''" circle></el-button>
+
                       </div>
                     </div>
                   </div>
@@ -419,10 +425,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 {
@@ -493,10 +499,9 @@
     addNavigatiton() {
       let obj = {
         icon: '',
-
         checkIcon: '', //选中导航图标
         checkBgImg: '', //选中背景图片
-          name: '',
+        name: '',//名称
         ShowType: 0, //0-组件,1-模板
         ComponentName: "", //组件名称
         url: "", //组件URL
@@ -545,5 +550,5 @@
   mounted() {
 
   }
-  };
+};
 </script>
\ No newline at end of file