vue与elementUI电商后台管理系统笔记02

圆形盒子css

.avatar_box {
        width: 130px;
        height: 130px;//设成正方形的盒子
        border: 1px solid #eee;//设置1px边框
        border-radius: 50%;//将正方形变成圆形
        padding: 10px;//设置图片和此盒子的内边距
        box-shadow: 0 0 10px #ddd;//设置阴影宽度10px
        position: absolute;
        left: 50%;
        //将此圆形盒子移到外面长方形盒子坐标轴正右下方
        transform: translate(-50%,-50%);
        //移到坐标原点正中间
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

box-sizing

box-sizing 属性可以被用来调整这些表现:

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

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

input输入框添加icon图标

//输入框前面添加图标（search搜索图标）
<el-input prefix-icon="el-icon-search"></el-input>
//输入框后面添加图标（date日期图标）
<el-input suffix-icon="el-icon-date"></el-input>

icon图标若elementui官网没有的话可以去阿里图标库找

这里老师给了图标素材目录：3.vue-项目实战day1\素材\fonts

使用这个文件查看怎么使用，图标在

这个iconfont.css文件里面

使用步骤如下：

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

使用prefix-icon步骤：

第一步：在main.js中导入css文件

// 导入字体图标
import './assets/fonts/iconfont.css'

第二步：挑选相应图标并获取类名，应用于页面：

  <!-- 用户名 -->
  <el-form-item>
    <el-input prefix-icon="iconfont icon-user"></el-    input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item>
    <el-input prefix-icon="iconfont icon-3702mima">     </el-input>
  </el-form-item>