更改属性样式

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -7,6 +7,7 @@ import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import { PageMusic } from "./PageMusic";
 import { Select } from "ant-design-vue";
 import { MusicOptions } from "./localMusic";
+import { css } from "@linaria/core";
 const styleColumns = (muisc?: string): ColumnItem[] => {
   return [
     {
@@ -56,15 +57,21 @@ export const PageForm = defineComponent({
       });
 
       return (
-        <>
-          <div>页面样式</div>
+        <div class={formStyle}>
+          <div class="text-white">页面样式</div>
           <FormUI
             data={props.component}
             columns={styleColumns(curValue?.value || "")}
             onChange={changeVal}
           />
-        </>
+        </div>
       );
     };
   },
 });
+
+const formStyle = css`
+  .item_label {
+    color: #A9ABAF !important;
+  }
+`

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -8,6 +8,7 @@ import Slider from "../formItems/Slider";
 import { createColorOpts } from "./formOpts/createColorOpts";
 import { Divider } from "ant-design-vue";
 import Align from "./align";
+import { css } from "@linaria/core";
 
 export const layoutColumns: ColumnItem[] = [
   {
@@ -86,19 +87,6 @@ export const layoutColumns: ColumnItem[] = [
   //     ),
   //   },
   // },
-  {
-    label: "透明度",
-    dataIndex: "layout.opacity",
-    component: Slider,
-    isVisible: (value, data) =>
-      ["Web3D", "Video"].includes(data.compKey) ? false : true,
-    props: {
-      defaultValue: 1,
-      min: 0,
-      max: 1,
-      step: 0.01,
-    },
-  },
   {
     label: "锁定",
     dataIndex: "layout.locked",
@@ -159,6 +147,19 @@ export const bgColumns: ColumnItem[] = [
     dataIndex: "layout.background.color",
     ...createColorOpts(),
   },
+  {
+    label: "透明度",
+    dataIndex: "layout.opacity",
+    component: Slider,
+    isVisible: (value, data) =>
+      ["Web3D", "Video"].includes(data.compKey) ? false : true,
+    props: {
+      defaultValue: 1,
+      min: 0,
+      max: 1,
+      step: 0.01,
+    },
+  },
   // {
   //   label: "背景图片",
   //   dataIndex: "background.image",
@@ -230,10 +231,10 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
       return () => {
         const { component } = props;
         return (
-          <div>
+          <div class={formStyle}>
             {valueColumns.length ? (
               <>
-                <div>属性</div>
+                <div> <span class="text-white">属性</span></div>
                 <FormUI
                   data={component}
                   columns={valueColumns}
@@ -243,16 +244,17 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
               </>
             ) : null}
             {columnsUI && <columnsUI component={component} />}
-            <div>布局</div>
+            <div><span class="text-white">布局</span></div>
             <FormUI
               data={component}
               columns={layoutColumns}
+              style={{color: "red"}}
               onChange={changeVal}
             />
             {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
               <>
                 <Divider></Divider>
-                <div>背景</div>
+                <div> <span class="text-white">背景</span> </div>
                 <FormUI
                   data={component}
                   columns={bgColumns}
@@ -263,7 +265,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
             {["Text", "Image", "Map"].includes(component.compKey) ? (
               <>
                 <Divider></Divider>
-                <div>边框</div>
+                <div><span class="text-white">边框</span></div>
                 <FormUI
                   data={component}
                   columns={bdColumns}
@@ -277,3 +279,10 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
     },
   });
 }
+
+const formStyle = css`
+
+  .item_label {
+    color: #A9ABAF !important;
+  }
+`