Merge branch 'master' of http://787255.xyz:4003/ydm/zl365

src/component/form/index.tsx

@@ -113,8 +113,8 @@ export const ContentBeforeAfter = () => {
         </Select>
       </div>
       <div>
-        <Field label="Select a date">
-          <DatePicker placeholder="Select a date..." />
+        <Field label="出生日期">
+          <DatePicker placeholder="请选择日期..." />
         </Field>
       </div>
       <div>

src/component/hedaer/index.jsx

@@ -50,6 +50,21 @@ import 钴蓝色 from './themeData/钴蓝色.json'
 import 深黄色 from './themeData/深黄色.json'
 import 深蓝色 from './themeData/深蓝色.json'
 
+import 青色图标 from '../../img/青色.svg'
+import 蓝色图标 from '../../img/蓝色.svg'
+import 橙色图标 from '../../img/橙色.svg'
+import 红色图标 from '../../img/红色.svg'
+import 紫色图标 from '../../img/紫色.svg'
+import 绿色图标 from '../../img/绿色.svg'
+import 灰色图标 from '../../img/灰色.svg'
+import 长春花色图标 from '../../img/长春花色.svg'
+import 黑色图标 from '../../img/黑色.svg'
+import 天蓝色图标 from '../../img/天蓝色.svg'
+import 钴蓝色图标 from '../../img/钴蓝色.svg'
+import 深黄色图标 from '../../img/深黄色.svg'
+import 深蓝色图标 from '../../img/深蓝色.svg'
+
+
 import { LocalLanguage20Regular, Settings20Regular, WindowAdPerson20Filled } from '@fluentui/react-icons'
 import {
     Menu,
@@ -60,7 +75,75 @@ import {
 } from "@fluentui/react-components";
 import { useTranslation } from 'react-i18next'
 
-const ThemeData = ["青色", "蓝色", "橙色", "红色", "紫色", "绿色", "灰色", "长春花色", "黑色", "天蓝色", "钴蓝色", "深黄色", "深蓝色"]
+//"青色", "蓝色", "橙色", "红色", "紫色", "绿色", "灰色", "长春花色", "黑色", "天蓝色", "钴蓝色", "深黄色", "深蓝色"
+const ThemeData = [
+    {
+        "name": "青色",
+        "icon": 青色图标,
+        "config":青色
+    },
+    {
+        "name": "蓝色",
+        "icon": 蓝色图标,
+        "config":蓝色
+    },
+    {
+        "name": "橙色",
+        "icon": 橙色图标,
+        "config":橙色
+    },
+    {
+        "name": "红色",
+        "icon": 红色图标,
+        "config":红色
+    },
+    {
+        "name": "紫色",
+        "icon": 紫色图标,
+        "config":紫色
+    },
+    {
+        "name": "绿色",
+        "icon": 绿色图标,
+        "config":绿色
+    },
+    {
+        "name": "灰色",
+        "icon": 灰色图标,
+        "config":灰色
+    },
+    {
+        "name": "长春花色",
+        "icon": 长春花色图标,
+        "config":长春花色
+    },
+    {
+        "name": "黑色",
+        "icon": 黑色图标,
+        "config":黑色
+    },
+    {
+        "name": "天蓝色",
+        "icon": 天蓝色图标,
+        "config":天蓝色
+    },
+    {
+        "name": "钴蓝色",
+        "icon": 钴蓝色图标,
+        "config":钴蓝色
+    },
+    {
+        "name": "深黄色",
+        "icon": 深黄色图标,
+        "config":深黄色
+    },
+    {
+        "name": "深蓝色",
+        "icon": 深蓝色图标,
+        "config":深蓝色
+    }
+    
+]
 const useExampleStyles = makeStyles({
     popoverSurface: {
         width: "512px",
@@ -88,6 +171,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 +320,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>
@@ -577,7 +347,6 @@ const IconHtml = () => {
 
 
 const ChangeTheme = (name) => {
-
 }
 
 
@@ -617,10 +386,17 @@ const Header = () => {
                     <MenuPopover>
                         <MenuList>
                             {
-                                Array.from(ThemeData, (name) => {
+                                Array.from(ThemeData, (item) => {
                                     return (<MenuItem onClick={() => {
-                                        ChangeTheme(name)
-                                    }}>{name}</MenuItem>)
+                                        ChangeTheme(item.name)
+                                    }}>
+                                        <div class="theme-modal-item">
+                                            <div class="theme-modal-item-sp">
+                                                <img src={item.icon} alt="" srcset="" />
+                                            </div>
+                                            <div class="theme-modal-item-text">{item.name}</div>
+                                        </div>
+                                    </MenuItem>)
                                 })
                             }
                         </MenuList>

src/img/天蓝色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#1b72a8" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#2380ba" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#59aeeb" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#1b72a8" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/橙色.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#ca5010" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#d06228" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#df8f64" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#986f0b" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/深蓝色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#182534" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#3a96dd" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#65aee6" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#8ac2ec" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#3a96dd" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#ffffff" role="presentation">Abc</text></svg>

src/img/深黄色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#1b1a19" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#ffc83d" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ffd56c" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ffe092" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ffc83d" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#f3f2f1" role="presentation">Abc</text></svg>

src/img/灰色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#69797e" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#78888d" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#9fadb1" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#0078d4" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/紫色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#8764b8" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#9372c0" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#b29ad4" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#03787c" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/红色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#a4262c" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ae383e" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#c86c70" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ca5010" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/绿色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#498205" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#5a9117" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#85b44c" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#03787c" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/蓝色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#0078d4" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#2b88d8" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#71afe5" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#8764b8" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/钴蓝色.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#335ccc" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#476cd2" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#7b96e0" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#335ccc" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/长春花色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#fff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#6264a7" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#9092c1" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#a5a7cf" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#137ad1" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#616161" role="presentation">Abc</text></svg>

src/img/青色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#03787c" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#13898d" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#49aeb1" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#4f6bed" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/黑色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#000000" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#2f2f2f" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#373737" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ed4c67" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/pages/home/index.css

@@ -18,4 +18,25 @@ label.layout-title {
     font-size: 18px;
     font-weight: 600;
     padding: 8px;
+    position: relative;
+    background-color: var(--colorBrandBackground2Hover);
+}
+label.layout-col-4.layout-title {
+    flex: 0 0 calc(33.33333% - 8px);
+    max-width: calc(33.33333% - 8px);
+    margin-right: 8px;
+}
+.layout-col-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+label.layout-title:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--colorBrandBackground);
+    width: 4px;
+    height: 100%;
 }