修改样式

src/assets/css/common.css

@@ -22,3 +22,69 @@
     border:1px solid #2961fe!important;
     color:#fff!important;
   }
+  .common_TiTable{
+    width:100%;
+    border-collapse:separate; 
+    border-spacing:0px 20px;
+  }
+  .common_TiTable td{
+    vertical-align: top;
+  }
+  .num_option_dx {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border: 1px solid #E1EAF4;
+    border-radius: 5px;
+    text-align: center;
+    line-height: 30px;
+    font-size: 14px;
+    color: #646873;
+    margin-top: 4px;
+    cursor: pointer;
+  }
+  .num_option_dx:hover {
+    border: 1px solid #94c1ff;
+    background: #e6f0ff;
+    color: #6BA9FF;
+  }
+  .InpDIV{
+    width: 765px;
+    height: 38px;
+    border-radius: 4px;
+    border: 1px solid #E1EAF4;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    font-size: 14px;
+    padding: 0 10px;
+    line-height: 38px;
+    padding-left: 10px;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .Tiku_DelIcon{
+    color:#c3c3c3;
+    font-weight: bold;
+    display: none;
+    font-size:18px;
+    cursor: pointer;
+  }
+  .Tiku_DelIcon:hover{
+    color:gray;
+  }
+  .common_TiTable tr:hover .Tiku_DelIcon{
+    display: block!important;
+  }
+  .addTiMuList{
+    cursor: pointer;
+    color:#3A8BFF;
+    font-size:13px;
+    height:40px;
+  }
+ .addTiMuList:hover{
+    opacity: 0.7;
+  }
+  
\ No newline at end of file

src/components/questiontype/fill-in.vue

 <!--填空题-->
 <style>
-
+  .fillInQuestion{
+    width:100%;
+  }
+  .tk_info {
+    color: #A8A8B3;
+    font-size: 12px;
+    line-height: 24px;
+    cursor: default;
+    margin-top:20px;
+  }
 </style>
 <template>
   <div class="fillInQuestion">
-    <table v-if="data&&data.length>0">
+    <table v-if="data&&data.length>0" class="common_TiTable">
       <tr v-for="(item,index) in data">
-        <td>
-          第 {{index+1}} 空</el-checkbox>
+        <td style="width:50px;text-align:center;padding-top:8px;">
+          第{{index+1}}空</el-checkbox>
         </td>
         <td>
-          <UeEditor v-model="item.Content" :config="config"></UeEditor>
+          <div class="InpDIV" v-html="item.Content" v-if="commonIndex!=index" @click="changeEdit(index)"></div>
+          <UeEditor v-model="item.Content" :config="config" v-else></UeEditor>
         </td>
-        <td>
-          <a style="cursor:pointer;" @click="deleteOpion(index)">删除</a>
+        <td style="width:30px;text-align:center;">
+          <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(index)"></i>
         </td>
       </tr>
       <tfoot>
         <tr>
           <td colspan="3">
-            <a style="cursor:pointer;" @click="addOption()">添加选项</a>
+            <a class="addTiMuList" @click="addOption()">
+              <i class="iconfont icon-add"></i>添加选项
+            </a>
           </td>
         </tr>
         <tr>
           <td colspan="3">
-            <el-checkbox v-model="setOption.IsMutex" :true-label="1" :false-label="0">答案顺序打乱也判正确</el-checkbox>
-            <br />
-            1. 一个空有多种答案时请用";"隔开。如：水;H2O
-            <br />
-            2. 若试题答案是数字，可设置范围，两个数字之间用"-"。如：1-9，学生填写1到9之间的数字都算正确（包括1和9）
+            <el-checkbox v-model="setOption.IsMutex" :true-label="1" :false-label="0"><span style="font-size:12px;">答案顺序打乱也判正确</span></el-checkbox>
+            <div class="tk_info">
+              1. 一个空有多种答案时请用";"隔开。如：水;H2O
+              </br>
+              2. 若试题答案是数字，可设置范围，两个数字之间用"-"。如：1-9，学生填写1到9之间的数字都算正确（包括1和9）
+            </div>
           </td>
         </tr>
       </tfoot>
@@ -56,6 +69,7 @@
           initialFrameWidth: null,
           initialFrameHeight: 80,
         },
+        commonIndex:-1,
       };
     },
     created() {},
@@ -75,6 +89,10 @@
       returnDataToParent() {
         this.$emit('getChild', this.data);
       },
