<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link
            rel="icon"
            type="image/png"
            href="data:image/png;base64,iVBORw0KGgo="
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{{$title or '阅读福利'}}</title>
    <style>
        body,
        html,
        p {
            margin: 0;
            padding: 0;
        }

        html {
            background: white;
        }

        i {
            font-style: normal;
        }

        .title-wrap {
            text-align: center;
            margin-top: 25px;
        }

        .title-wrap .title {
            font-size: 20px;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .title-wrap span {
            font-size: 15px;
            color: #666;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 12px;
        }

        .title-wrap span i {
            font-weight: bold;
            color: #eb2a2b;
            font-size: 17px;
            background-image: linear-gradient(to bottom, #ffffff, #faeaea);
        }

        .qrcode-wrap {
            font-size: 0;
            margin-top: 20px;
            text-align: center;
        }

        .qrcode-wrap img {
            width: 152px;
            height: 152px;
            margin-bottom: 10px;
        }

        .qrcode-wrap .qrcode-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
        }

        .qrcode-title-red {
            font-weight: bold;
            color: #ff6060;
        }

        .qrcode-wrap span {
            font-size: 12px;
            /* color: #999; */
        }

        .toast {
            width: 100%;
            text-align: center;
        }

        .toast img {
            width: 95%;
        }

        .notice-wrap {
            margin: 35px 10px 40px;
            background: #faeaea;
            padding: 20px 12px;
            margin-bottom: 70px;
        }

        .notice-wrap .title {
            font-size: 16px;
            color: #7e2a2a;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .notice-wrap .line {
            font-size: 16px;
            color: #7e2a2a;
            line-height: 1.8;
            text-align: justify;
            display: flex;
        }

        .notice-wrap .line .dian {
            font-size: 18px;
            font-weight: bold;
            margin-right: 10px;
        }

        .notice-wrap .line .info {
        }

        .notice-wrap .line span {
            color: #ff6060;
            font-weight: bold;
            font-size: 13px;
        }

        .operator-wrap {
            /* margin: 0 10px 20px; */
            padding: 10px 0;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: fixed;
            bottom: 0;
            background: white;
        }

        .operator-wrap a {
            color: #666;
            text-decoration: none;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            background: #e6e6e6;
            font-size: 15px;
        }

        .operator-wrap a:nth-child(1) {
            margin-left: 10px;
        }

        .operator-wrap a:nth-child(3) {
            margin-right: 10px;
        }

        .operator-wrap a:not(:last-child) {
            margin-right: 12px;
        }

        .operator-wrap .prev,
        .operator-wrap .catalog {
            width: 82px;
        }

        .operator-wrap .ignore {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        @media screen and (max-width: 320px) {
            .operator-wrap .prev,
            .operator-wrap .catalog {
                width: 62px;
            }
        }
    </style>
</head>

<body>
<div class="title-wrap">
    <p class="title">— 添加微信阅读小管家{{$name}} —</p>
    <span><i>即可赠送500书币</i></span>
</div>
<div class="qrcode-wrap">
    <img
            src="{{$img}}"
            alt=""
    />
    <p class="qrcode-title">微信阅读小管家{{$name}}</p>
    <p class="qrcode-title">(长按图片，识别二维码添加微信好友)</p>
    <p class="qrcode-title qrcode-title-red" style="color:#EB2A2B">
        我是9:00-21:00在线处理好友申请和赠送书币~
    </p>
</div>
<div class="toast">
    <img src="https://cdn-novel.iycdm.com/crm/guide2019072401.png" alt="" />
</div>
<div class="notice-wrap">
    <p class="title">我是微信阅读小管家{{$name}}:</p>
    <div class="line">
        <div class="dian">·</div>
        <div class="info">
            免费书币：成功添加微信好友即可赠送500书币，我一般都9-21点在线哦，晚上添加的话，需要明天早上上班才能通过好友哦，感谢谅解；
        </div>
    </div>
    <div class="line">
        <div class="dian">·</div>
        <div class="info">
            优先答疑：找不到看过的书啦？看书没钱啦？我都可以帮您哦！
        </div>
    </div>
    <div class="line">
        <div class="dian">·</div>
        <div class="info">
            帮您找书：总裁豪门、婚恋出轨、甜蜜宠文、虐心宫斗、文学名著等，提供最新优质小说，拒绝书荒！
        </div>
    </div>
    <div class="line">
        <div class="dian">·</div>
        <div class="info">
            书币福利：每月获得免费书币，不要钱！
        </div>
    </div>
    <div class="line">
        <div class="dian">·</div>
        <div class="info">
            更多福利，只要您想要，我们就有！
        </div>
    </div>
</div>
<div class="operator-wrap">
    <a
            href="{{$link['prev']}}"
            class="operator-item prev"
    >&lt;上一章</a
    >
    <a
            href="{{$link['catalog']}}"
            class="operator-item catalog"
    >目录</a
    >
    <a
            href="{{$link['next']}}"
            class="operator-item ignore"
    >点击忽略，继续阅读&gt;</a
    >
</div>
</body>
</html>
