bug fix

src/features/invigilation/RealtimeMonitoring/WarningDetail.vue

@@ -114,50 +114,66 @@
               <div class="summary-bg-spin"></div>
             </div>
           </div>
-          <div class="action-list">
-            <el-button
-              v-if="actionValid"
-              icon="icon icon-text-message"
-              size="mideum"
-              @click="toSendTextMsg"
-              >文字提醒</el-button
-            >
-            <el-button
-              v-if="actionValid"
-              icon="icon icon-record"
-              size="mideum"
-              @click="toSendAudioMsg"
-              >录音提醒</el-button
-            >
-            <el-button
+          <div v-if="actionValid" class="action-list">
+            <div class="action-item">
+              <el-button
+                icon="icon icon-text-message"
+                size="mideum"
+                @click="toSendTextMsg"
+                >文字提醒</el-button
+              >
+            </div>
+            <div v-if="actionValid" class="action-item">
+              <el-button
+                icon="icon icon-record"
+                size="mideum"
+                @click="toSendAudioMsg"
+                >录音提醒</el-button
+              >
+            </div>
+            <div
               v-if="detailInfo.monitorVideoSource && actionValid"
-              icon="icon icon-call"
-              size="mideum"
-              :loading="holding"
-              @click="answer(0)"
-              >语音通话</el-button
+              class="action-item"
             >
-            <el-button
+              <el-button
+                icon="icon icon-call"
+                size="mideum"
+                :loading="holding"
+                @click="answer(0)"
+                >语音通话</el-button
+              >
+            </div>
+            <div
               v-if="detailInfo.monitorVideoSource && actionValid"
-              icon="icon icon-media"
-              size="mideum"
-              :loading="holding"
-              @click="answer(1)"
-              >视频通话</el-button
-            >
-            <el-button
-              icon="icon icon-info-danger"
-              size="mideum"
-              @click="toBreach"
-              >{{ isBreach ? "撤销违纪" : "违纪处理" }}</el-button
+              class="action-item"
             >
-            <el-button
+              <el-button
+                icon="icon icon-media"
+                size="mideum"
+                :loading="holding"
+                @click="answer(1)"
+                >视频通话</el-button
+              >
+            </div>
+            <div class="action-item">
+              <el-button
+                icon="icon icon-info-danger"
+                size="mideum"
+                @click="toBreach"
+                >{{ isBreach ? "撤销违纪" : "违纪处理" }}</el-button
+              >
+            </div>
+            <div
               v-if="detailInfo.statusCode === 'ANSWERING'"
-              icon="icon icon-paper-danger"
-              size="mideum"
-              @click="toFinish"
-              >强制收卷</el-button
+              class="action-item"
             >
+              <el-button
+                icon="icon icon-paper-danger"
+                size="mideum"
+                @click="toFinish"
+                >强制收卷</el-button
+              >
+            </div>
           </div>
         </div>
         <div class="warning-content">

src/styles/base.scss

@@ -544,8 +544,18 @@ body {
 
   .action-list {
     font-size: 0;
+    .action-item {
+      display: inline-block;
+      vertical-align: top;
+      width: 50%;
+      text-align: center;
+      margin: 5px 0;
+    }
     .el-button {
-      margin-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      width: 115px;
+      margin: 0;
     }
     button:nth-of-type(odd) {
       margin: 0;
@@ -667,7 +677,7 @@ body {
       }
 
       > p {
-        font-size: 12px;
+        font-size: 13px;
         font-weight: 400;
         color: #626a82;
         line-height: 16px;
@@ -706,7 +716,7 @@ body {
       li {
         display: inline-block;
         vertical-align: top;
-        width: 200px;
+        width: 180px;
         height: 100px;
         margin: 0 10px 5px 0;
         border-radius: 6px;