theme design

index.html

@@ -121,8 +121,8 @@
 		<dialog id="dialog">
 			<!-- <h2>这是弹窗内容</h2> -->
 			<router-view></router-view>
-
-			<button onclick="dialog.close()">关闭</button>
+			<hr>
+			<label class="dialog_func_" onclick="dialog.close()">关闭</label>
 		</dialog>
 
 		<img src="./media/image/book.png" width="200px" height="auto"/>

style/common.css

@@ -93,6 +93,8 @@
     --test-border:2px solid black;
     --test-border-hover:2px solid rgb(228, 20, 20);
     --production-border:2px solid black;
+    --normal-padding:3px;
+    --normal-margin:2px 5px;
 }
 html[data-theme="light"]{
     --body-background-color:#DED8D4;
@@ -102,6 +104,8 @@ html[data-theme="light"]{
     --a-hover-color:rgba(71, 220, 71, 0.133);
     --a-active-color:#862930; 
     --a-visited-color:#862930;
+    --test-border:2px solid #862930;
+    --test-border-hover:2px solid #DED8D4;
 }
 html[data-theme="dark"]{
     --body-background-color:#121929;
@@ -111,6 +115,8 @@ html[data-theme="dark"]{
     --a-hover-color:#862930;
     --a-active-color:#DED8D4;
     --a-visited-color:#DED8D4;
+    --test-border:2px solid #DED8D4;
+    --test-border-hover:2px solid #862930;
 }
 body{
     /* width:var(--body-width-default); */

style/index.css

@@ -19,16 +19,6 @@ div span a:active{
     color:var(--a-active-color);
 }
 
-dialog{
-    width: var(--plate-size-default);
-    border-radius: 15px;
-
-}
-dialog::backdrop{
-    /* background-color: #121929; */
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-}
 .approve{
     color:var(--a-color);
     /* background-color:var(--a-color); */
@@ -46,3 +36,29 @@ dialog::backdrop{
     background-color:var(--a-hover-color);
 }
 
+dialog{
+    width: var(--plate-size-default);
+    border-radius: 15px;
+    position: relative;
+
+}
+dialog::backdrop{
+    /* background-color: #121929; */
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+}
+.dialog_func_{
+    font-size: var(--font-size);
+    line-height: var(--font-size);
+    padding: var(--normal-padding);
+    z-index: 10;
+    position: absolute;
+    right: 2%;
+    top:2%;
+    color: var(--font-color);
+    border:var(--test-border);
+}
+.dialog_func_:hover{
+    color: var(--a-hover-color);
+    border:var(--test-border-hover);
+}