居中的带阴影卡片

<template>
    <el-container>
        <el-row class="out-box-style">
            <el-col :style="{ display: `flex`,align:`center`,alignItems:`center`,justifyContent: `center` }">
                <el-row :gutter="12" class="demo-radius" :style="{border: '0px solid red',width:`550px`,height:`400px`}">
                    <el-col :span="24" align="center" :style="{ border: '0px solid red' }">
                        <div class="radius" :style="{ background:`white`,width:`90%`,height:`90%`,border: '0px solid red',borderRadius: `var(--el-border-radius-base)`,boxShadow: `var(--el-box-shadow)`, }">
                            <br>
                            <el-text class="mx-1" :style="{ fontSize:`36px` }">WeConnect</el-text>
                            <!--此处填写卡片内容-->
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-container>
</template>

.out-box-style {
    height: 100vh;
    width: 100vw;
}

.demo-radius .title {
    color: var(--el-text-color-regular);
    font-size: 18px;
    margin: 10px 0;
}

.demo-radius .value {
    color: var(--el-text-color-primary);
    font-size: 16px;
    margin: 10px 0;
}

.demo-radius .radius {
    height: 40px;
    width: 70%;
    border: 1px solid var(--el-border-color);
    border-radius: 0;
    margin-top: 20px;
}

获取elscrollbar的滚动距离

let scrollTop = scrollbar.value.$refs.wrapRef.scrollTop 其中scrollbar是ref属性 const scrollbar = ref(null);