💄 美化样式

src/assets/themes/dark.css

@@ -16,6 +16,8 @@ html.dark {
   /* box bg */
   --common-bg-1: #3d424b; /* 一级背景色 */
   --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
+  --common-bg-2: #3b3d3b; /* button 背景色 */
+  --common-bgt-2: #faf7e8; /* button 背景色对应的文本色 */
 
   /* text */
   --common-text-title: var(--common-color-white); /* title */

src/assets/themes/default.css

@@ -16,6 +16,8 @@ html.default {
   /* box bg */
   --common-bg-1: #faf7e8; /* 一级背景色 */
   --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
+  --common-bg-2: #fec90b; /* button 背景色 */
+  --common-bgt-2: #393b40; /* button 背景色对应的文本色 */
 
   --common-text-title: #393b40; /* title */
   --common-text-content: var(--common-color-blue-2); /* text */

src/components/main/t-calendar.vue

@@ -10,10 +10,7 @@
         <v-btn
           v-for="text of btnText"
           :key="text.week"
-          class="calendar-title-btn"
-          :style="{
-            border: btnNow === text.week ? '2px solid var(--common-color-yellow)' : 'none',
-          }"
+          :class="btnNow === text.week ? 'calendar-btn-selected' : 'calendar-btn'"
           @click="getContents(text.week)"
         >
           {{ text.text }}
@@ -166,7 +163,6 @@ function getContents(day: number): void {
   justify-content: start;
   column-gap: 2rem;
   padding-bottom: 5px;
-  border-bottom: 2px solid var(--common-shadow-4);
 }
 
 .calendar-title-left {
@@ -183,12 +179,18 @@ function getContents(day: number): void {
   column-gap: 15px;
 }
 
-.calendar-title-btn {
+.calendar-btn {
   background: var(--common-bg-1);
   color: var(--common-bgt-1);
   border-radius: 5px;
 }
 
+.calendar-btn-selected {
+  background: var(--common-bg-2);
+  color: var(--common-bgt-2);
+  border-radius: 5px;
+}
+
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));