theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

兼容 css3 特性

Browse Source
This commit is contained in:
就眠儀式 2022-02-08 20:23:22 +08:00
parent 3787e80ff0
commit 8a8bc6b0b5
7 changed files with 79 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
example/docs/zh-CN/components/animation.md
View File

@ -77,113 +77,6 @@ export default {
}
}
</script>
<style>
.site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.site-doc-icon li .doc-icon-name,
.site-doc-icon li .doc-icon-code {
color: #c2c2c2;
}
.site-doc-icon li .doc-icon-fontclass {
height: 40px;
line-height: 20px;
padding: 0 5px;
font-size: 13px;
color: #333;
}
.site-doc-icon li {
display: inline-block;
vertical-align: middle;
width: 16.5%;
height: 105px;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.site-doc-icon li .layui-icon {
display: inline-block;
font-size: 32px;
}
.site-doc-color {
margin: 15px 0;
}
.site-doc-necolor li div {
border-radius: 0;
color: #000 !important;
}
.site-doc-color li div {
padding: 20px 10px;
color: #fff;
text-align: center;
line-height: 1.6;
font-size: 14px;
}
.site-doc-bgcolor li {
padding: 20px 10px;
}
.anim .site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.anim .site-doc-icon li {
width: 50%;
}
.anim .site-doc-anim li {
height: auto;
}
.anim .site-doc-icon li {
display: inline-block;
vertical-align: middle;
width: 16.5%;
height: 105px;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.anim .site-doc-icon li .layui-anim {
width: 125px;
height: 125px;
line-height: 125px;
margin: 0 auto 10px;
text-align: center;
background-color: #009688;
cursor: pointer;
color: #fff;
border-radius: 50%;
}
.anim .site-doc-icon li .code {
white-space: nowrap;
}
</style>
:::

36
example/docs/zh-CN/components/grid.md
View File

@ -15,11 +15,11 @@
<template>
<lay-row space="10">
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
<lay-col md="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="12"><div class="grid-demo">2</div></lay-col>
<lay-col md="6"><div class="grid-demo">3</div></lay-col>
<lay-col md="6"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
<lay-col md="6"><div class="grid-demo">4</div></lay-col>
<lay-col md="6"><div class="grid-demo">5</div></lay-col>
<lay-col md="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
<lay-col md="6"><div class="grid-demo">6</div></lay-col>
</lay-row>
</template>
@ -35,15 +35,12 @@ export default {
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
background-color: var(--global-checked-color);
color: #fff;
}
</style>
@ -58,7 +55,7 @@ export default {
<template>
<lay-row space="10">
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
<lay-col md="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="6" mdOffset="6"><div class="grid-demo">2</div></lay-col>
</lay-row>
</template>
@ -74,15 +71,12 @@ export default {
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
background-color: var(--global-checked-color);
color: #fff;
}
</style>
@ -97,7 +91,7 @@ export default {
<template>
<lay-row space="10">
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
<lay-col md="12" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
</lay-row>
</template>
@ -112,15 +106,12 @@ export default {
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
background-color: var(--global-checked-color);
color: #fff;
}
</style>
@ -136,11 +127,11 @@ export default {
<lay-container fluid>
<lay-row space="10">
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">4</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">6</div></lay-col>
</lay-row>
</lay-container>
</template>
@ -156,15 +147,12 @@ export default {
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
background-color: var(--global-checked-color);
color: #fff;
}
</style>

3
example/src/assets/css/markdown.css
View File

@ -234,7 +234,7 @@ form {
line-height: 125px;
margin: 0 auto 10px;
text-align: center;
background-color: #009688;
background-color: var(--global-primary-color);
cursor: pointer;
color: #fff;
border-radius: 50%;
@ -261,6 +261,7 @@ body::-webkit-scrollbar {
.layui-menu .layui-menu-item-group > .layui-menu-body-title {
padding-left: 15px;
}
.lay-link:hover{
color: #5FB878;
}

17
example/src/layouts/Layout.vue
View File

@ -1,5 +1,5 @@
<template>
<lay-config-provider :theme="theme">
<lay-config-provider :themeVariable="themeVariable">
<lay-layout class="layui-layout-document">
<lay-header
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
@ -77,27 +77,24 @@ export default {
});
watch(
() => route.path,
(val) => {
() => route.path, (val) => {
currentPath.value = val;
},
{
immediate: true,
deep: true,
}
},{immediate: true, deep: true}
);
const handleClick = function (menu) {
router.push(menu.path);
};
const theme = {
"@global-primary-color":"red"
const theme = "light";
const themeVariable = {
}
return {
menus,
theme,
themeVariable,
currentPath,
handleClick,
};

9
src/component/button/index.less
View File

@ -1,7 +1,12 @@
@import "../../theme/variable.less";
@button-primary-color: @global-primary-color;
@button-border-radius: @global-border-radius;
@button-primary-color: var(--button-primary-color);
@button-border-radius: var(--button-border-radius);
:root {
--button-primary-color: @global-primary-color;
--button-border-radius: @global-border-radius;
}
.layui-btn {
height: 38px;

41
src/provider/index.vue
View File

@ -8,32 +8,41 @@ export default {
<script setup lang="ts">
export interface LayConfigProviderProps {
theme?: object;
local?: string;
theme?: string;
themeVariable?: object;
}
const props = withDefaults(defineProps<LayConfigProviderProps>(),
{
local: 'zh_cn',
theme: 'light',
}
);
const changeTheme = (theme: string) => {
document.body.removeAttribute("lay-theme");
document.body.setAttribute("lay-theme", theme);
}
const changeTheme = (vars: any) => {
// @ts-ignore
if (!window.less || !window.less.modifyVars) {
return;
}
// @ts-ignore
window.less.modifyVars(vars).then((res) => {
console.log(res);
}).catch((res: any) => {
console.log(res);
});
const changeThemeVariable = (vars: any) => {
if(vars!=null){
const keys = Object.keys(vars);
for(let i=0;i<keys.length;i++){
const key = keys[i];
const value=vars[key];
document.documentElement.style.setProperty(key,value);
}
}
};
watch(() => props.theme, (vars) => {
changeTheme(vars);
},{immediate: true})
watch(() => props.theme, (theme) => {
changeTheme(theme);
},{immediate: true});
watch(() => props.themeVariable, (vars) => {
changeThemeVariable(vars);
},{immediate: true, deep: true});
</script>

36
src/theme/variable.less
View File

@ -1,14 +1,30 @@
// 主题色
@global-primary-color: #009688;
@global-primary-color: var(--global-primary-color);
// 选中色
@global-checked-color: #5FB878;
@global-checked-color: var(--global-checked-color);
// 圆角度
@global-border-radius: 2px;
@global-border-radius: var(--global-border-radius);
// 前景色
@global-fore-color: #393D49;
@global-fore-color: var(--global-fore-color);
// 背景色
@global-back-color: #ffffff;
@global-back-color: var(--global-back-color);
:root {
--global-primary-color: #009688;
--global-checked-color: #5fb878;
--global-border-radius: 2px;
--global-fore-color: #393d49;
--global-back-color: #ffffff;
}
body[lay-theme='dark'] {
--global-fore-color: #ffffff;
--global-back-color: #393d49;
}