订单页面布局

html

<view class="consignee">
    <view class="consignee-title">
        收件信息
    </view>
    <view class="consignee-address">
        <image class="right-arrow" src="/images/order/sub/you.png" />
        <image class="bottom-stripe" src="/images/order/sub/xiushi.png" />
        <view class="line-one">
            <view class="name">
                动感超人
            </view>
            <view class="tel">
                185****9875    
            </view>
        </view>
        <view class="line-two">
            北京朝阳区四环到五环之间878东区12层
        </view>
    </view>
</view>


<!-- <view class="consignee">
    <view class="consignee-title">
        收件信息
    </view>
    <view class="consignee-address">
        <image class="right-arrow" src="/images/order/sub/you.png" />
        <image class="bottom-stripe" src="/images/order/sub/xiushi.png" />
        <view class="line-one">
            <view class="name">
                请选择收货地址
            </view>
        </view>
        <view class="line-two">
            请选择收货地址
        </view>
    </view>
</view> -->

<view class="product">
    <view class="product-title">
        商品信息
    </view>
    <view class="product-content">
        <!-- <view class="product-item">
            <view class="item-left">
                <image src="/images/index/cake.png" />
            </view>
            <view class="item-right">
                <view class="item-line-one">
                    <view class="title">经典防水</view>
                    <view class="count">x1</view>
                </view>
                <view class="item-line-two">
                    颜色:白色 尺寸:42码
                </view>
                <view class="item-line-three">
                    ￥18.80
                </view>
            </view>

            <view class="border-bottom">
            </view>    
        </view> -->
        <!-- <view class="product-item">
            <view class="item-left">
                <image src="/images/index/cake.png" />
            </view>
            <view class="item-right">
                <view class="item-line-one">
                    <view class="title">经典防水</view>
                    <view class="count">x1</view>
                </view>
                <view class="item-line-two">
                    颜色:白色 尺寸:42码
                </view>
                <view class="item-line-three">
                    ￥18.80
                </view>
            </view>

            <view class="border-bottom">
            </view>
        </view> -->

        <view class="product-item">
            <view class="item-left">
                <image src="/images/index/cake.png" />
            </view>
            <view class="item-right">
                <view class="item-line-one">
                    <view class="title">经典防水</view>
                    <view class="count">x1</view>
                </view>
                <view class="item-line-two">
                    颜色:白色 尺寸:42码
                </view>
                <view class="item-line-three">
                    ￥18.80
                </view>
            </view>

            <view class="border-bottom">
            </view>
        </view>
    </view>

    <view class="summary">
        <view class="item-one">共2件商品</view>
        <view class="item-two">小计:<view class="price">￥580.00</view></view>   
    </view>
</view>

<view class="payment">
    <view class="payment-title">
        付款方式
    </view>
    <view class="payment-container">
        <view class="payment-item">
            <view class="payment-content">
                <image class="payment-icon" src="/images/order/sub/yu.png" />
                <view class="payment-text">余额支付 <view class="balance">(余额￥24.00)</view></view>
                <!-- <image class="check" src="/images/order/sub/weixuan.png" /> -->
                <view class="uncheck"></view>
            </view>
        </view>
        <view class="payment-item">
            <view class="payment-content">
                <image class="payment-icon" src="/images/order/sub/wx.png" />
                <view class="payment-text">微信支付</view>
                <!-- <image class="check" src="/images/order/sub/xuan.png" /> -->
                <view class="check"></view>
            </view>
        </view>
    </view>

    <view class="remark">
        <view class="remark-content">
            <view class="label">备注：</view>
            <input class="remark-input"  placeholder="小主有什么特殊的要告诉我吗？"/>
        </view>
    </view>
</view>
<view class="bottom">
    <view class="bottom-left">
        合计金额：￥580.00
    </view>
    <view class="bottom-right">去付款(3)</view>
</view>

css

.consignee {
    .consignee-title {
        height: 83rpx;
        background-color:#F7F7F7;
        font-size: 28rpx;
        color:#959595;
        padding-left: 20rpx;
        line-height: 83rpx;
    }

    .consignee-address {
        height: 178rpx;
        background-color: #FFFFFF;
        // border:1px solid red;
        position: relative;
        .bottom-stripe {
            position: absolute;
            bottom:0;
            left:0;
             750rpx;
            height: 12rpx;
            // border:1px solid blue;
        }

        .right-arrow {
            position: absolute;
            top:64rpx;
            right:10rpx;
             17rpx;
            height: 30rpx;
            // border:1px solid blue;
        }

        .line-one { /* 命名比较好记 */
            margin-left:49rpx;
            margin-top:36rpx;
            // border:1px solid blue;
            display: inline-flex; /* 宽度更加灵活 */
            height: 32rpx;
            line-height: 32rpx;
            .name {
                font-size: 32rpx;
                color:#313131;
                height: 32rpx;
            }
            .tel {
                margin-left:30rpx;
                font-size: 32rpx;
                color:#313131;
            }
        }

        .line-two {
            margin-left:49rpx;
            margin-right:49rpx;
            margin-top:30rpx;
            font-size: 26rpx;
            height: 26rpx;
            line-height: 26rpx;
            color:#313131;
            // border:1px solid blue;
        }
    }
}

