crm/app/sys/view/broad/openning.html

{extend name="public/layout"} {block name="body"}
<link rel="stylesheet" href="__LAYUI__/common.css" media="all">
<style type="text/css">
  html,
  body {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f0f4f7;
    min-width: 1160px;
    min-height: 553px;
  }

  body {
    padding: 72px 20px 20px;
  }

  .backbox {
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    width: 100px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #B6CADE;
  }

  .backbox img {
    position: relative;
    top: 8px;
    width: 19px;
    margin-right: 9px;
  }

  .backbox div {
    line-height: 30px;
    font-size: 14px;
    color: #B6CADE;
  }

  .openvipBox {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 30px 0 0 40px;
  }

  .contentBox {
    display: block;
    width: 1200px;
  }

  .openbanner {
    display: block;
    width: 100%;
    position: relative;
  }

  .openbanner .bannerdiv {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 6.75%;
    position: relative;
  }

  .openbanner .bannerdiv div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .openbanner img {
    width: 100%;
    height: 100%;
  }

  .viptitle {
    display: block;
    width: 100%;
    margin: 24px 0 28px;
    padding-left: 15px;
    font-size: 18px;
    color: #384855;
    line-height: 25px;
    position: relative;
  }

  .viptitle::before {
    content: ' ';
    display: block;
    width: 5px;
    height: 20px;
    background: #249EFB;
    border-radius: 4px;
    left: 0;
    position: absolute;
    top: 2.5px;
  }

  .bossmsg {
    width: 100%;
    font-size: 14px;
    color: #B6CADE;
  }

  .openviptime {
    display: block;
    width: 100%;
    margin-top: 32px;
  }

  .openviptime .everyVip {
    float: left;
    margin-right: 24px;
    width: 384px;
    height: 155px;
    border-radius: 10px;
    position: relative;
  }

  .openviptime .everyVip:last-child {
    margin-right: 0;
  }

  .everyVip .vipBox {
    display: block;
    position: relative;
    height: 155px;
    width: 100%;
    border-radius: 10px;
  }

  .everyVip .vipBox .vipmsgBox {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #D4E4ED;
    border-radius: 10px;
  }

  .everyVip .vipBox .vipmsgBox .viplogo {
    width: 91px;
    height: 91px;
    border-radius: 50%;
    position: relative;
    top: 32px;
    margin-left: 9px;
  }

  .everyVip .vipBox .vipmsgBox .rightText {
    position: relative;
    top: 32px;
    margin-left: 24px;
    font-size: 16px;
  }

  .realprice {
    display: inline-block;
    width: 126px;
    font-family: Impact;
    font-size: 58px;
    color: #384855;
  }

  .priceBox {
    text-decoration: line-through;
  }

  .vipnewImg {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
  }

  .recommendImg {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
  }

  .everyVip .vipBox .vipmsgBox.vipbg {
    background: url("__STATIC__/img/vipbg.png);
    background-size: 100% 100%;
    box-shadow: 0 0px 12px 0px rgb(0 0 0 / 0.3);
    -moz-box-shadow: 0 0px 12px 0px rgb(0 0 0 / 0.3);
    /*firefox*/
    -webkit-box-shadow: 0 0px 12px 0px rgb(0 0 0 / 0.3);
    /*webkit*/
  }

  .vipbg .realprice {
    color: #fff;
  }

  .everyVip .vipBox .vipmsgBox.vipbg {
    border-width: 0;
  }

  .everyVip.nowvipBox {
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
    /*firefox*/
    -webkit-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
    /*webkit*/
  }

  .qrcodeBox {
    display: block;
    width: 100%;
    margin-top: 48px;
  }

  .qrcodeBox .everyqrcodeBox {
    display: none;
  }

  .qrcodeBox .nowpriceBox {
    display: block;
    width: 257px;
    height: 257px;
    margin: 0 auto;
  }

  .qrcodeBox .everyqrcodeBox img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .payText {
    margin-top: 8px;
    width: 100%;
    text-align: center;
  }

  .payText img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .payText span {
    font-family: PingFangSC-Regular, Source Han Sans CN DemiLight;
    font-size: 16px;
    color: #384855;
    line-height: 40px;
  }

  @media screen and (max-width: 1680px) {
    .openvipBox {
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding: 24px 0 0 32px;
    }
    .qrcodeBox {
      display: block;
      width: 100%;
      margin-top: 40px;
    }
    .qrcodeBox .nowpriceBox {
      display: block;
      width: 240px;
      height: 240px;
      margin: 0 auto;
    }
    .openviptime {
      margin-top: 24px;
    }
  }

  @media screen and (max-width: 1600px) {
    .contentBox {
      width: 1000px;
    }
    .openvipBox {
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding: 24px 0 0 32px;
    }
    .qrcodeBox {
      display: block;
      width: 100%;
      margin-top: 32px;
    }
    .qrcodeBox .nowpriceBox {
      display: block;
      width: 180px;
      height: 180px;
      margin: 0 auto;
    }
    .viptitle {
      margin: 16px 0 20px;
    }
    .openviptime {
      margin-top: 16px;
    }
    .openviptime .everyVip {
      float: left;
      margin-right: 16px;
      width: 320px;
      height: 120px;
    }
    .openviptime .everyVip:last-child {
      margin-right: 0;
    }
    .everyVip .vipBox {
      height: 120px;
    }
    .everyVip .vipBox .vipmsgBox .viplogo {
      width: 70px;
      height: 70px;
      top: 24px;
      margin-left: 9px;
    }
    .everyVip .vipBox .vipmsgBox .rightText {
      top: 24px;
      margin-left: 16px;
      font-size: 16px;
    }
    .realprice {
      width: 100px;
      font-size: 40px;
    }
  }

  @media screen and (max-width: 1366px) {
    body {
      padding: 52px 10px 10px;
    }
    .backbox {
      position: absolute;
      top: 10px;
      left: 10px;
      display: block;
      width: 100px;
      height: 32px;
      background: #FFFFFF;
      border: 1px solid #B6CADE;
    }
    .backbox img {
      position: relative;
      top: 8px;
      width: 19px;
      margin-right: 9px;
    }
    .backbox div {
      line-height: 30px;
      font-size: 14px;
      color: #B6CADE;
    }
    .contentBox {
      width: 924px;
    }
    .openvipBox {
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding: 16px 0 0 24px;
    }
    .qrcodeBox {
      display: block;
      width: 100%;
      margin-top: 16px;
    }
    .qrcodeBox .nowpriceBox {
      display: block;
      width: 120px;
      height: 120px;
      margin: 0 auto;
    }
    .viptitle {
      margin: 12px 0 16px;
      padding-left: 15px;
      font-size: 16px;
      color: #384855;
      line-height: 20px;
      position: relative;
    }
    .viptitle::before {
      content: ' ';
      display: block;
      width: 5px;
      height: 20px;
      background: #249EFB;
      border-radius: 4px;
      left: 0;
      position: absolute;
      top: 0px;
    }
    .openviptime {
      margin-top: 12px;
    }
    .openviptime .everyVip {
      float: left;
      margin-right: 12px;
      width: 300px;
      height: 100px;
    }
    .openviptime .everyVip:last-child {
      margin-right: 0;
    }
    .everyVip .vipBox {
      height: 100px;
    }
    .everyVip .vipBox .vipmsgBox .viplogo {
      width: 60px;
      height: 60px;
      top: 19px;
      margin-left: 9px;
    }
    .everyVip .vipBox .vipmsgBox .rightText {
      top: 19px;
      margin-left: 16px;
      font-size: 16px;
    }
    .realprice {
      width: 80px;
      font-size: 40px;
    }
  }

  .paysuccessBox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(56, 72, 85, 0.5);
  }

  .opensuccessBox {
    display: block;
    width: 575px;
    height: 342px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -287px;
    margin-top: -171px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
  }

  .opensuccessBox img {
    display: block;
    width: 124px;
    height: 124px;
    margin: 48px auto 28px;
  }

  .opensuccessBox .tstext {
    display: block;
    font-size: 16px;
    color: #384855;
  }

  .opensuccessBox .timeText {
    font-size: 16px;
    color: #D4E4ED;
    margin-top: 40px;
  }

  .opensuccessBox .timeText span {
    color: #249EFB;
  }
