电子发票（普通发票）
* {
padding: 0;
margin: 0;
}
span {
font-size: 14px;
}
ul,
ul li {
list-style: none;
margin: 0;
padding: 0;
}
body {
font-family: "KaiTi";
font-weight: 500;
}
label {
color: #902020;
}
.rmb {
font-family: Arial, Helvetica, sans-serif;
}
.c-red {
color: #ff3133;
}
.c-black {
color: #000;
}
.f-big {
font-size: 16px;
font-family: "Courier New", monospace;
}
.f-small {
font-size: 12px;
}
.invoiceMain {
box-sizing: border-box;
width: 794px;
margin: 0 auto;
font-size: 14px;
color: #000;
padding: 20px;
border: 1px solid #000;
}
.invoiceHeader {
display: flex;
justify-content: space-between;
}
.headerLeft {
width: 300px;
display: flex;
}
.headerLeft div:nth-child(1) {
line-height: 26px;
}
.headerLeft div p {
line-height: 26px;
}
.headerLeft div:nth-child(2) p.c-red {
width: 170px;
height: 46px;
text-align: center;
line-height: 42px;
font-size: 24px;
letter-spacing: 2px;
}
.headerLeft div p.c span {
font-size: 18px;
letter-spacing: 1px;
}
.headerRight {
margin-top: 10px;
padding-left: 28px;
width: 316px;
}
.headerRight p {
text-align: left;
margin-bottom: 11px;
}
.headerMiddle {
text-align: center;
width: 350px;
}
.headerMiddle h1 {
font-size: 26px;
font-weight: 500;
color: #902020;
padding-bottom: 10px;
}
.total .rmb {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
.line {
height: 2px;
border-top: #5f3f3f 1px solid;
border-bottom: #000000 1px solid;
margin-bottom: 40px;
}
.invoiceBody {
border: 1px solid #902020;
}
.userInfo {
width: 100%;
display: flex;
align-items: center;
height: 83px;
border-bottom: 1px solid #902020;
}
.userInfo ul {
width: 50%;
margin: 0 5px;
padding: 0;
}
.userInfo ul li {
line-height: 24px;
}
.userInfo ul li:nth-child(2) .f-big {
letter-spacing: 2px;
}
.userInfo ul li:nth-child(3) {
position: relative;
}
.buy {
width: 20px;
border-right: 1px solid #902020;
padding: 0 5px;
text-align: center;
height: 100%;
display: flex;
align-items: center;
color: #902020;
line-height: 14px;
}
.sell {
width: 20px;
border-right: 1px solid #902020;
border-left: 1px solid #902020;
padding: 0 5px;
text-align: center;
height: 100%;
display: flex;
align-items: center;
color: #902020;
line-height: 14px;
}
.GoodsTable {
height: 166px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.GoodsTable td {
color: #902020;
padding: 0 4px;
}
.invoice-list {
height: 126px;
overflow: hidden;
border-right: 1px solid #902020;
}
.invoice-list td {
color: #000;
vertical-align: middle;
}
.invoice-list td:nth-child(3) {
text-align: center;
}
.invoice-list td:nth-child(4),
.invoice-list td:nth-child(5),
.invoice-list td:nth-child(6),
.invoice-list td:nth-child(7),
.invoice-list td:nth-child(8),
.total td:nth-child(5),
.total td:nth-child(6),
.total td:nth-child(7),
.total td:nth-child(8) {
text-align: right;
}
.invoice-list tr td {
height: 21px;
}
.GoodsTable thead tr {
height: 24px;
text-align: center;
}
.GoodsTotal {
height: 34px;
}
.GoodsTotal {
border-top: 1px solid #902020;
border-bottom: 1px solid #902020;
}
.total td {
color: #000;
}
.total td:nth-child(1) {
text-align: center;
color: #902020;
}
.total td:nth-child(6),
.total td:nth-child(8) {
font-size: 18px;
}
.remark {
display: flex;
border-right: 1px solid #765954;
height: 75px;
}
.remark-title {
width: 20px;
height: 100%;
border-right: 1px solid #902020;
padding: 0 5px;
text-align: center;
display: flex;
align-items: center;
color: #902020;
line-height: 14px;
}
.remark-content {
padding: 10px;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow-y: hidden;
}
.invoiceFooter {
padding-top: 20px;
padding-left: 60px;
display: flex;
justify-content: space-between;
}
.invoiceFooter li {
width: 25%;
}
</style>
| 项目名称 |
规格型号 |
单位 |
数 量 |
单 价 |
金 额 |
税率/征收率 |
税 额
|
| 合 计 |
|
|
|
|
|
|
价税合计(大写)
|
<div type="text" style="width: 30%">
(小写)
<span class="c-black">
</span>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="remark">
<div class="remark-title">备注</div>
</div>
</div>
<ul class="invoiceFooter">
<li>
<label>开票人：</label>
</li>
</ul>
</div>
|
