<!-- source: https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/repository/b7c818b1-9132-46a7-bfaf-78fc6747791a/doc/264919233077444608 -->

一、表单搭建

目的：需要展示成通用规范样式的表单的文档 粘贴对应css即可生效

  通用展示效果 [http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/zms/biaodan-morenmuban/#s0](http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/zms/biaodan-morenmuban/#s0)

建议：

   存在**分组区域**的表单搭建一定要外部套容器，便于添加边框区分区域

   有分组区域效果

![image.png](../_assets/264919233077444608/001-ad1c4327fb.png)

布局建议：

  标题文本

  容器 里面加 内容字段

  同组内容字段布局：

         如果是一行两列布局

         使用一行两列组件

如果是单行通铺就直接拖入

      无分组同理一行两列，无标题

表单左对齐配置（选中对应字段，设置对齐方式为左对齐）

![image.png](../_assets/264919233077444608/002-222f941751.png)

**具体操作如下 **

- 分组标题

    建议： 使用文本组件

 一行两列演示如下

粘贴分组表单css代码块，并拖拽上述组件

![recording.gif](../_assets/264919233077444608/003-17debbdf9e.gif)

单行演示如下（单行暂不处理 2024/10/22 18:07:33）

![image.png](../_assets/264919233077444608/004-4b22e742d5.png)

粘贴不含分组表单CSS即可

![recording.gif](../_assets/264919233077444608/005-64868ee70f.gif)

代码如下：

放置位置 粘贴在表单设计器 \> css里面

含分组表单css代码块：

```css
/* 区域标题样式 */
.ebcom-simpletext {
  display: flex;
  align-items: center;
  padding: var(--ebproject-form-group-title-padding);
}

.ebcom-simpletext::before {
  content: '';
  width: 3px;
  position: relative;
  background-color: var(--ebproject-form-group-title-line-color);
  height: var(--ebproject-form-group-title-line-height);
  display: block;
  margin-right: 10px;
}

.ebcom-simpletext>p {
  color: var(--ebproject-form-group-title-color);
  font-weight: bold;
  font-size: var(--font-size-14);
  line-height: calc(var(--font-size-14) + 8px);
  letter-spacing: 0px;
  text-align: left;
}

/* 表格区域样式 */
.ebcom-simpletext~.ebcom-container {
  margin: var(--ebproject-form-margin);
  border: var(--ebproject-form-group-border);
}

.ebcom-simpletext~.ebcom-container .weapp-form-widget-divider~.weapp-form-widget-divider {
  border-color: var(--ebproject-form-border-color);
}

.ebcom-simpletext~.ebcom-container .weapp-form-widget {
  padding: 0;
  min-height: var(--ebproject-form-line-height);
  height: 100%;
}
.ebcom-simpletext~.ebcom-container .weapp-form-widget-content-container {
  display: flex;
  align-items: center;
  height: 100%;
}
.ebcom-simpletext~.ebcom-container .weapp-form-widget-content {
  padding: 0 12px;
}

.ebcom-simpletext~.ebcom-container .weapp-form-widget-title {
  background: var(--ebproject-form-title-bg);
  align-items: flex-start;
  padding: 10px;
  border-right: var(--ebproject-form-group-border);
  width: var(--ebproject-form-title-width);
  justify-content: flex-start;
  color: var(--ebproject-form-group-title-color);
  text-align: left;
}

.ebcom-simpletext~.ebcom-container .weapp-form-column-content>.ebcom {
  height: 100%;
}

.ebcom-simpletext~.ebcom-container .weapp-form-column, .weapp-formbuilder-form .weapp-form-column { 
  min-height: var(--ebproject-form-line-height);
}
.ebcom-container:last-child {
  margin-bottom: var(--spacing-md);
}
.ebcom-container ~ .ebcom-simpletext {
  margin-top: 24px;
}

/* 如果有进度条组件，需要额外粘贴 */
.ebcom-simpletext~.ebcom-container .weapp-form-progress-bar-wrapper {
  width: 100%;
}
```

不含分组表单CSS代码块：

```css
/* 适用于无分组表单样式 */
/* 表单整体边距边框 */
{
  padding: var(--spacing-md);
}
.ebdpage-content {
  border: var(--ebproject-form-group-border);
}
/* 分割线 */
.weapp-form-widget-divider~.weapp-form-widget-divider {
  border-color: var(--ebproject-form-border-color);
}
/* 字段 */
.weapp-form-widget {
  padding: 0;
  min-height: var(--ebproject-form-line-height);
  height: 100%;
}
.weapp-form-widget-content-container {
  display: flex;
  align-items: center;
  height: 100%;
}
.weapp-form-column-content>.ebcom {
  height: 100%;
}
.weapp-form-column { 
  min-height: var(--ebproject-form-line-height);
}
/* 字段标题 */
.weapp-form-widget-title {
  background: var(--ebproject-form-title-bg);
  align-items: flex-start;
  padding: 10px;
  border-right: var(--ebproject-form-group-border);
  width: var(--ebproject-form-title-width);
  justify-content: flex-start;
  color: var(--ebproject-form-group-title-color);
}
.weapp-form-widget-content {
  padding: 0 12px;
}
```

前端变量内容

```css
/* 表单分组标题字体颜色 */
--ebproject-form-group-title-color: #111111;
/* 表单分组标题线颜色 */
--ebproject-form-group-title-line-color: var(--primary);
/* 表单分组标题线高度 */
--ebproject-form-group-title-line-height: calc(var(--font-size-18) + 2px);
/* 表单分组标题边距 */
--ebproject-form-group-title-padding: 8px 16px;
/* 表单分组外边距 */
--ebproject-form-margin: 16px;
/* 表单最小行高 */
--ebproject-form-line-height: 40px;
/* 表单标题内容宽度 */
--ebproject-form-title-width: 150px;
/* 内容区域标题背景色 */
--ebproject-form-title-bg:#F0F1F4; 
/* 内容区域标题字体颜色 */
--ebproject-form-title-font-color: #111111;
/* 内容区域字体颜色 */
--ebproject-form-content-font-color: #111111;
/* 表单字段边框色 */
--ebproject-form-border-color: #E2E2E2;
/* 表单字段边框线 */
--ebproject-form-group-border: 1px solid var(--ebproject-form-border-color);
```
