|
|
@@ -0,0 +1,213 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
|
+ <meta http-equiv="Pragma" content="no-cache" />
|
|
|
+ <meta http-equiv="Cache-Control" content="no-cache" />
|
|
|
+ <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;
|
|
|
+ max-width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ font-size: 18px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .signature .sign {
|
|
|
+ position: relative;
|
|
|
+ width: 49%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<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>
|
|
|
+
|
|
|
+ </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>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>
|
river