字词卡片翻面

src/views/wordcard/cread.vue

@@ -59,6 +59,7 @@
               :isPreview="true"
               :showLeft="showLeft"
               @changeShowLeft="changeShowLeft"
+              ref="writeTable"
             />
           </div>
         </div>
@@ -260,7 +261,9 @@ export default {
         }
         this.previewIndex--;
       }
+      this.$refs.writeTable.changeRota();
       this.showLeft = true;
+
       this.$forceUpdate();
     },
     changeShowLeft() {

src/views/wordcard/writeTableNew.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="['writeTable', isPreview ? 'writeTable-preview' : '']" v-if="data">
-    <div class="writeTop">
+    <div class="writeTop" v-bind:class="{ flipped: isFlipped }">
       <template v-if="editCardflag">
         <div class="left">
           <UploadDrag
@@ -33,7 +33,7 @@
       <template v-else>
         <div
           class="left"
-          :class="[data.left.fileList.length === 0 ? 'left-big' : '', isFlipped ? 'flipped' : '']"
+          :class="[data.left.fileList.length === 0 ? 'left-big' : '']"
           v-if="(isPreview && showLeft) || !isPreview"
         >
           <div class="item-image" v-if="data.left.fileList.length > 0">
@@ -51,7 +51,7 @@
         </div>
         <div
           class="right right-preview"
-          :class="[isFlipped ? 'flipped-back' : '']"
+          :class="[isPreview ? 'right-preview-rota' : '']"
           v-if="(isPreview && !showLeft) || !isPreview"
         >
           <div class="hz-box">
@@ -149,24 +149,6 @@ export default {
   },
   //方法集合
   methods: {
-    changePraShow() {
-      this.ifFreeShow = false;
-    },
-    closeifFreeShow(data, rowIndex, colIndex) {
-      this.ifFreeShow = false;
-      this.$forceUpdate();
-    },
-    freeWrite(item, row, col) {
-      this.ifFreeShow = true;
-      this.activeIndex = row;
-      this.activeColIndex = col;
-      //   this.currentHz = this.curQue.option[indexs].rightOption[rightindex].con;
-      if (item) {
-        this.currenHzData = item;
-      } else {
-        this.currenHzData = {};
-      }
-    },
     ExerciseChangeCurQue(answer, rowIndex, colIndex) {
       if (answer) {
         this.data.list[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
@@ -256,9 +238,9 @@ export default {
     changeShowLeft() {
       this.$emit('changeShowLeft');
       this.isFlipped = !this.isFlipped;
-      // setTimeout(() => {
-      //   this.isFlipped = false;
-      // }, 300);
+    },
+    changeRota() {
+      this.isFlipped = false;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -303,7 +285,8 @@ export default {
     height: 800px;
     display: flex;
     column-gap: 8px;
-    // perspective: 1000px;
+    perspective: 1000px;
+    transition: transform 0.6s ease;
     .left,
     .right {
       width: 600px;
@@ -313,7 +296,6 @@ export default {
       background: #fff;
       box-sizing: border-box;
       position: relative;
-      transition: transform 0.3s ease-in-out;
     }
     .left-big {
       display: flex;
@@ -350,7 +332,7 @@ export default {
       flex-flow: wrap;
       padding: 120px 86px;
       row-gap: 8px;
-      // transform: rotateX(180deg);
+
       label {
         width: 100%;
         color: #4e5969;
@@ -418,6 +400,9 @@ export default {
         }
       }
     }
+    .right-preview-rota {
+      transform: rotateY(-180deg);
+    }
     .item-image {
       position: relative;
       background: #f2f3f5;