做项目时常见的css样式集合

是丹丹啊
142 阅读3分钟

总结了一些常用的前端用到的样式设置，以便后期加速开发，此博客将不断完善。

文字

1.超出一定宽度隐藏，并显示...

image.png

image.png

<div class='username'></div>

 .username {
    width: 45px;  //设置div宽度
    overflow: hidden; //超出隐藏
    white-space: nowrap;  //设置不换行保留空格
    text-overflow: ellipsis; //当文本溢出容器时，用省略号来代替文本
    -o-text-overflow: ellipsis; //适用于 Opera 浏览器的 `text-overflow` 属性，它也可以设置文本溢出容器时使用省略号来代替文本
  }

2.如何使用自定义字体

image.png

image.png

  • 在assets中新建font文件夹以存放字体目录，新建font.css文件

image.png

font.css

@font-face {
  font-family: 'lcdD';
   //路径自己根据存放位置及文件名自己设置
  src: url('./LcdD/LcdD.woff') format('woff'), url('./LcdD/LcdD.woff2') format('woff2'); 
  font-weight: normal;
  font-style: normal;
}
  • 在main.js中引入font.css
import @/assets/font/font.ss

//nuxt.js中在nuxt.config.js文件下添加以下配置项
css: [
    '~assets/font/font.css'
  ],
  • 相应元素加上css样式
//div部分
 <div class="dfont">
       2023.05.21
 </div>
      
//css部分
<style lang="scss" scoped>
    .dfont {
      font-family: 'lcdD';
    }
</style>

下拉条

1.自定义下拉条样式

image.png

div部分

<div class="list">
  <div
    class="item-wrap"
    v-for="(item, i) in listData"
    :key="item.name"
  >
    <div class="rank com">
      <span>1111</span>
    </div>
    <div class="name com">
      <span>你好</span>
    </div>
    <div class="count com">
      <span>25</span>
    </div>
  </div>
</div>

css样式部分

.list {
    width: calc(100% - 20px);
    padding: 0 10px;
    height: calc(33vh - 80px);
    overflow-y: auto; //列表超出高度展示下拉条
    color: rgba(255,255,255,0.8);
}

//设置下拉轨道的样式
.list::-webkit-scrollbar-track {  
    background-color: rgba(0, 0, 255, 0.15);
    border-radius: 2px;
}

 //下拉条的样式
.list::-webkit-scrollbar-thumb { 
    background-color: rgba(38, 140, 198, 1);
}

element-ui样式

1. progress进度条自定义样式

image.png

image.png

div部分

<div class="bar">
  <el-progress
    :text-inside="true"
    :stroke-width="10"
    :percentage="(Number(item.value) * 100) / maxData"
    :show-text="false"
    color="#2495f7"
  ></el-progress>
</div>

css部分

.bar {
  flex: 1;
  padding: 0 10px;
 
 //进度条内部样式
  ::v-deep .el-progress-bar__inner {
    border-radius: 0;
    height: 8px !important;
    background-color: #2495f7;
  }
  //进度条外部的
  ::v-deep .el-progress-bar__outer { 
    border-radius: 0;
    height: 8px !important;
    background-color: rgba(36, 149, 247,0.07) !important;
  }
}

2. select下拉框自定义样式

image.png

image.png ```js ``` 
 .con-box-select {
    //设置下拉框的颜色
    ::v-deep .el-input__inner {
      width: 84px;
      height: 24px;
      background-color: rgba(36, 149, 247, 0.15);
      border-radius: 4px;
      border: solid 1px #0080ff;

      color: #fff;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
    }
    ::v-deep .el-input__icon {
      line-height: 25px;
    }
    /* 修改dropdown里面的字体颜色 */
  ::v-deep .el-select-dropdown__item {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }

  /* 修改dropdown里面的背景颜色和边框颜色 */
  ::v-deep .el-select-dropdown {
    background-color: rgba(36, 149, 247, 0.15);
    border: 1px solid rgba(0, 128, 255, 1);
  }
  
  /* 修改选择option后的颜色 */
  // ::v-deep .el-select-dropdown__item.selected {
  //   background-color: rgba(0, 128, 255, 1);
  // }
  /* 修改滑入滑出背景样式 */
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(0, 128, 255, 1);
  }
  /* 修改最上面小三角颜色 */
  ::v-deep .popper__arrow::after {
    border-bottom-color: rgba(10, 21, 46, 1) !important;
  }
}

3.dropDown组件

image.png