</style>

<body>
<div class="openvipBox">
  <div class="contentBox">
    <div class="openbanner">
      <div class="bannerdiv">
        <div>
          <img src="__STATIC__/img/banner02.png" alt="">
        </div>
      </div>
    </div>
    <div class="viptitle fontfps">开通BOSS直播</div>
    <div class="bossmsg fontfpr">BOSS直播系统，是新营销联盟为中国20家头部装企会员研发的一套《新型内部获客系统》，通过直播互动的形式，旨在帮助联盟成员节省签定时间，降低巨额营销成本。特别是在疫情期间深度解决了会员公司定金难以落地的难题，深受各个头部装企的追捧与青睐。</div>
    <div class="openviptime clearfix">
      <div class="everyVip  pointer">
        <div class="vipBox">
          <div class="vipmsgBox clearfix">
            <img class="pull-left viplogo" src="__STATIC__/img/VIP01.png" alt="">
            <div class="pull-left rightText">
              <div class="color384855 fontfpr">VIP会员一个月</div>
              <div class="clearfix">
                <div class="pull-left color384855 fontfpr">¥<span class="fonts58 realprice">1500</span><span class="fonts18 priceBox colorB6CADE">原价：¥1800</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="everyVip pointer">
        <div class="vipBox">
          <div class="vipmsgBox clearfix vipbg">
            <img class="recommendImg" src="__STATIC__/img/VIPrecommended.png" alt="">
            <img class="pull-left viplogo" src="__STATIC__/img/VIP2.png" alt="">
            <div class="pull-left rightText">
              <div class="colorfff fontfpr">VIP会员六个月</div>
              <div class="clearfix">
                <div class="pull-left colorfff fontfpr">¥<span class="fonts58 realprice">4999</span><span class="fonts18 priceBox colorB6CADE">原价：¥5299</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="everyVip pointer">
        <div class="vipBox">
          <div class="vipmsgBox clearfix">
            <img class="vipnewImg" src="__STATIC__/img/vipnew.png" alt="">
            <img class="pull-left viplogo" src="__STATIC__/img/VIP03.png" alt="">
            <div class="pull-left rightText">
              <div class="color384855 fontfpr">VIP会员一年</div>
              <div class="clearfix">
                <div class="pull-left color384855 fontfpr">¥<span class="fonts58 realprice">9980</span><span class="fonts18 priceBox colorB6CADE">原价：¥10280</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="qrcodeBox">
      <div class="everyqrcodeBox nowpriceBox">
        <img src='{:url("company/moduleOpen/boss_opening_qrcode",["month"=>1])}' id="month">
      </div>
      <div class="everyqrcodeBox">
        <img src='{:url("company/moduleOpen/boss_opening_qrcode",["month"=>3])}' id="monththree">
      </div>
      <div class="everyqrcodeBox">
        <img src='{:url("company/moduleOpen/boss_opening_qrcode",["month"=>12])}' id="year">
      </div>
    </div>
    <div class="payText">
      <div class="inline-block clearfix">
        <img class="pull-left" src="__STATIC__/img/paywechat.png" alt="" />
        <span class="pull-left">使用微信扫码支付</span>
      </div>
    </div>
  </div>
