蜂行天下驾驶舱整体布局设计

蜂行天下驾驶舱项目整体布局配置学习目标掌握flex布局的概念掌握vue插槽的概念132知识思政技能能设置自适应大屏能设置导航条培养科学探索精神培养中华美育精神一、大屏自适应设置

本项目为单页面大屏。页面中的各个元素要能够根据页面大小改变而随之改变,也就是要做到pc端分辨率的适配。目前比较常见的解决方案是使用flexible.js和rem结合解决。rem的全称是fontsizeoftherootelement（根元素的字体大小）,

是css3中新增的一个大小单位。rem是相对单位，它相对HTML根元素中font-size值的大小。浏览器的默认font-size是16px，1rem默认等于16px，所有浏览器均已支持rem。一、大屏自适应设置

lib-flexible是阿里团队开发的屏幕自适应解决方案，它可以快速实现一个自适应布局，非常实用。本项目就选用lib-flexible实现大屏的自适应布局。使用方法如下：步骤1：在项目终端下:使用npminstall--savelib-flexible下载插件。步骤2：下载完毕后，在main.js中import“lib-flexible/flexible.js引用插件步骤3：修改“lib-flexible/flexible.js中默认分辨率大小的计算。默认对540分辨率进行计算，把页面分为10份。根据实际情况，份数设置为24份，分辨率最小值为400，最大值为2560。修改部分的代码如下图红框所示。一、大屏自适应设置

修改部分代码如红框所示。function

refreshRem(){

var

width

=

docEl.getBoundingClientRect().width;

//if(width/dpr>540){

//

width=540*dpr;

//}

//varrem=width/10;

//默认值不足以支撑大屏项目，修改最小值为400，

最大值为2560

if(width

/

dpr

<

400){

width

=

400

*

dpr;

}else

if(width/dpr>2560){

width=2560*dpr;

}//默认为10份，本项目设计稿尺寸为1920，将宽度设置成24份，1920/24=80，1rem=80px

var

rem

=

width

/

24;

docEl.style.fontSize

=

rem

+

'px';

flexible.rem

=

win.rem

=

rem;

}一、大屏自适应设置

步骤4：在vscode商店下载cssrem插件，方便px到rem的计算。一、大屏自适应设置

步骤5：设置cssrem插件1rem=80px（插件->单击配置按钮->扩展设置-fontsize里面设置，重启vscode保证生效）一、大屏自适应设置

以上5步骤设置完毕后，在项目下的views

homePage.vue中写入测试代码。然后运行项目。一、大屏自适应设置

当页面大小改变时，页面上的文字大小随之发生改变。说明项目的自适应设置成功。91.75102.917二、大屏导航条设置

大屏导航条是指屏幕标题部分。首先设置背景图片。步骤为：1、把给定素材中的背景图片bj.jpg拷贝到项目的assets文件夹下。2、在App.vue文件中，设置背景图片或者背景颜色。代码如下：<template>

<router-view/></template>

<style

