字词卡片

src/views/wordcard/cread.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cread" v-loading="loading">
     <Header v-if="!userID" />
-    <div class="go-back-box" :class="[userID ? 'go-back-box-user' : '']">
+    <div class="go-back-box" :class="[userID ? 'go-back-box-user' : '']" v-if="!isPreview">
       <a v-if="!userID" class="go-back" :class="[editCardflag ? '' : 'go-back-preview']" @click="goBack">
         <i class="el-icon-arrow-left"></i>
         返回
@@ -20,11 +20,13 @@
         <h3>{{ saveName }}</h3>
         <div class="btn-box">
           <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
-          <el-button small><img src="../../assets/teacherdev/word-eyes.png" alt="" />预览</el-button>
+          <el-button small @click="previewEvent"
+            ><img src="../../assets/teacherdev/word-eyes.png" alt="" />预览</el-button
+          >
         </div>
       </template>
     </div>
-    <div class="content">
+    <div class="content" v-if="!isPreview">
       <div v-for="(item, index) in newEditTable" :key="index">
         <writeTable
           :editCardflag="editCardflag"
@@ -32,10 +34,37 @@
           :data="item"
           :pageNumber="index + 1"
           :totalNumber="newEditTable.length"
+          :isPreview="isPreview"
           @handleDelItem="handleDelItem"
         />
       </div>
     </div>
+    <div class="preview_dv" v-if="isPreview" :style="{ top: userID ? '0' : '' }">
+      <img class="close" src="../../assets/teacherdev/creadCad-close.png" alt="" @click="closepreviewEvent" />
+      <div class="preview_main">
+        <img
+          class="left"
+          src="../../assets/teacherdev/creadCad-left.png"
+          alt=""
+          @click="changepreviewIndex('remove')"
+        />
+        <div class="word_main">
+          <div class="word_main_table">
+            <writeTable
+              :type="typeIndex"
+              :dataConfig="newEditTable"
+              :data="newEditTable[previewIndex]"
+              :pageNumber="previewIndex + 1"
+              :totalNumber="newEditTable.length"
+              :isPreview="true"
+              :showLeft="showLeft"
+              @changeShowLeft="changeShowLeft"
+            />
+          </div>
+        </div>
+        <img class="right" src="../../assets/teacherdev/creadCad-right.png" alt="" @click="changepreviewIndex('add')" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -89,6 +118,7 @@ export default {
           },
         },
       ],
+      showLeft: true,
     };
   },
   //计算属性 类似于data概念
@@ -207,6 +237,35 @@ export default {
           this.loading = false;
         });
     },
