<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
const span = 12
</script>

<template>
    <el-row class="wrapper layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import '@/styles/common.scss';
<template>
    <div class="background-as-card"></div>
</template>
`}}
</pre>
            <div class="common-padding">
                <div class="background-as-card">
                    <div v-for="item in [1, 2, 3, 4]" :key="item">
                        {{ item }}
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="span">
            <pre>{{ `import '@/styles/container.scss';\n<template>
    <div class="common-page"></div>
</template>
        `}}
    </pre>
            通用的页面容器，限定了页面宽度为1600px，居中显示
        </el-col>
        <el-col :span="span">
            <pre>{{ `import '@/styles/common.scss';\n<template>
    <div class="mouse-hover"></div>
</template>
        `}}
    </pre>
            <div class="mouse-hover">鼠标悬停</div>
        </el-col>
        <el-col :span="span">
            <pre>{{ `import '@/styles/common.scss';\n<template>
    <div class="text-hover"></div>
</template>
        `}}
    </pre>
            <div class="text-hover">文字悬停</div>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
.wrapper {
    // background-color: rgba(0, 0, 0, 0.068);
    padding: 10px;
}
</style>