修改

src/App.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <style>
-@import url("//at.alicdn.com/t/font_2077629_21slbfvfeud.css");
+@import url("//at.alicdn.com/t/font_2077629_4texnaxzfra.css");
 .q-scrollarea__thumb {
   z-index: 999999 !important;
 }

src/pages/exam/examEdit.vue

 <style>
   .examPaper_Top {
-    width: 100%;
     width: 100%;
     height: 83px;
     border-bottom: 1px solid #d9d9d9;
-    background: #f0f0f0;
-    min-width: 1280px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
   }
 
   .Exam-main {
     width: 100%;
     height: auto !important;
     overflow: hidden;
-    margin-top: 34px;
+    margin-top: 20px;
     min-width: 1280px;
   }
 
@@ -34,14 +32,14 @@
   }
 
   .Exam-right {
-    width: 880px;
+    width: 61%;
     min-height: 795px;
     background: #fff;
     padding: 0px 20px 0 0px;
     border-radius: 3px;
     overflow-y: auto;
     border: 1px solid #d9d9d9;
-    margin-left: 38px;
+    margin-left: 20px;
   }
 
   .Left-ptitel {
@@ -91,11 +89,7 @@
     border-bottom: 1px solid #f3f3f3;
     color: #555;
     text-decoration: none;
-    min-width: 250px;
-    overflow: hidden;
-    padding-right: 20px;
-    white-space: nowrap;
-    text-overflow: ellipsis
+    display: flex;
   }
 
   .List-ul-li-checked b {
@@ -119,7 +113,6 @@
     justify-content: space-between;
     align-items: center;
   }
-
   .List-bt {
     width: 318px;
     height: 27px;
@@ -128,12 +121,22 @@
     line-height: 27px;
     padding-left: 10px;
   }
-
+  .List-bt i{
+    position: relative;
+    top: 1px;
+    left: 5px;
+  }
+  .List-bt i:hover{
+    color:#2961fe;
+    cursor: pointer;
+  }
   .List-ul li:hover {
     background: #a6a6a6;
     color: #333;
   }
-
+  .List-ul li:hover .exam_ListSHow{
+    display: block;
+  }
   .left-btn-list {
     padding: 5px 10px;
     display: inline-block;
@@ -155,16 +158,54 @@
     text-align: right;
     line-height: 56px;
   }
+  .Left-list::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    background-color: #F5F5F5;
+  }
 
+  /*!*定义滚动条轨道 内阴影+圆角*!*/
+  .Left-list::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  /*!*定义滑块 内阴影+圆角*!*/
+  .Left-list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+    background-color: #0ae;
+  }
   .commonDalei {
     display: flex;
     align-content: center;
     margin-bottom: 20px;
   }
-
+  .examPaper .edui-editor{
+    z-index:99!important;
+  }
+  .List-bt input{
+    outline: none;
+    height:25px;
+  }
+  .exam_DetailList{
+    width:220px;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left:5px;
+  }
+  .exam_ListSHow{
+    display: none;
+  }
+  .exam_ListSHow i:hover{
+    color:#2961fe;
+  }
 </style>
 <template>
-  <div class="examPaper">
+  <div class="examPaper page-body">
     <div class="examPaper_Top">
       <div style="width:80%;display:flex;">
         <div style="width:40%;margin:0 20px;">
@@ -191,13 +232,25 @@
             <div class="List-con1" v-for="(gItem,gIndex) in DataObj.GroupList" :key="gIndex">
               <div class="List-bt">
                 <strong class="f1">
-                  {{gIndex+1}}{{gItem.GroupName}}
+                  <template v-if="!gItem.isShowEdit">{{gIndex+1}}{{gItem.GroupName}}</template>
+                  <template v-else>
+                    <input style="width:160px;margin-right:10px;" v-model="gItem.GroupName" />
+                    <input style="width:40px;" filled v-model="gItem.GSortNum" />
+                  </template>
                 </strong>
+                <i class="iconfont icon-edit" title="编辑" style="font-size:18px;margin-right:5px;" @click="getNameEdit(DataObj.GroupList,gIndex)"></i>
+                <i class="iconfont icon-ico_commodity_defaul" v-if="gItem.isShowEdit" title="保存" style="top:0;margin-right:5px;" @click="saveExamName(DataObj.GroupList)"></i>
+                <i class="iconfont icon-shangyi2" style="margin-right:5px;" v-if="gIndex!=0"></i>
+                <i class="iconfont icon-xiayi" v-if="gIndex!=DataObj.GroupList.length-1"></i>
               </div>
               <ul class="List-ul" v-if="gItem.DetailsList&&gItem.DetailsList.length>0">
                 <li class="" style="cursor:pointer;" v-for="(dItem,dIndex) in gItem.DetailsList" :key="dIndex"
                   @click="ClickItem(dItem)">
-                  {{dIndex+1}} <span @click="ClickItem(dItem)" v-html="dItem.ShowTitle">
+                  {{dIndex+1}}<span class="exam_DetailList" @click="ClickItem(dItem)" v-html="dItem.ShowTitle"></span>
+                  <span class="exam_ListSHow">
+                    <i class="iconfont icon-shangyi2" style="margin-right:5px;" v-if="dIndex!=0"></i>
+                    <i class="iconfont icon-xiayi" v-if="dIndex!=gItem.DetailsList.length-1"></i>
+                    <i class="iconfont icon-shanchu2" style="margin-left:5px;font-size:17px;"></i> 
                   </span>
                 </li>
               </ul>
@@ -399,6 +452,23 @@
       this.GetPaperInfo()
     },
     methods: {
+      //点击修改标题名字和分数
+      getNameEdit(item,index){
+        console.log(item,'item');
+        console.log(index,'index');
+        item.forEach(x=>{
+          x.isShowEdit=false;
+        })
+        item[index].isShowEdit = true;
+        this.$forceUpdate();
+      },
+      //鼠标移开输入框 保存数据 还有隐藏输入框
+      saveExamName(item){
+        item.forEach(x=>{
+          x.isShowEdit=false;
+        })
+        this.$forceUpdate();
+      },
       //获取子组件内容
       getChildData(obj) {
         if (obj) {
@@ -456,6 +526,9 @@
           if (res.Code == 1) {
             this.DataObj = res.Data;
           }
+          this.DataObj.GroupList.forEach(x=>{
+            x.isShowEdit = false;
+          })
           console.log("this.DataObj", this.DataObj);
         })
       },