|
|
@@ -9,24 +9,7 @@
|
|
|
<meta http-equiv="Expires" content="0" />
|
|
|
<title>费用报销单</title>
|
|
|
<style>
|
|
|
- p {margin: 0;}
|
|
|
body { margin: 0; }
|
|
|
- header {
|
|
|
- height: 40px;
|
|
|
- line-height: .40px;
|
|
|
- color: #000;
|
|
|
- font-size: 17px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- header .back {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- left: 12px;
|
|
|
- top: 10px;
|
|
|
- }
|
|
|
.container {
|
|
|
padding: 22px 20px 3px;
|
|
|
font-size: 14px;
|
|
|
@@ -38,176 +21,85 @@
|
|
|
text-align: center;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
- h2 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- padding-top: 15px;
|
|
|
- }
|
|
|
- h3 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .signature {
|
|
|
- padding-top: 50px;
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
}
|
|
|
- .signature .sign {
|
|
|
- position: relative;
|
|
|
- width: 49%;
|
|
|
- display: inline-block;
|
|
|
+ table, tr, td {
|
|
|
+ border: 1px solid #424242;
|
|
|
}
|
|
|
- .signature span {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .signature .cachet {
|
|
|
- position: absolute;
|
|
|
- top: -60px;
|
|
|
- left: 0;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
- .iInfo {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .iInfo span {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .iInfoContent, .iInfoContent span {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .underline {
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
- .bold {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .msgWrap{
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- line-height: 30px;
|
|
|
- flex-flow:row wrap;
|
|
|
- border: 1px solid #333;
|
|
|
- border-bottom: none;
|
|
|
-
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .msgWrap:last-child{
|
|
|
- border-bottom: 1px solid #333;
|
|
|
- }
|
|
|
- .msgWrap .title {
|
|
|
+ .title {
|
|
|
width: 110px;
|
|
|
text-align: center;
|
|
|
-
|
|
|
- margin: 0;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .msgWrap .concat {
|
|
|
- padding-right: 10px;
|
|
|
- margin: 0;
|
|
|
- flex: 1;
|
|
|
- border-left: 1px solid #333;
|
|
|
- padding-left:10px;
|
|
|
- }
|
|
|
- .msgWrap .wrap{
|
|
|
- flex: 1 ;
|
|
|
- }
|
|
|
- .msgWrap .concatWrap:nth-child(1){
|
|
|
- border-top:0;
|
|
|
- }
|
|
|
- .msgWrap .concatWrap{
|
|
|
- padding-right: 10px;
|
|
|
- border: 1px solid #333;
|
|
|
- border-right: 0;
|
|
|
- border-bottom: none;
|
|
|
- border-left: 1px solid #333;
|
|
|
- padding-left:10px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .msgWrap .concatWrap .subTitle{
|
|
|
- width: 120px;
|
|
|
- text-align: right;
|
|
|
- margin-right: 10px;
|
|
|
}
|
|
|
- .msgWrap .concatWrap .subWrap{
|
|
|
- border-left: 1px solid #333;
|
|
|
- padding-left:10px;
|
|
|
- flex:1
|
|
|
+ td {
|
|
|
+ padding: 5px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
-<body tyle="font-family:'SimSun'">
|
|
|
+<body style="font-family:SimSun">
|
|
|
<div class="container">
|
|
|
<h1>XXX（公司全称）费用报销单</h1>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>公司名称: </p>
|
|
|
- <p class="concat"> XXXXX</p>
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>费用申请人: </p>
|
|
|
- <p class="concat"> XXXXX</p>
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>费用类型: </p>
|
|
|
- <p class="concat"> XXXXX</p>
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>报销金额: </p>
|
|
|
- <p class="concat"> XXXXX</p>
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>是否有借款: </p>
|
|
|
- <p class="concat"> XXXXX</p>
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>情况说明: </p>
|
|
|
- <p class="concat"> 有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况有很多很多的情况</p>
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>审批意见: </p>
|
|
|
- <div class="wrap">
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">分部/部门负责人 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">行政部 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">区域会计主管 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">财务经理 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">董事长 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <td class="title">公司名称: </td>
|
|
|
+ <td class="concat">XXXXX </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">费用申请人: </td>
|
|
|
+ <td class="concat">XXXXX </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">费用类型: </td>
|
|
|
+ <td class="concat">XXXXX </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">报销金额: </td>
|
|
|
+ <td class="concat">XXXXX </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">是否有借款: </td>
|
|
|
+ <td class="concat">XXXXX </td>
|
|
|
+ </tr>
|
|
|
|
|
|
- </div>
|
|
|
- <div class="msgWrap">
|
|
|
- <p class='title'>执行: </p>
|
|
|
- <div class="wrap">
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">分部会计 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- <div class="concatWrap">
|
|
|
- <p class="subTitle">资金主管 :</p>
|
|
|
- <p class="subWrap">很多很多的情况有很多很多的情况有很多很多的情况有很多很多</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <tr>
|
|
|
+ <td class="title">情况说明: </td>
|
|
|
+ <td class="concat">有很多很很多很多的情况 </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table style="border-top: 0;">
|
|
|
+ <tr style="border-top: 0;">
|
|
|
+ <td style="border-top: 0;" rowspan="5" class="title">审批意见: </td>
|
|
|
+ <td class="title" style="width: 110px;border-top: 0;">分部/部门负责人: </td>
|
|
|
+ <td style="border-top: 0;" class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title" style="width: 110px;">行政部: </td>
|
|
|
+ <td class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title" style="width: 110px;">区域会计主管: </td>
|
|
|
+ <td class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title" style="width: 110px;">财务经理: </td>
|
|
|
+ <td class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title" style="width: 110px;">董事长: </td>
|
|
|
+ <td class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
|
|
|
- </div>
|
|
|
+ <tr>
|
|
|
+ <td rowspan="2" class="title">执行: </td>
|
|
|
+ <td class="title" style="width: 110px;">分部会计: </td>
|
|
|
+ <td class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title" style="width: 110px;">资金主管: </td>
|
|
|
+ <td class="concat">很多很多的情况有很多很多的情况有很多很多的情况有很多很多 </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
river