// App.js
import '@/pages/OrderPrint/index.less';
// function Header() {
// return (
// <div className="flex items-start justify-between mb-6">
// <div className="text-sm">
// <p className="font-medium">网址: www.canrd.com</p>
// </div>
// <h1 className="text-3xl font-bold text-center">发票</h1>
// <div className="text-sm text-right">
// <p className="font-medium">QQ: 2902385824</p>
// </div>
// </div>
// );
// }
// function InvoiceDetails() {
// return (
// <div className="grid grid-cols-2 gap-4 mb-6 text-sm">
// <div>
// <p>单位名称: 某某科技有限公司</p>
// <p>联系人: 张三</p>
// <p>联系电话: 18583817221</p>
// <p>送货地址: 广东省东莞市</p>
// </div>
// <div className="text-right">
// <p>编号: Canrd-DZ-2023-1101-004</p>
// <p>开票日期: 2023年11月1日</p>
// </div>
// </div>
// );
// }
// function ProductsTable() {
// return (
// <div className="mb-6">
// <table className="w-full text-sm border border-gray-300 table-fixed">
// <thead>
// <tr className="">
// <th className="w-1/4 p-2 border border-gray-300 border-solid">
// 序号
// </th>
// <th className="w-1/6 p-2 border border-gray-300 border-solid">
// 订单号
// </th>
// <th className="w-1/6 p-2 border border-gray-300 border-solid">
// 货品名称
// </th>
// <th className="w-1/12 p-2 border border-gray-300 border-solid">
// 规格
// </th>
// <th className="w-1/6 p-2 border border-gray-300 border-solid">
// 单位
// </th>
// <th className="w-1/6 p-2 border border-gray-300 border-solid">
// 数量
// </th>
// <th className="w-1/4 p-2 border border-gray-300 border-solid">
// 备注
// </th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <td className="p-2 whitespace-normal border border-gray-300 border-solid">
// 产品名称可能非常长，所以这里会自动换行
// </td>
// <td className="p-2 border border-gray-300 border-solid">
// 规格型号
// </td>
// <td className="p-2 border border-gray-300 border-solid">单位</td>
// <td className="p-2 border border-gray-300 border-solid">1</td>
// <td className="p-2 border border-gray-300 border-solid">400</td>
// <td className="p-2 border border-gray-300 border-solid">400</td>
// <td className="p-2 whitespace-normal border border-gray-300 border-solid">
// 备注信息可能也会很长，需要自动换行来适应内容
// </td>
// </tr>
// {/* 其他行 */}
// </tbody>
// </table>
// </div>
// );
// }
// function Footer() {
// return (
// <div className="text-sm">
// <p>备注: 一些备注文本...</p>
// <div className="flex items-center justify-between mt-4">
// <div>
// <p>销售人员: 签字</p>
// </div>
// <div>
// <p>业务员: 签字</p>
// </div>
// <div>
// <p>开票人: 签字</p>
// <p className="font-medium">总计: ¥400</p>
// </div>
// </div>
// </div>
// );
// }
function App() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-4xl p-10 bg-white border border-gray-300">
<table
width="846"
border={0}
cellPadding={0}
cellSpacing={0}
style={{
width: '423.00pt',
borderCollapse: 'collapse',
tableLayout: 'fixed',
}}
>
<col
width="25.50"
style={{ msoWidthSource: 'userset', msoWidthAlt: 544 }}
/>
<col
width="52.50"
style={{ msoWidthSource: 'userset', msoWidthAlt: 1120 }}
/>
<col
width="115.50"
style={{ msoWidthSource: 'userset', msoWidthAlt: 2464 }}
/>
<col
width="169.50"
style={{ msoWidthSource: 'userset', msoWidthAlt: 3616 }}
/>
<col
width="165"
style={{ msoWidthSource: 'userset', msoWidthAlt: 3520 }}
/>
<col
width="96"
style={{ msoWidthSource: 'userset', msoWidthAlt: 2048 }}
/>
<col
width="114"
style={{ msoWidthSource: 'userset', msoWidthAlt: 2432 }}
/>
<col width="108" style={{ width: '54.00pt' }} />
<tr height="42" style={{ height: '21.00pt' }}>
<td height="42" style={{ height: '21.00pt' }}></td>
<td
className="xl65"
colSpan="7"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
科 路 得
</td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td
className="xl66"
colSpan="7"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
网址：www.canrd.com
</td>
</tr>
<tr height="35" style={{ height: '17.50pt' }}>
<td height="35" style={{ height: '17.50pt' }}></td>
<td
className="xl67"
colSpan="7"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
销售出货单
</td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td
className="xl69"
colSpan="4"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
单位名称：武汉大学
</td>
<td
className="xl69"
colSpan="3"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
单号：Canrd-DZ-2023-1101-004
</td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td
className="xl69"
colSpan="4"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
联系人：陈程
</td>
<td
className="xl69"
colSpan="3"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
开单日期：2023年11月1日
</td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td
className="xl69"
colSpan="4"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
联系电话：15623543176-6556
</td>
<td
className="xl70"
colSpan={2}
style={{ msoIgnore: 'colspan' }}
></td>
<td className="xl70"></td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td
className="xl69"
colSpan="7"
style={{ borderRight: 'none', borderBottom: 'none' }}
>
送货地址：广东省 深圳市龙岗区吉华街道联创科产业园3期33幢刘荣华[
</td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl71">序号</td>
<td className="xl71">订单号</td>
<td className="xl71">货品名称</td>
<td className="xl71">规格</td>
<td className="xl71">单位</td>
<td className="xl71">数量</td>
<td className="xl71">备注</td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl72">1</td>
<td className="xl72">231101005</td>
<td className="xl71">纽扣电池检测夹具</td>
<td className="xl71">20系列</td>
<td className="xl71">个</td>
<td className="xl72">1</td>
<td className="xl72"></td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl72">2</td>
<td className="xl72">231101005</td>
<td className="xl72">笔记本</td>
<td className="xl72"></td>
<td className="xl72">本</td>
<td className="xl72"></td>
<td className="xl72"></td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl71"></td>
<td className="xl71"></td>
<td className="xl72"></td>
<td className="xl72"></td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
</tr>
<tr height="30" style={{ height: '15.00pt' }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
<td className="xl72"></td>
</tr>
<tr style={{ height: '19.00pt' }}>
<td style={{ height: '19.00pt' }}></td>
<td className="xl73">销货单位</td>
<td
className="xl74"
colSpan="3"
style={{
borderRight: '0.5pt solid windowtext',
borderBottom: '0.5pt solid windowtext',
}}
>
发货地址：广东省东莞市厚街镇锦丰路9号科路得产业园
</td>
<td className="xl73">开户银行及账号</td>
<td
className="xl74"
colSpan={2}
style={{
borderRight: '0.5pt solid windowtext',
borderBottom: '0.5pt solid windowtext',
}}
>
招商银行股份有限公司东莞东骏路支行
<br />
账号：769906437110802
</td>
</tr>
<tr style={{ height: 30 }}>
<td height="30" style={{ height: '15.00pt' }}></td>
<td className="xl76" colSpan={2} style={{ msoIgnore: 'colspan' }}>
客户签名：
</td>
<td className="xl76">核准：屠亚辉</td>
<td
className="xl78"
colSpan={2}
style={{ borderRight: 'none', borderBottom: 'none' }}
>
业务员：Peter
</td>
<td
className="xl78"
colSpan={2}
style={{ borderRight: 'none', borderBottom: 'none' }}
>
开单人：张玉红
</td>
</tr>
<tr style={{ display: 'none', width: 0 }}>
<td width="26" style={{ width: 13 }}></td>
<td width="53" style={{ width: 26 }}></td>
<td width="116" style={{ width: 58 }}></td>
<td width="170" style={{ width: 85 }}></td>
<td width="165" style={{ width: 83 }}></td>
<td width="96" style={{ width: 48 }}></td>
<td width="114" style={{ width: 57 }}></td>
</tr>
</table>
</div>
</div>
);
}
export default App;