mui 购物车代码

最新推荐文章于 2022-04-04 12:31:44 发布
王者光荣
最新推荐文章于 2022-04-04 12:31:44 发布
阅读量1.1k
点赞数
分类专栏：移动互联网开发移动互联网开发，html5
本文链接：https://blog.csdn.net/hylqqcsd/article/details/90779027
版权
移动互联网开发同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
移动互联网开发，html5
22 篇文章 0 订阅
订阅专栏
<!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,viewport-fit=cover" />
        <link href="../../css/mui.min.css" rel="stylesheet" />
        <link href="https://at.alicdn.com/t/font_1206166_9yn2k6p85p.css" rel="stylesheet" />
        <style>
            .mui-bar{
                background: #2B2C2F;
            }
            .mui-title{
                color: #fff;
            }
            .mui-pull-right,.mui-action-back{
                color: #fff!important;
            }
            .ipx header{
                height: 80px;
            }
            .ipx>header>.mui-action-back{
                top:35px
            }
            .ipx>header>.mui-title{
                top:35px
            }
            .ipx>header>.mui-pull-right{
                top:35px
            }
            .ipx>.mui-content{
                margin-top: 53px;
            }
            
            .cartinfo{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .cartinfo .bookinfo{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                flex: 1;
            }
            .cartinfo .bookinfo .left{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .cartinfo .checkbox{
                width: 30px;
                height: 30px;
            }
            .cartinfo .checkbox input{
                position: initial;
            }
            .cartinfo .bookinfo .price{
                color:#EF4343 ;
            }
            .bookdate{
                padding-left: 10px;
            }
            .bookdate>.cname{
                font-size: 20px;
                font-weight: bold;
                color: #507783;
            }
            .bookdate>.stage{
                color: #507783;
                font-size: 14px;
            }
            .mui-checkbox input[type=checkbox]:before{
                color: #EF4343;
            }
            .mui-checkbox input[type=checkbox]:checked:before{
                color: #EF4343;
            }
            .footer{
                position: fixed;
                bottom: 0;
                right: 0;
                left: 0;
                height: 60px;
                border-top: 1px solid #f0f0f0;
                z-index: 1000;
                background: #fff;
                line-height: 60px;
                display: flex;
                flex-direction: row;
            }
            .footer input{
                top:16px!important
            }
            .footer>.jiesuanbtn{
                width: 100px;
                text-align: center;
                background: #EF4343;
                color: #fff;
            }
            .footer>.left{
                flex: 1;
            }
            .footer>.left>.heji{
                position: absolute;
                right: 110px;
                top: 0;
                display: flex;
                flex-direction: row;
            }
            .allprice{
                color: #EF4343;
            }
            .mui-content{
                margin-bottom: 60px;
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <button id="opt" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right"></button>
            <h1 class="mui-title">购物车</h1>
        </header>
        <div class="mui-content mui-scroll-wrapper content" id="app">
            <div class="mui-scroll">
                <ul id="OA_task_1" class="mui-table-view">
                    <li class="mui-table-view-cell" v-for="item in 10" :key="item">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                        <div class="mui-slider-handle cartinfo">
                            <div class="checkbox mui-checkbox">
                                <input name="checkbox" value="Item 1" type="checkbox" >
                            </div>
                            <div class="bookinfo">
                                <div class="left">
                                    <div class="bookcover">
                                        <img src="../../images/shuxiangzhengxie.png" />
                                    </div>
                                    <div class="bookdate">
                                        <div class="cname">2019年</div>
                                        <div class="stage">12期·总100期</div>
                                    </div>
                                </div>
                                <div class="price">
                                    ￥2.00
                                </div>
                            </div>
                        </div>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="footer">
            <div class="left">
                <div class="mui-input-row mui-checkbox mui-left">
                    <label style="color:#EF4343;font-size: 16px;">全选</label>
                    <input name="checkbox" value="Item 1" type="checkbox" >
                </div>
                <div class="heji">
                    <div class="hejititle">合计：</div>
                    <div class="allprice">￥9.00</div>
                </div>
            </div>
            <div class="jiesuanbtn">结算</div>
        </div>
        <script src="../../js/mui.min.js"></script>
        <script src="../../js/config.js"></script>
        <script src="../../js/jquery-3.4.1.min.js"></script>
        <script src="../../js/vue.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        isLogin:false,
                        artlist:[],
                        artname:''
                    };
                },
                methods: {
                    
                }
            });
            mui(".mui-scroll-wrapper").scroll();
        </script>
    </body>
</html>
王者光荣
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mui 购物车代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-...
复制链接

扫一扫
专栏目录