♻️ confirm 组件样式调整

src/assets/index.css

@@ -49,7 +49,8 @@
   --tgc-blue-3: #4b5466; /* Genshin icon bg */
   --tgc-green-1: #238636; /* Github web btn */
   --tgc-pink-1: #fb7299; /* Bilibili btn bg */
-  --tgc-yellow: #ffcd0c; /* Genshin btn bg */
+  --tgc-yellow-1: #ffcd0c; /* Genshin btn bg */
+  --tgc-yellow-2: #f4d8a8; /* Genshin confirm text */
 }
 
 html {

src/assets/themes/dark.css

@@ -17,12 +17,17 @@ html.dark {
   --box-bg-1: var(--tgc-dark-5);
   --box-bg-2: var(--tgc-dark-6);
   --box-bg-3: var(--tgc-dark-7);
+  --box-bg-4: var(--tgc-dark-7);
+
+  /* box bg transparent */
+  --box-bg-t-4: var(--tgc-white-1);
 
   /* text */
   --box-text-1: var(--tgc-white-1);
   --box-text-2: var(--tgc-white-2);
   --box-text-3: var(--tgc-blue-1);
   --box-text-4: var(--tgc-white-8);
+  --box-text-5: var(--tgc-yellow-1);
 
   /* box-shadow */
   --common-shadow-1: rgb(255 255 255 / 10%);

src/assets/themes/default.css

@@ -17,12 +17,17 @@ html.default {
   --box-bg-1: var(--tgc-white-3);
   --box-bg-2: var(--tgc-white-7);
   --box-bg-3: var(--tgc-white-9);
+  --box-bg-4: var(--tgc-white-1);
+
+  /* box bg transparent */
+  --box-bg-t-4: var(--tgc-dark-7);
 
   /* box text */
   --box-text-1: var(--tgc-dark-5);
   --box-text-2: var(--tgc-dark-2);
   --box-text-3: var(--tgc-blue-2);
   --box-text-4: var(--tgc-blue-3);
+  --box-text-5: var(--tgc-yellow-2);
 
   /* box-shadow */
   --common-shadow-1: rgb(0 0 0 / 10%);

src/components/func/confirm.vue

@@ -16,13 +16,15 @@
             <input v-model="inputVal" class="confirm-input-box" />
           </div>
           <div class="confirm-btn-box">
-            <button class="confirm-btn" @click="handleClick(false)">
+            <button class="confirm-btn" @click="handleClick(false)">取消</button>
-              <img class="btn-icon" src="../../assets/icons/circle-cancel.svg" alt="cancel" />
+            <button
-              <span class="btn-text"> 取消 </span>
+              class="confirm-btn"
-            </button>
+              :style="{
-            <button class="confirm-btn" @click="handleClick(true)">
+                backgroundColor: 'var(--box-bg-t-4)',
-              <img class="btn-icon" src="../../assets/icons/circle-check.svg" alt="confirm" />
+              }"
-              <span class="btn-text"> 确定 </span>
+              @click="handleClick(true)"
+            >
+              确定
             </button>
           </div>
         </div>
@@ -172,27 +174,27 @@ defineExpose({
   height: 100%;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(3px);
+  backdrop-filter: blur(10px);
-  background: rgb(0 0 0 / 50%);
+  background: var(--common-shadow-t-1);
 }
 
 .confirm-box {
   display: flex;
-  width: 40vw;
+  width: 520px;
-  height: 20vh;
+  height: 240px;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  border-radius: 10px;
+  border: 1px solid var(--common-shadow-1);
-  background: var(--content-bg-2);
+  border-radius: 5px;
-  box-shadow: 0 0 10px var(--common-shadow-2);
+  background: var(--box-bg-4);
+  color: var(--box-text-1);
 }
 
 .confirm-title {
   width: 100%;
-  border-bottom: 1px solid var(--btn-bg-2);
+  border-bottom: 1px solid var(--common-shadow-4);
-  color: var(--content-text-2);
   font-family: var(--font-title);
   font-size: 30px;
   text-align: center;
@@ -211,9 +213,8 @@ defineExpose({
   width: 100%;
   align-items: center;
   justify-content: center;
-  color: var(--content-text-2);
+  font-family: var(--font-text);
-  font-family: Genshin-Light, serif;
+  font-size: 16px;
-  font-size: 20px;
   gap: 10px;
 }
 
@@ -221,9 +222,10 @@ defineExpose({
   width: 50%;
   height: 100%;
   padding: 5px;
+  border: 1px solid var(--common-shadow-4);
   border-radius: 5px;
-  background: var(--btn-bg-3);
+  background: inherit;
-  color: var(--btn-text-1);
+  color: var(--box-text-1);
 }
 
 .confirm-btn-box {
@@ -236,25 +238,15 @@ defineExpose({
 .confirm-btn {
   position: relative;
   display: flex;
-  width: 30%;
+  width: 180px;
-  min-width: 150px;
+  height: 60px;
-  min-height: 30px;
   align-items: center;
-  border-radius: 50px;
+  justify-content: center;
-  background: var(--btn-bg-2);
+  border: 1px solid var(--common-shadow-4);
-  color: var(--btn-text-1);
+  border-radius: 5px;
-  font-family: var(--font-text);
+  color: var(--box-text-5);
-}
+  cursor: pointer;
-
+  font-family: var(--font-title);
-.btn-icon {
+  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  margin: 5px;
-}
-
-.btn-text {
-  position: absolute;
-  width: 100%;
-  text-align: center;
 }
 </style>