element八 首页实现

一、主页框架实现

• 效果

  
  image.png
• home.vue

<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8">
            <el-card shadow="hover" style="height:290px">
                鼠标悬浮时显示
            </el-card>
            <el-card shadow="hover" style="height:522px; margin-top:20px">
                鼠标悬浮时显示
            </el-card>
        </el-col>
        
        <el-col :span="16">
            <div class="num">
                <el-card shadow="hover" v-for="item in 6" :key="item">
                    <i class="icon"></i>
                    <div class="detail">
                        <p class="num1">$ 1234</p>
                        <p class="txt">今日支付订单</p>
                    </div>
                </el-card> 
            </div>
            <el-card shadow="hover">
                <div style="height:280px">

                </div>
            </el-card> 

            <div class="graph">
                <el-card shadow="hover">
                    <div style="height:260px">
                    
                    </div>
                </el-card> 
                <el-card shadow="hover">
                    <div style="height:260px">
                    
                    </div>
                </el-card> 
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        mounted () {
            this.$http.get('/home/getData').then(res =>{
                console.log(res.data)
            })
        },
    }
</script>

<style lang="scss" scoped>
//引入scss文件
@import '~@/assets/scss/home';
</style>

• home.scss

.home{
    .num{
        display: flex;
        //flex换行
        flex-wrap: wrap;
        //两端对齐
        justify-content: space-between;
        .el-card{
            width: 32%;
            margin-bottom: 20px;
        }
    }

    .graph{
        margin-top: 20px;
        display: flex;
        //两端对齐
        justify-content: space-between;
        .el-card{
            width: 48%;
        }
    }
}

二·、主页内容填充

1.左上角

image.png

• main.vue

  
  image.png
  

  引入图片时注意：

  
  image.png

• scss

    .user{
        display: flex;
        //垂直居中
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        //虚线划开
        border-bottom: 1px solid #cccccc;
        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 40px;
        }
        &info{
            .name{
                font-size: 32px;
                margin-bottom: 10px;
            }
            .access{
                color: #999999;
            }
        }
    }
    .login-info{
        p{
            line-height: 28px;
            font-size: 14px;
            color: #999999;
            span{
                color: #666666;
                margin-left: 60px;
            }
        }
    }