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.disabled:focus,.btn-pink.btn-alt[disabled]:focus,.btn-pink.btn-alt.disabled:active,.btn-pink.btn-alt[disabled]:active,.btn-pink.btn-alt.disabled.active,.btn-pink.btn-alt[disabled].active{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{background-color:transparent;color:#f45d9a;}

.btn-lime{color:#ffffff;background-color:#a8db43;border-color:#a8db43;}
.btn-lime:hover,.btn-lime:focus,.btn-lime:active,.btn-lime.active{color:#ffffff;background-color:#96ce27;border-color:#89bd24;}
.btn-lime:active,.btn-lime.active{background-image:none;}
.btn-lime.disabled,.btn-lime[disabled],.btn-lime.disabled:hover,.btn-lime[disabled]:hover,.btn-lime.disabled:focus,.btn-lime[disabled]:focus,.btn-lime.disabled:active,.btn-lime[disabled]:active,.btn-lime.disabled.active,.btn-lime[disabled].active{background-color:#a8db43;border-color:#a8db43;}
.btn-lime.btn-alt{color:#a8db43;background-color:transparent;border-color:#a8db43;border-width:2px;}
.btn-lime.btn-alt:hover,.btn-lime.btn-alt:focus,.btn-lime.btn-alt:active,.btn-lime.btn-alt.active{color:#a8db43;background-color:rgba(0,0,0,0);border-color:#89bd24;border-width:2px;}
.btn-lime.btn-alt:active,.btn-lime.btn-alt.active{background-image:none;}
.btn-lime.btn-alt.disabled,.btn-lime.btn-alt[disabled],.btn-lime.btn-alt.disabled:hover,.btn-lime.btn-alt[disabled]:hover,.btn-lime.btn-alt.disabled:focus,.btn-lime.btn-alt[disabled]:focus,.btn-lime.btn-alt.disabled:active,.btn-lime.btn-alt[disabled]:active,.btn-lime.btn-alt.disabled.active,.btn-lime.btn-alt[disabled].active{background-color:transparent;border-color:#a8db43;border-width:2px;}
.btn-lime.btn-alt:hover,.btn-lime.btn-alt:focus,.btn-lime.btn-alt:active,.btn-lime.btn-alt.active{background-color:transparent;color:#90c526;}

.btn-magenta{color:#ffffff;background-color:#e65097;border-color:#e65097;}
.btn-magenta:hover,.btn-magenta:focus,.btn-magenta:active,.btn-magenta.active{color:#ffffff;background-color:#e12c82;border-color:#da1f77;}
.btn-magenta:active,.btn-magenta.active{background-image:none;}
.btn-magenta.disabled,.btn-magenta[disabled],.btn-magenta.disabled:hover,.btn-magenta[disabled]:hover,.btn-magenta.disabled:focus,.btn-magenta[disabled]:focus,.btn-magenta.disabled:active,.btn-magenta[disabled]:active,.btn-magenta.disabled.active,.btn-magenta[disabled].active{background-color:#e65097;border-color:#e65097;}
.btn-magenta.btn-alt{color:#e65097;background-color:transparent;border-color:#e65097;border-width:2px;}
.btn-magenta.btn-alt:hover,.btn-magenta.btn-alt:focus,.btn-magenta.btn-alt:active,.btn-magenta.btn-alt.active{color:#e65097;background-color:rgba(0,0,0,0);border-color:#da1f77;border-width:2px;}
.btn-magenta.btn-alt:active,.btn-magenta.btn-alt.active{background-image:none;}
.btn-magenta.btn-alt.disabled,.btn-magenta.btn-alt[disabled],.btn-magenta.btn-alt.disabled:hover,.btn-magenta.btn-alt[disabled]:hover,.btn-magenta.btn-alt.disabled:focus,.btn-magenta.btn-alt[disabled]:focus,.btn-magenta.btn-alt.disabled:active,.btn-magenta.btn-alt[disabled]:active,.btn-magenta.btn-alt.disabled.active,.btn-magenta.btn-alt[disabled].active{background-color:transparent;border-color:#e65097;border-width:2px;}
.btn-magenta.btn-alt:hover,.btn-magenta.btn-alt:focus,.btn-magenta.btn-alt:active,.btn-magenta.btn-alt.active{background-color:transparent;color:#e0237c;}

.btn-white{color:#6739e1;background-color:#ffffff;border-color:#ffffff;}
.btn-white:hover,.btn-white:focus,.btn-white:active,.btn-white.active{color:#6739e1;background-color:#ffffff;border-color:#e0e0e0;}
.btn-white:active,.btn-white.active{background-image:none;}
.btn-white.disabled,.btn-white[disabled],.btn-white.disabled:hover,.btn-white[disabled]:hover,.btn-white.disabled:focus,.btn-white[disabled]:focus,.btn-white.disabled:active,.btn-white[disabled]:active,.btn-white.disabled.active,.btn-white[disabled].active{background-color:#ffffff;border-color:#6739e1;}
.btn-white.btn-alt{color:#6739e1;background-color:#ffffff;border-color:#ffffff;border-width:2px;}
.btn-white.btn-alt:hover,.btn-white.btn-alt:focus,.btn-white.btn-alt:active,.btn-white.btn-alt.active{color:#6739e1;background-color:#ffffff;border-color:#e0e0e0;border-width:2px;}
.btn-white.btn-alt:active,.btn-white.btn-alt.active{background-image:none;}
.btn-white.btn-alt.disabled,.btn-white.btn-alt[disabled],.btn-white.btn-alt.disabled:hover,.btn-white.btn-alt[disabled]:hover,.btn-white.btn-alt.disabled:focus,.btn-white.btn-alt[disabled]:focus,.btn-white.btn-alt.disabled:active,.btn-white.btn-alt[disabled]:active,.btn-white.btn-alt.disabled.active,.btn-white.btn-alt[disabled].active{background-color:#ffffff;border-color:#ffffff;border-width:2px;}
.btn-white.btn-alt:hover,.btn-white.btn-alt:focus,.btn-white.btn-alt:active,.btn-white.btn-alt.active{background-color:#ffffff;color:#6739e1;}

.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px;}
.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;}
.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px;}
.btn-xl{padding: 5px 16px;font-size: 12px;line-height: 1.5;border-radius: 3px;width: 2.9rem;margin-top: .2rem;}
.btn-sm.btn-alt{padding:4px 9px;}

.btn-yj{border-radius:15px;}
.btn-sm.btn-alt{padding:4px 9px;}
.btn-yj.btn-alt{border-width:1px;}
body{
    padding: 0;
    margin: 0;
}
        .bui-slide-head {
            text-align: center;
            position: absolute;
            bottom: .2rem;
            right: 0;
            left: 0;
            z-index: 10;
        }
        .bui-slide-head:after {
            clear: both;
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .bui-slide-head ul li {
            display: inline-block;
            width: .14rem;
            height: .14rem;
            line-height: .14rem;
            -webkit-border-radius: .14rem;
            border-radius: .14rem;
            background: rgba(0,0,0,.5);
            text-align: center;
            margin-left: .1rem;
            margin-right: .1rem;
            text-indent: -999999px;
        }
        .bui-slide-head ul .active {
            background: #ff7300;
            color: #ff7300;
        }

        .bui-slide-fullscreen>.bui-slide-main>ul>li img {
            height: auto;
        }
        .bui-btn-jump {
            position: fixed;
            right: .3rem;
            top: .3rem;
            text-align: center;
            border-radius: .26rem;
            background: rgba(0,0,0,0.3);
            z-index: 999;
            line-height: .52rem;
            color: #fff;
            font-size: .26rem;
            padding: 0 .25rem;
        }

        .bui-dialog .bui-dialog-text {
            color: #333;
        }

        .bui-prompt-main .bui-prompt-label {}
        .bui-prompt-main .bui-prompt-text {
            color: #333;
            text-align: center;
            resize: none;
        }
        .bui-dialog .bui-dialog-foot [class*=bui-btn]:first-child {
            color: #333;
        }

        .bui-dialog .bui-dialog-main>.bui-list.bui-list-select {
            padding: 0 .2rem;
        }

        .bui-scroll .bui-scroll-head {
            display: none;
        }

        .bui-levelselect .bui-tab-main>ul>li:nth-child(odd) .bui-list .bui-btn {
            padding-left: .2rem;
        }
        .bui-levelselect .bui-list .bui-btn {
            padding-left: .2rem;
        }

        .bui-upload .bui-btn {
            width: 1.4rem;
            border: 1px #d8d8d8 solid;
            margin-bottom: 0;
            position: relative;
        }
        .bui-upload .bui-btn img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .bui-upload .bui-btn i {
            position: absolute;
            width: .4rem;
            height: .4rem;
            text-align: center;
            line-height: .4rem;
            left: 50%;
            top: 50%;
            margin-left: -.2rem;
            margin-top: -.2rem;
        }

        /* 编辑器样式 */
        .w-e-text::-webkit-scrollbar {
            display: none;
        }
        .w-e-menu {
            z-index: 2 !important;
        }
        .w-e-text-container {
            z-index: 1 !important;
        }

        /* report */

        .report_textarea {
            padding: 0 .2rem;
            overflow: hidden;
        }
        .report_textarea textarea {
            display: block;
            width: 100%;
            height: 3.2rem;
            border: 1px #d8d8d8 solid;
            padding: .05rem;
        }

        main {
            overflow-y: scroll;
        }
        main::-webkit-scrollbar {
            display: none;
        }

        .index-body img {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }

        .public-header {
            width: 100%;
            padding: .2rem;
            overflow: hidden;
            text-align: center;
            line-height: 1;
            position: relative;
            height: .72rem;
            color: #000;
        }
        .public-header h2 {
            position: absolute;
            left: 1.5rem;
            right: 1.5rem;
            font-weight: normal;
            font-size: .3rem;
            text-overflow: ellipsis;
        }
        .public-header .left {
            float: left;
        }
        .public-header .right {
            float: right;
        }
        .public-header a {
            color: #000;
        }
        .public-header button {
            border: none;
            background: none;
            vertical-align: top;
        }

        .public-footer {
            width: 100%;
            border-top: 1px #d8d8d8 solid;
        }
        .public-footer li {
            position: relative;
            display: table-cell;
            width: 1%;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            padding: .1rem 0;
            color: #999;
        }
        .public-footer li.active {
            color: #fe7a6c;
        }
        .public-footer li i {
            display: inline-block;
            font-size: .4rem;
            line-height: 1;
            height: .36rem;
            width: .36rem;
        }
        .public-footer li i.big {
            background: #fff;
            width: .9rem;
            height: .9rem;
            position: absolute;
            font-size: .8rem;
            bottom: 40%;
            left: 50%;
            margin-left: -.45rem;
            border-radius: 50%;
        }
        .public-footer li span {
            display: block;
            font-size: .22rem;
        }

        .public-search {
            padding: .1rem .2rem;
            background: #f8f8f8;
        }
        .public-search .search {
            padding: .1rem 0;
            display: block;
            width: 100%;
            border-radius: 5px;
            font-size: .28rem;
        }
        .public-search .search i {
            display: block;
            color: #999;
            padding: .15rem 0 .15rem .15rem;
            height: .6rem;
        }
        .public-search .search input {
            display: block;
            width: 100%;
    .........完整代码请登录后点击上方下载按钮下载查看