mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-31 09:12:10 +08:00
'admin-20.12.18:处理自定义主题问题'
This commit is contained in:
lyt
parent
0695d01040
commit
10c1096117
@ -217,11 +217,14 @@ $--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
- 2.2、当只有 :root 选择器或者 html 选择器时，`document.documentElement.style.getPropertyValue` 获取到的值为空
|
||||
|
||||
```ts
|
||||
// 获取值
|
||||
document.documentElement.style.getPropertyValue('--main-bg-color');
|
||||
// 读取变量
|
||||
document.documentElement.style.getPropertyValue('--main-bg-color').trim();
|
||||
|
||||
// 设置值
|
||||
// 设置变量
|
||||
document.documentElement.style.setProperty('--main-bg-color', 'blue');
|
||||
|
||||
// 删除变量
|
||||
document.body.style.removeProperty('--main-bg-color');
|
||||
```
|
||||
|
||||
#### 2、配置目录别名 `@`，方便引用
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
<template>
|
||||
<el-color-picker v-model="color" @change="colorChange"></el-color-picker>
|
||||
<span>灰色模式</span>
|
||||
<el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
|
||||
<el-divider></el-divider>
|
||||
<div>button</div>
|
||||
<el-row>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">主要按钮</el-button>
|
||||
@ -7,40 +12,36 @@
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
</el-row>
|
||||
<div class="Selector1">
|
||||
22
|
||||
<div class="aaa">66</div>
|
||||
<div class="bb">33</div>
|
||||
<div class="red">44</div>
|
||||
</div>
|
||||
<el-color-picker v-model="color" @change="colorChange"></el-color-picker>
|
||||
<!-- <img src="/@/assets/11.png" /> -->
|
||||
<span>灰色模式</span>
|
||||
<el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template #title>我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
<el-submenu index="2-4">
|
||||
<template #title>选项4</template>
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
<el-row>
|
||||
<el-button plain>朴素按钮</el-button>
|
||||
<el-button type="primary" plain>主要按钮</el-button>
|
||||
<el-button type="success" plain>成功按钮</el-button>
|
||||
<el-button type="info" plain>信息按钮</el-button>
|
||||
<el-button type="warning" plain>警告按钮</el-button>
|
||||
<el-button type="danger" plain>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button round>圆角按钮</el-button>
|
||||
<el-button type="primary" round>主要按钮</el-button>
|
||||
<el-button type="success" round>成功按钮</el-button>
|
||||
<el-button type="info" round>信息按钮</el-button>
|
||||
<el-button type="warning" round>警告按钮</el-button>
|
||||
<el-button type="danger" round>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button icon="el-icon-search" circle></el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
||||
<el-button type="success" icon="el-icon-check" circle></el-button>
|
||||
<el-button type="info" icon="el-icon-message" circle></el-button>
|
||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<div class="aaa">button</div>
|
||||
<el-divider></el-divider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -51,14 +52,18 @@ export default {
|
||||
const state = reactive({
|
||||
color: "",
|
||||
value1: false,
|
||||
activeName: "second",
|
||||
activeIndex2: "1",
|
||||
});
|
||||
function colorChange() {
|
||||
// let aa = getDarkColor(state.color, 0.2);
|
||||
// console.log(aa);
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-primary",
|
||||
state.color
|
||||
);
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-primary-light-1",
|
||||
getLightColor(state.color, 0.3)
|
||||
);
|
||||
}
|
||||
function onSwitchChange1() {
|
||||
document.body.setAttribute(
|
||||
@ -66,6 +71,48 @@ export default {
|
||||
`filter:grayscale(${state.value1 ? 1 : 0})`
|
||||
);
|
||||
}
|
||||
function HexToRgb(str) {
|
||||
var r = /^\#?[0-9A-F]{6}$/;
|
||||
//test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
|
||||
if (!r.test(str)) return window.alert("输入错误的hex");
|
||||
//replace替换查找的到的字符串
|
||||
str = str.replace("#", "");
|
||||
//match得到查询数组
|
||||
var hxs = str.match(/../g);
|
||||
//alert('bf:'+hxs)
|
||||
for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
|
||||
//alert(parseInt(80, 16))
|
||||
//console.log(hxs);
|
||||
return hxs;
|
||||
}
|
||||
//GRB颜色转Hex颜色
|
||||
function RgbToHex(a, b, c) {
|
||||
var r = /^\d{1,3}$/;
|
||||
if (!r.test(a) || !r.test(b) || !r.test(c))
|
||||
return window.alert("输入错误的rgb颜色值");
|
||||
var hexs = [a.toString(16), b.toString(16), c.toString(16)];
|
||||
for (var i = 0; i < 3; i++)
|
||||
if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
|
||||
return "#" + hexs.join("");
|
||||
}
|
||||
//得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
|
||||
function getDarkColor(color, level) {
|
||||
var r = /^\#?[0-9A-F]{6}$/;
|
||||
if (!r.test(color)) return window.alert("输入错误的hex颜色值");
|
||||
var rgbc = HexToRgb(color);
|
||||
//floor 向下取整
|
||||
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
|
||||
return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
|
||||
}
|
||||
//得到hex颜色值为color的减淡颜色值，level为加深的程度，限0-1之间
|
||||
function getLightColor(color, level) {
|
||||
var r = /^\#?[0-9A-F]{6}$/;
|
||||
if (!r.test(color)) return window.alert("输入错误的hex颜色值");
|
||||
var rgbc = HexToRgb(color);
|
||||
for (var i = 0; i < 3; i++)
|
||||
rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
|
||||
return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
|
||||
}
|
||||
return {
|
||||
colorChange,
|
||||
onSwitchChange1,
|
||||
@ -74,13 +121,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.aa {
|
||||
border: 1px solid red;
|
||||
.bb {
|
||||
color: blue;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@ import App from './App.vue'
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/lib/theme-chalk/index.css';
|
||||
import '/@/style/index.scss';
|
||||
import '/@/theme/index.scss';
|
||||
|
||||
createApp(App).use(ElementPlus).mount('#app')
|
||||
createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')
|
||||
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
@import 'common/transition.scss';
|
||||
@import 'common/var.scss';
|
||||
|
||||
.el-button--primary {
|
||||
color: #ffffff;
|
||||
background-color: setColor(primary);
|
||||
border-color: setColor(primary);
|
||||
}
|
||||
|
||||
// .el-button--primary:hover {
|
||||
// color: #ffffff;
|
||||
// background-color: var(--primary--color-hover);
|
||||
// border-color: var(--primary--color-hover);
|
||||
// }
|
||||
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
border-color: setColor(primary) !important;
|
||||
background-color: setColor(primary) !important;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs__item.is-active {
|
||||
color: setColor(primary) !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: setColor(primary) !important;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active,
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: setColor(primary) !important;
|
||||
border-bottom-color: setColor(primary) !important;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
/* 定义初始颜色
|
||||
------------------------------- */
|
||||
$root: (
|
||||
primary: #409eff,
|
||||
success: #67c23a,
|
||||
warning: #e6a23c,
|
||||
danger: #f56c6c,
|
||||
info: #909399,
|
||||
);
|
||||
|
||||
/* 循环赋值给:root
|
||||
------------------------------- */
|
||||
:root {
|
||||
@each $key, $value in $root {
|
||||
--color-#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
/* 颜色调用函数
|
||||
------------------------------- */
|
||||
@function setColor($key) {
|
||||
@return var(--color-#{$key});
|
||||
}
|
||||
|
||||
/* 文本不换行
|
||||
------------------------------- */
|
||||
@mixin text-no-wrap() {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 多行文本溢出
|
||||
------------------------------- */
|
||||
@mixin text-ellipsis($line: 2) {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
// 使用方式:
|
||||
// .text{
|
||||
// @include multiEllipsis(3) // 表示只显示三行,多出来的显示省略号
|
||||
// }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aaa {
|
||||
color: setColor(primary);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@import './base.scss';
|
||||
11
vue-admin-wonderful-next/src/theme/app.scss
Normal file
11
vue-admin-wonderful-next/src/theme/app.scss
Normal file
@ -0,0 +1,11 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
2
vue-admin-wonderful-next/src/theme/base.scss
Normal file
2
vue-admin-wonderful-next/src/theme/base.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'common/transition.scss';
|
||||
@import 'common/var.scss';
|
||||
@ -1,32 +1,40 @@
|
||||
/* 定义重用混入指令
|
||||
------------------------------- */
|
||||
@mixin transition($second: 0.3) {
|
||||
transition: all #{$second}s;
|
||||
}
|
||||
|
||||
@mixin translateX($opacity: 0, $offsetX: 0) {
|
||||
opacity: $opacity;
|
||||
transform: translateX(#{$offsetX}px);
|
||||
}
|
||||
|
||||
/* 页面切换动画
|
||||
------------------------------- */
|
||||
.fade-transform-enter-active,
|
||||
.fade-transform-leave-active {
|
||||
will-change: transform;
|
||||
transition: all 0.3s;
|
||||
@include transition();
|
||||
}
|
||||
.fade-transform-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
@include translateX(-30);
|
||||
}
|
||||
.fade-transform-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
@include translateX(30);
|
||||
}
|
||||
|
||||
/* Breadcrumb 面包屑过渡动画
|
||||
------------------------------- */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.3s;
|
||||
@include transition();
|
||||
}
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
@include translateX(20);
|
||||
}
|
||||
.breadcrumb-move {
|
||||
transition: all 0.3s;
|
||||
@include transition();
|
||||
}
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
39
vue-admin-wonderful-next/src/theme/common/var.scss
Normal file
39
vue-admin-wonderful-next/src/theme/common/var.scss
Normal file
@ -0,0 +1,39 @@
|
||||
/* 定义初始颜色
|
||||
------------------------------- */
|
||||
// $root: (
|
||||
// primary: #409eff,
|
||||
// success: #67c23a,
|
||||
// warning: #e6a23c,
|
||||
// danger: #f56c6c,
|
||||
// info: #909399,
|
||||
// whites: #ffffff,
|
||||
// blacks: #000000,
|
||||
// );
|
||||
|
||||
/* 循环赋值给:root
|
||||
------------------------------- */
|
||||
// :root {
|
||||
// @each $key, $value in $root {
|
||||
// --color-#{$key}: #{$value};
|
||||
// }
|
||||
// }
|
||||
|
||||
$--color-primary: #409eff !default;
|
||||
$--color-white: #ffffff !default;
|
||||
$--color-black: #000000 !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
|
||||
// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
|
||||
// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
|
||||
// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
|
||||
// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
|
||||
// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
|
||||
// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
|
||||
// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
|
||||
// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
|
||||
|
||||
:root {
|
||||
--color-primary: #{$--color-primary};
|
||||
--color-white: #{$--color-white};
|
||||
--color-black: #{$--color-black};
|
||||
--color-primary-light-1: #{$--color-primary-light-1};
|
||||
}
|
||||
4
vue-admin-wonderful-next/src/theme/index.scss
Normal file
4
vue-admin-wonderful-next/src/theme/index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import './app.scss';
|
||||
@import './base.scss';
|
||||
@import './reset-element.scss';
|
||||
@import './media.scss';
|
||||
1
vue-admin-wonderful-next/src/theme/media.scss
Normal file
1
vue-admin-wonderful-next/src/theme/media.scss
Normal file
@ -0,0 +1 @@
|
||||
// 540/720/960/1140
|
||||
5
vue-admin-wonderful-next/src/theme/mixins/function.scss
Normal file
5
vue-admin-wonderful-next/src/theme/mixins/function.scss
Normal file
@ -0,0 +1,5 @@
|
||||
/* 颜色调用函数
|
||||
------------------------------- */
|
||||
@function set-color($key) {
|
||||
@return var(--color-#{$key});
|
||||
}
|
||||
18
vue-admin-wonderful-next/src/theme/mixins/mixins.scss
Normal file
18
vue-admin-wonderful-next/src/theme/mixins/mixins.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/* 文本不换行
|
||||
------------------------------- */
|
||||
@mixin text-no-wrap() {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 多行文本溢出
|
||||
------------------------------- */
|
||||
@mixin text-ellipsis($line: 2) {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
13
vue-admin-wonderful-next/src/theme/reset-element.scss
Normal file
13
vue-admin-wonderful-next/src/theme/reset-element.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import 'mixins/function.scss';
|
||||
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
.el-button--primary {
|
||||
background-color: set-color(primary);
|
||||
border-color: set-color(primary);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: set-color(primary-light-1);
|
||||
border-color: set-color(primary-light-1);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user