el-pagination里的左右箭头改成文字并且修改样式，修改el-descriptions的样式

皮蛋瘦肉-周

于 2024-12-29 18:38:09 发布

阅读量133

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_53501854/article/details/144808146

<el-descriptions :column="4">
    <el-descriptions-item label="身份" :span="2">驾驶员</el-descriptions-item>
    <el-descriptions-item label="姓名">嗯嗯嗯呢呢嗯嗯嗯</el-descriptions-item>
    <el-descriptions-item label="政治面貌">党员</el-descriptions-item>
    <el-descriptions-item label="年龄" :span="1"> 33 </el-descriptions-item>
    <el-descriptions-item label="性别" :span="1">男</el-descriptions-item>
    <el-descriptions-item label="手机号" :span="1">
      18311223344
    </el-descriptions-item>
    <el-descriptions-item label="职业" :span="1"> 老师 </el-descriptions-item>
    <el-descriptions-item label="民族" :span="2"> 汉 </el-descriptions-item>
    <el-descriptions-item label="身份证号">
      xxxxxxxxxxxxxxxxxx
    </el-descriptions-item>
    <el-descriptions-item label="安全带使用情况"> 否 </el-descriptions-item>
    <el-descriptions-item label="头盔使用情况" :span="2">
      否
    </el-descriptions-item>
    <el-descriptions-item label="血液酒精含量">
      200mg/100ml
    </el-descriptions-item>
    <el-descriptions-item label="重点人员"> 否 </el-descriptions-item>
  </el-descriptions>

<el-pagination
    background
    layout="prev, pager, next"
    :total="totalCarPersonnel"
    next-text="下一页"
    prev-text="上一页"
  >
  </el-pagination>

/* 描述列表 */
  .el-descriptions__body {
    background-color: rgba(65, 141, 255, 0.2);
    font-family: Source Han Sans;
    font-size: 12px;
    line-height: 24px;
  }
  .el-descriptions .el-descriptions-item__cell {
    height: 30px;
    padding: 0px 10px;
    line-height: 30px;
    border: 1px solid rgba(65, 141, 255, 0.1);
  }
  .el-descriptions-item__label {
    color: #819cb9;
  }
  .el-descriptions-item__content {
    color: #fff;
  }
  .content_personnel { 
    // 调整第一列的宽度
    .el-descriptions-row > td:nth-child(1) {
      width: 160px !important;
    }
  }
  /* 分页 */
  .el-pagination {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0px;
  }
  .el-pagination::after,
  .el-pagination::before {
    content: none;
  }
  // 页码
  .el-pagination.is-background .el-pager li {
    width: 30px;
    height: 30px;
    background-color: rgba(65, 141, 255, 0.5);
    border: 1px solid rgba(153, 219, 255, 0.5);
    backdrop-filter: blur(10px);
  }
  // 左右按钮
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next {
    display: inline-block;
    width: 69px;
    height: 30px;
    border-radius: 2px;
    background: rgba(65, 141, 255, 0.5);
    border: 1px solid rgba(153, 219, 255, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: inset 0px 3px 30px 0px rgba(153, 219, 255, 0.3);
    color: #819cb9;
  }
}