Skip to content

C
cdsf-static-bg
Commit 6410fd07 by 姜雷
Options

调整打印页样式

parent a55c4e65
Showing with 66 additions and 43 deletions
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<router-view/> <router-view />
</div> </div>
</template> </template>
...@@ -83,10 +83,17 @@ input[type='number'] { ...@@ -83,10 +83,17 @@ input[type='number'] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.line-wrap,
.col-line-1, .col-line-1,
.el-form-item { .el-form-item {
width: 100%; width: 100%;
} }
.line-wrap {
display: flex;
}
.tableMinHeightBig {
min-height: 120px;
}
.col-line-2 { .col-line-2 {
width: 45%; width: 45%;
} }
......
src/containers/print/publicCar.vue
...@@ -14,50 +14,59 @@ ...@@ -14,50 +14,59 @@
<div :span="6" class="tableCell tabelCol-6">用车人数</div> <div :span="6" class="tableCell tabelCol-6">用车人数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.userCount}}人</div> <div :span="4" class="tableCell tabelCol-4">{{selected.userCount}}人</div>
</div> </div>
<div class="tableRow"> <div class="tableRow tableMinHeightBig">
<div :span="4" class="tableCell tabelCol-4">用车类型<br>（勾选）</div> <div :span="4" class="tableCell tabelCol-4">用车类型<br>（勾选）</div>
<div :span="20" class="tableCell tabelCol-20 tal">{{selected.categoryName}}</div> <div :span="20" class="tableCell tabelCol-20 tal">{{selected.categoryName}}</div>
</div> </div>
<div class="tableRow"> <div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">用车起始时间</div> <div :span="4" class="tableCell tabelCol-4">用车起始时间</div>
<div :span="20" class="tableCell tabelCol-20 tal">{{selected.beginDate}} - {{selected.endDate}}（共 {{2}} 天）</div> <div :span="20" class="tableCell tabelCol-20 tal">{{selected.beginDate}} - {{selected.endDate}}（共 {{2}} 天）</div>
</div> </div>
<div class="tableRow"> <div class="tableRow tableMinHeightBig">
<div :span="4" class="tableCell tabelCol-4">用车详细路线</div> <div :span="4" class="tableCell tabelCol-4">用车详细路线</div>
<div :span="20" class="tableCell tabelCol-20 tal">{{selected.lineDescription}}</div> <div :span="20" class="tableCell tabelCol-20 tal">{{selected.lineDescription}}</div>
</div> </div>
<div class="tableRow"> <div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">部门负责人<br>签字（盖章）</div> <div :span="4" class="tableCell tabelCol-4">部门负责人<br>签字（盖章）</div>
<div :span="4" class="tableCell tabelCol-12"></div> <div :span="4" class="tableCell tabelCol-10"></div>
<div :span="4" class="tableCell tabelCol-4">派车人</div> <div :span="4" class="tableCell tabelCol-4">派车人</div>
<div :span="4" class="tableCell tabelCol-4"> <div :span="4" class="tableCell tabelCol-6">
{{selected.dealName}}<br/> <span>
{{selected.carPlate}}</div> {{selected.dealName}}
</div> </span>
<div class="tableRow"> <br />
<div :span="4" class="tableCell tabelCol-4">出车公里数</div> <span>
<div :span="4" class="tableCell tabelCol-4">{{selected.startKilometers}}</div> {{selected.carPlate}}
<div :span="4" class="tableCell tabelCol-4">收车公里数</div> </span>
<div :span="4" class="tableCell tabelCol-4">{{selected.stopKilometers}}</div>
<div :span="4" class="tableCell tabelCol-4">实际公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.trueKilometers}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">资金来源</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.priceSource}}</div>
<div :span="4" class="tableCell tabelCol-4">用车单价</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.price}}</div>
<div :span="4" class="tableCell tabelCol-4">用车金额</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.totalPrice}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">驾驶员签字</div>
<div :span="8" class="tableCell tabelCol-8"></div>
<div :span="4" class="tableCell tabelCol-4">用车人签字</div>
<div :span="8" class="tableCell tabelCol-8"></div>
</div>
</div>
</div> </div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">出车公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.startKilometers}}</div>
<div :span="4" class="tableCell tabelCol-4">收车公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.stopKilometers}}</div>
<div :span="4" class="tableCell tabelCol-4">实际公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.trueKilometers}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">资金来源</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.priceSource}}</div>
<div :span="4" class="tableCell tabelCol-4">用车单价</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.price}}</div>
<div :span="4" class="tableCell tabelCol-4">用车金额</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.totalPrice}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">驾驶员签字</div>
<div :span="8" class="tableCell tabelCol-8"></div>
<div :span="4" class="tableCell tabelCol-4">用车人签字</div>
<div :span="8" class="tableCell tabelCol-8"></div>
</div>
</div>
<div class="tableBottm">
本表一式两份交车队北区体育场204或205办公室
</div>
</div>
</template> </template>
<script> <script>
...@@ -92,6 +101,8 @@ export default { ...@@ -92,6 +101,8 @@ export default {
max-height: 978px; max-height: 978px;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding-bottom: 40px;
line-height: 40px;
.tableTitle { .tableTitle {
font-size: 20px; font-size: 20px;
line-height: 80px; line-height: 80px;
...@@ -109,6 +120,8 @@ export default { ...@@ -109,6 +120,8 @@ export default {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
border-right: 1px solid #000; border-right: 1px solid #000;
word-break: break-all;
white-space: wrap;
} }
.tableCell:last-child { .tableCell:last-child {
border-right: none; border-right: none;
...@@ -135,5 +148,8 @@ export default { ...@@ -135,5 +148,8 @@ export default {
width: 50%; width: 50%;
} }
} }
.tableBottm {
text-align: left;
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment