首页 > 其他分享 >css 样式初始化+element-ui样式优化+常见样式优化

css 样式初始化+element-ui样式优化+常见样式优化

时间：2023-02-09 13:58:08浏览次数：42  
标签：el -# 样式 element padding color important height 优化 

@import url('https://at.alicdn.com/t/font_2595646_76zzktmge22.css');//引入自己某个项目的iconfont图标库

body, html {
  margin: 0;
  padding: 0;
  background: rgba(244, 244, 244, 0.98) !important;
  min-width: 1400px;
  width: 100%;
  height: 100%;
  font-size: 16px;

  #app {
    width: 100%;
    height: 100%;
  }
}

/* 改变主题色变量 */
$--color-white: #ffffff !default;
$--color-black: #333333 !default;
$--color-primary: #3377FF !default;
$--color-success: #70C919 !default;
$--color-warning: #F8AB66 !default;
$--color-danger: #F56C6C !default;
$--color-info: #999999 !default;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

.diy-tabs {
  display: flex;

  .item {
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    color: #3377FF;
    position: relative;

    &:before {
      position: absolute;
      content: '';
      width: 28px;
      height: 4px;
      background-color: #3377FF;
      border-radius: 0;
      bottom: 0;
      z-index: 2;
    }
  }
}

.diy-title {
  text-indent: 12px;
  position: relative;

  &:after {
    content: ' ';
    position: absolute;
    height: 100%;
    width: 4px;
    bottom: 0;
    left: 0;
    background-color: #2A5EFF;
    border-radius: 1px;
  }
}

/*
  逐步优化element样式
 */

.diy-top-form {
  .el-form-item {
    margin-bottom: 8px;
  }

  .el-form-item__label {
    padding: 0;
  }
}

.input-number-text-left {
  .el-input__inner {
    text-align: left !important;
  }
}

.no-padding-popover {
  padding: 0 !important;
}

.no-header-dialog {
  .el-dialog__header {
    display: none !important;
  }
}

.no-padding-dialog {
  .el-dialog__body {
    padding: 0 !important;
  }
}

.el-dialog {
  .el-dialog__header {
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: center;

    .el-dialog__title {
      position: relative;
      top: -5px;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 20px;
    box-shadow: 0px -2px 18px 0px rgba(221, 221, 221, 0.5);
  }
}

.el-table {
  thead {
    color: #333 !important;

    tr, th {
      background-color: #F2F6FF !important;
    }
  }

  tbody {
    td {
      .el-button {
        &.el-button--text {
          padding: 0;
        }
      }
    }
  }
}

.diy-drawer-content {
  padding: 20px;
  height: calc(100vh - 66px - 86px);

  &::-webkit-scrollbar { // 滚动条整体样式 高宽分别对应横竖滚动条的尺寸
    width: 6px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { // 滚动条里面小方块
    border-radius: 10px;
    background: #ccc;
  }

  &::-webkit-scrollbar-track { // 滚动条里面轨道
    border-radius: 10px;
  }

  overflow: auto;
}

.diy-drawer-footer {
  height: 86px;
  box-shadow: 0 0 14px 0 rgba(221, 221, 221, 0.5);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30px;
}

.el-drawer__wrapper {
  .el-drawer__header {
    padding: 20px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EBEBEB;

    span {
      text-indent: 12px;
      position: relative;

      &:focus {
        outline: none !important;
      }

      &:after {
        content: ' ';
        position: absolute;
        height: 100%;
        width: 4px;
        bottom: 0;
        left: 0;
        background-color: #3377FF;
        border-radius: 4px;
      }
    }
  }

  .el-drawer__body {
    &::-webkit-scrollbar { // 滚动条整体样式 高宽分别对应横竖滚动条的尺寸
      width: 6px;
      height: 1px;
    }

    &::-webkit-scrollbar-thumb { // 滚动条里面小方块
      border-radius: 10px;
      background: #ccc;
    }

    &::-webkit-scrollbar-track { // 滚动条里面轨道
      border-radius: 10px;
    }

    height: calc(100vh - 58px);
    overflow: auto;
  }
}

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

.el-breadcrumb {
  font-size: 12px;
}

.el-menu--popup {
  background-color: #F2F6FF;

  .el-menu-item.is-active {
    background: linear-gradient(90deg, #4A87FF 0%, #86AEFF 100%);
    color: #FFFFFF;
  }
}

.el-menu--inline {
  .el-menu-item {
    background-color: #F2F6FF;
  }
}

.el-tooltip__popper {
  max-width: 50vw;
  max-height: 20vh;
  overflow: hidden;
}

// 自定义滚动条样式
.diy-popover {
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}

.scrollbar-x {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 4px;
  margin-bottom: -6px;

  &::-webkit-scrollbar { // 滚动条整体样式 高宽分别对应横竖滚动条的尺寸
    width: 10px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb { // 滚动条里面小方块
    border-radius: 10px;
    background: #ccc;
  }

  &::-webkit-scrollbar-track { // 滚动条里面轨道
    border-radius: 10px;
  }
}

.scrollbar-y {
  .el-scrollbar {
    height: 100%;

    .el-scrollbar__wrap {
      overflow-x: hidden;
      margin-bottom: 0 !important;
    }

    .el-scrollbar__view {
      height: 100%;
    }
  }
}


$colors: (primary, $--color-primary),
        (white, $--color-white),
        (black, $--color-black),
        (success, $--color-success),
        (warning, $--color-warning),
        (danger, $--color-danger),
        (info, $--color-info);
/* ----------------------------------------------------------------
  Color
----------------------------------------------------------------- */
@each $name, $color in $colors {
  .color-#{$name} {
    color: $color !important;
  }
}

@each $name, $color in $colors {
  .bc-#{$name} {
    background-color: $color !important;
  }
}

/* ----------------------------------------------------------------
  Border
----------------------------------------------------------------- */
@for $i from 0 through 20 {
  .br-#{$i} {
    border-radius: $i + px !important;
  }
}

/* ----------------------------------------------------------------
  Cursor
----------------------------------------------------------------- */
@each $cursor in default, pointer, move, 'not-allowed' {
  .cursor-#{$cursor} {
    cursor: $cursor !important;
  }
}

