Visual Studio Code中<el-row>和<el-col>实现图中的样式布局
使用vue代码
4条回答 默认 最新
- sum墨 2022-06-05 19:00关注
<template> <div class="layout"> <el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"> <el-row> <div class="grid-content-min bg-purple"></div> </el-row> <el-row> <div class="grid-content-min bg-purple"></div> </el-row> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row> </div> </template> <script> import { Row, Col } from "element-ui"; export default { name: "Main", components: { ElRow: Row, ElCol: Col, }, data() { return {}; }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .layout{ width: 900px; height: 600px; } .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 200px; } .grid-content-min { border-radius: 4px; min-height: 90px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style>
分割出来的效果如下,图片自己放一下吧
解决 2无用
悬赏问题
- ¥200 关于#matlab#的问题:如图所示的四元二次方程组,想消元消掉A B C D
- ¥20 小红书和抖音看到很多卖爬虫加矩阵工具,可行吗?
- ¥15 如何在envi中通过matlab提取树种纹理特征 并利用纹理特征和光谱指数进行树种分类
- ¥15 圣天诺的。 到期就会有一个60秒的弹窗
- ¥15 圣天诺的。 到期就会有一个60秒的弹窗。
- ¥15 Python脚本打包成 .exe的问题
- ¥15 ipv6路由表显示错误
- ¥15 python将html转pdf
- ¥15 C# PrintDocument 80 热敏打印机 , 顶部空间如何缩小
- ¥15 Win10编码错误导致代码符号出现