列表样式

ZZJ

2022-07-15 b200eed05d5bff2e12a45331bdc062f4b00bebf7

 src/App.vue

@@ -8,7 +8,7 @@
export default {};
</script>

<style>
<style lang="scss" >
@import "./assets/css/common.css";

* {
@@ -56,4 +56,152 @@
  border-bottom: none;
  display: block;
}

.el-input {
  .el-input__inner {
    width: 100%;
    color: #3d3d3d;
    border-radius: 0;
    border-color: #c0c5cc;
    &::-webkit-input-placeholder {
      color: #999999;
    }

    &:focus {
      border-color: #0065ff;
    }
  }
}

.el-select {
  width: 100%;

  input.el-input__inner:focus {
    border-color: #0065ff;
  }

  .el-input.is-focus input.el-input__inner {
    border-color: #0065ff;
  }

  input {
    border-radius: 0;
    height: 32px;
  }
}

.el-textarea {
  textarea {
    border: 1px solid #c0c5cc;
    border-radius: 0;

    &:focus {
      border-color: #0065ff;
    }
  }
}

.h32 {
  height: 32px;
  line-height: 32px;

  input {
    height: 32px;
  }

  .el-icon-arrow-up {
    line-height: 32px;
  }

  .el-icon-arrow-up {
    height: 32px;
  }
}

.scroll {
  overflow-y: auto;
  /*滚动条宽 长,滚动条整体部分，其中的属性有width,height,background,border等。*/

  &::-webkit-scrollbar {
    width: 6px;
  }

  /*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

  &::-webkit-scrollbar-track {
    display: none;
  }

  /* 滑块颜色 */

  &::-webkit-scrollbar-thumb {
    background-color: #e9ebee;

    border-radius: 3px;
  }

  /*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

  &::-webkit-scrollbar-button {
    display: none;
  }

  /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

  &::-webkit-scrollbar-corner {
    background-color: black;
  }
}

.limitRow2 {
  word-wrap: break-word;
  // 只要超过宽度就换行，不论中文还是英文
  word-break: break-all;
  // 让文本只能展示两行
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gutter {
  background-color: rgb(233, 235, 238);
  padding: 1px;

  &::after {
    display: none;
  }

  td.index .cell {
    padding-left: 16px;
    padding-right: 4px;
  }

  .has-gutter tr th {
    background: #f0f3f5;
    font-size: 16px;
    color: #3d3d3d;
    font-weight: 700;
  }

  td .cell {
    color: #3d3d3d;
  }

  tr:hover > td.el-table__cell {
    background-color: #fff;
  }

  .el-table__row--striped .el-table__cell {
    background-color: #f0f5fa !important;
  }
  tr:hover > td.el-table__cell {
    background-color: #fff;
  }

  .el-table__row--striped .el-table__cell {
    background-color: #f0f5fa !important;
  }
}
</style>