+      //点击切换输入
+      changeEdit(index){
+        this.commonIndex=index;
+      }
     },
     mounted() {
 

src/components/questiontype/multiple.vue

 <!--多选题-->
 <style>
-
+  .multipleQuestion{
+    width:100%;
+  }
 </style>
 <template>
   <div class="multipleQuestion">
-    <table v-if="data&&data.length>0">
+    <table v-if="data&&data.length>0" class="common_TiTable">
       <tr v-for="(item,index) in data">
-        <td>
-          <el-checkbox v-model="item.IsAnswer">{{item.Name}}</el-checkbox>
+        <td style="width:40px;text-align:center;">
+          <div class="num_option_dx" @click="ChangeItem(item)" :class="{'Is_Answer':item.IsAnswer}">
+            {{item.Name}}
+          </div>
+          <!-- <el-checkbox v-model="item.IsAnswer">{{item.Name}}</el-checkbox> -->
         </td>
         <td>
-          <UeEditor v-model="item.Content" :config="config"></UeEditor>
+          <div class="InpDIV" v-html="item.Content" v-if="commonIndex!=index" @click="changeEdit(index)"></div>
+          <UeEditor v-model="item.Content" :config="config" v-else></UeEditor>
         </td>
-        <td>
-          <a style="cursor:pointer;" @click="deleteOpion(index)">删除</a>
+        <td style="width:40px;text-align:center;">
+          <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(index)"></i>
+          <!-- <a style="cursor:pointer;" @click="deleteOpion(index)">删除</a> -->
         </td>
       </tr>
       <tfoot>
         <tr>
           <td colspan="3">
-            <a style="cursor:pointer;" @click="addOption()">添加选项</a>
+            <a class="addTiMuList" @click="addOption()">
+              <i class="iconfont icon-add"></i>添加选项
+            </a>
           </td>
         </tr>
       </tfoot>
@@ -51,6 +60,7 @@
           initialFrameHeight: 80,
         },
         optionTitleList: [],
+        commonIndex:-1,
       };
     },
     created() {
@@ -108,6 +118,14 @@
         }
         this.$emit('getChild', this.data);
       },
+      //点击设为答案
+      ChangeItem(item){
+        item.IsAnswer = !item.IsAnswer;
+      },
+      //点击切换输入
+      changeEdit(index){
+        this.commonIndex=index;
+      }
     },
     mounted() {
 

src/components/questiontype/single.vue

@@ -2,53 +2,11 @@
   .singleQuestion{
     width:100%;
   }
-  .singleQuestion .InpDIV {
-    width: 765px;
-    height: 38px;
-    border-radius: 4px;
-    border: 1px solid #E1EAF4;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    font-size: 14px;
-    padding: 0 10px;
-    line-height: 38px;
-    padding-left: 10px;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-.singleQuestion .delIcon{
-  color:#c3c3c3;
-  font-weight: bold;
-  display: none;
-  font-size:18px;
-  cursor: pointer;
-}
-.singleQuestion .delIcon:hover{
-  color:gray;
-}
-.singleQuestion table tr td{
-  vertical-align: top;
-}
-.singleQuestion table tr:hover .delIcon{
-  display: block!important;
-}
-.singleQuestion .addSingle{
-  cursor: pointer;
-  color:#3A8BFF;
-  font-size:13px;
-  height:40px;
-}
-.singleQuestion .addSingle:hover{
-  opacity: 0.7;
-}
 </style>
 <!--单选题-->
 <template>
   <div class="singleQuestion">
-    <table v-if="data&&data.length>0" style="width:100%;border-collapse:separate; border-spacing:0px 20px;">
+    <table v-if="data&&data.length>0" class="common_TiTable">
       <tr v-for="(item,index) in data">
         <td style="width:40px;text-align:center;">
           <div class="Answer_List" @click="ChangeItem(item)" :class="{'Is_Answer':item.IsAnswer}">
@@ -60,13 +18,13 @@
           <UeEditor v-model="item.Content" v-else :config="config"></UeEditor>
         </td>
         <td style="width:40px;text-align:center;">
-          <i class="iconfont icon-guanbi delIcon" @click="deleteOpion(index)"></i>
+          <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(index)"></i>
         </td>
       </tr>
       <tfoot>
         <tr>
           <td colspan="3">
-            <a class="addSingle" @click="addOption()">
+            <a class="addTiMuList" @click="addOption()">
               <i class="iconfont icon-add"></i>添加选项
             </a>
           </td>