.product {
    .product-title {
        height: 87rpx;
        background-color:#F7F7F7;
        font-size: 28rpx;
        color:#959595;
        padding-left: 20rpx;
        line-height: 87rpx;
    }

    .product-item {
        height: 240rpx;
        position: relative;
        padding-top:30rpx;
        .border-bottom {
            position: absolute;
            bottom: 1rpx;
            height:1rpx;
            background-color: #e2e2e2;
             714rpx;
        }

        display: flex;

        .item-left {
            margin-left:20rpx;
             180rpx;
            height: 180rpx;
            border:1px solid #E2E2E2;
            image {
                 180rpx;
                height: 180rpx;
            }
        }

        .item-right {
            margin-left:20rpx;
             492rpx;
            height: 180rpx;
            // border:1px solid blue;
            .item-line-one {
                display: flex;
                justify-content: space-between;
                color:#313131;
                font-size: 26rpx;
                height: 26rpx;
                line-height: 26rpx;
            }
            .item-line-two {
                font-size: 20rpx;
                color:#AAAAAA;
                height: 20rpx;
                line-height: 20rpx;
                margin-top:30rpx;
            }
            .item-line-three {
                color:#fd274b;
                font-size: 28rpx;
                height: 28rpx;
                line-height: 28rpx;
                margin-top:70rpx;
            }
        }
    }

    .product-item:last-child { /* 最后一行特殊处理，在一个容器里才有效 */
        .border-bottom {
             750rpx;
        }
    }

    .summary {
        height:80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: flex-end;
        .item-two {
            display: inline-flex;
            margin-left:50rpx;
            margin-right:30rpx;
            .price {
                color:#fd274b;
                margin-left:10rpx;
            }
        }
    }
}

