💄 战绩页面样式优化

src/assets/index.css

@@ -15,6 +15,11 @@
     --font-title: "JetBrians mono Bold", "Genshin", serif;
     /* color */
     --common-color-white: #faf7e8;
+    --common-color-black: #333333;
+    --common-color-blue: #485466;
+    --common-color-blue-2: #546d8b;
+    --common-color-blue-3: #5b738f;
+    --common-color-yellow: #fec90b;
 }
 
 html {

src/assets/themes/dark.css

@@ -12,6 +12,9 @@ html.dark {
   --common-bg-4: rgb(255 255 255 / 40%);
   --common-bg-8: rgb(255 255 255 / 80%);
 
+  --common-text: var(--common-color-white);
+  --common-text-2: var(--common-color-white);
+
   --sidebar-bg: #1e1e1e;
   --sidebar-icon: #e1e1e1;
   --page-bg:#2a2a2a;

src/assets/themes/default.css

@@ -12,6 +12,9 @@ html.default {
   --common-bg-4: rgb(0 0 0 / 40%);
   --common-bg-8: rgb(0 0 0 / 80%);
 
+  --common-text:  var(--common-color-blue);
+  --common-text-2: var(--common-color-blue-2);
+
   --sidebar-bg: #485466;
   --sidebar-icon: #ece5d8;
   --page-bg:#ece5d8;

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

@@ -92,7 +92,7 @@ onMounted(async () => {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  background: rgb(0 0 0 / 20%);
+  background: rgb(0 0 0 / 40%);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   text-align: center;
@@ -101,12 +101,11 @@ onMounted(async () => {
 
 .tur-hs-text :nth-child(1) {
   font-family: var(--font-text);
-  text-shadow: #fec90b 0 0 5px;
+  color: var(--common-color-yellow);
 }
 
 .tur-hs-text :nth-child(2) {
   font-family: var(--font-title);
   font-size: 16px;
-  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
 }
 </style>

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

@@ -36,14 +36,18 @@ defineProps<TAOProps>();
 .tur-os-title {
   font-family: var(--font-title);
   font-size: 20px;
-  color: var(--common-color-white);
-  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
+  color: var(--common-text-2);
 }
 
 .tur-os-text {
   font-family: var(--font-text);
   font-size: 20px;
   color: var(--common-color-white);
-  text-shadow: #fec90b 0 0 5px;
+  text-shadow: 0 0 10px var(--common-color-yellow);
+}
+
+.dark .tur-os-text {
+  color: var(--common-color-yellow);
+  text-shadow: none;
 }
 </style>

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

@@ -2,9 +2,9 @@
   <div
     class="tur-ws-box"
     :style="{
-      backgroundImage: 'url(' + getUrl.bg + ')',
+      backgroundImage: `url('${getUrl.bg}')`,
       backgroundPositionX: 'right',
-      backgroundSize: 'auto 100%',
+      backgroundSize: 'cover',
       backgroundRepeat: 'no-repeat'
     }"
   >
@@ -35,6 +35,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+
 // vue
 import { onMounted, ref } from "vue";
 // tauri
@@ -102,8 +103,7 @@ async function listenOnTheme () {
 }
 
 .tur-ws-content {
-  color: var(--common-color-white);
-  text-shadow: 0 0 5px rgb(0 0 0 / 20%);
+  color: var(--common-text-2);
   width: calc(100% - 60px);
   height: 100%;
 }
@@ -111,7 +111,7 @@ async function listenOnTheme () {
 .tur-ws-title {
   font-family: var(--font-title);
   font-size: 20px;
-  border-bottom: 1px inset var(--common-color-white);
+  border-bottom: 1px inset var(--common-text-2);
 }
 
 .tur-ws-sub {
@@ -129,6 +129,12 @@ async function listenOnTheme () {
 }
 
 .tur-ws-sub :nth-last-child(2) {
-  text-shadow: #fec90b 0 0 5px;
+  color: var(--common-color-white);
+  text-shadow: 0 0 10px var(--common-color-yellow);
+}
+
+.dark .tur-ws-sub :nth-last-child(2) {
+  color: var(--common-color-yellow);
+  text-shadow: none;
 }
 </style>

src/pages/User/Record.vue

@@ -161,8 +161,7 @@ function getTheme () {
   font-family: var(--font-title);
   font-size: 20px;
   margin-right: 10px;
-  color: var(--common-color-white);
-  text-shadow: 0 0 10px rgb(0 0 0 / 60%);
+  color: var(--common-text);
 }
 
 .ur-top-btn {
@@ -170,7 +169,6 @@ function getTheme () {
   border-radius: 5px;
   background: var(--common-bg-2);
   color: var(--common-color-white);
-  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
   margin-left: 15px;
 }