index.html 2.41 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>长按扫描二维码</title>
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>
    <style>
        body {
            background-color: rgba(15, 106, 184, 0.99);
            font-size: 10px;
            margin: 0;
            padding: 0;
        }
        .main {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
        }
        .titles {
            border: 1px solid yellow;
            width: 100%;
            height: 40%;
            font-size: 4rem;
            color: white;
            text-align: center;
        }
        .cards {
            background-color: whitesmoke;
            width: 100%;
            height: auto;
        }
        .cards>.card02>.tips>.qrcodes>.qrcode {
            width: 50%;
        }
    </style>
</head>

<body>
<div class="main">
    <div class="titles">优惠券详情</div>
    <div class="cards">
        <div class="card card01" id="card01">
            <div class="titles">
                <div class="title">惊喜折上折</div>
                <div class="discount">0.5 元</div>
                <div class="description">满9999元可用</div>
            </div>
            <ul class="rules">
                <li class="rule">满9999元可用</li>
                <li class="rule">有效期 2019-10-15 04:00:00 至 2019-10-15 04:01:00</li>
            </ul>
        </div>
        <div class="card card02" id="card02">
            <div class="tips">
                <div class="tip">使用说明</div>
                <ul class="rules">
                    <li class="rule">单次结算时候仅能使用半张优惠券折扣</li>
                    <li class="rule">单张优惠券不可叠加、找零、续用、残缺</li>
                    <li class="rule">该优惠券有效时间为 2019-10-15 04:00:00 至 2019-10-15 04:01:00 ,过期/提前均不可使用</li>
                </ul>
                <div class="qrcodes">
                    <img class="qrcode" src="qrcodeBuy.png" alt />
                    <div class="qrcodeTip">按得越久,折扣越高!反正我信了!</div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

</html>