console
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<style>
html,
body {
width: 1200px;
margin: 0 auto;
padding: 35px 25px 0 25px;
background: white;
}
.seal {
font-size: 12px;
display: flex;
position: absolute;
height: 103px;
width: 160px;
top: 9px;
left: 184px;
}
.row {
display: flex;
flex-flow: row;
}
.title {
width: 500px;
font-size: 38px;
position: relative;
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
}
.line {
width: 355px;
border-top: 8px double;
}
.cell1 {
flex: 1;
}
.cell2 {
width: 45px;
line-height: 45px;
}
.textStyle {
writing-mode: tb-rl;
text-align: center;
}
.textCenter {}
.text1 {
padding: 0;
margin: 0;
margin-left: 54px;
margin-top: 20px;
line-height: 36px;
font-size: 16px;
}
.table {
border: 1px solid black;
font-size: 16px;
}
.table .cell1,
.table .cell2 {
border-right: 1px solid black;
}
.name {
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 10px 5px;
}
.rowItem {
justify-content: center;
align-items: center;
}
.rowItem>div {
flex: 1;
display: flex;
}
.item-center {
justify-content: center;
}
.item-right {
justify-content: right;
}
.rowItem>div:nth-child(1) {
flex: 3;
}
.rowItem>div:last-child {
flex: 2;
}
.rowSum>div:nth-child(1) {
flex: 4;
}
.rowSum>div:last-child {
flex: 2;
}
.rowSum>div {
flex: 1;
display: flex;
}
</style>
</header>
<body>
<div class="row" style="height:137px;">
<div class="cell1"></div>
<div class="title">
<span style="line-height:63px">电子发票（增值税专用发票）</span>
<span class="line"></span>
<div class="seal">
<svg
viewBox="0 0 170 110"
height="110"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
cx="85"
cy="55"
rx="80"
ry="50"
style="fill:none;
stroke: #df3124;stroke-width:5"
/>
<ellipse
cx="85"
cy="55"
rx="75"
ry="45"
style="fill:none;
stroke: #df3124;stroke-width:1"
/>
<text
style="fill:#df3124;text-anchor: middle; font-size:12px;"
x="85"
y="61"
>
国家税务总局
</text>
<path
id="zxxCircle"
stroke="none"
fill="none"
d="M15 55a70 40 0 1 0 140 0a70 40 0 1 0 -140 0z"
/>
<text x="90">
<textPath
href="#zxxCircle"
style="fill:#df3124;text-anchor: middle; font-size:12px;"
>
上海市税务局
</textPath>
</text>
<text x="267">
<textPath
href="#zxxCircle"
style="fill:#df3124;text-anchor: middle; font-size:12px;"
>
全国统一发票监制章
</textPath>
</text>
</svg>
</div>
</div>
<div class="cell1">
<p class="text1">
发票号码:23312000000019163457<br />
开票日期:2023年05月18日
</p>
</div>
</div>
<div class="table">
<div
class="row"
style="height:125px;justify-content:center;align-items:stroke"
>
<div class="cell2 textStyle">
购买方信息
</div>
<div class="cell1 name">
<div>名称：北京</div>
<div>统一社会信用代码/纳税人识别号：12321321321321321</div>
</div>
<div class="cell2 textStyle">销售方信息</div>
<div class="cell1 name" style="border:none">
<div>名称：北京</div>
<div>统一社会信用代码/纳税人识别号：12321321321321321</div>
</div>
</div>
<div style="padding:5px;border-top:1px solid black;">
<div class="rowItem row">
<div class="item-center">项目名称</div>
<div class="item-center">规格型号</div>
<div class="item-center">单 位</div>
<div class="item-right">数 量</div>
<div class="item-right">单 价</div>
<div class="item-right">金 额</div>
<div class="item-center">税率/征收率</div>
<div class="item-right">税 额</div>
</div>
<div class="rowItem row">
<div>信息服务费**信息服务费信息服务费信息服务费</div>
<div class="item-center"></div>
<div class="item-center"></div>
<div class="item-right"></div>
<div class="item-right">1</div>
<div class="item-right">20</div>
<div class="item-center">13%</div>
<div class="item-right">1232132</div>
</div>
<div class="rowSum row">
<div class="item-center">合 计</div>
<div class="item-center"></div>
<div class="item-right"></div>
<div class="item-right">1</div>
<div class="item-right">20</div>
<div class="item-center"></div>
<div class="item-right">1232132</div>
</div>
</div>
<div class="row" style="border-top:1px solid black;height:47px;" >
<div style="flex:3;display: flex;justify-content: center;align-items: center;" class="cell1" >价税合计（大写）</div>
<div class="cell1" style="flex:4;display: flex;padding:0 5px;align-items: center;">ⓧ一二三四五</div>
<div style="flex:3;display: flex;align-items: center;">(小写) 12313213123</div>
</div>
<div class="row" style="border-top:1px solid black;height:114px;">
<div class="cell2 textStyle">备注</div>
<div class="cell1" style="border:none">备注内容</div>
</div>
</div>
<div class="signer">开票人：林妹妹</div>
</body>
</html>