.payment {
    margin-bottom: 103rpx;
    .payment-title {
        height: 87rpx;
        background-color:#F7F7F7;
        font-size: 28rpx;
        color:#959595;
        padding-left: 20rpx;
        line-height: 87rpx;
    }
    .payment-item {
        height: 100rpx;
        background-color: #FFFFFF;
        border-bottom:1px solid #E2E2E2;
        overflow: hidden; /* 有时候会导致子类的top上移 */
        .payment-content {
            position: relative;
            // border:1px solid red;
            margin-left:20rpx;
            margin-right:40rpx;
            margin-top:34rpx;
            display: flex;
            color:#313131;
            .payment-icon {
                 40rpx;
                height: 40rpx;
            }
            .payment-text {
                display: inline-flex;
                height: 40rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                margin-left:20rpx;
                .balance {
                    margin-left:15rpx;
                }
            }

            .check {
                position: absolute;
                right: 0rpx;
                top:4rpx;
                // border: 1px solid blue;
                 33rpx;
                height: 33rpx;
                /*小程序只支持base64或者cdn图片*/
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAdCAYAAABSZrcyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OTdDN0RBMkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU5OTdDN0RCMkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTk5N0M3RDgyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTk5N0M3RDkyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42KVTvAAACV0lEQVR42rSXzUtUURjGz4yTm8iITDQJwqCvjdQmF2VaRJEVGfQliO3CP6BF/QMt2rhzmWAZ2aIsF0FfVkRZVBgUitWuD5wKsggqP/q98Cg6Xe89d2buAz8Y5r73fc7MOed9z0m55i7nqfWwH+phIyyHpfAdvsIbeAA3YNgnYcrD/ACchjrnrydwFq6HBaVDntXAPeiLaewU36f3a+KaN8FLaHCFqUF5mnzNWzTqMlcclSlfS5T5DjgPJa64snxdyh9oXg6XoNQlo0XKvyLI/BxUuGRVIZ955uugNQGzSbgC43O+a5XfrHl7AvNsxifgCDzLmer2mQ8pBRRTf+A4XIQO2Jnz/Kj5ZlQ2q4psfFhlthNOBsRUmq+Z14YkmoKJGDvgFxyC29qybSGxtfa3rwwJOKPF8dbD+CfsgztwIcLYVJ2O+FWW4Ddsj+hU1tn2wCPohWMegy1Na44W0gYYgIwG8Cog5hvsgudwFZp914aZf4wIWgv3YbHK44s5z7Jaya+hH/bGWJgfzHzII3C1BlCuATyGT+pa7+BmwHaK0lBac/nZI3iVpqAadsNW/Wu3YFtMY/MbNvNpuOz5UqUGsEaLzFb2ljxqgflNz5TXTu1pH1lXegqjsDkP4yn5zdb2EeiO2R6X5VkBu+U3r6WegrGEW+qYfP7r51k1g78JGU/oKJVd6Bh1V21wMoH22qYFGnqA7IGDOQeAQjSufD2+R2erVpu0rQrRgHZEf9xLw3toVK0ejGk6qPcaVQEDlfFIdE3k3tVsvy+BH/BF9f2hrkhed7V/AgwAfOd9kXML8wkAAAAASUVORK5CYII=');
                background-size: 30rpx 30rpx;
                background-repeat: no-repeat;
            }

            .uncheck {
                position: absolute;
                right: 0rpx;
                top:4rpx;
                // border: 1px solid blue;
                 33rpx;
                height: 33rpx;
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAdCAYAAABSZrcyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OTdDN0Q2MkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU5OTdDN0Q3MkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTk5N0M3RDQyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTk5N0M3RDUyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7JQlDXAAACX0lEQVR42rSXy0tVURSHjzdzEimRiSaBGPSaSE1ykKVFJFlRQVmC2Cz8AxrUPxDYpJlDA80oB/ZwEJReK6IsKgwKo8esB94KshAqX9+Cn6LXc8/Z5957FnxwOXud9dv37LXX2rsgmUx6jrYFDsNu2AZroQR+wQ94Cw/hDoy5BCx08DkC56E2w3iJqIZD0AFP4SLcDgqcCBizYPZZbgUIZ7JavZdUnEjiTfAK6r3crF5xmlzFWzTrYi8/Vqx4LWHie6ELVnj5NYt3RfF9xUvhGhR58dhKxV/nJ34Jyrx4rUw6S8Q3Q2sMYtPQBxOLnrVKb0G8PYZ1NuEzcBKepy11+/yPAjnk0/7BabgKl2Ff2niz6RaqbFbkWfiEymwnnPXxKTddE68JCDQDUxF2wCQch/vasm0BvjX22dcHOFxQcnxwEP6j2j4IPSHCZpWJkH9lAf7CnpBOZZ2tER7DDTjlMNmihNYok22FYXU/m8BrH5+fsB9eQD8cc80NE/8S4rQJHsAqlceXi8ZSyuQ3MAAHIyTmZxMfdXCs0gRKNYEn8FVd6yPc9dlOYTaa0Fp+c3DeoCWohAOwS1/tHtRFFDa9MROfheuOL5VrAhuVZJbZO7OoBaY3O19eO7WnXcy60jN4DzuyEJ6R3kJtfwfdEdvjmiwrYLf0lrTUczAec0sdl86yfp5SM/gfk/CUjlKpTMeoIbXB6Rjaa5sSNPAA2QtH0w4AudiE4vW6Hp2tWm3XtsrFhrUjBqJeGj5Bg2r1SETREb3XoAqY9XXppki/q9l+Xw2/4bvq+yNdkZzuanMCDACnVX8FD8+BfwAAAABJRU5ErkJggg==');
                background-size: 30rpx 30rpx;
                background-repeat: no-repeat;
            }
        }
    }

    .remark {
        height: 100rpx;
        background-color: #f7f7f7;
        overflow: hidden;
        .remark-content {
            height: 100rpx;
            margin-left:20rpx;
            // border:1px solid red;
            font-size: 28rpx;
            line-height: 100rpx; /* 只对文字有效 */
            display: flex;
            .remark-input {
                font-size: 28rpx;
                // border: 1px solid blue;
                 600rpx;
                margin-top: 27rpx;
            }
        }
    }
}

.bottom {
    background:rgba(255,254,252,1);
    border:1px solid rgba(226, 226, 226, 1);
    z-index: 10000; /* 防止input显示在上面 */
    position: fixed;
    bottom: 0;
    height: 103rpx;
    display: flex;
    .bottom-left {
         496rpx;
        font-size: 30rpx;
        line-height: 103rpx;
        padding-left:25rpx;
        color:#fd274b;
        background-color: #FFFFFF;
    }
    .bottom-right {
         253rpx;
        font-size: 32rpx;
        line-height: 103rpx;
        background-color: #004EA0;
        text-align: center;
        color:#FFFFFF;
    }
}