<!--
 * @FileDescription: some css
 * @Date: 2023-10-09
 * @LastEditTime: 2023-10-09
-->
<script setup lang="ts">
// import { reactive } from 'vue';
</script>
<template>
    <div class="q-pa-md">
        <div class="q-gutter-sm">
            <q-card style="width:400px;height:500px;">
                <q-card-section class="fit">
                    <div class="box1">
                        <div class="box1-inner">
                            <div class="box1-container">
                                <div v-for="i in 30" :key="i">{{ i }}</div>
                            </div>
                            <div class="btn-box">
                                <div class="fit row">
                                    <q-btn class="col-3 btn1" flat color="red-6" label="退出" />
                                    <q-btn class="col-9" flat color="blue" label="提交" />
                                </div>
                            </div>
                        </div>
                    </div>
                </q-card-section>
            </q-card>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box1 {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid $border-color;
    overflow: hidden;

    .box1-inner {
        overflow: auto;
        width: 100%;
        height: 100%;
        padding-bottom: 58px;
    }

    .btn-box {
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: 0;
        overflow: hidden;
        background-color: #fff;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
        /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 0px -3px 11px 0px rgba(0, 0, 0, 0.24);
        // box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);


        .btn1 {
            position: relative;

            &::after {
                position: absolute;
                content: '';
                height: 32px;
                width: 1px;
                background-color: $border-color;
                right: -1px;
                top: 10px;
            }
        }
    }
}
</style>
