card page info add

src/assets/styles/card-design.scss

@@ -66,7 +66,7 @@
       top: 0;
       left: 0;
       z-index: 7;
-      background-color: rgba($color: #ffffff, $alpha: 0.7);
+      // background-color: rgba($color: #ffffff, $alpha: 0.7);
     }
   }
 

src/assets/styles/card-preview.scss

@@ -244,6 +244,39 @@
     }
   }
 }
+// page-number
+.page-number {
+  position: absolute;
+  bottom: 60px;
+  &-rect {
+    left: 152px;
+  }
+  &-rect-list {
+    font-size: 0;
+
+    li {
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+      width: 24px;
+      height: 16px;
+      border: 1px solid #000;
+      margin-right: 10px;
+      &.rect-li-act {
+        height: 0;
+        border: none;
+        border-bottom: 16px solid #000;
+      }
+    }
+  }
+  &-text {
+    right: 152px;
+  }
+  &-text-cont {
+    height: 16px;
+    line-height: 16px;
+  }
+}
 
 // elem
 .elem {

src/modules/card/components/pageInfo/PageNumber.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="classes">
+    <ul class="page-number-rect-list" v-if="type === 'rect'">
+      <li
+        v-for="n in total"
+        :key="n"
+        :class="{ 'rect-li-act': n === current }"
+      ></li>
+    </ul>
+    <div class="page-number-text-cont" v-else>
+      第{{ current }}页（共{{ total }}页）
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "page-number",
+  props: {
+    type: {
+      type: String,
+      default: "text",
+      validator(val) {
+        return ["text", "rect"].indexOf(val) !== -1;
+      }
+    },
+    total: {
+      type: Number,
+      default: 1
+    },
+    current: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    classes() {
+      return ["page-number", `page-number-${this.type}`];
+    }
+  }
+};
+</script>

src/modules/card/views/CardDesign.vue

@@ -152,7 +152,18 @@
               </div>
             </div>
             <!-- outer edit area -->
-            <div class="page-main-outer"></div>
+            <div class="page-main-outer">
+              <page-number
+                type="rect"
+                :total="pages.length"
+                :current="pageNo + 1"
+              ></page-number>
+              <page-number
+                type="text"
+                :total="pages.length"
+                :current="pageNo + 1"
+              ></page-number>
+            </div>
           </div>
         </template>
       </div>
@@ -254,6 +265,7 @@ import ElementPropEdit from "../components/elementPropEdit/ElementPropEdit";
 import RightClickMenu from "../components/RightClickMenu";
 import CardHeadSample from "../components/elementEdit/CardHeadSample";
 import SavePage from "../components/SavePage";
+import PageNumber from "../components/pageInfo/PageNumber";
 
 export default {
   name: "card-design",
@@ -264,7 +276,8 @@ export default {
     ElementPropEdit,
     RightClickMenu,
     CardHeadSample,
-    SavePage
+    SavePage,
+    PageNumber
   },
   data() {
     return {
@@ -273,7 +286,7 @@ export default {
       prepareTcPCard: this.$ls.get("prepareTcPCard", {}),
       ELEMENT_LIST,
       TOPIC_LIST,
-      steps: ["添加标题", "基本设置", "试题配置", "试题配置"],
+      steps: ["添加标题", "基本设置", "试题配置", "预览生成"],
       columnWidth: 0,
       cardPreviewUrl: ""
     };

src/modules/card/views/CardPreview.vue

@@ -55,7 +55,18 @@
             </div>
           </div>
           <!-- outer edit area -->
-          <div class="page-main-outer"></div>
+          <div class="page-main-outer">
+            <page-number
+              type="rect"
+              :total="pages.length"
+              :current="pageNo + 1"
+            ></page-number>
+            <page-number
+              type="text"
+              :total="pages.length"
+              :current="pageNo + 1"
+            ></page-number>
+          </div>
         </div>
       </template>
     </div>
@@ -64,13 +75,14 @@
 
 <script>
 import TopicElementPreview from "../components/TopicElementPreview";
+import PageNumber from "../components/pageInfo/PageNumber";
 import { cardTempDetail, cardStudentInfo } from "../api";
 import previewTemp from "../previewTemp";
 const JsBarcode = require("jsbarcode");
 
 export default {
   name: "card-preview",
-  components: { TopicElementPreview },
+  components: { TopicElementPreview, PageNumber },
   data() {
     return {
       isPrint: this.$route.params.viewType !== "view",