<template>
	 <!-- 页面容器 -->
	    <view class="page-wraper">
	        <!-- 页面头部 -->
	        <view class="page-header">
	            标题栏
	        </view>
	
	        <!-- 页面主体 -->
	        <view class="page-main">
	            <scroll-view class="page-main-scroll" style="height: 100%" :scroll-y="true" :scroll-with-animation="true">
	                <view class="page-main-list" v-for="(item,index) in list" :key="index">
	                    {{item.cont}}
	                </view>
	            </scroll-view>
	        </view>
	
	        <!-- 页面底部 -->
	        <view class="page-footer">
	            <button type="primary">提交</button>
	        </view>
	    </view>
</template>

<script>
	export default {
	        data() {
	            return {
	                list: [{
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三=="
	                    },
	                ],
	            }
	        }
	    }
</script>

<style lang="scss" scoped>
	
	 page {
	        background-color: #ddd;
	        width: 100%;
	        height: 100%;
	    }
	
    .page-wraper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .page-header {
        background: rgb(8, 117, 94);
        color: #fff;
        line-height: 100rpx;
        /* 不放大不缩小固定100rpx */
        flex: 0 0 100rpx;
    }
    .page-main {
        flex: 1;
        position: relative;
    }
    .page-main-scroll {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .page-main-list {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #e0e0e0;

    }
    .page-footer {
        color: #fff;
        line-height: 100rpx;
        /* 不放大不缩小固定100rpx */
        flex: 0 0 100rpx;
        background-color: #00AAFF;
    }
</style>