主题

src/component/hedaer/index.css

@@ -246,3 +246,39 @@ span.header-loge-input {
 .zl-365-logo-search {
     padding: 0 16px;
 }
+.zl-365-theme {
+    width: 96px;
+    display: block;
+    unicode-bidi: isolate;
+    margin: 8px 10px;
+}
+.theme-btn-name {
+    margin-top: -8px;
+}
+.zl-365-theme:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
+}
+
+.zl-365-theme>button {
+    position: relative;
+    display: flex;
+    border-radius: 6px;
+    box-sizing: border-box;
+    border: 1px solid transparent !important;
+    text-decoration: none !important;
+    background-color: transparent;
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    max-height: 100%;
+    max-width: 100%;
+    height: 100%;
+    width: 100%;
+    padding: 12px 4px 4px;
+    gap: 4px;
+    flex-direction: column;
+    outline-offset: -2px;
+}

src/component/hedaer/index.jsx

@@ -390,14 +390,14 @@ const Header = () => {
                             <div style={{ flex: "0 0 100%", height: "264px", display: "flex", flexWrap: "wrap", marginTop: "8px" }}>
                                 {
                                     Array.from(ThemeData, (item) => {
-                                        return (<div class="zl-365-article" onClick={() => {
+                                        return (<div class="zl-365-theme" onClick={() => {
                                             ChangeTheme(item.name)
                                         }}>
-                                            <button title={item.name}>
+                                            <button className="theme-btn" title={item.name}>
                                                 <div style={{ width: "100%" }}>
-                                                    <img src={item.icon} alt={item.name} style={{ width: "80px", height: "80px", "display": "inline-block" }} />
+                                                    <img src={item.icon} alt={item.name} style={{ width: "80px", "display": "inline-block" }} />
                                                 </div>
-                                                <div style={{ width: "100%" }}>
+                                                <div className="theme-btn-name" style={{ width: "100%" }}>
                                                     <span>
                                                         {item.name}
                                                     </span>