6-3 使用element布局组件实现首页布局

目录：

• 首页布局效果图展示
• 目录结构以及布局说明
• 结合layout 24格布局 和 Card 卡片方式完成首页布局
• scss的语法

一、首页布局效果图

1.1、理想效果图

1.2、本篇博客完成的效果图

二、目录结构以及布局说明

2.1、目录结构

...
-src
    -api
        ...
    -assets
        -css //存放css文件(新增)
            -home.css //单独存放home样式的css
        -imgs
            ...
    -common
        ...
    -mock
        ...
    -store
    ....
    -views
        -Home
            -Home.vue //修改Home.vue
        ....
....

2.2、布局说明

三、结合layout 24格布局 和 Card 卡片方式完成首页布局

3.1、编辑Home.vue

说明：Home.vue是结构 Layout 24格布局 和 Card 卡片 方式完成布局。

<template>
    <div>  <!--与上边距相差 20px的距离-->
      <el-row class="home" :gutter="20">
　　     <!--左边占据 8 -->
        <el-col :span="8">
          <!--上面个人信息-->
          <el-card shadow="hover" style="height: 290px">
            鼠标悬浮时显显示
          </el-card>
          <!--下面信息框-->
          <el-card shadow="hover" style="height: 633px;margin-top: 20px">
            鼠标悬浮时显显示
          </el-card>
        </el-col>
        <!--右边占据16-->
        <el-col :span="16">
          <!--6个显示金额-->
          <div class="num">
            <el-card shadow="hover" v-for="item in 6" :key="item">
              <i class="icon"></i>
              <div class="detail">
                <p class="num">￥ 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>
    </div>
</template>

<script>
    import '../../assets/css/home.css';  //导入存放home的css文件
    export default {
        ....
    }
</script>

2.2、home.css样式编写

.home .num {
  display: flex; /*对于一行会自动弹性布局*/
  flex-wrap: wrap; /*对于6个模块需要换行*/
  justify-content: space-between; /*表示水平两端对齐，justify-content：水平对齐的方式*/
}

.home .num .el-card {
  width: 32%;
  margin-bottom: 20px; /*模块之前有间隔*/
}


.home .graph {
  display: flex; /*对于一行会自动弹性布局*/
  justify-content: space-between; /*表示水平两端对齐，justify-content：水平对齐的方式*/
}

.home .graph .el-card {
  width: 49%;
  margin-top: 20px; /*模块之前有间隔*/
}

注意：

• display: flex; 是弹性布局，会自动按照块级标签的大小填充

• flex-wrap: wrap; 换行，表示均匀的换行，6块，就是上面3块，下面3块。2块表示，上面1块，下面1块。

• justify-content: space-between; 表示水平对齐，space-between表示沿两边对齐

四、scss样式使用

1.安装安装scss

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

2. 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
   test: /\.scss$/,
   loaders: ['style', 'css', 'sass']
}

3.Home.vue中引入scss文件：

<style lang="scss" scoped>
  @import "~@/assets/css/home.scss"; /*~表示相对路径   @表示当前路径*/
</style>

4.scss的语法：

说明：这种语法跟css的用法一样，只不过可以相互嵌套，目录结构清晰，比css好用

.home {
    display:none; //相当于 .home
    .num {  // 相当于 css = .home .num {}
        display: flex;
        flex-warp: wrap;
        .el-card {   //相当于 .home .num .el-card {}
            width: 32%;
        }
    }
    .graph {   //相当于 .home .graph {}
        display: flex;
     }
}

5、如果遇到报错

vue解决sass-loader的版本过高导致的编译错误：

 Module build failed: TypeError: this.getResolve is not a function
        at Object.loader (E:\appEx\PreResearch\orchestrator\topology\node_modules\sass-loader\dist\index.js:52:26)
    
     @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?
{"vue":true,"id":"data-v-0b9912b5","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!
./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/module/customer/topology/topologyList.vue

解决办法：cd到项目文件里面运行下面

>npm uninstall sass-loader（卸载当前版本）

>npm install sass-loader@7.3.1 --save-dev