/* ----------------------------------------------------------------
  Display
----------------------------------------------------------------- */
@each $display in block, none, inline, inline-block, flex, inline-flex {
  .display-#{$display} {
    display: $display !important;
  }
}

/* ----------------------------------------------------------------
  Flex
----------------------------------------------------------------- */
// 项目的排列方向
@each $direction in row, row-reverse, column, column-reverse {
  .fd-#{$direction} {
    flex-direction: $direction !important;
  }
}

// 项目在主轴上的对齐方式
@each $position in flex-start, flex-end, center, space-between, space-around {
  .jc-#{$position} {
    justify-content: $position !important;
  }
}

// 占比
@for $i from 1 through 11 {
  .flex-#{$i} {
    flex: $i !important;
  }
}

// 轴线排列 换行
@each $nowrap in nowrap, wrap, wrap-reverse {
  .fw-#{$nowrap} {
    flex-wrap: $nowrap !important;
  }
}

// 项目在交叉轴上对齐方式
@each $position in flex-start, flex-end, center, baseline, stretch {
  .ai-#{$position} {
    align-items: $position !important;
  }
}

/* ----------------------------------------------------------------
  Float
----------------------------------------------------------------- */
.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

.float-none {
  float: none !important;
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

.clearfix::after {
  clear: both;
}

/* ----------------------------------------------------------------
  Sizing
----------------------------------------------------------------- */
@for $i from 1 through 20 {
  .width-percent-#{$i * 5} {
    width: 5 * 1% * $i !important;
  }
}

@for $i from 0 through 30 {
  .width-#{$i * 10} {
    width: 10px * $i !important;
  }
}

@for $i from 1 through 20 {
  .height-percent-#{$i * 5} {
    height: 5 * 1% * $i;
  }
}


@for $i from 0 through 20 {
  .height-#{$i * 10} {
    height: 10px * $i !important;
  }
}

@for $i from 1 through 50 {
  .lh-#{$i} {
    line-height: 1px * $i !important;
  }
}

/* ----------------------------------------------------------------
  Spacing
----------------------------------------------------------------- */
@for $i from 0 through 15 {
  .margin-#{$i * 2} {
    margin: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .mt-#{$i * 2} {
    margin-top: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .mb-#{$i * 2} {
    margin-bottom: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .ml-#{$i *2 } {
    margin-left: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .mr-#{$i * 2} {
    margin-right: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .padding-#{$i * 2} {
    padding: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .pt-#{$i * 2 } {
    padding-top: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .pb-#{$i * 2 } {
    padding-bottom: 2 * $i + px !important;
  }
}

@for $i from 0 through 20 {
  .pl-#{$i * 2 } {
    padding-left: 2 * $i + px !important;
  }
}

