1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>银行卡OCR结果展示</title>
- <style>
- html, body {
- width: 100%;
- padding: 0;
- margin: 0;
- }
- .img-line {
- width: 100%;
- box-sizing: border-box;
- display: flex;
- justify-content: space-around;
- margin-top: 50px;
- }
- img {
- width: 500px;
- height: auto;
- box-sizing: border-box;
- padding: 5px;
- border: 1px solid #000;
- }
- img.icon {
- width: 100px !important;
- height: 100px !important;
- border: none;
- background-color: black;
- }
- .data-table {
- width: 100%;
- justify-content: center;
- box-sizing: border-box;
- margin: 50px 0;
- padding: 0 20px;
- }
- table {
- width: 100%;
- border: none;
- background-color: aqua;
- }
- .col-key {
- width: 20%;
- }
- .col-value {
- width: 80%;
- }
- td, th {
- background-color: white;
- }
- .center {
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="img-line">
- <a target="_blank" href="/{{ raw }}">
- <img src="/{{ raw }}" alt="raw">
- </a>
- <a target="_blank" href="/static/bank/{{ data["icon"] }}.png">
- <img class="icon" src="/static/bank/{{ data["icon"] }}.png" alt="icon">
- </a>
- </div>
- <div class="data-table">
- <table>
- <thead>
- <tr>
- <th class="col-key">JSON键</th>
- <th class="col-value">数据值</th>
- </tr>
- </thead>
- <tbody>
- {% for key, value in data.items() %}
- <tr>
- <td class="center">{{ key }}</td>
- <td>{{ value|safe }}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
- </body>
- </html>
|