修改

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url('~assets/css/font.css');
-@import url('//at.alicdn.com/t/font_2077629_6dh27k2xa4l.css');
+@import url('//at.alicdn.com/t/font_2077629_zaei3cgua6b.css');
 
 html,
 body,

src/components/question/question-form.vue

@@ -3,7 +3,7 @@
     font-size: 14px;
     color: #646873;
     line-height: 34px;
-    margin-bottom: 16px;
+    /* margin-bottom: 16px; */
     overflow: hidden;
     padding: 4px 0;
     cursor: default;
@@ -82,6 +82,13 @@
    right:-8px;
    top:-10px;
  }
+ .question_number{
+   color: #A8A8B3;
+   font-size: 12px;
+   margin-top: -8px;
+   padding-bottom: 12px;
+   display: inline-block;
+ }
 </style>
 <template>
   <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
@@ -112,10 +119,9 @@
           <div class="edit_stem">
             {{questionName}}
           </div>
-          <br />
           <div class="col-12">
             <template v-if="questionObj.Key=='cloze'">
-              选项处用##题号##替换，如##1##
+              <span class="question_number">选项处用##题号##替换，如##1##</span>
             </template>
             <UeEditor v-if="questionObj.Key!='sharing-choose'" v-model="objOption.Title" :config="config"
               ref="UE_Title"></UeEditor>

src/components/questiontype/cloze.vue

 <!--完型填空-->
 <style>
+  .clozeQuestion {
+    width: 100%;
+  }
+
+  .clozeQuestion .question_Title {
+    color: #A8A8B3;
+    font-size: 12px;
+    margin-top: 20px;
+  }
+
+  .clozeQuestion .clozeTest_question_tit {
+    width: 100%;
+    height: 40px;
+    background: #F7F8FA;
+    padding: 0 20px;
+    line-height: 40px;
+    font-size: 14px;
+    color: #646873;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .clozeTest_question_tit i {
+    color: #acbfd9;
+    cursor: pointer;
+  }
+
+  .clozeQuestion .add_LiteBtn {
+    width: 100px;
+    height: 30px;
+    display: inline-block;
+    box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.30);
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 20px;
+    cursor: pointer;
+    background-color: #2961fe;
+    margin-bottom: 20px;
+  }
+
+  .add_LiteBtn:hover {
+    opacity: 0.8;
+  }
 
 </style>
 <template>
   <div class="clozeQuestion">
+    <div class="question_Title">小题数：{{data.length}}</div>
     <template v-if="data&&data.length>0" v-for="(item,index) in data">
-      <table>
+      <table class="common_TiTable">
         <thead>
           <tr>
-            <th colspan="3" style="text-align:left;">
-              第 {{index+1}} 题
+            <th colspan="3">
+              <div class="clozeTest_question_tit" @click="showNav(index)">
+                <div>
+                  <i class="iconfont icon-arrowdown2" v-if="(commonIndex==index)&&!isShow"></i>
+                  <i class="iconfont icon-arrowright" v-else></i>
+                  第{{index+1}}小题
+                </div>
+                <div>
+                  <i class="iconfont icon-img_delete_small" @click="deleteQuestion(index)"></i>
+                </div>
+              </div>
             </th>
           </tr>
         </thead>
-        <tbody>
+        <tbody class="contant" v-if="(commonIndex==index)&&!isShow">
           <tr v-for="(subItem,subIndex) in item">
-            <td>
-              <el-checkbox v-model="subItem.IsAnswer" @change="ChangeItem(item,subItem)">{{subItem.Name}}</el-checkbox>
+            <td style="width:40px;text-align:center;">
+              <div class="Answer_List" @click="ChangeItem(item,subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
+                {{subItem.Name}}
+              </div>
+              <!-- <el-checkbox v-model="subItem.IsAnswer" @change="ChangeItem(item,subItem)">{{subItem.Name}}</el-checkbox> -->
             </td>
             <td>
-              <UeEditor v-model="subItem.Content" :config="config"></UeEditor>
+              <div class="InpDIV" v-html="subItem.Content" v-if="childIndex!=subIndex"
+                @click="changeEdit(subIndex)"></div>
+              <UeEditor v-model="subItem.Content" :config="config" v-else></UeEditor>
             </td>
-            <td>
-              <a style="cursor:pointer;" @click="deleteOpion(item,subIndex)">删除</a>
+            <td style="width:40px;text-align:center;">
+              <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(item,subIndex)"></i>
             </td>
           </tr>
         </tbody>
         <tfoot>
           <tr>
             <td colspan="3">
-              <a style="cursor:pointer;" @click="addOption(item)">添加选项</a>
-              &nbsp;
-              <a style="cursor:pointer;" @click="deleteQuestion(index)">删除问题</a>
+              <a class="addTiMuList" @click="addOption(item)">
+                <i class="iconfont icon-add"></i>添加选项
+              </a>
+              <!-- <a style="cursor:pointer;" @click="addOption(item)">添加选项</a> -->
+              <!-- <a style="cursor:pointer;" @click="deleteQuestion(index)">删除问题</a> -->
             </td>
           </tr>
         </tfoot>
       </table>
     </template>
-    <br />
-    <a style="cursor:pointer;color:blue;" @click="addQuestion()">添加问题</a>
+    <a class="add_LiteBtn" @click="addQuestion()">
+      +添加小题
+    </a>
   </div>
 </template>
 <script>
@@ -64,9 +127,15 @@
           initialFrameHeight: 80,
         },
         optionTitleList: [],
+        showTag: true,
+        commonIndex: -1,
+        childIndex: -1,
+        isShow:true,
+        commonIndex2:-2,
       };
     },
     created() {
+      console.log(this.data,'data');
       this.initConfig();
     },
     methods: {
@@ -127,6 +196,22 @@
         }
         subItem.IsAnswer = true;
       },
+      // //点击展开收起
+      showNav(index) {
+        if(this.commonIndex2==index){
+          this.commonIndex=index;
+          this.isShow=!this.isShow;
+        }else{
+          this.commonIndex=index;
+          this.isShow=false;
+          this.commonIndex2=index;
+        }
+      },
+      //点击切换输入
+      changeEdit(index) {
+        this.childIndex = index;
+      }
+
     },
     mounted() {