save

src/assets/css/style.scss

@@ -8,7 +8,7 @@
   --color-background: #E6E8EB;
   //--color-main-bg: #E6E8EB;
   --color-main-bg: rgb(238, 240, 244);
-  --color-second-bg: rgb(240, 242, 244);
+  --color-second-bg: rgb(247, 247, 247);
   --color-third-bg: rgb(213, 215, 217);
 
   --color-item-bg: rgb(228, 230, 232);
@@ -143,9 +143,7 @@ html, body {
   //font-size: 1px;
   padding: 0;
   margin: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  overflow-x: hidden;
   color: var(--color-font-1);
   font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
@@ -183,8 +181,8 @@ html, body {
 }
 
 #app {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  min-height: 100vh;
 }
 
 a {
@@ -217,29 +215,27 @@ a {
   }
 }
 
-::-webkit-scrollbar {
-  width: .5rem;
-  height: .6rem;
+@supports selector(::-webkit-scrollbar) {
+  ::-webkit-scrollbar {
+    width: .5rem;
+    height: .6rem;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: .1rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar);
+    border-radius: .6rem;
+  }
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: .1rem;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-scrollbar);
-  border-radius: .6rem;
-}
-
-
-/* 火狐美化滚动条 */
-* {
-  scrollbar-color: var(--color-scrollbar) #f3f4f9;
-  /* 滑块颜色  滚动条背景颜色 */
-  scrollbar-width: thin;
-  /* 滚动条宽度有三种：thin、auto、none */
-}
+//@supports (scrollbar-width: thin) {
+//  * {
+//    scrollbar-color: var(--color-scrollbar) #f3f4f9;
+//    scrollbar-width: thin;
+//  }
+//}
 
 footer {
   $footer-height: 60rem;
@@ -450,9 +446,9 @@ footer {
 
 }
 
-.text-shadow {
+.word-shadow {
   color: transparent !important;
-  text-shadow: #b0b0b0 0 0 8rem;
+  text-shadow: #b0b0b0 0 0 .5rem;
   user-select: none;
 }
 
@@ -488,4 +484,8 @@ footer {
 
 .container2 {
   @apply w-5/10 pt-5;
+}
+
+.center {
+  @apply flex justify-center items-center;
 }