@for $i from 0 through 20 {
  .pr-#{$i *2 } {
    padding-right: 2 * $i + px !important;
  }
}

.mr-auto {
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

/* ----------------------------------------------------------------
  Text
----------------------------------------------------------------- */
@each $align in center, left, right, justify {
  .ta-#{$align} {
    text-align: $align !important;
  }
}

@for $i from 6 through 18 {
  .fs-#{$i * 2} {
    font-size: 2 * $i + px !important;
  }
}

.fw-bold {
  font-weight: bold;
}

.fw-bolder {
  font-weight: bolder;
}

.fw-normal {
  font-weight: normal;
}

.text-decoration {
  text-decoration: underline;
}

.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
  Z-index
----------------------------------------------------------------- */
@for $i from 1 through 20 {
  .zi-#{$i} {
    z-index: $i !important;
  }
}

.drawer-class {
  transition: width 0.3s;
}

.com-name {
  font-weight: 500;
  color: #333333;
  font-size: 18px;
  margin-bottom: 20px;
}

.drawer-title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  border-bottom: 1px solid #EBEBEB;

  .drawer-line {
    margin: 21px 10px 0 20px;
    height: 18px;
    width: 3px;
    background: #2F74FF;
    float: left;
    border-radius: 4px;
  }
}

.inner-title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin-top: 40px;
  border-top: 1px solid #EBEBEB;
}

.drawer-foot {
  float: right;
  padding: 20px 0
}

.ellipsis {
  display: inline-block;
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-icon {
  float: right;
  cursor: pointer;
  margin-top: 5px
}

.divide {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0px 6px;
  background-color: #D9D9D9;
}

.total {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20px;
}

.form_Button {
  display: flex;
  flex-direction: row-reverse;
}
 

标签：el,-#,样式,element,padding,color,important,height,优化
From： https://www.cnblogs.com/GmxNotes/p/17104987.html

相关文章

  • Element 中表单输入整数及两位小数
    <template><divid="platformActivity"><el-form:model="formFieldsData"><!--充值金额保留两位小数--><el-form-itemlabel="充值......
  • Element 中使用加载动画
    <script>//1.引入动画组件import{Loading}from'element-ui';exportdefault{name:"index",data(){return{//2.定义实例......
  • Element 中根据屏幕大小动态计算表格高度以实现固定表头
    在ElementUI的表格组件中，要想固定表头，必须给表格指定一个高度，但是用户的屏幕大小是不一样的，为了能将表格底部的分页区域始终显示在屏幕内，就需要动态计算表格的高度。以下是......
  • Element 中查询前多少天、前多少周、前多少月的数据
    在开发后台管理系统时，经常会遇到这样一种需求，查询前多少天、多少周、多少月的数据，虽然UI框架有自带的组件可以实现这些功能，但是操作起来却不是很方便，而且这些都是查询最近......
  • Vue 的优化技巧
    演示代码使用Vue3+ts+Vite编写，但是也会列出适用于Vue2的优化技巧，如果某个优化只适用于Vue3或者Vue2，我会在标题中标出来。代码优化v-for中使用key使用v......
  • Vue2.9.6安装element-ui
    阅读目录安装element-ui源码路由文件：E:\node\vue296\src\router\index.js入口：E:\node\vue296\src\main.js组件：E:\node\vue296\src\components\Count.vue......
  • ElementUI手动控制popover弹层的显示与隐藏
    转自于：https://huaweicloud.csdn.net/638f116ddacf622b8df8e566.html?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogComme......
  • 微信小程序搜索优化指南(SEO)
    前言其实在2019年上半年，微信就发布了基于小程序页面的搜索。为了更好地发现及理解小程序的页面，结合过去一段时间来我们遇到的各种情况，强烈建议各位开发者花一些宝贵的......
  • 高并发服务的几条优化经验 转载
    如何优化高并发服务,这里指的是qps在20万以上的在线服务,注意不是离线服务,在线服务会存哪些挑战呢？无法做离线缓存,所有的数据都是实时读的大量的请求会打到线上服务......
  • SQL 优化大全，收藏直接起飞！ 转载
    转自：https://mp.weixin.qq.com/s/n2yb1Kl4fMbndzG_z1-4tw大家好，今天分享一篇关于SQL优化的硬核文章，全文有点长，建议收藏后慢慢看。很多朋友在做数据分析时，分析两分钟，跑数......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99