# elementui-css

**Repository Path**: weihaocomeon_admin/elementui-css

## Basic Information

- **Project Name**: elementui-css
- **Description**: element ui css的相关改造介绍
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-21
- **Last Updated**: 2023-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# elementui/若依 暗黑科技感样式购买前阅读须知

#### 前言

> 本文档用于描述ElementUi全局样式的灵活修改方法,修改成果及方法为笔者自研,非盗用他人成果或资源的二道贩子,原作者[勿忘初心],修改成果在咸鱼进行兜售,可模仿思路但不要转载原文;

#### 调研

对于[elementu](https://element.eleme.cn/#/zh-CN/)i的使用者来说,因其底层使用Scss方式编程编译使用，所以留给研发人员进行样式修改的灵活度不高,但实际的项目开发中,既然您购买了这样一套样式,那肯定也有和我一样的业务场景需求,想随心所欲的对elementui全局样式进行调整,而非使用网上蹩脚的方式进行大量重复工作; 对于搜索引擎关于element样式修改的方式方法,大概分为以下几种:

1.scss中使用"/deep/ "或css中使用">>>" 选择器修改

该方法适用于页面组件的局部修改,但无法适用于大面积或全局的样式调整,且需要通过!important关键字强拉样式生效优先级, 会造成大量的样式代码冗余;这对于一个有代码洁癖的程序员来说是不被允许存在的; 

```vue
>>> .el-table td{
    /*行高调整*/
    padding-top: 1px !important;
    padding-right: 0px !important;
    padding-bottom: 1px !important;
    padding-left: 0px !important;
}
>>> .el-table tr {
    background-color: transparent;
}
```

2.使用官方的样式定制方法 

该方法需要使用官网的[在线主题生成工具](https://elementui.github.io/theme-chalk-preview/)进行样式调整,但可调整的内容非常有限,无非是组件的字体大小，颜色等，但实际的项目运行过程中。需要改造后的组件样式比官网提供的可修改项多得多,设置完主题后依然无法做到适应项目本身要求以及无法对组件的大量细节进行精细化调整;所以本文档标题不叫"xxx主题xxx",而非"xxx样式xxx";



 

#### 适用人群

基于以上修改方法为调查结果基础之上,如果在使用若依或element-ui前端样式库时的需求符合以下任一场景，可大胆下单本css样式成果;

1. 完全没有element-ui全局样式修改思路的

2. 有修改思路但是没有很多精力去改造的 

3. 反感element-ui默认的浅色主题,想三两步就能得到一份"葵花宝典"输入到已有项目中立马让原有项目充满科技感和高冷范的;

虽然出售的成果是暗黑科技感主题,但笔者出售的样式成果只是抛砖引玉,同样向element-ui一样使用了root的语法进行变量式绑定了样式;留给买方的更重要的是一个解决问题的独特思路;和无限的拓展空间; 

#### 成果展示(以若依为例)

![image-20231021133607712](咸鱼.assets/image-20231021133607712.png)

![image-20231021143302417](咸鱼.assets/image-20231021143302417-16978699833931.png)

![image-20231021143442038](咸鱼.assets/image-20231021143442038.png)

![image-20231021143500044](咸鱼.assets/image-20231021143500044.png)

![image-20231021143552239](咸鱼.assets/image-20231021143552239.png)

![image-20231021143645752](咸鱼.assets/image-20231021143645752.png)

![image-20231021143710918](咸鱼.assets/image-20231021143710918.png)

![image-20231021143727436](咸鱼.assets/image-20231021143727436.png)

![image-20231021143818747](咸鱼.assets/image-20231021143818747.png)

![image-20231021143855106](咸鱼.assets/image-20231021143855106.png)

![image-20231021143920575](咸鱼.assets/image-20231021143920575.png)

#### 相关问题

1.拍单付款后如何获得资料?

直接咸鱼骚扰卖家,卖家是原作者可提供成果css文件以及相关教程(教程表述的是如何嵌入到自己的项目中,非常简单,对原项目修改几行代码即可)

2.付款后能提供什么样的服务

安装/售后以及关于项目实施,项目管理,人员管理,技术上的闲聊扯淡;前后端都可以(前端vue.h5后端微服务java等)

3.为什么出售此代码成果

a) 个人诟病目前网上流行的element-ui的修改方案，想改变这个现状,简单快速的解决问题

b) 看下现在"知识付费"的环境

c) 给使用element-ui但是不知道怎么暴力快捷修改的同学打开一个思路(可能你的项目在使用的修改方式浪费了你们组的太多精力但结果还是一塌糊涂)

关于价格 

价格定的很随意,可以聊,不指望这个赚钱,只是体现程序员的一种冷幽默和生活方式,实际上研究这个事到方案拍板到非常细节的修改css花的精力肯定不止这个成本;