Vue Layout布局
Layout 布局***Row AttributesCol Attributes***
·
Layout 布局
Container 布局容器
CSS 常用样式 水平居中 水平垂直居中 Container布局
Row Attributes
Col Attributes
1、通过 row 和 col组件，并通过 span 属性实现布局 （一行中 col 的 span 加起来不能超过24）
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>2、row 提供 gutter 属性指定列间隙 （一行中 col 的 span 加起来不能超过24）
<el-row :gutter="20"><el-row>3、col 组件中 offset 属性可以实现列偏移
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>4、通过 flex 布局实现分栏对齐， 同时可以使用 justify 属性设置一行居中，靠右或者间隔显示（justify = start, center, end, space-between, space-around ）
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>5、响应式布局。五个响应尺寸：xs、sm、md、lg 和 xl
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>6、样式1
<template>
<div class="app-container">
<div>
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card style="margin-bottom:20px;">
<div slot="header" class="clearfix">
<span>About me</span>
</div>
<div class="user-profile">
<div class="box-center">
<!-- <pan-thumb
:image="user.avatar"
:height="'100px'"
:width="'100px'"
:hoverable="false"
>
<div>Hello</div>角色1 角色2
</pan-thumb> -->
</div>
<div class="box-center">
<div class="user-name text-center">123</div>
<div class="user-role text-center text-muted">角色</div>
</div>
</div>
<div class="user-bio">
<div class="user-education user-bio-section">
<div class="user-bio-section-header">
<svg-icon icon-class="education" />
<span>Education</span>
</div>
<div class="user-bio-section-body">
<div class="text-muted">JS in Computer Science from the University of Technology</div>
</div>
</div>
<div class="user-skills user-bio-section">
<div class="user-bio-section-header">
<svg-icon icon-class="skill" />
<span>Skills</span>
</div>
<div class="user-bio-section-body">
<div class="progress-item">
<span>Vue</span>
<el-progress :percentage="70" />
</div>
<div class="progress-item">
<span>JavaScript</span>
<el-progress :percentage="18" />
</div>
<div class="progress-item">
<span>Css</span>
<el-progress :percentage="12" />
</div>
<div class="progress-item">
<span>ESLint</span>
<el-progress :percentage="100" status="success" />
</div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane label="Activity" name="activity">
<activity />
</el-tab-pane>
<el-tab-pane label="Timeline" name="timeline">
<timeline />
</el-tab-pane>
<el-tab-pane label="Account" name="account">
<account :user="user" />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Profile",
data() {
return {};
},
computed: {},
created() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.box-center {
margin: 0 auto;
display: table;
}
.text-muted {
color: #777;
}
.user-profile {
.user-name {
font-weight: bold;
}
.box-center {
padding-top: 10px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.box-social {
padding-top: 30px;
.el-table {
border-top: 1px solid #dfe6ec;
}
}
.user-follow {
padding-top: 20px;
}
}
.user-bio {
margin-top: 20px;
color: #606266;
span {
padding-left: 4px;
}
.user-bio-section {
font-size: 14px;
padding: 15px 0;
.user-bio-section-header {
border-bottom: 1px solid #dfe6ec;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: bold;
}
}
}
</style>
7、样式2 【el-row，el-col】
<template>
<div class="app-container">
<div class="container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card style="margin-bottom:20px;"></el-card>
</el-col>
<el-col :span="12" :xs="24">
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane label="Activity" name="activity">
<activity />
</el-tab-pane>
<el-tab-pane label="Timeline" name="timeline">
<timeline />
</el-tab-pane>
<el-tab-pane label="Account" name="account">
<account :user="user" />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
<el-col :span="6" :xs="24">
<el-card style="margin-bottom:20px;"></el-card>
</el-col>
</el-row>
<br />
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
<div class="app-contianer" style="padding:10px">
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">New Visits</div>
<count-to
:start-val="0"
:end-val="102400"
:duration="2600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">Messages</div>
<count-to
:start-val="0"
:end-val="81212"
:duration="3000"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">Purchases</div>
<count-to
:start-val="0"
:end-val="9280"
:duration="3200"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">Shoppings</div>
<count-to
:start-val="0"
:end-val="13600"
:duration="3600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
import { mapGetters } from "vuex";
export default {
name: "Profile",
components: {
CountTo
},
data() {
return {};
},
computed: {},
created() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.box-center {
margin: 0 auto;
display: table;
}
.text-muted {
color: #777;
}
.user-profile {
.user-name {
font-weight: bold;
}
.box-center {
padding-top: 10px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.box-social {
padding-top: 30px;
.el-table {
border-top: 1px solid #dfe6ec;
}
}
.user-follow {
padding-top: 20px;
}
}
.user-bio {
margin-top: 20px;
color: #606266;
span {
padding-left: 4px;
}
.user-bio-section {
font-size: 14px;
padding: 15px 0;
.user-bio-section-header {
border-bottom: 1px solid #dfe6ec;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: bold;
}
}
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.bg-purple-dark {
background: #99a9bf;
}
.panel-group {
margin-top: 18px;
.card-panel-col {
margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>
8、样式3 【el-container】
<template>
<div class="app-container">
<div class="container">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Profile",
data() {
return {};
},
computed: {},
created() {},
methods: {},
};
</script>
<style>
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
*
*
*
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)