tabs标签页

tabs＞el-radio-group
我使用的是按钮选项，然后需要修改成卡片式的样式
修改后如下：

      <el-radio-group
          @change="changeComponent"
          v-model="tabSelected"
          style="margin-bottom: 30px;"
        >
          <el-radio-button label="all">
            <div class="cardText">全部</div>
          </el-radio-button>
          <el-radio-button label="d">
            <div class="cardText">日</div>
          </el-radio-button>
          <el-radio-button label="w">
            <div class="cardText">周</div>
          </el-radio-button>
          <el-radio-button label="m">
            <div class="cardText">月</div>
          </el-radio-button>
          <el-radio-button label="y">
            <div class="cardText">年</div>
          </el-radio-button>
        </el-radio-group>

scss

::v-deep .el-radio-button {
  padding-right: 15px;
  .el-radio-button__inner {
    border: 1px solid #eeeeee;
    width: 150px;
    height: 90px;
    border-radius: 5px;
    text-align: left;
    box-shadow: 0 5px 10px #f3f3f3 !important;
  }
  &:first-child .el-radio-button__inner {
    border-radius: 5px;
  }
  &:last-child .el-radio-button__inner {
    border-radius: 5px;
  }
 }
 
 //修改radio选中后效果
::v-deep.is-active .el-radio-button__inner {
  color: #409eff;
  background-color: #ecf5ff;
  box-shadow: 0 0 10px #ddeefb !important;
  border: 1px solid #b3d8ff;
}

card卡片式

阴影：

.el-card.is-always-shadow {
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);
}

el-select (点击下拉框下面的框框)

::v-deep .el-popper[x-placement^="bottom"] {
  margin-left: 220px;
}
::v-deep .el-popper[x-placement^="bottom"] .popper__arrow {
  position: relative;
  top: -50%;
  left: -50%;
  margin-left: 280px !important;
  left: 235px !important;
 }

el-divider 分界线

.el-divider--horizontal {
  margin-top: 0;
}

Cascader 级联选择器

当Cascader 级联选择器中，数据过长的时候会出现子级不显示，且样式很丑的问题，如下图

那么只需要增加一个高度就好啦

.el-cascader-panel {
  max-height: 666px;
}

el-input (textarea)

  ::v-deep .el-textarea__inner {
      height: 65px;  //设置高度
      padding: 0 8px; 
      resize: none;   //textarea右下角的拉伸图标去掉
      border: none;   //周边框的样式去掉
    }