CSS样式

因为小编是一个后端开发人员，可能对前端样式不太精通，只是在工作中进行记录，如果有样式写的不对，请大家多多指导；

css样式问题

1、!important 的优先级没有覆盖掉ElementUI的基础样式

利用【::v-deep】进行样式渲染

// 现在已经提示过期了新的方法
::v-deep .el-dialog__header {
  text-align: left !important;
}

// 新方法
:v-deep(.el-dialog__header ){
  text-align: left !important;
}

2、(display:flex)样式上下左右居中

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

3、设置热门样式

介绍：通过设计 li 标签 左上方的具有推荐标签的效果
效果图

html demo

<div class="ihot">
  <p>推荐</p>
</div>

css demo

.ihot {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 48px solid #d6ba89;
        border-right: 48px solid transparent;
        p {
          position: absolute;
          top: -44px;
          left: -3px;
          font-size: 12px;
          font-weight: 300;
          letter-spacing: 2px;
          width: 30px;
          padding: 0 5px;
          border-radius: 3px;
          color: #ffffff;
          margin: 4px 8px 0 0;
          transform: rotate(-45deg);
        }
      }

box-sizing:border-box