兼容 css3 特性

example/docs/zh-CN/components/animation.md

@@ -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>
 
 :::
 

example/docs/zh-CN/components/grid.md

@@ -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>

example/src/assets/css/markdown.css

@@ -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;
 }

example/src/layouts/Layout.vue

@@ -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,
     };