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