image.png

 <el-dropdown
        @command="handleCommand"
        trigger="click"
        @visible-change="handleDropdownVisibleChange"
        class="header-new-drop"
      >
        <!--class="custom-drop-style"是重点 -->
        <el-dropdown-menu slot="dropdown" class="custom-drop-style">  
          <el-dropdown-item
            :command="item.value"
            v-for="(item, index) in selectList"
            :key="index"
            >{{ item.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      
      <!--不能加scoped -->
      <style lang="scss">
        .custom-drop-style {
          // 整体边框及背景颜色
          color: #fff;
          border: none !important;
          background-color: rgba(19, 92, 160, 0.85) !important;

          // 菜单字体颜色
          .el-dropdown-menu__item {
            color: #fff;
          }

          // 悬浮改变背景色
          .el-dropdown-menu__item:not(.is-disabled):hover {
            background-color: rgb(43, 128, 190);
            color: #fff;
          }
        }

        // 小三角的背景色
        .custom-drop-style[x-placement^='bottom'] .popper__arrow {
          border-bottom-color: rgba(19, 92, 160, 0.85) !important;
        }
        .custom-drop-style[x-placement^='bottom'] .popper__arrow::after {
          border-bottom-color: rgba(19, 92, 160, 0.85) !important;
        }
   </style>

4.el-select组件

image.png image.png

  <div class="select">
      <el-select
        v-model="value"
        placeholder="请选择"
        @change="handleChange"
        filterable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    
   
  .select {
     width: 100px;  //设置宽度
     ::v-deep .el-input__inner {
       height: 40px;  //设置高度
       border-radius: 0;  //设置边框圆角
      }

    // 设置高度后下拉箭头和回弹箭头位置错乱，以下代码让其居中显示
     ::v-deep .el-input__suffix {
       display: flex;  
       align-items: center;
     }
  }

5.el-DatePicker时间选择器

image.png

改成

image.png image.png

<template>
  <div class="select-range">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptionS"
          prefix-icon="''"
          :clearable="true"
          align="right"
          @mouseover.native="setTimeIcon1"
          @mouseleave.native="iconVisable1 = 'false'"
        >
        </el-date-picker>
        <i
          :class="[
            'icon-date',
            iconVisable1 == 'false' ? 'data_icon' : 'data_display',
          ]"
        >
          <img
            src="@/assets/img/icon-date.png"
            style="width: 14px; height: 14px; margin-top: 3px"
            alt=""
          />
        </i>
      </div>
    </div>
</template>
<script>

export default {
data(){
return {
 iconVisable1: 'false',
 dateRange: [], // 存储选择的日期范围
  pickerOptionS: {
        disabledDate: (time) => {
          const today = new Date()
          today.setHours(0, 0, 0, 0)

          // 获取选中时间
          let timeOptionRange = this.timeOptionRange
          // 获取时间范围(30天的毫秒数)
          let secondNum = 30 * 24 * 60 * 60 * 1000
          if (timeOptionRange) {
            //如果有选中时间 设置超过选中时间后的30天||超过选中前的30天||大于当前时间 不可选
            return (
              time.getTime() > timeOptionRange.getTime() + secondNum ||
              time.getTime() < timeOptionRange.getTime() - secondNum ||
              time.getTime() >= today.getTime()
            )
          } else {
            //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
            return time.getTime() >= today.getTime()
          }
        },
        onPick: ({ maxDate, minDate }) => {
          // 当选中了第一个日期还没选第二个
          // 只选中一个的时候自动赋值给minDate，当选中第二个后组件自动匹配，将大小日期分别赋值给maxDate、minDate
          if (minDate && !maxDate) {
            this.timeOptionRange = minDate
          }
          // 如果有maxDate属性，表示2个日期都选择了，则重置timeOptionRange
          if (maxDate) {
            this.timeOptionRange = null
          }
        },
      },
}
},
methods:{
    setTimeIcon1() {
      if (this.dateRange?.length == '' || this.dateRange == null) {
        return false
      }

      this.iconVisable1 = 'true'
    },
}
</script>

<style scoped lang='scss'>
.select-range {
  position: relative;

  width: fit-content;

  .data_icon {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 9;
    color: #c0c4cc;
    font-size: 14px;
    transform: translateY(-50%);
  }

  .data_display {
    display: none;
  }

  ::v-deep .el-input__inner {
    height: 24px;
    width: 250px;
  }

  ::v-deep .el-input__icon {
    line-height: 18px;
  }

  ::v-deep .el-date-editor .el-range-separator {
    line-height: 18px;
  }
}
</style>

6.popover改变颜色

初始状态：

image.png

最终效果：

image.png 如果是vue项目，不能在xxx.vue文件中更改css，而是在被main.js引入的scss或css文件中更改：

// 改变popover框颜色
.el-popover {
  background: #000022;
  border-color: #000022;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
.el-popper[x-placement^=top] .popper__arrow::after {
  border-top-color: #000022;
}
.el-popper[x-placement^=top] .popper__arrow {
  border-top-color: #000022;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #000022;
}
.el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: #000022;
}

注意：在实际项目中，记得给el-popover添加新类名，css使用交际选择器，以免作用在其他元素上：

<el-popover
    placement="top"
    width="400"
    trigger="hover"
    popper-class="popover" <!--添加类名-->
/>
// 使用css交集选择器
.popover.el-popover {
  background: #000022;
  border-color: #000022;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
//其他略

隔行换色

<div class="container">
  <div>第一个div</div>
  <div>第二个div</div>
  <div>第三个div</div>
  <div>第四个div</div>
  <div>第五个div</div>
  <div>第六个div</div>
  <div>第七个div</div>
  <div>第八个div</div>
  <div>第九个div</div>
  <div>第十个div</div>
</div>

//奇数行设置样式
.container div:nth-child(odd) {
  background-color: #ccc;
}

//偶数行设置样式
.container div:nth-child(even) {
  background-color: #fff;
}
avatar
文章
阅读
粉丝