|
|
@@ -88,6 +88,102 @@ const useGridExampleStyles = makeStyles({
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+const appDatas = [
|
|
|
+ { title: "Microsoft 365", img: m365 },
|
|
|
+ { title: "OutLook", img: outlook },
|
|
|
+ { title: "OneDrice", img: oneDrice },
|
|
|
+ { title: "Word", img: word },
|
|
|
+ { title: "Excel", img: excel },
|
|
|
+ { title: "PowerPoint", img: ppt },
|
|
|
+ { title: "OneNote", img: oneNote },
|
|
|
+ { title: "SharePoint", img: sps },
|
|
|
+ { title: "Teams", img: teams },
|
|
|
+ { title: "Visio", img: vi },
|
|
|
+ { title: "Engaga", img: engaga },
|
|
|
+ { title: "PA", img: pa },
|
|
|
+ { title: "更多", img: gd },
|
|
|
+]
|
|
|
+
|
|
|
+const App = (data)=>{
|
|
|
+ return (
|
|
|
+ <div className="zl-365-article">
|
|
|
+ <button
|
|
|
+ title={data.title}
|
|
|
+ aria-label={data.title+" 将在新选项卡中打开"}
|
|
|
+ >
|
|
|
+ <div style={{ width: "100%" }}>
|
|
|
+ <img
|
|
|
+ src={data.img}
|
|
|
+ style={{
|
|
|
+ width: "32px",
|
|
|
+ height: "40px",
|
|
|
+ display: "inline-block",
|
|
|
+ }}
|
|
|
+ alt={data.title}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style={{ width: "100%" }}>
|
|
|
+ <span>{data.title}</span>
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+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"}
|
|
|
+]
|
|
|
+
|
|
|
+const Doc = (data) => {
|
|
|
+ return (
|
|
|
+ <div className="intentTileWrapper">
|
|
|
+ <button
|
|
|
+ className="intentTile-button"
|
|
|
+ aria-label={data.title+" 将在新选项卡中打开"}
|
|
|
+ >
|
|
|
+ <div className="intentTile-icon-content">
|
|
|
+ <div className="intentTile-icon1">
|
|
|
+ <img
|
|
|
+ src={data.img1}
|
|
|
+ style={{
|
|
|
+ width: "32px",
|
|
|
+ height: "44px",
|
|
|
+ display: "inline-block",
|
|
|
+ }}
|
|
|
+ alt={data.title}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ data.img2 == null
|
|
|
+ ? null
|
|
|
+ :
|
|
|
+ (
|
|
|
+ <div className="intentTile-icon2">
|
|
|
+ <img
|
|
|
+ src={data.img2}
|
|
|
+ style={{
|
|
|
+ display: "inline-block",
|
|
|
+ }}
|
|
|
+ alt={data.title}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className="intentTile-text">
|
|
|
+ <span>{data.title}</span>
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
const PositionedComponent = (props) => {
|
|
|
const { positioning, targetContent = "Click me", targetClassName } = props;
|
|
|
@@ -141,423 +237,14 @@ 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 className="zl-365-article">
|
|
|
- <button
|
|
|
- title="Microsoft 365"
|
|
|
- aria-label="Microsoft 365 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={m365}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Microsoft 365"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Microsoft 365</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="OutLook" aria-label="OutLook 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={outlook}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Outlook"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Outlook</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="OneDrice" aria-label="OneDrice 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={oneDrice}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="OneDrice"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>OneDrice</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="Word" aria-label="Word 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={word}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Word"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Word</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="Excel" aria-label="Excel 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={excel}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Excel"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Excel</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button
|
|
|
- title="PowerPoint"
|
|
|
- aria-label="PowerPoint 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={ppt}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="PowerPoint"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>PowerPoint</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="OneNote" aria-label="OneNote 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={oneNote}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="OneNote"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>OneNote</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button
|
|
|
- title="SharePoint"
|
|
|
- aria-label="SharePoint 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={sps}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="SharePoint"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>SharePoint</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="SharePoint" aria-label="Teams 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={teams}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Teams"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Teams</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="Viva" aria-label="Viva 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={vi}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Viva"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Viva</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="Engaga" aria-label="Engaga 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={engaga}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="Engaga"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>Viva</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button
|
|
|
- title="PowerAutomate"
|
|
|
- aria-label="PowerAutomate 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={pa}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="PowerAutomate"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%", display: "grid" }}>
|
|
|
- <span>Power</span>
|
|
|
- <span>Automate</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="zl-365-article">
|
|
|
- <button title="更多应用" aria-label="更多应用 将在新选项卡中打开">
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <img
|
|
|
- src={gd}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "40px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="更多应用"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{ width: "100%" }}>
|
|
|
- <span>更多应用</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ <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 className="intentTileWrapper">
|
|
|
- <button
|
|
|
- className="intentTile-button"
|
|
|
- aria-label="文档 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div className="intentTile-icon-content">
|
|
|
- <div className="intentTile-icon1">
|
|
|
- <img
|
|
|
- src={wd1}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "44px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="文档"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="intentTile-icon2">
|
|
|
- <img
|
|
|
- src={wd2}
|
|
|
- style={{
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="文档"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="intentTile-text">
|
|
|
- <span>文档</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="intentTileWrapper">
|
|
|
- <button
|
|
|
- className="intentTile-button"
|
|
|
- aria-label="工作簿 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div className="intentTile-icon-content">
|
|
|
- <div className="intentTile-icon1">
|
|
|
- <img
|
|
|
- src={gzp1}
|
|
|
- style={{
|
|
|
- width: "55.8px",
|
|
|
- height: "44px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="工作簿"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="intentTile-icon2">
|
|
|
- <img
|
|
|
- src={gzp2}
|
|
|
- style={{
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="工作簿"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="intentTile-text">
|
|
|
- <span>工作簿</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="intentTileWrapper">
|
|
|
- <button
|
|
|
- className="intentTile-button"
|
|
|
- aria-label="演示文稿 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div className="intentTile-icon-content">
|
|
|
- <div className="intentTile-icon1">
|
|
|
- <img
|
|
|
- src={yswd1}
|
|
|
- style={{
|
|
|
- width: "66.6px",
|
|
|
- height: "44px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="演示文稿"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="intentTile-icon2">
|
|
|
- <img
|
|
|
- src={yswd2}
|
|
|
- style={{
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="演示文稿"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="intentTile-text">
|
|
|
- <span>演示文稿</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="intentTileWrapper">
|
|
|
- <button
|
|
|
- className="intentTile-button"
|
|
|
- aria-label="调查 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div className="intentTile-icon-content">
|
|
|
- <div className="intentTile-icon1">
|
|
|
- <img
|
|
|
- src={dc1}
|
|
|
- style={{
|
|
|
- width: "39px",
|
|
|
- height: "44px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="调查"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="intentTile-icon2">
|
|
|
- <img
|
|
|
- src={dc2}
|
|
|
- style={{
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="调查"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="intentTile-text">
|
|
|
- <span>调查</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div className="intentTileWrapper">
|
|
|
- <button
|
|
|
- className="intentTile-button"
|
|
|
- aria-label="创建更多 将在新选项卡中打开"
|
|
|
- >
|
|
|
- <div className="intentTile-icon-content">
|
|
|
- <div className="intentTile-icon1" style={{ width: "88px", height: "76px", display: "contents" }}>
|
|
|
- <img
|
|
|
- src={cjgd}
|
|
|
- style={{
|
|
|
- width: "32px",
|
|
|
- height: "32px",
|
|
|
- display: "inline-block",
|
|
|
- }}
|
|
|
- alt="创建更多"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="intentTile-text">
|
|
|
- <span>创建更多</span>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ <div style={{width: "480px", height: "145px",flex: "0 0 100%",display: "flex",flexWrap: "wrap"}}>
|
|
|
+ {docList.map((data) => <Doc key={data.title} {...data} />)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</PopoverSurface>
|
唐渝林