记录一下工作中 常用css

九宫格左侧图片,右侧双行文字,垂直居中

    <div class="box">
      <img src="../../src/assets/logo.png" alt="" />
      <p>
        <acronym>标题</acronym>
        <span>222<abbr>台</abbr></span>
      </p>
      <img src="../../src/assets/logo.png" alt="" />
      <p>
        <acronym>标题</acronym>
        <span>222<abbr>台</abbr></span>
      </p>
      <img src="../../src/assets/logo.png" alt="" />
      <p>
        <acronym>标题</acronym>
        <span>222<abbr>台</abbr></span>
      </p>
      <img src="../../src/assets/logo.png" alt="" />
      <p>
        <acronym>标题</acronym>
        <span>222<abbr>台</abbr></span>
      </p>
    </div>

.box {
  width: 300px;
  img {
    display: inline-block;
    width: 80px;
    vertical-align: middle;
  }
  p {
    display: inline-block;
    vertical-align: middle;
    acronym {
      display: block;
      width: calc(150px - 80px);
      font-size: 20px;
      text-align: center;
    }
    abbr {
      font-size: 10px;
      color: #f00 !important;
    }
    span {
      display: inline-block;
      width: calc(150px - 80px);
      font-size: 14px;
      text-align: center;
    }
  }
}

可视化滚动条

<style>
::-webkit-scrollbar {
  width: 3px;
}
/* 滚动槽 */

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #0a63c6;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
</style>

 高度未知 文字垂直居中
 

display:flex;
flex-direction:column;
justify-content:center;
//首先要创建弹性盒子。
//然后选择垂直轴。
//让元素居中。

当dom被其他元素覆盖 无法出发点击事件事
 

pointer-events: none;

单行溢出&多行溢出

//单行溢出

width:300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;


//多行溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

el-table更替为蓝色可视化风格

// table列表样式
::v-deep .table-info {
  border-color: #003884;
  font-size: 16px;
  font-weight: 400;

  td {
    border-color: #003884;
  }

  td.title {
    color: #6fceff;
    background: #001f5f;
  }

  td.info {
    color: #ffffff;
  }
}

::v-deep .el-table {
  border: none !important;
  background-color: #003884;

  &::before {
    display: none;
  }

  ::v-deep .el-table__fixed::before,
  ::v-deep .el-table__fixed-right::before {
    display: none;
  }

  th {
    background-color: #002f6f;
    color: #6fceff;
    border-bottom: none;
  }

  tr {
    background: rgba(0, 32, 88, 1);
    color: #fff;

    td {
      border: none;
    }

    &.hover-row {
      td {
        background: rgba(0, 32, 88, 1);
        color: #fff;
      }
    }

    &.el-table__row--striped {
      td.el-table__cell {
        background: rgba(0, 47, 111, 0.3);
      }
    }
  }

  ::v-deep .el-table__empty-block {
    background: #001f5f;
    border: none !important;

    ::v-deep .el-table__empty-text {
      color: #ffffff;
    }
  }
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #001f5f;
}
.query-header {
  height: 70px;

  .query-title {
    .icon {
      display: inline-block;
      width: 19px;
      height: 22px;
      background: url("~@/assets/visual/icon_yunxingjl.png");
      background-size: 100% 100%;
      margin-right: 10px;
    }

    span {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .query-form {
    gap: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #9bccf9;

    .show-zero {
      .el-checkbox__inner {
        background: #002f6f;
        border: 1px solid #9bccf9;
      }

      .el-checkbox__label {
        font-size: 14px;
        font-weight: 400;
        color: #9bccf9;
      }
    }

    .select-date {
      .el-input__inner {
        background: #002f6f;
        border: none;
        color: #fff;
      }
    }

    .query-btn {
      width: 60px;
      text-align: center;
      height: 34px;
      line-height: 34px;
      background: #0076e4;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
  }
}

.el-pagination {
  .el-pagination__total {
    color: #007bc1;
  }

  .btn-prev,
  .btn-next {
    color: #007bc1;
    border-color: #007bc1;
  }

  .el-pager {
    li {
      color: #007bc1;
      border-color: #007bc1;

      &.active {
        background: #0084ff;
        color: #fff;
      }
    }
  }

  .el-pagination__jump {
    color: #007ac0;
  }

  .el-input__inner {
    background: #001f4f;
    border-color: #007bc1;
    color: #fff;
  }
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgba(0, 47, 111, 0.3);
}

修改el-table 行高

::v-deep .el-table td, ::v-deep .el-table th, ::v-deep .el-table tr{
  height: 3vh !important;
  line-height: 3vh !important;
  padding: 0.6vh 0 .3vw !important;
  font-size: 0.7vw !important; 
  box-sizing: border-box;
}

vue 部分 查看当前调用那个服务器

// 在vue.config.js li加入logLevel: 'debug'

devServer: {
    host: "0.0.0.0",
    port: port,
    open: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://xxxxxxxxxxxxxxx`,
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          // ["^" + process.env.VUE_APP_BASE_API]: "",
          // ["^" + process.env.VUE_APP_BASE_API]: "/dss-api",
          ["^" + process.env.VUE_APP_BASE_API]: "/stage_api",
          // ["^" + process.env.VUE_APP_BASE_API]: "/prod_api",
        },
      },
    },
    disableHostCheck: true,
  },

el-elment <el-descriptions>描述列表样式
 

<template>
  <div class="pages">
    <el-row :gutter="24">
      <el-col :span="20">
        <el-descriptions border :column="2">
          <el-descriptions-item label="加油站名称">1</el-descriptions-item>
          <el-descriptions-item label="统一社会信用代码"
            >2</el-descriptions-item
          >
          <el-descriptions-item label="联系电话">3</el-descriptions-item>
          <el-descriptions-item label="所属地区">3</el-descriptions-item>
          <el-descriptions-item label="详细地址" :span="2"
            >3</el-descriptions-item
          >
          <el-descriptions-item label="简介" :span="2">3</el-descriptions-item>
          <el-descriptions-item label="门头照片" :span="2"
            >3</el-descriptions-item
          >
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>


<style lang="scss" scoped>
.pages {
  ::v-deep .el-descriptions-item__cell {
    width: 200px;
  }
  ::v-deep .el-descriptions-item__content {
    width: 800px;
  }
  ::v-deep .el-descriptions__body {
    width: 100%;
  }
  ::v-deep .el-descriptions-row th{
    text-align: right;
  }
}
</style>

标题左侧带有椭圆形线条
 

   <p>
      <span class="blue-text-with-marker">申请信息</span>
   </p>
---------------------------------------------------------
  .blue-text-with-marker {
    display: inline-block;
    position: relative;
    font-size: 20px;
    color: #007298;
    font-weight: bold;
  }

  .blue-text-with-marker::before {
    content: "";
    display: inline-block;
    width: 6px; /* 调整椭圆宽度 */
    height: 22px; /* 调整椭圆高度 */
    background-color: #007298;
    border-radius: 8px; /* 创建圆形效果 */
    margin-right: 8px;
    vertical-align: bottom;
  }