master

分支 (1)

管理

管理

master

XKBsass
/
砍价.html

<!DOCTYPE html>
<html lang="zh-cn">

<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="stylesheet" href="static/common/jsxs/iconfont.css">
    <link rel="stylesheet" href="static/common/jsxs/common.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/common/jsxs/mui.picker.min.css">
    <link rel="stylesheet" href="static/common/jsxs/mui.poppicker.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
    <script src="static/common/jsxs/mui.picker.min.js"></script>
    <script src="static/common/jsxs/mui.poppicker.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/meyer-reset/2.0/reset.min.css" />
    <script src="https://cdn.staticfile.org/jquery/1.11.3//jquery.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.8.0/DPlayer.min.js"></script>
    <title>砍价</title>
    <style>
        .weui-tab__panel {
            min-height: 20vw
        }

        .poster {
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            position: fixed;
            top: 0;
            z-index: 999;
            display: none;
        }

        .poster img {
            max-height: 75vh;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .weui-toast--text {
            min-height: initial;
            font-size: 18px;
            padding: 8px 16px;
            width: auto;
            top: 40%;
        }

        .weui-toast--text i {
            display: none;
        }

        .weui-toast--text .weui-toast {
            min-height: 0;
            top: 50%;
        }

        .weui-toast--text .weui-toast__content {
            margin: 8px 0 8px;
        }

        .mask {
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 99;
            background: rgba(0, 0, 0, .5);
            top: 0;
        }

        .js_dialog img {
            width: 100%;
        }

        .weui-half-screen-dialog__bd {
            overflow: scroll;
            max-height: 60vh;
        }

        .play {
            animation-play-state: running !important;
        }

        .pause {
            animation-play-state: paused !important;
        }

        .weui-toast {
            position: fixed;
            z-index: 5000;
            max-width: 100vw;
            padding: 0 5vw;
            min-height: 0;
            top: 50%;
            left: 50%;
            margin-left: 0;
            background: hsla(0, 0%, 7%, .7);
            text-align: center;
            border-radius: 5px;
            color: #fff;
            width: auto;
            min-width: 7.6em;
            transform: translate(-50%, -50%)
        }

        .weui-icon_toast.weui-loading {
            margin: 24px 0 0;
        }

        .cover-div {
            position: fixed;
            top: 0;
            left: 0;
            background: black;
            opacity: 0.5;
            z-index: +100;
            width: 100%;
            height: 100%;
            display: none;
        }

        /*----------------mui.showLoading---------------*/
        .mui-show-loading {
            position: fixed;
            padding: 5px;
            width: 120px;
            min-height: 120px;
            top: 45%;
            left: 50%;
            margin-left: -60px;
            background: rgba(0, 0, 0, 0.6);
            text-align: center;
            border-radius: 5px;
            color: #FFFFFF;
            visibility: hidden;
            margin: 0;
            z-index: 2000;

            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            opacity: 0;
            -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .mui-show-loading.loading-visible {
            opacity: 1;
            visibility: visible;
            -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
        }

        .mui-show-loading .mui-spinner {
            margin-top: 24px;
            width: 36px;
            height: 36px;
        }

        .mui-show-loading .text {
            line-height: 1.6;
            font-family: -apple-system-font, "Helvetica Neue", sans-serif;
            font-size: 14px;
            margin: 10px 0 0;
            color: #fff;
        }

        .mui-show-loading-mask {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .mui-show-loading-mask-hidden {
            display: none !important;
        }

        .radio-div .rodio-icon {
            margin-right: 5px;
            color: #bfbfbf;
        }

        .radio-div .radio-active {
            color: #f6ce45;
        }

        .content-group .select-div {
            border: solid 0.5px #c5c5c7 !important;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            border-radius: 3px;
        }

        .content-group .select-div span {
            margin-left: 15px;
        }

        .sign-up-group {
            position: fixed;
            width: 100%;
            bottom: 0px;
            z-index: +101;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
            background: #fafafc;
        }

        .info {
            width: 100vw;
        }


        .info p img {
            display: block;
            width: 100%;
        }

        .common_info {
            width: 90vw;
            background: #fffced;
            margin: 10vw auto;
            border-radius: 2vw;
            position: relative;
            padding-top: 8vw;
            padding-bottom: 4vw;
        }

        .common_info .title {
            width: 87%;
            background: linear-gradient(to right, #fd58be, #ff4c8d);
            position: absolute;
            top: -4vw;
            left: 50%;
            transform: translateX(-50%);
            height: 8vw;
            border-radius: 5vw;
            color: #fefae1;
            text-align: center;
            line-height: 8vw;
            font-weight: bolder;
            font-size: 4.8vw;
            white-space: nowrap;
        }

        body {
            background: #4b00b2;
        }

        .common_info .content {
            width: 85%;
            min-height: 20vw;
            margin: 0 auto;
            position: relative;
        }

        .yuan {
            width: 4vw;
            height: 4vw;
            border-radius: 50%;
            position: absolute;
            top: 13vw;
            background: #4b00b2;
        }

        .sign_btn {
            width: 87%;
            height: 10vw;
            text-align: center;
            line-height: 10vw;
            color: black;
            background-color: #ffd800;
            border-radius: 5vw;
            margin: 0 auto;
            font-weight: bolder;
        }

        .common_info .sign_btn {}

        .weui-slider {
            -webkit-user-select: none;
            user-select: none;
            flex: 1;
            margin: 10vw 0;
        }

        .weui-slider__inner {
            position: relative;
            height: 3vw;
            background-color: #ffeeb8;
            border-radius: 2vw;
        }

        .weui-slider__track {
            height: 3vw;
            background-color: #ffd800;
            width: 0;
            border-top-left-radius: 2vw;
            border-bottom-left-radius: 2vw;
            transition: width 1s;
        }

        .weui-slider__handler {
            position: absolute;
            left: 0;
            top: 50%;
            width: 6vw;
            height: 6vw;
            margin-left: -3vw;
            margin-top: -3vw;
            border-radius: 50%;
            border: 1vw solid white;
            background-color: #fe6e28;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
            transition: left 1s;
        }

        .has_down_tips {
            position: absolute;
            top: -10vw;
            height: 6vw;
            padding: 0.5vw 1vw;
            background-color: #ffd800;
            line-height: 6vw;
            font-size: 3.5vw;
            text-align: center;
            border-radius: 1vw;
            transform: translateX(-10vw);
            z-index: 1;
            transition: left 1s;
            white-space: nowrap;
        }

        .triangle_border_down {
            width: 0;
            height: 0;
            border-width: 2vw;
            border-style: solid;
            border-color: #ffd800 transparent transparent transparent;
            position: absolute;
            bottom: -3.5vw;
            left: 50%;
            transform: translateX(-50%);
        }

        .common_info .money_info {
            margin: 3vw 0;
            color: black;
            font-size: 3.5vw;
        }

        .common_info .money_info .value {
            color: #ff4f8f;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .kanjia_info .title {
            width: 100% !important;
            border-radius: unset !important;
            border-top-left-radius: 2vw !important;
            border-top-right-radius: 2vw !important;
            display: flex;
            justify-content: space-around;
            height: 12vw !important;
            top: -6vw !important;
            line-height: 12vw !important;
        }

        .kanjia_info .title span {
            width: 33%;
        }

        .kanjia_info .yuan {
            top: 3vw;
            width: 6vw;
            height: 6vw;
        }

        .kanjia_list {
            display: flex;
            flex-flow: column;
            align-items: center;
        }

        .kanjia_list img {
            width: 7vw;
            border-radius: 50%;
        }

        .kanjia_list span {
            width: 15vw;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            font-size: 3vw;
            margin-left: 1vw;
            white-space: nowrap;
            text-align: left !important;
        }

        .kanjia_list .item div {
            display: flex;
            justify-content: start;
            align-items: center;
            width: 33.33%;
        }

        .kanjia_list p {
            color: black;
            font-size: 4vw;
            white-space: nowrap;
            width: 33.33%;
            text-align: center;
        }

        .kanjia_list .item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2vw 0;
        }

        .kanjia_list :last-child {
            text-align: right;
        }

        .list_loading {
            pointer-events: none;
        }

        .list_loading .content {
            opacity: .6;
        }

        .kanjia_info svg {
            width: 20vw;
            height: 20vw;
            opacity: 1 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            display: none;
        }

        .list_loading svg {
            display: block !important
        }

        .fixed_right {
            width: 20vw;
            height: 6vw;
            line-height: 6vw;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.65);
            position: fixed;
            z-index: 10;
            right: 0;
            border-top-left-radius: 3vw;
            border-bottom-left-radius: 3vw;
            font-size: 3.5vw;
        }

        .customer-service-group,
        .support-service-group {
            position: fixed;
            left: 50%;
            top: 50%;
            width: 85%;
            transform: translate(-50%, -50%);
            z-index: +101;
            border-radius: 4px;
            background: #fafafc;
        }

        .cover-group-div .phone-div {
            text-align: center;
            font-size: 14px;
            height: 44px;
            background: #01B20C;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
            border-radius: 5px;
            margin-left: 15px;
            margin-right: 15px;
        }

        .tarbar {
            width: 100%;
            height: 20vw;
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #rules p {
            color: black;
            line-height: 20px;
        }

        .radio-div {
            display: flex;
        }

        .radio-div div {
            margin: 0 2vw;
        }

        .content .poster_btn {
            display: none;
            width: 100%;
            background: #4b00b2;
            height: 10vw;
            line-height: 10vw;
            border-radius: 5vw;
            color: white;
            text-align: center;
            font-size: 4.5vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .user_tarbar {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            height: 10vw;
            line-height: 10vw;
            width: 90%;
            border-radius: 2vw;
            overflow: hidden;
            text-align: center;
            font-weight: bolder;
        }

        .user_tarbar :first-child {
            width: 60%;
            background: #ff4c8d;
        }

        .user_tarbar :last-child {
            width: 40%;
            background: #ffd800;
            color: black;
        }

        .userinfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2vw;
            margin-bottom: 13vw;
        }

        .userinfo img {
            width: 15vw;
            height: 15vw;
            border-radius: 50%;
        }

        .userinfo .text {
            background: lightgray;
            color: black;
            font-size: 3.5vw;
            padding: 3vw;
            border-radius: 1vw;
            line-height: 5vw;
            width: 60vw;
            text-indent: 4vw;
        }

        .mui-popover {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .notification {
            position: fixed;
            bottom: 20vw;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .dd_start {
            display: inline;
            font-size: 12px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            line-height: 20px;
            border-radius: 10px;
            margin-top: 5px;
            margin-left: 5px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .music-img {
            width: 10px;
            height: 10px;
            margin-right: 10px
        }
    </style>
</head>

<body>
    <script>
        //扩展mui.showLoading
        (function ($, window) {
            //显示加载框
            $.showLoading = function (message, type) {
                if ($.os.plus && type !== 'div') {
                    $.plusReady(function () {
                        plus.nativeUI.showWaiting(message);
                    });
                } else {
                    var html = '';
                    html += '<i class="mui-spinner mui-spinner-white"></i>';
                    html += '<p class="text">' + (message || "数据加载中") + '</p>';

                    //遮罩层
                    var mask = document.getElementsByClassName("mui-show-loading-mask");
                    if (mask.length == 0) {
                        mask = document.createElement('div');
                        mask.classList.add("mui-show-loading-mask");
                        document.body.appendChild(mask);
                        mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
                    } else {
                        mask[0].classList.remove("mui-show-loading-mask-hidden");
                    }
                    //加载框
                    var toast = document.getElementsByClassName("mui-show-loading");
                    if (toast.length == 0) {
                        toast = document.createElement('div');
                        toast.classList.add("mui-show-loading");
                        toast.classList.add('loading-visible');
                        document.body.appendChild(toast);
                        toast.innerHTML = html;
                        toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
                    } else {
                        toast[0].innerHTML = html;
                        toast[0].classList.add("loading-visible");
                    }
                }
            };

            //隐藏加载框
            $.hideLoading = function (callback) {
                if ($.os.plus) {
                    $.plusReady(function () {
                        plus.nativeUI.closeWaiting();
                    });
                }
                var mask = document.getElementsByClassName("mui-show-loading-mask");
                var toast = document.getElementsByClassName("mui-show-loading");
                if (mask.length > 0) {
                    mask[0].classList.add("mui-show-loading-mask-hidden");
                }
                if (toast.length > 0) {
                    toast[0].classList.remove("loading-visible");
                    callback && callback();
                }
            }
        })(mui, window);
    </script>

    <div class="fixed_right" style="top: 3vw;" onclick="mScroll('rules')">活动规则</div>
    <div class="fixed_right" style="top: 11vw;" onclick="mScroll('infos')">活动介绍</div>
    <div class="fixed_right" style="top: 19vw;" id='kefu'>客服热线</div>
    <img src="http://banzhang.wxtsbf.com/FgJR-ZXEsaNSEyxU3cFwsWAoUiRR" style="width: 100%;display: block;">
    <!--个人信息-->
    <div class="common_info">
        <div class="title">剩余时间：<span id='daojishi'></span></div>
        <div class="content">
            <!--有用户信息-->
            <div class="userinfo">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <div class="text">已有<span id='kan_num'>12</span>人帮砍价，扫码即砍价，省钱就是这么简单！
                </div>
            </div>
            <div class="weui-slider">
                <div id="sliderInner" class="weui-slider__inner">
                    <div id="sliderTrack" class="weui-slider__track"></div>
                    <div id="sliderHandler" class="weui-slider__handler"></div>
                    <div id='has_down_tips' class="has_down_tips">已砍¥<span id='has_down_value'>600</span>
                        <div class="triangle_border_down"></div>
                    </div>
                </div>
                <div class="money_info">
                    <p style="float: left;">原价:<span class="value">¥899</span></p>
                    <p style="float: right;">底价:<span class="value">¥99</span></p>
                </div>
            </div>
            <!--已报名 一键邀请亲友砍价-->
            <!--未报名 立即开始省钱之旅-->
            <div class="poster_btn pulse" style="position:unset;transform: unset;">一键邀请亲友砍价</div>

        </div>
        <div class="yuan" style="left: -2vw;"></div>
        <div class="yuan" style="right: -2vw;"></div>
    </div>

    <!--亲友团-->
    <div class="common_info kanjia_info list_loading">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px"
            viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
            <path opacity="0.2" fill="#4b00b2"
                d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
            s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
            c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
            <path fill="#4b00b2" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
            C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
                    to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
            </path>
        </svg>
        <div class="title">
            <span>亲友团</span>
            <span>砍掉价格</span>
            <span>砍后价格</span>
        </div>
        <div class="content">
            <div class="kanjia_list">
                <div class="item">
                    <div><img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg"><span>用户昵称</span></div>
                    <p>砍掉¥10</p>
                    <p>¥99</p>
                </div>
                <div class="item">
                    <div><img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg"><span>用户昵称</span></div>
                    <p>砍掉¥10</p>
                    <p>¥99</p>
                </div>
                <div class="item">
                    <div><img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg"><span>用户昵称</span></div>
                    <p>砍掉¥10</p>
                    <p>¥99</p>
                </div>
                <div class="item">
                    <div><img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg"><span>用户昵称</span></div>
                    <p>砍掉¥10</p>
                    <p>¥99</p>
                </div>
                <div class="item">
                    <div><img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg"><span>用户昵称</span></div>
                    <p>砍掉¥10</p>
                    <p>¥99</p>
                </div>
                <div class="item">
                    <div><img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg"><span>用户昵称</span></div>
                    <p>砍掉¥10</p>
                    <p>¥99</p>
                </div>
            </div>
            <hr style="color: #4b00b2;">
            <div style="display: flex;justify-content: space-between;">
                <span id='pageUp'>上一页</span>
                <span id='pageDown'>下一页</span>
            </div>
        </div>
        <div class="yuan" style="left: -3vw;"></div>
        <div class="yuan" style="right: -3vw;"></div>
    </div>

    <!--富文本-->
    <div class="common_info" id='infos'>
        <div class="title">活动介绍</div>
        <div class="content info">

        </div>
        <div class="yuan" style="left: -2vw;"></div>
        <div class="yuan" style="right: -2vw;"></div>
    </div>
    <div class="common_info">
        <div class="title">品牌介绍</div>
        <div class="content info">
            <p><img src="http://banzhang.wxtsbf.com/20200921-mmGP4BGdzjJNpkx2CQ4H.jpg" alt="" /></p>
        </div>
        <div class="yuan" style="left: -2vw;"></div>
        <div class="yuan" style="right: -2vw;"></div>
    </div>
    <div class="common_info" id='rules'>
        <div class="title">活动规则</div>
        <div class="content info">
            <p>1、在线报名开团或参团，输入姓名电话并立即支付50元定金。<br />2、参团或开团后，可以将活动页面或自己生成的海报分享给亲友参团。<br />3、报名成功并支付的家长，将本活动链接转发至朋友圈并配以下文字：求18个赞，我在参加猫王舞蹈&amp;嘿！优小镇拼团活动。集齐18个赞，即可获赠价值68元的学习用品大礼包&nbsp;<br />4、成功团购后，请于9月26日-27日凭手机号到活动现场支付尾款，办理活动定单手续，逾期无效，50元报名费不予退还。<br />5、本机构尊重用户的个人隐私，一定不会公开或透露用户的注册资料及保存在本平台的任何非公开内容，不会对其资料进行出租、出售行为。<br />6、报名即视为认同本活动规则，未成年人需经监护人代为报名。<br />7、在法律许可范围内本机构保留活动最终解释权。
            </p>
        </div>
        <div class="yuan" style="left: -2vw;"></div>
        <div class="yuan" style="right: -2vw;"></div>
    </div>

    <!--客服 二维码-->
    <div class="cover-group-div customer-service-group customer-cover" style="display:none">
        <div class="head-panel">
            微信官方客服
            <div class="group-div" onclick="closeCustomerCover()">
                <i class="iconfont iconuntitled94" style="font-size: 16px;"></i>
            </div>
        </div>
        <div class="panel-body" style="padding-left:0px;padding-right:0px;padding-bottom:10px;background-color: #fff">
            <div class="serviceQrCode-div">
                <img class="serviceQrCode-img" src="http://banzhang.wxtsbf.com/20210727-Bxim2EjkkitmfCZh8wfJ.jpg"
                    style="width: 85%;margin: 2vw auto;display: block;">
            </div>
            <div class="phone-div" onclick="window.location.href = `tel://123456`;">
                直接拨打电话
            </div>
        </div>
    </div>
    <!--弹幕-->
    <div class="notification"></div>

    <script>
        $('#kefu').click(() => {
            $('.cover-div').show()
            $('.customer-service-group').slideToggle()
        })
        function closeCustomerCover() {
            $('.cover-div').hide()
            $('.customer-service-group').slideToggle()
        }

        function mScroll(id) { $("html,body").stop(true); $("html,body").animate({ scrollTop: $("#" + id).offset().top - $(window).height() / 5 }, 1000); }
        //倒计时
        function timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y + M + D + h + m + s;
        }
        var firsttime = timestampToTime("{$config.endtime}");
        firsttime = firsttime.replace(/-/g, "/");
        var starttime = new Date(firsttime).getTime();
        setInterval(function () {
            var nowtime = new Date();
            var time = starttime - nowtime;
            var day = parseInt(time / 1000 / 60 / 60 / 24);
            var hour = parseInt(time / 1000 / 60 / 60 % 24);
            var minute = parseInt(time / 1000 / 60 % 60);
            var seconds = parseInt(time / 1000 % 60);
            if (time > 0) {
                $('#daojishi').text((day * 24 + hour) + "小时" + minute + "分" + seconds + "秒");
            }
        }, 1000)


        //进度条
        function set_progress_value(val, money) {
            money = money.toFixed(2)
            $('#sliderTrack').css('width', val + "%")
            $('#sliderHandler').css('left', val + "%")
            $('#has_down_tips').css('left', val + "%")
            $('#has_down_value').text(money)
        }

        //进度条
        //开启进度条动画 用户没有报名 也没有进入别人的页面 这里需要注释掉
        var my_id,uid=1

        if (my_id == 0 && uid == 0) {
            var origin_price = parseFloat("{$config.origin_price|default=0}")
            var low_price = parseFloat("{$config.low_price|default=0}")
            var progress = 0
            var money_item = (origin_price - low_price) / 10//步进值
            var now_money = 0;
            if (money_item > 0) {
                setInterval(() => {
                    set_progress_value(progress, now_money)
                    progress += 10;
                    now_money += money_item;
                    //now_money=now_money.toFixed(2)
                    if (progress > 100) {
                        progress = 0
                        now_money = 0
                    }
                }, 1000);
            }
        } else {
            set_progress_value(70, parseFloat(800))
        }

    </script>
    <!--弹幕js-->
    <script>
        var danmu_data;
        var notificationSize = 0;
        //之前是请求接口,返回一些用户昵称就行 我这里放一些假数据 请求后执行 ancyloadNotification()
        danmu_data = ['用户A', '用户B', '用户C', '用户D', '用户E']
        ancyloadNotification()
        function ancyloadNotification() {
            var timeIntervalNotification = setInterval(function () { //定时器
                var totalLength = danmu_data.length;
                if (notificationSize >= totalLength) {
                    notificationSize = 0
                }
                var messageTplHtml = `<div class="dd_start"><img class="music-img" src="http://banzhang.wxtsbf.com/20200828-iEGBpSnP6psnW2QyBiei.png"><span>恭喜 ${danmu_data[notificationSize]} 报名成功!</span></div>`;
                notificationSize++;
                $(".notification").append(messageTplHtml);
                /**删除第一个**/
                if ($(".dd_start").length > 5) {
                    $(".dd_start").eq(0).remove();
                }
                /**修改背景色**/
                $.each($(".dd_start"), function (index, item) {
                    if ($(".dd_start").length == 2) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    } else if ($(".dd_start").length == 3) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.15)');
                        } else if (1 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    } else if ($(".dd_start").length == 4) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.1)');
                        } else if (1 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.15)');
                        } else if (2 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    } else if ($(".dd_start").length == 5) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.05)');
                        } else if (1 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.1)');
                        } else if (2 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.15)');
                        } else if (3 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    }
                });
            }, 2000);
        }
    </script>
</body>

</html>