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

{extend name="public/layout"} {block name="body"}
<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: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: 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: 0 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;
    text-align: center;
  }

  .openviptime .everyVip {
    margin: 0 auto;
    width: 384px;
    height: 155px;
    border-radius: 10px;
    position: relative;
  }
  .openviptime .everyVip:hover{
    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);
    -webkit-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
  }

  .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(__LAYUI__/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: 32px;
    }
    .qrcodeBox {
      display: block;
      width: 100%;
      margin-top: 40px;
    }
    .qrcodeBox .nowpriceBox {
      display: block;
      width: 240px;
      height: 240px;
      margin: 0 auto;
    }
    .openviptime {
      margin-top: 24px;
    }
  }



  .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>
<link rel="stylesheet" href="__LAYUI__/common.css" media="all">
<body>
<div class="openvipBox">
  <div class="contentBox">
    <div class="viptitle fontfps">免费开通BOSS直播</div>
    <div class="bossmsg fontfpr">BOSS直播系统，是新营销联盟为中国20家头部装企会员研发的一套《新型内部获客系统》，通过直播互动的形式，旨在帮助联盟成员节省签定时间，降低巨额营销成本。特别是在疫情期间深度解决了会员公司定金难以落地的难题，深受各个头部装企的追捧与青睐。</div>
    <div class="openviptime clearfix">
      <div class="everyVip  pointer" style="text-align: center" id="vipfreeopenboss">
        <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">{$freetime}</span>天</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
{/block}
{block name="js"}
<script>
  layui.config({
    base: '__LAYUI__/' //静态资源所在路径
    , urlbase: '/sys'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'jquery','layer'], function() {
    var $ = layui.$,
        layer = layui.layer;

    var freepayurl = '{:url("broad/boss_openning",["root_id"=>$root_id])}';

    $('#vipfreeopenboss').on('click',function () {

      $.get(freepayurl,function (res) {
        layer.msg(res.msg, {anim: 0}, function () {
           window.parent.location.href='/dashboard/index/index';
        });

      });

    });


  });
</script>
{/block}