临摹 dialog

src/components/Adult/preview/NewWordShow.vue

@@ -106,14 +106,37 @@
         >
       </div>
     </div>
-    <div v-if="isPraShow" class="practiceBox practiceBoxStrock">
+    <el-dialog
+      :visible.sync="isPraShow"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      width="504px"
+      class="practiceBox practiceBoxStrock"
+      v-if="isPraShow"
+    >
       <Practice
         :change-pra-show="changePraShow"
         :cur="curData"
         :theme-color="themeColor"
       />
-    </div>
-    <div v-if="ifFreeShow" class="practiceBox practiceBoxStrock">
+    </el-dialog>
+    <!-- <div v-if="isPraShow" class="practiceBox practiceBoxStrock">
+      <Practice
+        :change-pra-show="changePraShow"
+        :cur="curData"
+        :theme-color="themeColor"
+      />
+    </div> -->
+    <el-dialog
+      :visible.sync="ifFreeShow"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      width="320px"
+      class="practiceBox practiceBoxStrock"
+      v-if="ifFreeShow"
+    >
       <FreewriteLettle
         ref="freePaint"
         :change-pra-show="changePraShow"
@@ -128,7 +151,23 @@
         @changeCurQue="changeCurQue"
         @deleteWriteRecord="deleteWriteRecord"
       />
-    </div>
+    </el-dialog>
+    <!-- <div v-if="ifFreeShow" class="practiceBox practiceBoxStrock">
+      <FreewriteLettle
+        ref="freePaint"
+        :change-pra-show="changePraShow"
+        :theme-color="themeColor"
+        :current-tree-i-d="currentTreeID"
+        :current-hz="currentHz"
+        :curren-hz-data="currenHzData"
+        :row-index="activeIndex"
+        :col-index="activeColIndex"
+        :closeif-free-show="closeifFreeShow"
+        :task-model="TaskModel"
+        @changeCurQue="changeCurQue"
+        @deleteWriteRecord="deleteWriteRecord"
+      />
+    </div> -->
   </div>
 </template>
 

src/components/Adult/preview/components/Wordcard.vue

@@ -172,7 +172,16 @@
           写一写
         </button>
       </div>
-      <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
+      <el-dialog
+        :visible.sync="isPraShow"
+        :show-close="false"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        width="504px"
+        class="practiceBox practiceBoxStrock"
+        v-if="isPraShow"
+      >
+        <!-- <div class="practiceBox practiceBoxStrock" v-if="isPraShow"> -->
         <Practice
           :changePraShow="changePraShow"
           :cur="curData"
@@ -185,7 +194,8 @@
           :bg="bg"
           :ed="ed"
         />
-      </div>
+        <!-- </div> -->
+      </el-dialog>
       <div class="practiceBox" v-if="isIntpShow">
         <WordPhraseDetail
           :currentTreeID="currentTreeID"

src/styles/index.scss

@@ -513,4 +513,9 @@ input:-ms-input-placeholder {
   font-size: 16px;
   line-height: 150%;
   color: #CC5E20;
+}
+.practiceBoxStrock{
+  .el-dialog__header,.el-dialog__body{
+    padding: 0;
+  }
 }