bui实现一个移动端手机端开宝箱抽奖送礼活动页面代码-html代码-BFW代码库

代码语言：html
代码描述：bui实现一个移动端手机端开宝箱抽奖送礼活动页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto1.01.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bui.js"></script>

    <script>
        // JavaScript Document
        $(function() {
            var height = $(window).height();
            $("body").height(height);
            if ($("header").height()) {
                height -= $("header").height();
            }
            if ($("footer").height()) {
                height -= $("footer").height();
            }
            $("main").height(height);

        });

    </script>

    <style type="text/css">

@charset "utf-8";
        /* CSS Document */
@import "//repo.bfw.wiki/bfwrepo/css/bui.css";
@charset "utf-8";
*{margin:0;padding:0;list-style:none;font-style:normal;/* -webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;user-select:none;-webkit-touch-callout:none; */}
body{line-height:1.5;background-color:#f8f8f8;font-size:.3rem;color:#333;}

.fl{float:left;}
.fr{float:right;}
/* ------------------ Fonts ---------------------*/
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}
/* ------------------ Margins --------------------*/
.m0{margin:0;}
.m5{margin:.1rem;}
.m10{margin:.2rem;}
.m15{margin:.3rem;}
.m20{margin:.4rem;}
.mt0{margin-top:0;}
.mt5{margin-top:.1rem;}
.mt10{margin-top:.2rem;}
.mt15{margin-top:.3rem;}
.mt20{margin-top:.4rem;}
.mr0{margin-right:0;}
.mr5{margin-right:.1rem;}
.mr10{margin-right:.2rem;}
.mr15{margin-right:.3rem;}
.mr20{margin-right:.4rem;}
.mb0{margin-bottom:0;}
.mb5{margin-bottom:.1rem;}
.mb10{margin-bottom:.2rem;}
.mb15{margin-bottom:.3rem;}
.mb20{margin-bottom:.4rem;}
.ml0{margin-left:0;}
.ml5{margin-left:.1rem;}
.ml10{margin-left:.2rem;}
.ml15{margin-left:.3rem;}
.ml20{margin-left:.4rem;}
/* ------------------ Paddings --------------------*/
.p0{padding:0;}
.p5{padding:.1rem;}
.p10{padding:.2rem;}
.p15{padding:.3rem;}
.p20{padding:.4rem;}
.pt0{padding-top:0;}
.pt5{padding-top:.1rem;}
.pt10{padding-top:.2rem;}
.pt15{padding-top:.3rem;}
.pt20{padding-top:.4rem;}
.pr0{padding-right:0;}
.pr5{padding-right:.1rem;}
.pr10{padding-right:.2rem;}
.pr15{padding-right:.3rem;}
.pr20{padding-right:.4rem;}
.pb0{padding-bottom:0;}
.pb5{padding-bottom:.1rem;}
.pb10{padding-bottom:.2rem;}
.pb15{padding-bottom:.3rem;}
.pb20{padding-bottom:.4rem;}
.pl0{padding-left:0;}
.pl5{padding-left:.1rem;}
.pl10{padding-left:.2rem;}
.pl15{padding-left:.3rem;}
.pl20{padding-left:.4rem;}
/* ------------------ Colors --------------------*/
.color-default{color:#1b75bb;}
.color-red{color:#f00;}
.color-blue{color:#1b75bb;}
.color-green{color:#71d398;}
.color-yellow{color:#ff9d4c;}
.color-orange{color:#f4b162;}
.color-white{color:#ffffff;}
.color-teal{color:#97d3c5;}
.color-dark{color:#79859b;}
.color-pink{color:#f78db8;}
.color-lime{color:#a8db43;}
.color-magenta{color:#e65097;}
.color-purple{color:#6739e1;}
.color-brown{color:#d1b993;}
.color-gray{color:#555555;}
.color-grayspr{color:#f3f5f6;}
/* ------------------ Backgrounds --------------------*/
.bg-default{background-color:#1b75bb;color:#fff;}
.bg-white{background-color:#ffffff;}
.bg-red{color:#ffffff;background-color:#ab3045;}
.bg-blue{color:#ffffff;background-color:#1b75bb;}
.bg-green{color:#ffffff;background-color:#259b24;}
.bg-yellow{color:#ffffff;background-color:#ff9d4c;}
.bg-orange{color:#ffffff;background-color:#ef7e37;}
.bg-purple{color:#ffffff;background-color:#6739e1;}
.bg-pink{color:#ffffff;background-color:#f78db8;}
.bg-lime{color:#ffffff;background-color:#a8db43;}
.bg-magenta{color:#ffffff;background-color:#e65097;}
.bg-teal{color:#ffffff;background-color:#97d3c5;}
.bg-brown{color:#ffffff;background-color:#d1b993;}
.bg-gray{color:#000;background-color:#e4e9eb;}
.bg-dark{color:#ffffff;background-color:#79859b;}
.bg-alipay{color:#fff;background-color:#0ae;}
/* ------------------ Contextual colors --------------------*/
.text-muted{color:#999999;}
.text-primary{color:#1b75bb;}
a.text-primary:hover{color:#4aa3de;}
.text-success{color:#71d398;}
a.text-success:hover{color:#4ac77c;}
.text-info{color:#97d3c5;}
a.text-info:hover{color:#73c4b1;}
.text-warning{color:#f4b162;}
a.text-warning:hover{color:#f19932;}
.text-danger{color:#ab3045;}
a.text-danger:hover{color:#f35454;}
.text-yellow{color:#ff9d4c;}
a.text-yellow:hover{color:#ffbb33;}
.text-orange{color:#f4b162;}
a.text-orange:hover{color:#f19932;}
.text-dark{color:#79859b;}
a.text-dark:hover{color:#606c81;}
.text-brown{color:#d1b993;}
a.text-brown:hover{color:#c2a26f;}
.text-pink{color:#f78db8;}
a.text-pink:hover{color:#f45d9a;}
.text-purple{color:#6739e1;}
a.text-purple:hover{color:#794cf2;}
.text-magenta{color:#e65097;}
a.text-magenta:hover{color:#e0237c;}
.text-lime{color:#a8db43;}
a.text-lime:hover{color:#90c526;}
/* ------------------- Buttons ------------------ */
.btn{display:inline-block;margin-bottom:0;font-weight:bold;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.btn:focus,.btn:active:focus,.btn.active:focus{/* outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px; */outline: none;}
.btn:hover,.btn:focus{color:#768399;text-decoration:none;}
.btn:active,.btn.active{outline:0;background-image:none;box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}
.btn.disabled,.btn[disabled]{cursor:not-allowed;pointer-events:none;opacity:0.65;filter:alpha(opacity=65);box-shadow:none;}
.btn-default{color:#768399;background-color:#ffffff;border-color:#e7e7e2;}
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active{color:#768399;background-color:#ebebeb;border-color:#cbcbc1;}
.btn-default:active,.btn-default.active{background-image:none;}
.btn-default.disabled,.btn-default[disabled],.btn-default.disabled:hover,.btn-default[disabled]:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,.btn-default.disabled:active,.btn-default[disabled]:active,.btn-default.disabled.active,.btn-default[disabled].active{background-color:#ffffff;border-color:#e7e7e2;}

.btn-primary{color:#ffffff;background-color:#1b75bb;border-color:#1b75bb;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{color:#ffffff;background-color:#52a7e0;border-color:#419fdd;}
.btn-primary:active,.btn-primary.active{background-image:none;}
.btn-primary.disabled,.btn-primary[disabled],.btn-primary.disabled:hover,.btn-primary[disabled]:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,.btn-primary.disabled.active,.btn-primary[disabled].active{background-color:#1b75bb;border-color:#1b75bb;}

.btn-success{color:#ffffff;background-color:#71d398;border-color:#71d398;}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{color:#ffffff;background-color:#52c981;border-color:#42c576;}
.btn-success:active,.btn-success.active{background-image:none;}
.btn-success.disabled,.btn-success[disabled],.btn-success.disabled:hover,.btn-success[disabled]:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,.btn-success.disabled:active,.btn-success[disabled]:active,.btn-success.disabled.active,.btn-success[disabled].active{background-color:#71d398;border-color:#71d398;}

.btn-info{color:#ffffff;background-color:#97d3c5;border-color:#97d3c5;}
.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{color:#ffffff;background-color:#7ac7b5;border-color:#6cc1ad;}
.btn-info:active,.btn-info.active{background-image:none;}
.btn-info.disabled,.btn-info[disabled],.btn-info.disabled:hover,.btn-info[disabled]:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,.btn-info.disabled:active,.btn-info[disabled]:active,.btn-info.disabled.active,.btn-info[disabled].active{background-color:#97d3c5;border-color:#97d3c5;}

.btn-warning{color:#ffffff;background-color:#f4b162;border-color:#f4b162;}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{color:#ffffff;background-color:#f19e3c;border-color:#f09529;}
.btn-warning:active,.btn-warning.active{background-image:none;}
.btn-warning.disabled,.btn-warning[disabled],.btn-warning.disabled:hover,.btn-warning[disabled]:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,.btn-warning.disabled.active,.btn-warning[disabled].active{background-color:#f4b162;border-color:#f4b162;}

.btn-danger{color:#ffffff;background-color:#ab3045;border-color:#ab3045;}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active{color:#ffffff;background-color:#f35e5e;border-color:#f24b4b;}
.btn-danger:active,.btn-danger.active{background-image:none;}
.btn-danger.disabled,.btn-danger[disabled],.btn-danger.disabled:hover,.btn-danger[disabled]:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,.btn-danger.disabled.active,.btn-danger[disabled].active{background-color:#ab3045;border-color:#ab3045;}

.btn-link{color:#1b75bb;font-weight:normal;cursor:pointer;border-radius:0;}
.btn-link,.btn-link:active,.btn-link[disabled]{background-color:transparent;box-shadow:none;}
.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent;}
.btn-link:hover,.btn-link:focus{color:#3498da;text-decoration:underline;background-color:transparent;}
.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#999999;text-decoration:none;}

.btn-block{display:block;width:100%;padding-left:0;padding-right:0;}
.btn-block + .btn-block{margin-top:5px;}
.btn-brown{color:#ffffff;background-color:#d1b993;border-color:#d1b993;}
.btn-brown:hover,.btn-brown:focus,.btn-brown:active,.btn-brown.active{color:#ffffff;background-color:#c5a676;border-color:#bf9d68;}
.btn-brown:active,.btn-brown.active{background-image:none;}
.btn-brown.disabled,.btn-brown[disabled],.btn-brown.disabled:hover,.btn-brown[disabled]:hover,.btn-brown.disabled:focus,.btn-brown[disabled]:focus,.btn-brown.disabled:active,.btn-brown[disabled]:active,.btn-brown.disabled.active,.btn-brown[disabled].active{background-color:#d1b993;border-color:#d1b993;}
.btn-brown.btn-alt{color:#d1b993;background-color:transparent;border-color:#d1b993;border-width:2px;}
.btn-brown.btn-alt:hover,.btn-brown.btn-alt:focus,.btn-brown.btn-alt:active,.btn-brown.btn-alt.active{color:#d1b993;background-color:rgba(0,0,0,0);border-color:#bf9d68;border-width:2px;}
.btn-brown.btn-alt:active,.btn-brown.btn-alt.active{background-image:none;}
.btn-brown.btn-alt.disabled,.btn-brown.btn-alt[disabled],.btn-brown.btn-alt.disabled:hover,.btn-brown.btn-alt[disabled]:hover,.btn-brown.btn-alt.disabled:focus,.btn-brown.btn-alt[disabled]:focus,.btn-brown.btn-alt.disabled:active,.btn-brown.btn-alt[disabled]:active,.btn-brown.btn-alt.disabled.active,.btn-brown.btn-alt[disabled].active{background-color:transparent;border-color:#d1b993;border-width:2px;}
.btn-brown.btn-alt:hover,.btn-brown.btn-alt:focus,.btn-brown.btn-alt:active,.btn-brown.btn-alt.active{background-color:transparent;color:#c2a26f;}

.btn-dark{color:#ffffff;background-color:#79859b;border-color:#79859b;}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active,.btn-dark.active{color:#ffffff;background-color:#657187;border-color:#5c677b;}
.btn-dark:active,.btn-dark.active{background-image:none;}
.btn-dark.disabled,.btn-dark[disabled],.btn-dark.disabled:hover,.btn-dark[disabled]:hover,.btn-dark.disabled:focus,.btn-dark[disabled]:focus,.btn-dark.disabled:active,.btn-dark[disabled]:active,.btn-dark.disabled.active,.btn-dark[disabled].active{background-color:#79859b;border-color:#79859b;}
.btn-dark.btn-alt{color:#999;background-color:transparent;border-color:#999;border-width:1px;}
.btn-dark.btn-alt:hover,.btn-dark.btn-alt:focus,.btn-dark.btn-alt:active,.btn-dark.btn-alt.active{color:#79859b;background-color:rgba(0,0,0,0);border-color:#999;border-width:1px;}
.btn-dark.btn-alt:active,.btn-dark.btn-alt.active{background-image:none;}
.btn-dark.btn-alt.disabled,.btn-dark.btn-alt[disabled],.btn-dark.btn-alt.disabled:hover,.btn-dark.btn-alt[disabled]:hover,.btn-dark.btn-alt.disabled:focus,.btn-dark.btn-alt[disabled]:focus,.btn-dark.btn-alt.disabled:active,.btn-dark.btn-alt[disabled]:active,.btn-dark.btn-alt.disabled.active,.btn-dark.btn-alt[disabled].active{background-color:transparent;border-color:#79859b;border-width:2px;}
.btn-dark.btn-alt:hover,.btn-dark.btn-alt:focus,.btn-dark.btn-alt:active,.btn-dark.btn-alt.active{background-color:transparent;color:#999;}

.btn-yellow{color:#ffffff;background-color:#ff9d4c;border-color:#ff9d4c;}
.btn-yellow:hover,.btn-yellow:focus,.btn-yellow:active,.btn-yellow.active{color:#ffffff;}
.btn-yellow:active,.btn-yellow.active{background-image:none;}
.btn-yellow.disabled,.btn-yellow[disabled],.btn-yellow.disabled:hover,.btn-yellow[disabled]:hover,.btn-yellow.disabled:focus,.btn-yellow[disabled]:focus,.btn-yellow.disabled:active,.btn-yellow[disabled]:active,.btn-yellow.disabled.active,.btn-yellow[disabled].active{background-color:#ffc799;border-color:#ffc799;}
.btn-yellow.btn-alt{color:#FE7A6B;background-color:transparent;border-color:#FE7A6B;border-width:2px;}
.btn-yellow.btn-alt:hover,.btn-yellow.btn-alt:focus,.btn-yellow.btn-alt:active,.btn-yellow.btn-alt.active{color:#ff9d4c;background-color:rgba(0,0,0,0);border-color:#FE7A6B;border-width:1px;}
.btn-yellow.btn-alt:active,.btn-yellow.btn-alt.active{background-image:none;}
.btn-yellow.btn-alt.disabled,.btn-yellow.btn-alt[disabled],.btn-yellow.btn-alt.disabled:hover,.btn-yellow.btn-alt[disabled]:hover,.btn-yellow.btn-alt.disabled:focus,.btn-yellow.btn-alt[disabled]:focus,.btn-yellow.btn-alt.disabled:active,.btn-yellow.btn-alt[disabled]:active,.btn-yellow.btn-alt.disabled.active,.btn-yellow.btn-alt[disabled].active{background-color:transparent;border-color:#ffc799;border-width:2px;}
.btn-yellow.btn-alt:hover,.btn-yellow.btn-alt:focus,.btn-yellow.btn-alt:active,.btn-yellow.btn-alt.active{background-color:transparent;color:#FE7A6B;}

.btn-purple{color:#ffffff;background-color:#6739e1;border-color:#6739e1;}
.btn-purple:hover,.btn-purple:focus,.btn-purple:active,.btn-purple.active{color:#ffffff;background-color:#784ceb;border-color:#784ceb;}
.btn-purple:active,.btn-purple.active{background-image:none;}
.btn-purple.disabled,.btn-purple[disabled],.btn-purple.disabled:hover,.btn-purple[disabled]:hover,.btn-purple.disabled:focus,.btn-purple[disabled]:focus,.btn-purple.disabled:active,.btn-purple[disabled]:active,.btn-purple.disabled.active,.btn-purple[disabled].active{background-color:#6739e1;border-color:#6739e1;}
.btn-purple.btn-alt{color:#6739e1;background-color:transparent;border-color:#6739e1;border-width:2px;}
.btn-purple.btn-alt:hover,.btn-purple.btn-alt:focus,.btn-purple.btn-alt:active,.btn-purple.btn-alt.active{color:#784ceb;background-color:rgba(0,0,0,0);border-color:#784ceb;border-width:2px;}
.btn-purple.btn-alt:active,.btn-purple.btn-alt.active{background-image:none;}
.btn-purple.btn-alt.disabled,.btn-purple.btn-alt[disabled],.btn-purple.btn-alt.disabled:hover,.btn-purple.btn-alt[disabled]:hover,.btn-purple.btn-alt.disabled:focus,.btn-purple.btn-alt[disabled]:focus,.btn-purple.btn-alt.disabled:active,.btn-purple.btn-alt[disabled]:active,.btn-purple.btn-alt.disabled.active,.btn-purple.btn-alt[disabled].active{background-color:transparent;border-color:#6739e1;border-width:2px;}
.btn-purple.btn-alt:hover,.btn-purple.btn-alt:focus,.btn-purple.btn-alt:active,.btn-purple.btn-alt.active{background-color:transparent;color:#784ceb;}

.btn-pink{color:#ffffff;background-color:#f78db8;border-color:#f78db8;}
.btn-pink:hover,.btn-pink:focus,.btn-pink:active,.btn-pink.active{color:#ffffff;background-color:#f467a0;border-color:#f35494;}
.btn-pink:active,.btn-pink.active{background-image:none;}
.btn-pink.disabled,.btn-pink[disabled],.btn-pink.disabled:hover,.btn-pink[disabled]:hover,.btn-pink.disabled:focus,.btn-pink[disabled]:focus,.btn-pink.disabled:active,.btn-pink[disabled]:active,.btn-pink.disabled.active,.btn-pink[disabled].active{background-color:#f78db8;border-color:#f78db8;}
.btn-pink.btn-alt{color:#f78db8;background-color:transparent;border-color:#f78db8;border-width:2px;}
.btn-pink.btn-alt:hover,.btn-pink.btn-alt:focus,.btn-pink.btn-alt:active,.btn-pink.btn-alt.active{color:#f78db8;background-color:rgba(0,0,0,0);border-color:#f35494;border-width:2px;}
.btn-pink.btn-alt:active,.btn-pink.btn-alt.active{background-image:none;}
.btn-pink.btn-alt.disabled,.btn-pink.btn-alt[disabled],.btn-pink.btn-alt.disabled:hover,.btn-pink.btn-alt[disabled]:hover,.btn-pink.btn-alt.di.........完整代码请登录后点击上方下载按钮下载查看