💄 样式微调

src/assets/themes/dark.css

@@ -9,6 +9,8 @@
 html.dark {
   --common-bg: rgb(255 255 255 / 10%);
   --common-bg-2: rgb(255 255 255 / 20%);
+  --common-bg-4: rgb(255 255 255 / 40%);
+  --common-bg-8: rgb(255 255 255 / 80%);
 
   --sidebar-bg: #1e1e1e;
   --sidebar-icon: #e1e1e1;

src/assets/themes/default.css

@@ -9,6 +9,8 @@
 html.default {
   --common-bg: rgb(0 0 0 / 10%);
   --common-bg-2: rgb(0 0 0 / 20%);
+  --common-bg-4: rgb(0 0 0 / 40%);
+  --common-bg-8: rgb(0 0 0 / 80%);
 
   --sidebar-bg: #485466;
   --sidebar-icon: #ece5d8;

src/components/userRecord/tur-world-sub.vue

@@ -34,6 +34,7 @@
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
+// tauri
 import { event } from "@tauri-apps/api";
 
 interface TurWorldSubProps {
@@ -62,7 +63,7 @@ async function listenOnTheme () {
 </script>
 <style lang="css" scoped>
 .tur-ws-box {
-  padding: 5px;
+  padding: 10px;
   border-radius: 5px;
   display: flex;
   justify-content: center;
@@ -82,7 +83,7 @@ async function listenOnTheme () {
 }
 
 .tur-ws-content {
-  color: #faf7e8;
+  color: var(--common-color-white);
   text-shadow: 0 0 5px rgb(0 0 0 / 20%);
   width: calc(100% - 60px);
   height: 100%;
@@ -91,7 +92,7 @@ async function listenOnTheme () {
 .tur-ws-title {
   font-family: var(--font-title);
   font-size: 20px;
-  margin-bottom: 5px;
+  border-bottom: 1px inset var(--common-color-white);
 }
 
 .tur-ws-sub {

src/pages/User/Record.vue

@@ -100,7 +100,7 @@ function getTitle () {
   width: 100%;
   border-radius: 5px;
   padding: 10px;
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
+  box-shadow: 0 0 10px var(--common-bg-4);
 }
 
 .ur-top {