换肤

src/component/hedaer/index.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import eventBus from '../../bus';
 import "./index.css";
 import {
     makeStyles,
@@ -187,12 +188,12 @@ const appDatas = [
     { title: "更多", img: gd },
 ]
 
-const App = (data)=>{
+const App = (data) => {
     return (
         <div className="zl-365-article">
             <button
                 title={data.title}
-                aria-label={data.title+" 将在新选项卡中打开"}
+                aria-label={data.title + " 将在新选项卡中打开"}
             >
                 <div style={{ width: "100%" }}>
                     <img
@@ -215,19 +216,19 @@ const App = (data)=>{
 
 
 const docList = [
-    { title: "文档", img1: wd1,img2:wd2,width: "32px", height: "48px" },
-    { title:"工作簿",img1:gzp1,img2:gzp2,width: "55.8px", height: "44px"},
-    { title:"演示文稿",img1:yswd1,img2:yswd2,width: "66.6px", height: "44px"},
-    { title:"调查",img1:dc1,img2:dc2,width: "39px", height: "44px"},
-    { title:"创建更多",img1:cjgd,img2:null,width: "32px", height: "32px"}
+    { title: "文档", img1: wd1, img2: wd2, width: "32px", height: "48px" },
+    { title: "工作簿", img1: gzp1, img2: gzp2, width: "55.8px", height: "44px" },
+    { title: "演示文稿", img1: yswd1, img2: yswd2, width: "66.6px", height: "44px" },
+    { title: "调查", img1: dc1, img2: dc2, width: "39px", height: "44px" },
+    { title: "创建更多", img1: cjgd, img2: null, width: "32px", height: "32px" }
 ]
 
 const Doc = (data) => {
     return (
-         <div className="intentTileWrapper">
+        <div className="intentTileWrapper">
             <button
                 className="intentTile-button"
-                aria-label={data.title+" 将在新选项卡中打开"}
+                aria-label={data.title + " 将在新选项卡中打开"}
             >
                 <div className="intentTile-icon-content">
                     <div className="intentTile-icon1">
@@ -257,7 +258,7 @@ const Doc = (data) => {
                                 </div>
                             )
                     }
-                    
+
                 </div>
                 <div className="intentTile-text">
                     <span>{data.title}</span>
@@ -320,13 +321,13 @@ const PositionedComponent = (props) => {
                     </div>
                 </div>
                 <div style={{ width: "480px", height: "409px" }}>
-                    <div style={{flex: "0 0 100%",height: "264px",display: "flex",flexWrap: "wrap",marginTop: "8px"}}>
+                    <div style={{ flex: "0 0 100%", height: "264px", display: "flex", flexWrap: "wrap", marginTop: "8px" }}>
                         {appDatas.map((data) => <App key={data.title} {...data} />)}
                     </div>
                     <div className="custom-div">
                         <hr className="custom-hr" />
                     </div>
-                    <div style={{width: "480px", height: "145px",flex: "0 0 100%",display: "flex",flexWrap: "wrap"}}>
+                    <div style={{ width: "480px", height: "145px", flex: "0 0 100%", display: "flex", flexWrap: "wrap" }}>
                         {docList.map((data) => <Doc key={data.title} {...data} />)}
                     </div>
                 </div>
@@ -347,6 +348,7 @@ const IconHtml = () => {
 
 
 const ChangeTheme = (name) => {
+    eventBus.emit('themechange', ThemeData.find(m => m.name === name).config);
 }