lang="less">body{

background:url(“~@/assets/bj.jpg”);//指定背景图片的url

background-repeat:no-repeat;//图片样式不重复

background-size:100%;

//设置图片大小

position:fixed;/*充满全屏*/

height:100%;//设置div高度

width:100%;//设置div宽度//background-color:#06164A//设置背景颜色}</style>二、大屏导航条设置

注意：App.vue在Vue项目中扮演着至关重要的角色。它是项目的根组件，也被视为项目的“首页”，负责整个应用的布局和内容展示。在App.vue文件包含了项目的全局数据和组件，是所有页面跳转的起点。在这个文件中，可以定义项目的全局样式、组件以及路由等，从而构建整个应用的结构。由于背景图片是整个页面的背景，是全局样式，所以背景图片设置代码要写在App.vue组件中。二、大屏导航条设置

背景图片设置完毕后，开始设置标题样式。在src-->views

新建页面组件，命名为homePage.vue，输入以下代码，设置标题的样式。<template>

<div><header><h1>蜂行天下驾驶舱大屏</h1></header></div></template><script>export

default{}</script>

<style

lang="less">header{

height:80px;

width:100%;

background-color:rgba(0,0,255,0.2);

h1{

font-size:.5rem;

color:#fff;

line-height:80px;

text-align:center;

}}</style>二、大屏导航条设置

注意：src/views：用于存放写好的页面，是页面级组件。二、大屏导航条设置

背景图片和标题设置完毕后，保存运行项目，得到效果图如下，有背景颜色，有标题。大屏上部分设置完毕。下面开始设置主体部分。三、flex布局大屏主体部分用来显示各种图表。在homePage.vue中增加一个<section>，并设置它的样式。<template>

<div><header><h1>蜂行天下驾驶舱大屏</h1></header></div>

<!--大容器-->

<section

class="container"></section>></template><style

lang="less">…//大容器的样式.container{min-width:1200px;//保证项目不是无限延申，不需要设置成rem，不需要改变，在1200-2048不需要改变固定值单位为pxmax-width:2048px;margin:0

auto;//大容器居中border:1px

solid

rgb(255,0,0);margin-left:0;padding:0.125rem

0.125rem

0;//距离顶部导航条上0.125rem，左右0.125remheight:500px;background-color:grey;}

</style>主体部分分为左、中、右三部分。左右放图表，中间放中国地图。三、flex布局左右部分又进一步分为3份，分别放3个图表。三、flex布局左中右三部分比例大概为3：5：3，页面整体布局示意图如下：三、flex布局Flex布局是一种简洁、灵活的布局方式,通过简单的属性设置就可以实现复杂的布局效果。该页面布局选用flex实现。Flex是FlexibleBox的缩写，意为”弹性布局”，是一种强大的CSS布局模式，常用于响应式设计和移动端开发中。任何一个容器都可以指定为Flex布局。在使用Flex布局中，首先要指定一个弹性容器。通过设置display属性来将一个元素设置为弹性容器。.container{display:flex;}三、flex布局将主体部分设置为flex容器，只需设置display属性为flex。然后在其中设置左中右三部分。通过设置flex的值，分割所占份数，完成页面布局。

<!--大容器-->

<section

class="container">

<!--左-->

<section

class="itemLeft"></section>

<!--中-->

<section

class="itemCenter"></section>

<!--右-->

<section

class="itemRight">

</section>

</section>

.container{……display:flex;//设置左右在页面的份数.itemLeft,.itemRight{

flex:3;}.itemCenter{

flex:5;}}左、右占3份中间占5份三、flex布局完成以上设计后，页面布局达到的效果如下。三、flex布局四、vue插槽进一步地分析，大屏左右两部分的6个图表是在相同大小的容器中。同学们思考：有没有必要重复建6次同样的容器？解决方案：容器只建1次，把它做成vue子组件，然后在父组件中调用6次这个子组件。进一步思考：6个图表各不相同，怎么把图表插入到容器中？解决方案：在子组件中预留位置，各种图表插入到预留位置中。这个预留位置，在vue中称为插槽。同学们都见过电脑主板上的插槽，它是事先预留好的位置，后期根据实际需要，可以往插槽里插入不同的卡片。Vue插槽，和电脑插槽一样，也是占位符，是写在子组件中的占位符。当父组件去调用子组件的时候,就可以根据需要在子组件插槽中插入实际需要的内容。四、vue插槽本项目中6个相同大小的容器是用来显示6个不同的图表的。这个容器被提取为一个子组件，在这个子组件中预留好插槽。父组件调用这个子组件时，就可以根据实际需要，向这个插槽中，插入不同的图表。四、vue插槽本项目中homePage.vue是最终要显示的页面，是主组件。在这个主组件中，调用6次含有插槽的子组件，就可以在相同大小的容器中显示出不同内容的图表了。含有插槽的子组件构建方法如下：在项目的components文件夹下新建一个vue文件，命名为itemPage.vue,这个vue文件就是表示图表容器的子组件。因为这个容器中的图表内容各不相同，所以，在这个子组件中，使用slot标签，建立一个插槽，将来在插槽中插入什么图表，就显示什么图表的内容。在新建的vue文件中，输入vue,然后敲回车键，形成vue基本代码结构。在template标签中插入容器div,在其中输入slot标签。<template>

<div

class='item'>

<slot></slot>

</div></template>四、vue插槽接着设置div样式，也就是图表的容器样式。<style

lang="less">.item{

height:410px;

border:1px

solid

blue;

margin:20px;

background-color:rgba(15,140,255,0.85);}</style>经过以上4步，一个含有插槽的子组件(也叫插槽页面)就建立好了。四、vue插槽插槽页面必须要插入到主组件中才能显示。主组件调用插槽页面的步骤为：1、先在homePage.vue的script标签中引用该插槽页面itemPage.vue2、然后指明components对象为该页面别名itemPage。3、最后在homePage.vue的左、右容器中6次调用该组件。<script>import

itemPage

from

"@/components/itemPage.vue"//先引用export

default{components:{itemPag