vue+css布局实现手机端移动端我的积分积分中心积分签到页面代码-html代码-BFW代码库

代码语言：html

代码描述：vue+css布局实现手机端移动端我的积分积分中心积分签到页面代码

下面为部分代码预览，完整代码请点击下载或在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" />
    <style>
        *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
    body{width: 100%;overflow-x: hidden;background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/top-bg.png) top center no-repeat #ffffff;background-size: 100% auto;}
    img{vertical-align: middle;max-width: 100%;}
    .top-bar{width: 100%;height: 1rem;line-height: 1rem;text-align: center;position: relative;font-size: .34rem;color: #fff;}
    .top-bar a{width: .5rem;height: 1rem;position: absolute;top: 0;left: .3rem;z-index: 2;background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-left.png) left center no-repeat;background-size: .23rem auto;}
    .top-bar span{letter-spacing: .02rem;}
    .top-bar i{width: .5rem;height: 1rem;position: absolute;top: 0;right: .3rem;z-index: 2;background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-more.png) right center no-repeat;background-size: .41rem auto;}
    .container{width: 100%;padding: 0 .35rem;}
    /* 个人信息 */
    .container .info{width: 100%;color: #fff;}
    .container .info span{font-size: .48rem;}
    .container .info p{font-size: .24rem;opacity: .9;padding-top: .1rem;}
    .container .info p.title{font-size: .32rem;opacity: 1;padding-bottom: .1rem;padding-top: .5rem;}
    /* 签到面板 */
    .sign-panel{width: 100%;padding: .35rem .3rem;background: #ffffff;border-radius: .25rem;box-shadow:  0 0 .3rem rgba(0,0,0,.2);margin-top: .45rem;}
    .sign-panel p{font-size: .28rem;color: #000;margin-bottom: .2rem;}
    .sign-panel p span{color: #fd7089;padding-left: .05rem;}
    .sign-panel ul{width: 100%;display: flex;justify-content: space-between;align-items: center;}
    .sign-panel ul li{width: .78rem;height: 1.2rem;background: #f8f6f9;border-radius: .05rem;font-size: .22rem;color: #3a3b42;display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;}
    .sign-panel ul li i{width: .5rem;height: .5rem;background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-star.png) center center no-repeat;background-size: 100% auto;}
    .sign-panel ul li span{padding-top: .12rem;transform: scale(.8);}
    .sign-panel ul li.on{background: linear-gradient(#fd6c88,#ff356e);color: #fff;}
    .sign-panel ul li.on i{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-signed.png) center center no-repeat;background-size: 100% auto;}
    .sign-panel ul li:last-child i{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-libao.png) center center no-repeat;background-size: 100% auto;}
    .sign-panel ul li:last-child.on i{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-libao-on.png) center center no-repeat;background-size: 100% auto;}
    /* 规则说明 */
    .rule{width: 100%;font-size: .24rem;color: #9e9fa2;padding-top: .5rem;}
    .rule ul li{padding-bottom: .15rem;}
    /* 攻略 */
    .strategy{width: 100%;margin-top: .6rem;padding-bottom: .5rem;}
    .strategy .title{display: flex;justify-content: space-between;align-items: center;font-size: .32rem;color: #3a3b42;padding-bottom: .2rem;}
    .strategy .title span{font-weight: bold;}
    .strategy .title span.all{font-size: .24rem;color: #3a3b42;opacity: .5;display: flex;align-items: center;font-weight: normal;}
    .strategy .title span.all i{width: .08rem;height: .14rem;background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-sj.png) left center no-repeat;background-size: .08rem;margin-left: .1rem;}
    .strategy ul{width: 100%;display: flex;justify-content: space-between;align-items: center;}
    .strategy ul li{width: 2.15rem;height: 2.15rem;border-radius: .1rem;font-size: .30rem;color: #ffffff;display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .strategy ul li i{width: 100%;height: .75rem;}
    .strategy ul li.firend{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-firend-bg.png) no-repeat;background-size: 100% 100%;}
    .strategy ul li.firend i{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-firend.png) center center no-repeat;background-size: .66rem;}
    .strategy ul li.money{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-money-bg.png) no-repeat;background-size: 100% 100%;}
    .strategy ul li.money i{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-money.png) center center no-repeat;background-size: .64rem;}
    .strategy ul li.store{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-shop-bg.png) no-repeat;background-size: 100% 100%;}
    .strategy ul li.store i{background: url(//repo.bfw.wiki/bfwrepo/images/app/jifen/icon-shop.png) center center no-repeat;background-size: .64rem;}
    .strategy ul li span{padding-top: .25rem;}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/.........完整代码请登录后点击上方下载按钮下载查看