选择声调答题提示

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -60,6 +60,12 @@
         </span>
       </li>
     </div>
+    <div class="answer-tips-box">
+      <img v-if="show_tips" class="answer-tips" src="../../../assets/select-tone-tips.png" />
+      <span :class="['tips-btn', show_tips ? 'tips-btn-active' : '']" @click="show_tips = !show_tips">
+        <img src="../../../assets/tips-icon.png" />
+      </span>
+    </div>
   </div>
 </template>
 
@@ -99,6 +105,7 @@ export default {
       active_letter: '', // 选中字母的值
       active_letter_index: 0, // 选择字母索引
       select_item_index: 0, // 小题索引
+      show_tips: false, // 是否显示答题提示
     };
   },
   created() {
@@ -264,6 +271,9 @@ export default {
 .choosetone-preview {
   @include preview;
 
+  position: relative;
+  min-height: 450px;
+
   .option-list {
     display: flex;
     flex-wrap: wrap;
@@ -315,5 +325,37 @@ export default {
       }
     }
   }
+
+  .answer-tips-box {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    display: flex;
+
+    .answer-tips {
+      width: 307px;
+      margin-top: 32px;
+    }
+
+    .tips-btn {
+      width: 34px;
+      height: 34px;
+      padding: 5px;
+      font-size: 0;
+      background: #fff5e3;
+      border: 1px solid rgba(0, 0, 0, 8%);
+      border-radius: 8px;
+
+      &-active {
+        background: #e3d5b3;
+      }
+
+      img {
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>