字词卡片放大样式调整

src/views/wordcard/cread.vue

@@ -1,91 +1,95 @@
 <template>
   <div class="cread" v-loading="loading">
-    <Header v-if="!userID" />
-    <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>
-        返回
-      </a>
-      <template v-if="editCardflag">
-        <div class="name-box">
-          <label>卡片名称</label>
-          <el-input v-model="saveName"></el-input>
-        </div>
-        <div class="btn-box">
-          <el-button small @click="addCard"><i class="el-icon-plus"></i>增加卡片</el-button>
-          <el-upload
-            ref="upload"
-            :action="url"
-            accept=".xlsx,.xls"
-            :limit="9999"
-            :on-exceed="handleExceed"
-            :on-success="handleSuccess"
-            :show-file-list="false"
-            class="btn"
-            style="margin: 0 8px"
-          >
-            <el-button>通过模版导入</el-button>
-          </el-upload>
-          <el-button type="primary" plain small @click="save">结束编辑并保存</el-button>
-        </div>
-      </template>
-      <template v-else>
-        <h3>{{ saveName }}</h3>
-        <div class="btn-box">
-          <span class="checked-number" v-if="filtCardflag && filtTable.length > 0">已选{{ filtTable.length }}张</span>
-          <!-- <el-button @click="changeRowLength">{{ showRoeText[showRowLength] }}</el-button> -->
-          <el-button small @click="handleSureFilt" v-if="filtCardflag">类举</el-button>
-          <el-button
-            small
-            @click="
-              filtCardflag = true;
-              showRowLength = newEditTable.length > 4 ? 6 : newEditTable.length;
-            "
-            v-else
-            >筛选</el-button
-          >
-          <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
-          <el-button small @click="download2"><img src="../../assets/teacherdev/word-eyes.png" alt="" />打印</el-button>
-        </div>
-      </template>
-    </div>
-    <div
-      class="content"
-      :class="[editCardflag ? '' : 'content-flex content-flex-' + showRowLength]"
-      :style="{ minHeight: innerHeight - 220 + 'px' }"
-    >
+    <template v-if="!showCard">
+      <Header v-if="!userID" />
+      <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>
+          返回
+        </a>
+        <template v-if="editCardflag">
+          <div class="name-box">
+            <label>卡片名称</label>
+            <el-input v-model="saveName"></el-input>
+          </div>
+          <div class="btn-box">
+            <el-button small @click="addCard"><i class="el-icon-plus"></i>增加卡片</el-button>
+            <el-upload
+              ref="upload"
+              :action="url"
+              accept=".xlsx,.xls"
+              :limit="9999"
+              :on-exceed="handleExceed"
+              :on-success="handleSuccess"
+              :show-file-list="false"
+              class="btn"
+              style="margin: 0 8px"
+            >
+              <el-button>通过模版导入</el-button>
+            </el-upload>
+            <el-button type="primary" plain small @click="save">结束编辑并保存</el-button>
+          </div>
+        </template>
+        <template v-else>
+          <h3>{{ saveName }}</h3>
+          <div class="btn-box">
+            <span class="checked-number" v-if="filtCardflag && filtTable.length > 0">已选{{ filtTable.length }}张</span>
+            <!-- <el-button @click="changeRowLength">{{ showRoeText[showRowLength] }}</el-button> -->
+            <el-button small @click="handleSureFilt" v-if="filtCardflag">类举</el-button>
+            <el-button
+              small
+              @click="
+                filtCardflag = true;
+                showRowLength = newEditTable.length > 4 ? 6 : newEditTable.length;
+              "
+              v-else
+              >筛选</el-button
+            >
+            <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
+            <el-button small @click="download2"
+              ><img src="../../assets/teacherdev/word-eyes.png" alt="" />打印</el-button
+            >
+          </div>
+        </template>
+      </div>
       <div
-        v-for="(item, index) in filtCardflag ? newEditTable : filtTableShow"
-        :key="index"
-        :class="[editCardflag ? '' : 'item-flex']"
+        class="content"
+        :class="[editCardflag ? '' : 'content-flex content-flex-' + showRowLength]"
+        :style="{ minHeight: innerHeight - 220 + 'px' }"
       >
-        <writeTable
-          :editCardflag="editCardflag"
-          :dataConfig="writeTableData"
-          :data="item"
-          :pageNumber="index + 1"
-          :totalNumber="showRowLength"
-          :isPreview="true"
-          @handleDelItem="handleDelItem"
-          :filtCardflag="filtCardflag"
-          :filtId="filtId"
-          :filtTable="filtTable"
-          @zoomInCard="zoomInCard"
-        />
+        <div
+          v-for="(item, index) in filtCardflag ? newEditTable : filtTableShow"
+          :key="index"
+          :class="[editCardflag ? '' : 'item-flex']"
+        >
+          <writeTable
+            :editCardflag="editCardflag"
+            :dataConfig="writeTableData"
+            :data="item"
+            :pageNumber="index + 1"
+            :totalNumber="showRowLength"
+            :isPreview="true"
+            @handleDelItem="handleDelItem"
+            :filtCardflag="filtCardflag"
+            :filtId="filtId"
+            :filtTable="filtTable"
+            @zoomInCard="zoomInCard"
+          />
+        </div>
       </div>
-    </div>
-    <el-pagination
-      background
-      :current-page="currentPage"
-      :page-size="showRowLength"
-      :page-sizes="[1, 2, 3, 4, 6]"
-      :total="filtTable.length"
-      layout="total, prev, pager, next, sizes, jumper"
-      @size-change="(val) => handleSizeChange(val, 'showRowLength', 'currentPage')"
-      @current-change="(val) => handleCurrentChange(val, 'currentPage')"
-      v-if="!filtCardflag"
-    />
-    <el-dialog title="" :visible.sync="showCard" width="100%" class="wordCard-dialog">
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="showRowLength"
+        :page-sizes="[1, 2, 3, 4, 6]"
+        :total="filtTable.length"
+        layout="total, prev, pager, next, sizes, jumper"
+        @size-change="(val) => handleSizeChange(val, 'showRowLength', 'currentPage')"
+        @current-change="(val) => handleCurrentChange(val, 'currentPage')"
+        v-if="!filtCardflag"
+      />
+    </template>
+    <el-dialog title="" :visible.sync="showCard" width="100%" class="wordCard-dialog" top="0">
       <i class="el-icon-arrow-left" :class="[showIndex === 0 ? 'disabled' : '']" @click="changeShowIndex('-')"></i>
       <writeTableZoom
         :editCardflag="false"
@@ -786,12 +790,15 @@ export default {
 }
 :deep .el-dialog__headerbtn {
   right: 200px;
+  top: 0;
 }
 :deep .el-dialog__headerbtn .el-dialog__close {
   color: #f2f3f5;
-  font-size: 24px;
+  font-size: 30px;
 }
 .wordCard-dialog {
+  display: flex;
+  align-items: center;
   :deep .el-dialog {
     box-shadow: none;
   }

src/views/wordcard/writeTableZoom.vue

@@ -381,7 +381,7 @@ export default {
 <style lang="scss" scoped>
 .writeTable {
   width: 1208px;
-  margin: 0 auto 19px auto;
+  margin: 19px auto;
   // height: 842px;
   box-sizing: border-box;
   perspective: 1000px;