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: #f8f8f8;}
    img{vertical-align: middle;max-width: 100%;}
    .top-bar{width: 100%;height: .88rem;line-height: .88rem;text-align: center;position: relative;font-size: .38rem;color: #333333;}
    .top-bar a{width: .5rem;height: .88rem;position: absolute;top: 0;left: .3rem;background: url(//repo.bfw.wiki/bfwrepo/image/60b95f5dd4bec.png) left center no-repeat;background-size: .23rem auto;z-index: 2;}
    .top-bar i{width: .5rem;height: .88rem;position: absolute;top: 0;right: .3rem;background: url(//repo.bfw.wiki/bfwrepo/image/6122ed8e7e62b.png) right center no-repeat;background-size: .41rem auto;z-index: 2;}
    .container{width: 100%;padding: 0 .25rem 1rem .25rem;}
    /* 月份 */
    .month{width: 100%;height: auto;overflow: hidden;padding: .4rem 0;}
    .month ul{width: 100%;display: flex;justify-content: center;align-items: center;}
    .month ul li{font-size: .28rem;color: #999999;text-align: center;width: 1.1rem;margin: 0 .2rem;}
    .month ul li.on{font-size: .28rem;color: #ff7100;padding: .1rem;background: #fff1e5;border-radius: .25rem;}
    /* 信息总览 */
    .total-info{width: 100%;height: auto;overflow: hidden;}
    .total-info ul{width: 100%;display: flex;justify-content: center;align-items: center;height: 1.55rem;background: linear-gradient(to right,#fd738b,#ff2c6a);border-radius: .2rem;}
    .total-info ul li{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;}
    .total-info ul li::after{content: "";display: block;width: .01rem;height: .35rem;background: #fd849d;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
    .total-info ul li p{font-size: .38rem;color: #ffffff;}
    .total-info ul li p i{font-size: .28rem;margin-right: .02rem;}
    .total-info ul li p span{margin-left: .05rem;color: #ffffff;}
    .total-info ul li span{font-size: .28rem;color: #ffc9d7;margin-top: .1rem;}
    /* 消费支出 */
    .chart{width: 100%;height: auto;overflow: hidden;background: #ffffff;padding: .35rem .3rem;margin-top: .4rem;border-radius: .2rem;}
    .chart .title{width: 100%;height: auto;overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
    .chart .title h3{font-size: .34rem;color: #333333;font-weight: bold;}
    .chart .title .type{display: flex;align-items: center;}
    .chart .title .type span{width: .8rem;height: .45rem;line-height: .45rem;text-align: center;font-size: .2rem;color: #bcbcbc;background: #f7f7f7;}
    .chart .title .type span.on{background: #747d99;color: #ffffff;}
    .chart .title .type span:first-child{border-radius: .1rem 0 0 .1rem;}
    .chart .title .type span:last-child{border-radius: 0 .1rem .1rem 0;}
    .chart #chart{width: 100%;height: 3.8rem;}
    /* 收支明细 */
    .detail{width: 100%;height: auto;overflow: hidden;background: #ffffff;padding: .35rem .3rem;margin-top: .4rem;border-radius: .2rem;}
    .detail .cate{width: 100%;height: auto;overflow: hidden;display: flex;justify-content: space-between;align-items: center;padding: 0 .45rem;margin-bottom: .2rem;}
    .detail .cate span{font-size: .28rem;color: #999999;height: .6rem;line-height: .6rem;text-align: center;width: 1.82rem;border-radius: .6rem;}
    .detail .cate span.on{background: #fff1e5;color: #ff7100;}
    .detail ul{width: 100%;display: flex;flex-direction: column;padding: 0 .1rem;}
    .detail ul li{width: 100%;height: 1.1rem;display: flex;align-items: center;justify-content: space-between;position: relative;border-bottom: .01rem solid #f5f5f5;}
    .detail ul li:last-child{border-bottom: 0;}
    .detail ul li span{font-size: .3rem;font-weight: bold;color: #5b6275;}
    .detail ul li .title{display: flex;align-items: center;}
    .detail ul li .title i{width: .52rem;height: .52rem;margin-right: .2rem;}
    .detail ul li .title i.edu{background: url(//repo.bfw.wiki/bfwrepo/image/6122ed5a6ffca.png) center center no-repeat;background-size: .52rem auto;}
    .detail ul li .title i.money{background: url(//repo.bfw.wiki/bfwrepo/image/6122ed3b43171.png) center center no-repeat;background-size: .52rem auto;}
    .detail ul li .title span{font-size: .3rem;color: #5b6275;font-weight: normal;}
    /* 右侧浮窗 */
    .fixed-right{position: fixed;right: .4rem;bottom: 3.8rem;width: 1.25rem;height: 1.25rem;border-radius: 100%;background: linear-gradient(to bottom,#fe5e81,#fe4475);display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: .2rem;color: #ffffff;box-shadow: 0 0 .3rem rgba(255,83,124,.3);z-index: 999;}
    .fixed-right i{width: .52rem;height: .53rem;background: url(//repo.bfw.wiki/bfwrepo/image/6122ed012e5d7.png) center center no-repeat;background-size: .52rem auto;}
    .fixed-right span{margin-top: .05rem;transform: scale(.95);}
    </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/echarts.js"></script>
</head>

<body>
    <div id="app">
        <div class="top-bar">
            <a href="javascript:;"></a>
            <span>收支明细</span>
            <i></i>
        </div>
        <!-- 主体 -->
        <div class="container">
            <!-- 月份 -->
            <div class="month">
                <ul>
                    <li :class="nav==1?'on':''" @click="changeNav(1)">6月</li>
                    <li :class="nav==2?'on':''" @click="changeNav(2)">本月</li>
                    <li :class="nav==3?'on':''" @click="changeNav(3)">8月</li>
                    <li :class="nav==4?'on':''" @click="changeNav(4)">9月</li>
                    <li :class="nav==5?'on':''" @click="changeNav(5)">10月</li>
                </ul>
            </div>
            <!-- 信息总览 -->
            <div class="total-info">
                <ul>
                    <li>
                        <p><i>¥</i>1550</p>
                        <span>收入</span>
                    </li>
                    <li>
                        <p><i>¥</i>1080</p>
                        <span>支出</span>
                    </li>
                    <li>
                        <p><i>¥</i>350<span>/天</span></p>
                        <span>日均支出</span>
                    </li>
                </ul>
            </div>
            <!-- 消费支出 -->
            <div class="chart">
                <div class="title">
                    <h3>{{typeTitle}}</h3>
                    <div class="type">
                        <span :class="type==1?'on':''" @click="changeType(1)">收入</span>
                        <span :class="type==2?'on':''" @click="changeType(2)">支出</span>
                    </div>
                </div>
                <div id="chart">

                </div>
            </div>
            <!-- 明细 -->
            <div class="detail">
                <div class="cate">
                    <span :class="cate==1?'on':''" @click="changeCate(1)">理财明细</span>
                    <span :class="cate==2?'on':''" @click="changeCate(2)">收支明细</span>
                </div>
                <ul v-if="cate==1">
                    <li>
                        <div class="title">
                            <i class="edu"></i>
                            <span>教育基金</span>
                        </div>
                        <span>-180</span>
                    </li>
                    <li>
                        <div class="title">
                            <i class="money"></i>
                            <span>稳定收益债券</span>
                        </div>
                        <span>+14100</span>
       .........完整代码请登录后点击上方下载按钮下载查看