页脚

src/views/bookShelf/components/PrintModel.vue

@@ -7,13 +7,10 @@
         </div>
         <div class="print-model-bottom">
             <div class="print-model-bottom-left" id="showWaterMark" ref="printArea">
-                <footer class="print-footer">
-                    页脚页脚页脚
-                </footer>
                 <div class="print-inner">
                     <template v-if="resArr[0]&&resArr[0].wordsList">
                         <h2>
-                            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:'44px',lineHeight:(44+38)+'px',marginRight:'10px',fontWeight:'700'}" 
+                            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:'44px',lineHeight:(44+38)+'px',marginRight:'10px',fontWeight:'700',fontFamily:printForm.fontFamily}" 
                             :class="[
                                     itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                                 ]">
@@ -56,7 +53,7 @@
                                         <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :class="[pItem.isExplain||pItem.explainNumber?'hasExplain':'']">
                                             <template v-if="pItem.isShow">
                                                 <template v-if="pItem.tokens[2]==='#@@#'">
-                                                    <span class="NNPE-chs" :style="{width:printForm.fontSize+'px',height:printForm.fontSize*printForm.lineHeight+'px',display:'block'}"></span>
+                                                    <span class="NNPE-chs" :style="{width:printForm.fontSize+'px',height:printForm.fontSize*printForm.lineHeight+'px',display:'block',fontFamily:printForm.fontFamily}"></span>
                                                 </template>
                                                 <template v-else>
                                                     <div
@@ -69,7 +66,7 @@
                                                             :class="[
                                                                 pItem.tokens[9]===''?'marginRight':'',pItem.highIndex&&printForm.bold.indexOf(pItem.type)>-1?'fontWeight':'',pItem.marginRigh?'marginSingleRight':''
                                                             ]"
-                                                            :style="{fontSize:printForm.fontSize + 'px',color: printForm.color,lineHeight: printForm.lineHeight}"
+                                                            :style="{fontSize:printForm.fontSize + 'px',color: printForm.color,lineHeight: printForm.lineHeight,fontFamily:printForm.fontFamily}"
                                                             >{{ pItem.tokens[2] }}</span
                                                         >
                                                         <span
@@ -80,7 +77,7 @@
                                                             :class="[
                                                                     item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].highIndex&&printForm.bold.indexOf(item.wordsList[pIndex + 1].type)>-1?'fontWeight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
                                                                 ]"
-                                                            :style="{fontSize:printForm.fontSize + 'px',color: printForm.color,lineHeight: printForm.lineHeight}"
+                                                            :style="{fontSize:printForm.fontSize + 'px',color: printForm.color,lineHeight: printForm.lineHeight,fontFamily:printForm.fontFamily}"
                                                             >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                                                         >
                                                     </div>
@@ -94,6 +91,14 @@
                         </div>
                     </template>
                 </div>
+                <footer class="print-footer">
+                    <span>{{printForm.school}}</span>
+                    <span>{{printForm.className}}</span>
+                    <span>{{printForm.name}}</span>
+                    <span style="flex:1"></span>
+                    <span>{{printForm.dateStr}}</span>
+                    <span>{{printForm.momo}}</span>
+                </footer>
             </div>
             <div class="print-model-bottom-right">
                 <h3><svg-icon icon-class="print"></svg-icon>打印设置</h3>
@@ -525,7 +530,7 @@ export default {
             flex-shrink: 0;
             .print-inner{
                 overflow: auto;
-                padding: 120px 100px;
+                padding: 120px 100px 30px 100px;
             }
             .nnpe-article-author{
                 margin: 24px 0;
@@ -706,6 +711,20 @@ export default {
     position: relative;
     z-index: 9999;
 }
+.print-footer{
+    width: 100%;
+    min-height: 22px;
+    padding: 30px 96px;
+    color: #667180;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 22px;
+    display: flex;
+    justify-content: space-between;
+    span{
+        margin: 0 4px;
+    }
+}
 @media print {
     .no-print {
         display: none;
@@ -733,11 +752,11 @@ export default {
     }
     .print-footer{
         position: fixed;
-        bottom: 10px;
+        bottom: -30px;
         left: 10px;
     }
     @page {
-        margin: 30px 30px 40px 30px;
+        margin: 30px 30px 60px 30px;
     }
 }
 </style>