+    // 预览
+    previewEvent() {
+      this.previewIndex = 0;
+      this.isPreview = true;
+    },
+    // 关闭预览
+    closepreviewEvent() {
+      this.isPreview = false;
+    },
+    changepreviewIndex(type) {
+      if (type == 'add') {
+        if (this.previewIndex == this.newEditTable.length - 1) {
+          this.$message.warning('当前已经是最后一页');
+          return;
+        }
+        this.previewIndex++;
+      } else {
+        if (this.previewIndex == 0) {
+          this.$message.warning('当前已经是第一页');
+          return;
+        }
+        this.previewIndex--;
+      }
+      this.showLeft = true;
+      this.$forceUpdate();
+    },
+    changeShowLeft() {
+      this.showLeft = !this.showLeft;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -230,9 +289,26 @@ export default {
       this.saveName = '';
       this.typeIndex = 0;
       this.loading = false;
-      this.newEditTable = [];
+      this.newEditTable = [
+        {
+          left: {
+            fileList: [],
+            con: '',
+          },
+          right: {
+            definition: '',
+            collocation: '',
+            exampleSent: '',
+            hz_info: [],
+            pinyin: [],
+            audio_file: '',
+          },
+        },
+      ];
       this.previewIndex = 0;
       this.saveShow = false;
+      this.showLeft = true;
+      this.editCardflag = true;
       if (this.$route.query.id) {
         // 需要请求详情接口
         this.getdetai();
@@ -325,6 +401,38 @@ export default {
     padding-top: 88px;
   }
 }
+.preview_dv {
+  position: absolute;
+  left: 0;
+  top: 64px;
+  width: 100%;
+  min-height: 100%;
+  background: #f2f2f2;
+  > img {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    position: absolute;
+    top: 24px;
+    right: 31px;
+  }
+  .preview_main {
+    padding: 24px 0;
+    width: 740px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    > div {
+      margin: 0 24px;
+    }
+    img {
+      width: 48px;
+      height: 48px;
+      cursor: pointer;
+    }
+  }
+}
 </style>
 <style lang="scss">
 .cread {

src/views/wordcard/writeTableNew.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['writeTable']" v-if="data">
+  <div :class="['writeTable', isPreview ? 'writeTable-preview' : '']" v-if="data">
     <div class="writeTop">
       <template v-if="editCardflag">
         <div class="left">
@@ -16,9 +16,7 @@
               :preview-src-list="[data.left.fileList[0].fileUrl]"
               fit="contain"
             />
-            <span v-if="!is_preview" class="item-image-del" @click="handleDeleteImg"
-              ><i class="el-icon-delete"></i
-            ></span>
+            <span class="item-image-del" @click="handleDeleteImg"><i class="el-icon-delete"></i></span>
           </div>
           <el-input class="item-con" v-model="data.left.con" placeholder="输入" @blur="handleBlurCon"></el-input>
           <a class="del-btn" @click="handleDelItem"><i class="el-icon-delete"></i></a>
@@ -33,7 +31,11 @@
         </div>
       </template>
       <template v-else>
-        <div class="left" :class="[data.left.fileList.length === 0 ? 'left-big' : '']">
+        <div
+          class="left"
+          :class="[data.left.fileList.length === 0 ? 'left-big' : '', isFlipped ? 'flipped' : '']"
+          v-if="(isPreview && showLeft) || !isPreview"
+        >
           <div class="item-image" v-if="data.left.fileList.length > 0">
             <el-image
               style="width: 536px; height: 536px"
@@ -45,8 +47,13 @@
           <h2 :class="['con-preview', data.left.fileList.length === 0 ? 'con-preview-big' : '']">
             {{ data.left.con }}
           </h2>
+          <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
         </div>
-        <div class="right right-preview">
+        <div
+          class="right right-preview"
+          :class="[isFlipped ? 'flipped-back' : '']"
+          v-if="(isPreview && !showLeft) || !isPreview"
+        >
           <div class="hz-box">
             <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
               <p>{{ data.right.pinyin[indexh] ? data.right.pinyin[indexh] : '' }}</p>
@@ -80,6 +87,7 @@
               <p>{{ data.right.exampleSent }}</p>
             </div>
           </div>
+          <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
         </div>
       </template>
     </div>
@@ -107,7 +115,7 @@ export default {
     UploadDrag,
     AudioPlay,
   },
-  props: ['dataConfig', 'data', 'pageNumber', 'totalNumber', 'editCardflag', 'none', 'is_preview', 'infoObj'],
+  props: ['isPreview', 'data', 'pageNumber', 'totalNumber', 'editCardflag', 'none', 'is_preview', 'showLeft'],
   data() {
     //这里存放数据
     return {
@@ -123,6 +131,7 @@ export default {
       writer: null,
       audio_file: '',
       loading: false,
+      isFlipped: false,
     };
   },
   //计算属性 类似于data概念
@@ -243,6 +252,14 @@ export default {
           this.loading = false;
         });
     },
+    // 翻面
+    changeShowLeft() {
+      this.$emit('changeShowLeft');
+      this.isFlipped = !this.isFlipped;
+      // setTimeout(() => {
+      //   this.isFlipped = false;
+      // }, 300);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -278,12 +295,15 @@ export default {
   width: 1208px;
   margin: 0 auto 8px auto;
   // height: 842px;
-
   box-sizing: border-box;
+  &-preview {
+    width: 600px;
+  }
   .writeTop {
     height: 800px;
     display: flex;
     column-gap: 8px;
+    // perspective: 1000px;
     .left,
     .right {
       width: 600px;
@@ -293,6 +313,7 @@ export default {
       background: #fff;
       box-sizing: border-box;
       position: relative;
+      transition: transform 0.3s ease-in-out;
     }
     .left-big {
       display: flex;
@@ -309,12 +330,27 @@ export default {
       bottom: 24px;
       color: #fff;
     }
+    .overturn-btn {
+      position: absolute;
+      right: 24px;
+      bottom: 24px;
+      border-radius: 8px;
+      background: #e0e0e0;
+      padding: 8px;
+      width: 24px;
+      height: 24px;
+      color: #fff;
+      font-size: 24px;
+      line-height: 1;
+      cursor: pointer;
+    }
     .right {
       display: flex;
       align-items: center;
       flex-flow: wrap;
       padding: 120px 86px;
       row-gap: 8px;
+      // transform: rotateX(180deg);
       label {
         width: 100%;
         color: #4e5969;
@@ -425,6 +461,7 @@ export default {
       line-height: 100%;
       &-big {
         font-size: 144px;
+        margin-top: 0;
       }
     }
     .writeTop-row {
@@ -531,40 +568,7 @@ export default {
   .writeTop-item-noLeft {
     border-left: none;
   }
-  .writeBottom {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    padding: 0 38px;
-    box-sizing: border-box;
-    position: relative;
-    span {
-      font-weight: 500;
-      font-size: 10px;
-      line-height: 14px;
-      color: #000000;
-      opacity: 0.2;
-    }
-    b {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 14px;
-      color: #000000;
-      width: 60px;
-      text-align: center;
-      position: absolute;
-      left: 50%;
-      margin-left: -30px;
-      top: 0px;
-    }
-    a {
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 14px;
-      color: #000000;
-      opacity: 0.2;
-    }
-  }
+
   .tian-div {
     width: 100%;
     height: 100%;
@@ -581,49 +585,12 @@ export default {
       top: 0;
     }
   }
-  .practiceBox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 100100;
-    width: 100%;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.19);
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-y: auto;
-    &.practiceBoxStrock {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding-top: 0px;
-    }
+
+  .flipped {
+    transform: rotateY(180deg);
   }
-  .punctuation-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    .character-target-div {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      .svg-icon {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    h3 {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      font-family: FZJCGFKTK;
-      text-align: center;
-      font-weight: normal;
-    }
+  .flipped-back {
+    transform: rotateY(0deg);
   }
 }
 </style>