</div>
<!--<div class="paysuccessBox">-->
<!--  <div class="opensuccessBox center">-->
<!--    <img src="__STATIC__/img/sucesspay.png" alt="">-->
<!--    <div class="tstext fontfpr">提示：您购买的BOSS直播支付成功</div>-->
<!--    <div class="fontfpr timeText"><span>3秒</span>后将跳转平台管理</div>-->
<!--  </div>-->
<!--</div>-->
</body>
{/block} {block name="js"}
<script>
  layui.config({
    base: '__LAYUI__' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'jquery'], function() {
    var $ = layui.$,
        jquery = layui.jquery;

    for(var k = 0; k < $('.everyVip').length; k++) {
      $('.everyVip')[k].index = k;
      $($('.everyVip')[k]).on('click', function(e) {
        var index = this.index;
        for(var j = 0; j < $('.everyVip').length; j++) {
          $($('.everyVip')[j]).removeClass('nowvipBox');
          $($('.everyqrcodeBox')[j]).removeClass('nowpriceBox');
        }
        $($('.everyVip')[index]).addClass('nowvipBox');
        $($('.everyqrcodeBox')[index]).addClass('nowpriceBox');
      })
    }

    ////////////////////////////////////////////

    // var wsfuncs = function() {
    //   ws.onopen = function() {
    //     ws.send('{"msg":"initing","data":"' + cmid + '"}');
    //     setInterval(function() {
    //       if(ws.readyState === 1) {
    //         ws.send('{"msg":"beats"}');
    //       }
    //     }, 3000);
    //   };
    //   ws.onmessage = function(data) {
    //     console.log("收到server的消息：" + data.data);
    //     if(data.data !== "暂未登陆" && data.data !== "连接上线") {
    //       var dataObj = JSON.parse(data.data);
    //       //支付成功后跳转至首页
    //       if (dataObj.type === "pay_boss_live") {
    //         layer.msg('成功开通Boss直播', {anim: 0}, function () {
    //           window.location.href='/company/show/welcome';
    //         });
    //       }
    //     }
    //
    //     ws.send('{"msg":"gotinfo"}');
    //   };
    //
    // };
    // var ws = new WebSocket("wss://www.shangxueshe.cn:/wss");
    // setInterval(function() {
    //   if(ws.readyState === 3) {
    //     ws = new WebSocket("ws://www.shangxueshe.cn:/wss");
    //     wsfuncs();
    //   }
    // }, 3000);
    // wsfuncs();

  });
</script>
{/block}