一个收银台的HTML-程序员茄子

代码一个收银台的HTML

2025-01-17 16:15:32 +0800 CST views 1182

该文本描述了一个收银台的HTML结构，包含了页面的样式和内容。页面展示了商品编码、订单金额、商品编号和创建时间，并提供了微信支付和支付宝支付的按钮。整体设计简洁，使用了响应式布局，适合移动设备浏览。

<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>收银台</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background-color: #34c759;
            height: 150px;
            position: relative;
        }

        .content {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .content-header {
            display: flex;
            align-items: center;
            padding: 15px;
            /*background-color: #34c759;*/
            /*color: #fff;*/
            text-align: center;
            justify-content: center;
            font-size: 30px;
        }

        .content-header img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .content-header span {
            font-size: 30px;
            font-weight: bold;
        }

        .content-body {
            padding: 15px;
        }

        .content-body .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
        }

        .content-body .row .value {
            font-weight: bold;
        }

        .content-body .row .value.red {
            color: red;
        }

        .pay-button {
            display: block;
            width: 90%;
            margin: 20px auto;
            padding: 15px;
            text-align: center;
            background-color: #34c759;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .pay-button:hover {
            background-color: #2da94e;
        }
        .alipay{
                background-color: #5e72f5;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content">
        <div class="content-header">
            
            <span>收银台</span>
        </div>
        <div class="content-body">
            <div class="row">
                <span>商品编码：</span>
                <span class="value">dfksdkfsd</span>
            </div>
            <div class="row">
                <span>订单金额：</span>
                <span class="value red">¥ 0.01</span>
            </div>
            <div class="row">
                <span>商品编号：</span>
                <span class="value">29KN8QHdpkE9miToFnhe</span>
            </div>
            <div class="row">
                <span>创建时间：</span>
                <span class="value">2025-01-17 15:49:03</span>
            </div>
        </div>
        <button class="pay-button">微信支付</button>
        <button class="pay-button alipay">支付宝支付</button>
    </div>
</body>
</html>