diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index eee4926..facca8e 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -233,19 +233,23 @@ div:focus {
 .text-muted {
   color: #888888;
 }
+
 .text-orange {
   color: orangered;
 }
 
 .text-hotpink {
-	color: hotpink;
+  color: hotpink;
 }
+
 .text-green {
-	color: green;
+  color: green;
 }
+
 .text-greenyellow {
-	color: greenyellow;
+  color: greenyellow;
 }
+
 /* image */
 .img-circle {
   border-radius: 50%;
@@ -263,4 +267,4 @@ div:focus {
 
 .table-td-thumb {
   width: 56px;
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index b0d971e..965769a 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -17,7 +17,7 @@ $menuHover:#263445;
 // sidebar
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; 
+$subMenuActiveText:#f4f4f5;
 //https://github.com/ElemeFE/element/issues/12951
 
 $base-menu-light-color: rgba(0, 0, 0, 0.7);
@@ -37,6 +37,10 @@ $base-sidebar-width: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+/* js中import， import variables from '@/assets/styles/variables.module.scss'
+   template中使用 eg：variables.menuColor 
+*/
+
 :export {
   menuColor: $base-menu-color;
   menuLightColor: $base-menu-light-color;
@@ -53,4 +57,4 @@ $base-sidebar-width: 210px;
   dangerColor: $--color-danger;
   infoColor: $--color-info;
   warningColor: $--color-warning;
-}
+}
\ No newline at end of file