feat: 新增夜间主题配置

2022-03-30 07:44:37 +08:00 · 2022-03-30 07:44:37 +08:00 · b3ef9d8d9a
commit b3ef9d8d9a
parent 9e9063736a
68 changed files with 149 additions and 227 deletions
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@ -102,8 +102,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext animation
 :::
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@ -135,8 +135,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext avatar
 :::
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@ -68,8 +68,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext badge
 :::
--- a/example/docs/zh-CN/components/breadcrumb.md
+++ b/example/docs/zh-CN/components/breadcrumb.md
@ -110,8 +110,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext breadcrumb
 :::
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@ -341,8 +341,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext button
 :::
--- a/example/docs/zh-CN/components/card.md
+++ b/example/docs/zh-CN/components/card.md
@ -220,8 +220,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext card
 :::
--- a/example/docs/zh-CN/components/carousel.md
+++ b/example/docs/zh-CN/components/carousel.md
@ -182,8 +182,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext carousel
 :::
--- a/example/docs/zh-CN/components/checkbox.md
+++ b/example/docs/zh-CN/components/checkbox.md
@ -220,8 +220,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext checkbox
 :::
--- a/example/docs/zh-CN/components/collapse.md
+++ b/example/docs/zh-CN/components/collapse.md
@ -249,8 +249,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext collapse
 :::
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@ -170,8 +170,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext color
 :::
--- a/example/docs/zh-CN/components/colorPicker.md
+++ b/example/docs/zh-CN/components/colorPicker.md
@ -66,8 +66,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext colorPicker
 :::
