《电商管理系统》登录界面布局解析

准备写一些解析前端开发的博客。

以b站上比较火的《电商管理系统》为例，解析前端开发的工作。

据目前的理解，后端的每个请求可以实现项目的所有功能（增删改查等等），而前端辅助这些功能的串联与界面展示。

前端主要的功能有那么几大块：界面布局、数据显示、逻辑完整、权限控制。

后面博客的分析也会从这几个方面来解析前端的工作。

这篇博客主要来解析登录界面的布局

---

布局我们主要用css来控制

我们要实现的布局是这个样子

 为了方便布局，采用一个框套一个框来完成布局。

我们将逐步分析每一个框的设置原理。

---

在App.vue根文件中

<template>
    <div id="app">
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
</template>

所以首先第一层，是id为app的布局设置，这个在global.css中设置。

/* 全局样式表 */
html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 1366px;
}

此处需要注意的是：

html、body标签直接写

如果采用id进行表示，使用css时需要在前加#

高度100%意为占满全屏

min-width中的1366px，指无论电脑分辨率或多或少，做网页的宽度分辨率应该按照这个标准;经试验，以百分制写成100%效果一样。

---

上一个id为app的css样式是指针对所有页面的。

针对登录页面需要新的全局页面指定，命名为login_container，样式如下：

    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }

设置背景颜色，

以及高度占满全屏。

---

下面设置登录框

 命名为login_box

    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

border-radius用来为元素设置圆角

position 属性规定元素的定位类型。

        只需要定位距离左边多少距离，定位右边多少距离，就可以定位框的位置

在这个基础上，采用transform: translate(-50%, -50%)就可以将元素在水平方向上和垂直方向上居中，这个的含义是向左平移自身宽度的50%，向上平移自身高度的50%。

所以

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

这四条语句是将元素定位在父元素中央的一个代码组合。

---

 下面来分析登录框的头像，内部嵌入一个图像，图像是这个：

 需要外部的一个框是一个圆（border-radius），并且散发有阴影（box-shadow），设置padding与图片的距离（padding: 10px;）位置要在顶部凸出来（position：absolute）

图片的的形状是圆的（border-radius: 50%;），设置图片的背景颜色（background-color）

        .avatar_box {
            height: 130px;
            width: 130px;
            border: 3px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }

border: 3px solid #eee;是设置边框线

border-radius: 50%;可将方形框变成圆形框，如果是矩形框则可以变成椭圆形框

box-shadow是为框设置阴影

        box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影(开始时)改变阴影内侧阴影

 （参考自box-shadow属性四个值_css中的boxshadow属性详解_weixin_39606911的博客-CSDN博客

讲的很好）

设置

position: absolute;

left: 50%;

transform: translate(-50%, -50%);

就可以在中央居中，且在顶部凸出来

设置img图片和上述讲过类似。

---

下面是关于表单区域（包含用户名、密码输入框和登录、重置按钮）

        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            // 防止内部元件突出来
            box-sizing: border-box;
        }

设置padding上下0，左右20px

 关于padding内边距，具有四种情况

（1）

padding:10px 5px 15px 20px;

依次为上、右、下、左，顺时针

（2）

padding:10px 5px 15px;

依次为上、左右、下

（3）

padding:10px 5px;

依次为上下、左右

（4）

padding:10px;

所有4个边距

box-sizing: border-box;

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

（参考自CSS中box-sizing: border-box;的作用_笔记-CSDN博客）

---

最后一个部分:
底部按钮的对齐

        .btns /deep/ .el-form-item__content {
            display: flex;
            justify-content: flex-end;
        }

采用flex弹性布局（默认是在一行中显示）

flex-end是指右端对齐

center是指在中央

参考自（Flex 布局教程：语法篇 - 阮一峰的网络日志）

由于按钮组件采用Element-UI，结果不生效

采用/deep/ 定位到elemen-UI所标识的元素

（参考自vue+elementUI修改样式不生效的解决过程_罗德岛刀客特的博客-CSDN博客）

---

总结：虽然是一个简单的登录界面，却可以看到很多页面常采用的css的布局方式，很值得我们总结思考。

欢迎交流、指正！