src/component/card/index.css

@@ -1,3 +1,6 @@
 .card-height > div {
   flex-direction: row !important;
+}
+img.card-bg {
+  max-height: 200px;
 }

src/component/card/index.tsx

@@ -56,9 +56,9 @@ const CardExample = (props: CardProps) => {
   return (
     <Card className={styles.card} {...props}>
       <CardPreview>
-        <img
-          src={resolveAsset("sales_template.png")}
-          alt="Sales Presentation Preview"
+        <img className="card-bg"
+          src={("../../img/zl_bg.jpg")}
+          alt="中联背景图"
         />
       </CardPreview>
 
@@ -73,10 +73,10 @@ const CardExample = (props: CardProps) => {
         }
         header={
           <Body1>
-            <b>App Name</b>
+            <b>吴瑞强</b>
           </Body1>
         }
-        description={<Caption1>Developer</Caption1>}
+        description={<Caption1>新技术工作室</Caption1>}
         action={
           <Button
             appearance="transparent"
@@ -87,8 +87,7 @@ const CardExample = (props: CardProps) => {
       />
 
       <p className={styles.text}>
-        Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw.
-        Marshmallow pastry jujubes toffee sugar plum.
+        平时积极乐观、热爱工作、喜欢看书、回家后喜欢运动
       </p>
     </Card>
   );

src/component/form/index.tsx

@@ -105,7 +105,7 @@ export const ContentBeforeAfter = () => {
         </Field>
       </div>
       <div>
-        <label>Color</label>
+        <label>颜色</label>
         <Select>
           <option>Red</option>
           <option>Green</option>
@@ -118,7 +118,7 @@ export const ContentBeforeAfter = () => {
         </Field>
       </div>
       <div>
-        <Field label="Default Textarea">
+        <Field label="备注">
           <Textarea />
         </Field>
       </div>

src/pages/home/index.css

@@ -14,3 +14,8 @@
     display: flex;
     flex-wrap: wrap;
 }
+label.layout-title {
+    font-size: 18px;
+    font-weight: 600;
+    padding: 8px;
+}

src/pages/home/index.tsx

@@ -1,35 +1,40 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import {FocusMode as Card} from '../../component/card';
-import {ContentBeforeAfter as Form} from '../../component/form';
+import { FocusMode as Card } from "../../component/card";
+import { ContentBeforeAfter as Form } from "../../component/form";
 import List from "../listnew";
-import Tree from '../../component/tree';
+import Tree from "../../component/tree";
 
-import "./index.css"
+import "./index.css";
+import { Button, FluentProvider } from "@fluentui/react-components";
 function MyNavlink() {
-    const { t } = useTranslation();
-    return (
-        <div className="layout-main">
-            <div className="layout-row">
-                <div className="layout-col-12 card-height">
-                    <Card></Card>
-                </div>
-            </div>
-            <div className="layout-row">
-                <div className="layout-col-4 tree-height">
-                    <Tree></Tree>
-                </div>
-                <div className="layout-col-8 list-height">
-                    <List></List>
-                </div>
-            </div>
-            <div className="layout-row">
-                <div className="layout-col-12 form-height">
-                    <Form/>
-                </div>
-            </div>
+  const { t } = useTranslation();
+  return (
+    <div className="layout-main">
+      <div className="layout-row">
+        <label className="layout-col-12 layout-title">卡片组件</label>
+        <div className="layout-col-12 card-height">
+          <Card></Card>
         </div>
-    );
+      </div>
+      <div className="layout-row">
+        <label className="layout-col-4 layout-title">树形组件</label>
+        <label className="layout-col-8 layout-title">列表组件</label>
+        <div className="layout-col-4 tree-height">
+          <Tree></Tree>
+        </div>
+        <div className="layout-col-8 list-height">
+          <List></List>
+        </div>
+      </div>
+      <div className="layout-row">
+      <label className="layout-col-12 layout-title">表单组件</label>
+        <div className="layout-col-12 form-height">
+          <Form />
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default MyNavlink;
+export default MyNavlink;