前端UI规范

颜色规范

使用方法例如：

.button {
  color: var(--color)
  background-color: var(--light-blue)
} 

行内样式使用方法例如：

<p style="color: var(--color)">行内样式颜色示例</p>

颜色示例图

代码页面

标题公共样式

使用方法例如：

<span class="jsbos-title-style">基本信息</span> 

表格状态圆点

state-style-blue 蓝色状态圆点

state-style-green 绿色状态圆点

state-style-orange 橙色状态圆点

state-style-red 红色状态圆点

state-style-purple 紫色状态圆点

state-style-grey 灰色状态圆点

使用方法例如：

<span class="state-style-blue "></span>

搜索模块规范

<div class="jsbos_search">     // 重点是 jsbos_search  
  <el-form
    @submit.native.prevent
    ref="listQuery"
    label-position="right"
    label-width="90px"
    :model="listQuery"
    size="small"
  >
    <el-form-item label="关键字" prop="title">
      <el-input
        style="width: 100%"
        v-model="listQuery.title"
        placeholder="标题、编码"
        clearable
        @keyup.enter.native="search()"
      />
    </el-form-item>
    <el-form-item label="申报人" prop="creatorUserId">
      <user-select
        :multiple="true"
        v-model="listQuery.creatorUserId"
        placeholder="请选择"
        clearable
        lastLevel
      >
      </user-select>
    </el-form-item>
    <el-form-item label="执行人" prop="executeUser">
      <user-select
        v-model="listQuery.executeUser"
        placeholder="请选择"
        clearable
      >
      </user-select>
    </el-form-item>
    <el-form-item
      label-width="0px"
      style="text-align: right; margin-left: 0px"
    >
      <el-button type="primary" icon="el-icon-search" @click="search()">
        {{ $t("common.search") }}</el-button
      >
      <el-button icon="el-icon-refresh-right" @click="reset()"
        >{{ $t("common.reset") }}
      </el-button>
      <el-button
        class="open_search"
        type="text"
        icon="el-icon-arrow-down"
        @click="jsbos.openAndClose('open')"
        v-if="!showAll"
      >
        <span>展开</span>
      </el-button>
      <el-button
        class="close_search"
        type="text"
        icon="el-icon-arrow-up"
        @click="jsbos.openAndClose('close')"
        v-if="!showAll"
      >
        <span>收起</span>
      </el-button>
    </el-form-item>
  </el-form>
</div>