2019-11-21

界面整体布局（固定头部，底部）

<template>
    <view class="order_details">
        <view class="details_header">
            
        </view>
        <view class="details_main">
    
        </view>
        <view class="details_footer">
            
        </view>
    </view>
</template>
<style lang="scss">
    page,//小程序根布局，类似html,body
    .order_details {
        width: 100%;
        height: 100%;
        position: relative;
        background: white;
    }
    .details_main {
        position: absolute;
        top: 148upx;
        bottom: 98upx;
        width: 100%;
        overflow-y: auto;
        &::-webkit-full-screen{
            width: 0;
        }
    }
    .details_footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 98upx;
        font-size: 12px;
        background-color: #fff;
    }
    .details_header {
        position: fixed;
        top: 0px;
        height: 148upx;
        left: 0px;
        right: 0px;
        background: rgba(208, 92, 94, 1);
        padding-left: 60upx;
        box-sizing: border-box;
    }
</style>