扩展任务1：完成页面的布局设计和美化

任务指导

1、参照下图，完成页面的布局和美化设计：

2、实现思路

例如可以通过修改Style样式的方式完成布局调整，具体页面显示样式，需要学生根据自己的喜好和设计自行完成，建议每个学生的页面尽量个性化设计，不要重复。

任务实现

1、下面是一个简单的布局样式的示例，仅供参考：

打开前端的gongguan_web项目，修改src/views/Home/Index.vue文件
首先，在Style中定义样式类，添加 .selectWarning和 .selectSection 两个样式类

然后，在template中引用 .selectWarning和 .selectSection 两个样式类，并调整布局

src/views/Home/Index.vue的完整代码如下：

<template><div class="index"><el-row :gutter="30" v-show="isShow('/flight/airline')"><el-col :span=24 align="center"><AirLine/></el-col></el-row> <el-row :gutter="30"  v-show="isShow('/flight/section')" class="selectSection"><el-col :span="24" align="center"><Section/></el-col></el-row><el-row :gutter="30" v-show="isShow('/flight/delay')"><el-col :span="16" align="center"><Delay/></el-col><el-col :span="8" align="center"><YearWarningChart/></el-col></el-row><el-row :gutter="30" v-show="isShow('/section/warning')" class="selectWarning"><el-col :span="6" align="center"><AirPortCountChart/></el-col><el-col :span="6" :offset="12" align="center"><WarnStatistice/></el-col></el-row><el-row :gutter="30" v-show="isShow('/section/detail')"><el-col :span="16" align="center"><SectorFlightChart/></el-col><el-col :span="8" align="center"><SectorCallChart/></el-col></el-row></div>
</template><script>import AirLine from "../../components/AirLine";import Section from "../../components/Section";import Delay from "../../components/Delay";import WarnStatistice from "../../components/WarnStatistice";import SectorFlightChart from "../../components/echart/SectorFlightChart";import SectorCallChart from "../../components/echart/SectorCallChart";import YearWarningChart from "../../components/echart/YearWarningChart";import AirPortCountChart from "../../components/echart/AirPortCountChart";import {hasPermission} from "../../utils/permission";export default {data() {return {};},mounted() {},components: {AirLine,Section,Delay,WarnStatistice,SectorFlightChart,SectorCallChart,YearWarningChart,AirPortCountChart},methods: {isShow(permission){return hasPermission(permission);   }}};
</script><style scoped>.index {height: 100%;overflow: auto;padding-left: 44px;padding-right: 44px;position: relative;}.index::-webkit-scrollbar {display: none;}.selectWarning{position: absolute;width:100%;height: 100%;top:150px;left:0;}.selectSection{position: absolute;width:100%;height: 100%;top:0;left:0;}.caseClass {background: url('../../assets/images/index-bg.png') no-repeat;background-size: cover;margin-top: 20px;height: 284px;}.el-button {background: transparent;}
</style>