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

docs: 修改 header 样式

Browse Source
This commit is contained in:
就眠儀式 2022-03-09 15:17:02 +08:00
parent 08c6444b48
commit 22e88e458e
2 changed files with 64 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,38 +49,75 @@
<lay-dropdown> <lay-dropdown>
<a href="javascript:void(0);"> <a href="javascript:void(0);">
<lay-icon <lay-icon
type="layui-icon-theme"
size="15px" size="15px"
style=" type="layui-icon-theme"
color: rgba(255, 255, 255, 0.7); style="color: rgba(255, 255, 255, 0.7);padding-left: 30px;padding-right: 30px;"
padding-left: 30px;
padding-right: 30px;
"
></lay-icon> ></lay-icon>
</a> </a>
<template #content> <template #content>
<div style="width: 380px; padding:0px 10px 10px 10px;"> <div style="width: 380px; padding: 0px 10px 10px 10px">
<lay-color-picker v-model="themeVariable['--global-primary-color']"></lay-color-picker>&nbsp; <lay-color-picker
<lay-color-picker v-model="themeVariable['--global-normal-color']"></lay-color-picker>&nbsp; v-model="themeVariable['--global-primary-color']"
<lay-color-picker v-model="themeVariable['--global-warm-color']"></lay-color-picker>&nbsp; ></lay-color-picker
<lay-color-picker v-model="themeVariable['--global-danger-color']"></lay-color-picker>&nbsp; >&nbsp;
<lay-color-picker v-model="themeVariable['--global-checked-color']"></lay-color-picker>&nbsp; <lay-color-picker
<lay-input v-model="themeVariable['--global-border-radius']" style="display:inline-block;width:130px;"></lay-input> v-model="themeVariable['--global-normal-color']"
<lay-color-picker v-model="themeVariable['--global-neutral-color-1']"></lay-color-picker>&nbsp; ></lay-color-picker
<lay-color-picker v-model="themeVariable['--global-neutral-color-2']"></lay-color-picker>&nbsp; >&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-3']"></lay-color-picker>&nbsp; <lay-color-picker
<lay-color-picker v-model="themeVariable['--global-neutral-color-4']"></lay-color-picker>&nbsp; v-model="themeVariable['--global-warm-color']"
<lay-color-picker v-model="themeVariable['--global-neutral-color-5']"></lay-color-picker>&nbsp; ></lay-color-picker
<lay-color-picker v-model="themeVariable['--global-neutral-color-6']"></lay-color-picker>&nbsp; >&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-7']"></lay-color-picker>&nbsp; <lay-color-picker
<lay-color-picker v-model="themeVariable['--global-neutral-color-8']"></lay-color-picker> v-model="themeVariable['--global-danger-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-checked-color']"
></lay-color-picker
>&nbsp;
<lay-input
v-model="themeVariable['--global-border-radius']"
style="display: inline-block; width: 130px"
></lay-input>
<lay-color-picker
v-model="themeVariable['--global-neutral-color-1']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-2']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-3']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-4']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-5']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-6']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-7']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-8']"
></lay-color-picker>
<lay-button fluid>导 出 配 置</lay-button> <lay-button fluid>导 出 配 置</lay-button>
</div> </div>
</template> </template>
</lay-dropdown> </lay-dropdown>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="https://gitee.com/layui-vue"> <a href="https://gitee.com/layui-vue/layui-vue">
<lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon> <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
</a> </a>
</li> </li>
@ -108,7 +145,7 @@
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)"> 0.3.8 </a> <a href="javascript:void(0)"> 0.3.9 </a>
</li> </li>
</ul> </ul>
</lay-header> </lay-header>
@ -117,7 +154,7 @@
</lay-config-provider> </lay-config-provider>
</template> </template>
<script> <script>
import { computed, ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import menu from "../view/utils/menus"; import menu from "../view/utils/menus";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@ -125,7 +162,6 @@ import zh_CN from "../locales/zh_CN.ts";
import en_US from "../locales/en_US.ts"; import en_US from "../locales/en_US.ts";
export default { export default {
setup() { setup() {
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -135,7 +171,6 @@ export default {
{ name: "zh_CN", locale: zh_CN, merge: true }, { name: "zh_CN", locale: zh_CN, merge: true },
{ name: "en_US", locale: en_US, merge: true }, { name: "en_US", locale: en_US, merge: true },
]; ];
const theme = "light"; const theme = "light";
const themeVariable = ref({ const themeVariable = ref({
"--global-primary-color": "#009688", "--global-primary-color": "#009688",
@ -194,6 +229,7 @@ export default {
</script> </script>
<style> <style>
.layui-layout-document > .layui-header { .layui-layout-document > .layui-header {
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;

5
example/src/view/index.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="site-container" <div class="site-container">
>
<div class="site-banner"> <div class="site-banner">
<div class="site-banner-main"> <div class="site-banner-main">
<div class="site-zfj site-zfj-anim"> <div class="site-zfj site-zfj-anim">
@ -21,7 +20,7 @@
> >
</div> </div>
<div class="site-version"> <div class="site-version">
<span>{{ t('home.version') }}：v<cite class="site-showv">0.3.8</cite></span> <span>{{ t('home.version') }}：v<cite class="site-showv">0.3.9</cite></span>
<span <span
><router-link ><router-link
class="layui-inline site-down" class="layui-inline site-down"