css布局实现手机端移动端个人会员中心积分兑换页面代码-html代码-BFW代码库

代码语言：html

代码描述：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/me/top-bg.jpg) top center no-repeat #ffffff;background-size: 100% auto;}
    img{vertical-align: middle;max-width: 100%;}
    .top-bar{width: 100%;height: .88rem;line-height: .88rem;text-align: center;position: relative;font-size: .32rem;color: #ffffff;}
    .top-bar a.back{width: .5rem;height: .88rem;position: absolute;top: 0;left: .3rem;z-index: 2;font-weight: bold;background: url(//repo.bfw.wiki/bfwrepo/images/app/me/icon-back.png) left center no-repeat;background-repeat: no-repeat;background-size: .17rem auto;}
    .top-bar span{letter-spacing: .02rem;}
    /* 个人信息 */
    .person-info{width: 100%;padding: .2rem .5rem .8rem .5rem;}
    .person-info .head{padding: 0 .45rem;width: 100%;display: flex;align-items: center;padding-top: .35rem;}
    .person-info .head img{width: .84rem;height: .84rem;flex-shrink: 0;margin-right: .22rem;}
    .person-info .head .info {display: flex;flex-direction: column;justify-content: center;}
    .person-info .head .info p{font-size: .24rem;color: #f3d192;font-weight: bold;}
    .person-info .head .info span{font-size: .22rem;color: #f3d192;padding-top: .1rem;}
    .person-info .head button{width: .9rem;height: .45rem;border-radius: .45rem;background: linear-gradient(to right,#e0bf7a,#c79f49);font-size: .22rem;color: #232e35;align-self: flex-end;margin-bottom: .05rem;margin-left: .4rem;}
    .person-info .statistical{width: 100%;display: flex;justify-content: space-between;padding-top: .55rem;padding-left: .5rem;padding-right: .5rem;}
    .person-info .statistical>div{width: 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;}
    .person-info .statistical>div p{font-size: .28rem;color: #f3d192;padding-bottom: .15rem;}
    .person-info .statistical>div span{font-size: .24rem;color: #f3d192;}
    .container{width: 100%;padding: 0 .3rem;}
    /* 特权 */
    .special ul{width: 100%;display: flex;flex-wrap: wrap;padding-top: .1rem;}
    .special ul li{width: 20%;margin-bottom: .35rem;display: flex;flex-direction: column;align-items: center;justify-content: center;}
    .special ul li img{width: .8rem;height: .8rem;}
    .special ul li span{font-size: .24rem;color: #666666;padding-top: .15rem;}
    /* 推荐 */
    .recommend {width: 100%;padding-top: .3rem;}
    .recommend ul{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;}
    .recommend ul li{width: 3.35rem;height: 1.6rem;border-radius: .1rem;padding: .25rem;display: flex;flex-direction: column;margin-bottom: .15rem;}
    .recommend ul li p{font-size: .3rem;color: #333333;}
    .recommend ul li span{font-size: .24rem;color: #999999;padding-top: .15rem;}
    .recommend ul li:nth-child(1){background: url(//repo.bfw.wiki/bfwrepo/images/app/me/icon-jfsc.png) right .3rem center no-repeat #f7f6f2;background-size: .83rem;}
    .recommend ul li:nth-child(2){background: url(//repo.bfw.wiki/bfwrepo/images/app/me/icon-hyhwzx.png) right .3rem center no-repeat #f7f6f2;background-size: .84rem;}
    .recommend ul li:nth-child(3){background: url(//repo.bfw.wiki/bfwrepo/images/app/me/icon-kc.png) right .3rem center no-repeat #f7f6f2;background-size: .66rem;}
    .recommend ul li:nth-child(4){background: url(//repo.bfw.wiki/bfwrepo/images/app/me/icon-rwlq.png) right .3rem center no-repeat #f7f6f2;background-size: .68rem;}
    /* 福利 */
    .welfare{width: 100%;display: flex;align-items: center;padding: .15rem .05rem .3rem .05rem;}
    .welfare span{display: inline-block;flex-shrink: 0;width: .9rem;height: .45rem;border-radius: .45rem;background: #ea5086;font-size: .24rem;color: #ffffff;text-align: center;line-height: .45rem;margin-right: .3rem;}
    .welfare p{font-size: .24rem;color: #333333;}
    .line{width: 100%;height: .2rem;background: #f5f7f9;}
    /* 大家都在换 */
    .turn{width: 100%;padding-top: .4rem;padding-bottom: .4rem;}
    .turn h3{font-size: .36rem;color: #000000;text-align: center;padding-bottom: .15rem;}
    .turn ul li{display: flex;width: 100%;padding: .4rem;border-bottom: .01rem solid #f5f7f9;align-items: center;}
    .turn ul li:last-child{border-bottom: none;}
    .turn ul li .img{width: 1.6rem;text-align: center;flex-shrink: 0;margin-right: .35rem;}
    .turn ul li .img img{width: .9rem;}
    .turn ul li .info{display: flex;flex-direction: column;justify-content: center;}
    .turn ul li .info p{font-size: .29rem;color: #333333;padding-bottom: .1rem;}
    .turn ul li .info span{font-size: .24rem;color: #999999;}
    .turn ul li .info .score{padding-top: .1rem;display: flex;align-items: center;}
    .turn ul li .info .score span{font-size: .4rem;color: #dd1214;margin-right: .1rem;}
    .turn ul li .info .score i{font-size: .24rem;color: #999999;}
    </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>
</head>

<body>
    <div id="app">
        <div class="top-bar">
            <a class="back"></a>
            <span>会员中心</span>
        </div>
        <!-- 个人信息 -->
        <div class="person-info">
            <div class="head">
                <img src="//repo.bfw.wiki/bfwrepo/images/app/me/header.png" alt="">
                <div class="info">
                    <p>V2 金牌会员</p>
                    <span>有效期至2033年5月2日</span>
                </div>
                <button>续费</button>
            </div>
            <div class="statistical">
                <div>
                    <p>累计购物</p>
                    <span>21次</span>
                </div>
                <div>
                    <p>已经节省</p>
                    <span>8989元</span>
                </div>
            </div>.........完整代码请登录后点击上方下载按钮下载查看