--- a/example/docs/zh-CN/components/confirm.md
+++ b/example/docs/zh-CN/components/confirm.md
@ -83,8 +83,7 @@ layer.confirm(content, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext confirm
 :::
--- a/example/docs/zh-CN/components/container.md
+++ b/example/docs/zh-CN/components/container.md
@ -85,8 +85,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext container
 :::
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@ -112,8 +112,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/dropdown.md
+++ b/example/docs/zh-CN/components/dropdown.md
@ -104,8 +104,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext dropdown
 :::
--- a/example/docs/zh-CN/components/empty.md
+++ b/example/docs/zh-CN/components/empty.md
@ -64,8 +64,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext empty
 :::
--- a/example/docs/zh-CN/components/exception.md
+++ b/example/docs/zh-CN/components/exception.md
@ -144,8 +144,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/field.md
+++ b/example/docs/zh-CN/components/field.md
@ -75,8 +75,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/form.md
+++ b/example/docs/zh-CN/components/form.md
@ -580,8 +580,7 @@ export default {
 ```


-::: comment
-:::
+ 

 ::: previousNext form
 :::
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@ -188,8 +188,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext grid
 :::
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@ -1137,8 +1137,7 @@ npm install @layui/icons-vue

 :::

-::: comment
-:::
+ 

 ::: previousNext iconfont
 :::
--- a/example/docs/zh-CN/components/iconPicker.md
+++ b/example/docs/zh-CN/components/iconPicker.md
@ -145,8 +145,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext iconPicker
 :::
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@ -192,8 +192,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext input
 :::
--- a/example/docs/zh-CN/components/inputNumber.md
+++ b/example/docs/zh-CN/components/inputNumber.md
@ -147,8 +147,7 @@

 :::

-::: comment
-:::
+ 

 ::: previousNext inputNumber
 :::
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@ -263,8 +263,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext layout
 :::
--- a/example/docs/zh-CN/components/line.md
+++ b/example/docs/zh-CN/components/line.md
@ -48,8 +48,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext line
 :::
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@ -133,8 +133,7 @@ layer.load(load, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext load
 :::
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@ -534,8 +534,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext nav
 :::
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@ -320,8 +320,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext modal
 :::
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@ -94,8 +94,7 @@ layer.msg(content, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext msg
 :::
--- a/example/docs/zh-CN/components/noticeBar.md
+++ b/example/docs/zh-CN/components/noticeBar.md
@ -94,8 +94,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@ -308,8 +308,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext page
 :::
--- a/example/docs/zh-CN/components/panel.md
+++ b/example/docs/zh-CN/components/panel.md
@ -62,8 +62,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext panel
 :::
--- a/example/docs/zh-CN/components/progress.md
+++ b/example/docs/zh-CN/components/progress.md
@ -135,8 +135,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext progress
 :::
--- a/example/docs/zh-CN/components/quote.md
+++ b/example/docs/zh-CN/components/quote.md
@ -61,8 +61,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext block
 :::
--- a/example/docs/zh-CN/components/radio.md
+++ b/example/docs/zh-CN/components/radio.md
@ -127,8 +127,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext radio
 :::
--- a/example/docs/zh-CN/components/rate.md
+++ b/example/docs/zh-CN/components/rate.md
@ -315,8 +315,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext rate
 :::
--- a/example/docs/zh-CN/components/result.md
+++ b/example/docs/zh-CN/components/result.md
@ -78,8 +78,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/scroll.md
+++ b/example/docs/zh-CN/components/scroll.md
@ -46,8 +46,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@ -235,8 +235,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext select
 :::
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@ -113,8 +113,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext skeleton
 :::
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@ -117,8 +117,7 @@ export default {
 | max  |  最大值     | `Number`                   |        -       |    -    |
 :::

-::: comment
-:::
+ 

 ::: previousNext slider
 :::
--- a/example/docs/zh-CN/components/splitPanel.md
+++ b/example/docs/zh-CN/components/splitPanel.md
@ -116,8 +116,7 @@
 :::


-::: comment
-:::
+ 

 ::: previousNext splitPanel
 :::
--- a/example/docs/zh-CN/components/step.md
+++ b/example/docs/zh-CN/components/step.md
@ -468,8 +468,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext step
 :::
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@ -172,8 +172,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext switch
 :::
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@ -264,8 +264,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext tab
 :::
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@ -390,8 +390,7 @@ export default {
 | titleSlot  | 标题插槽   | --   |
 :::

-::: comment
-:::
+ 

 ::: previousNext table
 :::
--- a/example/docs/zh-CN/components/textarea.md
+++ b/example/docs/zh-CN/components/textarea.md
@ -118,8 +118,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext textarea
 :::
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@ -137,8 +137,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext timeline
 :::
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@ -128,8 +128,7 @@

 :::

-::: comment
-:::
+ 

 ::: previousNext tooltip
 :::
--- a/example/docs/zh-CN/components/transfer.md
+++ b/example/docs/zh-CN/components/transfer.md
@ -185,8 +185,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/tree.md
+++ b/example/docs/zh-CN/components/tree.md
@ -268,8 +268,7 @@ function handleClick(node) {

 :::

-::: comment
-:::
+ 

 ::: previousNext tree
 :::
--- a/example/docs/zh-CN/components/upload.md
+++ b/example/docs/zh-CN/components/upload.md
@ -186,7 +186,6 @@ export default {
 :::


-::: comment
-:::
+ 

 ::: previousNext button
--- a/example/docs/zh-CN/guide/dark.md
+++ b/example/docs/zh-CN/guide/dark.md
--- a/example/docs/zh-CN/guide/problem.md
+++ b/example/docs/zh-CN/guide/problem.md
@ -4,5 +4,4 @@
 ::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
 :::

-::: comment
-:::
+ 
--- a/example/src/assets/background.svg
+++ b/example/src/assets/background.svg
@ -1,3 +1,33 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">

+  <rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="200" cy="150" r="30" stroke="#1a73e8" fill="#1a73e8">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
+  </circle>
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
 </svg>
--- a/example/src/assets/logo-png.png
+++ b/example/src/assets/logo-png.png
--- a/example/src/assets/logo.jpg
+++ b/example/src/assets/logo.jpg
--- a/example/src/components/LayComment.vue
+++ b/example/src/components/LayComment.vue
@ -1,24 +0,0 @@
-<template>
-    <div id="comment"></div>
-</template>
-<script>
-export default {
-  name: 'Utterances',
-  methods: {
-    initValine () {
-        const utterances = document.createElement('script');
-        utterances.type = 'text/javascript';
-        utterances.async = true;
-        utterances.setAttribute('issue-term', 'pathname')
-        utterances.setAttribute('theme','github-light')
-        utterances.setAttribute('repo',`layui-vue/layui-doc`)
-        utterances.crossorigin = 'anonymous';
-        utterances.src = 'https://utteranc.es/client.js';
-        window.document.getElementById('comment').appendChild(utterances);
-    }
-  },
-  mounted: function(){
-    this.initValine()
-  }
-}
-</script>
--- a/example/src/components/LaySearch.vue
+++ b/example/src/components/LaySearch.vue
@ -31,8 +31,28 @@ onMounted(() => {
 :root {
  --docsearch-logo-color: var(--global-primary-color);
  --docsearch-primary-color: var(--global-primary-color);
-  --docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
-  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
+  --docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
+  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
  --docsearch-container-background: rgba(0, 0, 0, 0.1);
 }
+
+.DocSearch-Button,
+.DocSearch-Button:hover,
+.DocSearch-Button:active,
+.DocSearch-Button:focus {
+  border: 1px solid rgb(224, 224, 230);
+  box-shadow: none;
+}
+
+.DocSearch-Button-Key {
+  border: 1px solid rgba(60, 60, 60, .29);
+  background: transparent;
+  box-shadow: none;
+}
+
+.DocSearch-Button 
+.DocSearch-Search-Icon, 
+.DocSearch-Button-Placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
 </style>
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@ -5,10 +5,10 @@
    :locales="locales"
    :themeVariable="themeVariable"
  >
-    <lay-layout class="layui-layout-document">
+    <lay-layout class="layui-layout-document" style="height:100%">
      <lay-header
-        ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
-          <img src="../assets/logo.png" />
+        ><lay-logo>
+          <img src="../assets/logo-png.png" />
        </lay-logo>
        <ul
          class="layui-nav layui-layout-left"
@ -30,11 +30,6 @@
              {{ t("nav.resources") }}
            </router-link>
          </li>
-          <li class="layui-nav-item">
-            <router-link to="/zh-CN/material">
-              {{ t("nav.material") }}
-            </router-link>
-          </li>
          <li class="layui-nav-item">
            <lay-form>
              <lay-search :datas="menus" />
@ -52,7 +47,6 @@
                  size="15px"
                  type="layui-icon-theme"
                  style="
-                    color: rgba(255, 255, 255, 0.7);
                    padding-left: 30px;
                    padding-right: 30px;
                  "
@ -143,11 +137,6 @@
              >
            </a>
          </li>
-          <li class="layui-nav-item">
-            <a href="https://gitee.com/layui-vue/layui-vue/issues">
-              <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
-            </a>
-          </li>
          <li class="layui-nav-item">
            <a href="javascript:void(0)">
              <lay-switch
@ -311,8 +300,8 @@ export default {
  z-index: 99;
  width: 100%;
  position: fixed;
-  background: #393d49;
-  border-bottom: 1px solid #404553;
+  background: #ffffff;
+  border-bottom: 1px solid #EEEEEE;
 }

 .layui-layout-document > .layui-layout > .layui-side {
@ -321,13 +310,7 @@ export default {
  margin-top: 60px;
  z-index: 99;
  height: calc(100% - 60px);
-  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-}
-
-.layui-layout-document .layui-body,
-.layui-layout-document .layui-menu,
-.layui-layout-document .lay-aside {
-  background-color: var(--global-back-color);
+  border-right: 1px solid #EEEEEE;
 }

 .layui-layout-document > .layui-layout > .layui-body {
@ -338,11 +321,20 @@ export default {
  height: calc(100% - 60px);
 }

+.layui-layout-document .layui-header .layui-form-switch {
+  border: 1px solid rgba(60, 60, 60, .29);
+  background-color: #f1f1f1!important;
+}
+
+.layui-layout-document .layui-nav .layui-nav-item > a,
+.layui-layout-document .layui-nav .layui-nav-item > a:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
 .layui-logo img {
-  height: 31px;
-  width: 82px;
+  height: 45px;
  left: 15px;
-  top: 16px;
+  top: 0px;
 }

 .layui-header > .layui-nav {
@ -352,13 +344,6 @@ export default {
 .layui-header .layui-local-badge {
  font-size: 12.4px;
  background: transparent;
-  color: rgba(255, 255, 255, 0.7);
-  border-color: rgba(255, 255, 255, 0.7);
-}
-
-.layui-header > .layui-local:hover {
-  color: white;
-  border-color: white;
 }

 .layui-menu-docs {
--- a/example/src/main.ts
+++ b/example/src/main.ts
@ -6,7 +6,6 @@ import layui from '../../src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
-import LayComment from './components/LayComment.vue'
 import LayAnchor from './components/LayAnchor.vue'
 import './assets/css/index.css'

@ -24,7 +23,6 @@ export function createApp(): {
    .component('LayCode', LayCode)
    .component('LaySearch', LaySearch)
    .component('LayTableBox', LayTableBox)
-    .component('LayComment', LayComment)
    .component('LayAnchor',LayAnchor)

  return { app, router }
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@ -8,7 +8,6 @@ import createTitle from "./create-title";
 import createQuote from "./create-quote";
 import createDescribe from "./create-describe";
 import createTable from "./create-table";
-import createComment from "./create-comment";
 import createAnchor from "./create-anchor";
 import preWrapper from "./pre-wrapper";
 import previousNext from "./previous-next";
@ -32,7 +31,6 @@ const plugins = [
        .use(...createQuote("quote", ""))
        .use(...createTitle("title", ""))
        .use(...createDescribe("describe", ""))
-        .use(...createComment("comment", ""))
        .use(...createAnchor("anchor", ""))
        .use(...previousNext("previousNext", ""));
    },
--- a/example/src/plugin/create-comment.ts
+++ b/example/src/plugin/create-comment.ts
@ -1,27 +0,0 @@
-import container from 'markdown-it-container'
-import type Token from 'markdown-it/lib/token'
-
-type ContainerArgs = [
-  typeof container, string,
-  { render(tokens: Token[], idx: number): string }
-]
-
-export default function createContainer(
-  klass: string,
-  defaultTitle: string
-): ContainerArgs {
-  return [
-    container,
-    klass,
-    {
-      render(tokens, idx) {
-        const token = tokens[idx]
-        if (token.nesting === 1) {
-          return `<lay-comment>`
-        } else {
-          return '</lay-comment>\n'
-        }
-      },
-    },
-  ]
-}
--- a/example/src/plugin/previous-next.ts
+++ b/example/src/plugin/previous-next.ts
@ -30,7 +30,7 @@ export default function createContainer(
          }
        });
        if (token.nesting === 1) {
-          return `<div style="display: flex; justify-content: space-between">
+          return `<div style="display: flex; justify-content: space-between; margin-top:20px;">
                <div><router-link to="${
                  menusChild[prevIndex]?.path
                }" class="lay-link" style="display: ${
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@ -4,7 +4,7 @@
      <div class="site-banner-main">
        <div class="site-zfj site-zfj-anim">
          <img
-            src="../assets/logo.jpg"
+            src="../assets/logo-png.png"
            style="width: 220px; border-radius: 10px"
          />
        </div>
@ -20,14 +20,7 @@
          >
        </div>
        <div class="site-version">
-          <span>{{ t('home.version') }}：v<cite class="site-showv">0.4.4</cite></span>
-          <span
-            ><router-link
-              class="layui-inline site-down"
-              to="/zh-CN/guide/changelog"
-              >{{ t('home.changelog') }}</router-link
-            ></span
-          >
+          <span>{{ t('home.version') }}：<cite class="site-showv">0.4.4</cite></span>
          <span>{{ t('home.download') }}：<em class="site-showdowns">5463</em></span>
        </div>
      </div>
@ -121,18 +114,27 @@ export default {
 }
 </script>
 <style>
+#app,
+html,
+body {
+  height: 100%;
+}
+
 .site-container {
+  background: #fff;
  margin-top: 60px;
-  background-color: whitesmoke;
  height: 100%;
  width: 100%;
 }
 .site-banner {
+  border-bottom: 1px solid #eee;
  position: relative;
-  height: 600px;
+  height: 100%;
  text-align: center;
  overflow: hidden;
-  background-color: #393d49;
+  background-image: url(../assets/background.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
 }
 .site-banner-bg {
  background-position: center 0;
@ -155,17 +157,15 @@ export default {
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
-  border: 1px solid #c2c2c2;
-  border-color: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(60, 60, 60, .7);
  font-size: 24px;
-  color: #ccc;
+  color: rgba(60, 60, 60, .7);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
 }
 .site-download a:hover {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
-  color: #ccc;
 }
 .site-zfj {
  padding-top: 25px;
@ -200,7 +200,7 @@ export default {
 }
 .site-desc .web-font-desc {
  color: #fff;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(60, 60, 60, .7);
  font-size: 51px;
 }
 .web-font-desc {
@ -212,14 +212,13 @@ export default {
  bottom: -40px;
  left: 0;
  width: 100%;
-  color: #c2c2c2;
-  color: rgba(255, 255, 255, 0.66);
+  color: rgba(60, 60, 60, .7);
  font-style: normal;
 }
 .site-version {
  position: relative;
  margin-top: 18px;
-  color: #ccc;
+  color: rgba(60, 60, 60, .7);
  font-size: 12px;
 }
 .site-version span {
@ -229,7 +228,7 @@ export default {
  font-style: normal;
 }
 .site-version a {
-  color: #e2e2e2;
+  color: rgba(60, 60, 60, .7);
  text-decoration: none;
  margin-top: -4px;
 }
@ -249,10 +248,8 @@ export default {
  margin: 0 6px;
  padding: 0 8px;
  border-radius: 4px;
-  color: #c2c2c2;
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid #c2c2c2;
-  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(60, 60, 60, .7);
+  border: 1px solid rgba(60, 60, 60, .7);
  font-size: 14px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
--- a/example/src/view/material.vue
+++ b/example/src/view/material.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="alone-banner layui-bg-black">
+  <div class="alone-banner">
    <div class="layui-main">
      <h1>物 料 市 场</h1>
      <p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>
--- a/src/theme/index.less
+++ b/src/theme/index.less
@ -276,7 +276,6 @@ a cite {
  text-align: center;
  color: @global-primary-color;
  font-size: 16px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
 }

 .layui-layout-left {