|
@@ -9,251 +9,259 @@
|
|
|
ref="byForm"
|
|
|
:disabled="formOption.disabled || false"
|
|
|
>
|
|
|
- <el-form-item
|
|
|
- :label="i.label"
|
|
|
- v-for="i in formConfig"
|
|
|
- :key="i.model"
|
|
|
- :prop="i.prop"
|
|
|
- v-show="i.isShow || i.isShow == undefined"
|
|
|
- :style="
|
|
|
- i.type == 'title'
|
|
|
- ? 'width:100%'
|
|
|
- : i.itemWidth
|
|
|
- ? 'width:' + i.itemWidth + '%'
|
|
|
- : formOption.itemWidth
|
|
|
- ? 'width:' + formOption.itemWidth + '%'
|
|
|
- : '100%'
|
|
|
- "
|
|
|
- :class="i.type == 'json' ? i.isHide ? 'by-form-json dn' : 'by-form-json' : i.isHide ? 'dn' : ''"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-if="i.type == 'input'"
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseEnter')"
|
|
|
- @input="(e) => commonsEmit(e, i)"
|
|
|
- @change="(e) => commonsEmitChange(e, i)"
|
|
|
- :type="i.itemType ? i.itemType : 'text'"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :max="i.max"
|
|
|
- :min="i.min"
|
|
|
- :maxlength="i.maxlength"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :style="i.style"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-if="i.type == 'selectInput'"
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseEnter')"
|
|
|
- @input="(e) => commonsEmit(e, i)"
|
|
|
- :type="i.itemType ? i.itemType : 'text'"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :max="i.max"
|
|
|
- :min="i.min"
|
|
|
- :maxlength="i.maxlength"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
+ <template v-for="i in formConfig" :key="i.model">
|
|
|
+ <el-form-item
|
|
|
+ :label="i.label"
|
|
|
+ :prop="i.prop"
|
|
|
+ v-if="i.isShow || i.isShow == undefined"
|
|
|
+ :style="
|
|
|
+ i.type == 'title'
|
|
|
+ ? 'width:100%'
|
|
|
+ : i.itemWidth
|
|
|
+ ? 'width:' + i.itemWidth + '%'
|
|
|
+ : formOption.itemWidth
|
|
|
+ ? 'width:' + formOption.itemWidth + '%'
|
|
|
+ : '100%'
|
|
|
+ "
|
|
|
+ :class="
|
|
|
+ i.type == 'json'
|
|
|
+ ? i.isHide
|
|
|
+ ? 'by-form-json dn'
|
|
|
+ : 'by-form-json'
|
|
|
+ : i.isHide
|
|
|
+ ? 'dn'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
>
|
|
|
- <template #prepend>
|
|
|
- <el-select
|
|
|
- v-model="formData[i.selectProp]"
|
|
|
- :placeholder="i.selectPlaceholder || $t('common.pleaseSelect')"
|
|
|
- @change="(e) => commonsEmit(e, i)"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- style="width: 80px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- :label="j.title || j.name || j.label"
|
|
|
- :value="j.id || j.value"
|
|
|
- v-for="j in i.data"
|
|
|
- :key="j.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- <el-select
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :multiple="i.multiple || false"
|
|
|
- v-else-if="i.type == 'select'"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
- @change="(e) => commonsEmit(e, i)"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :clearable="i.clearable ? i.clearable : false"
|
|
|
- :filterable="i.filterable ? true : false"
|
|
|
- :style="i.style"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- :label="j.title || j.name || j.label"
|
|
|
- :value="j.id || j.value"
|
|
|
- v-for="j in i.data"
|
|
|
- :key="j.id"
|
|
|
+ <el-input
|
|
|
+ v-if="i.type == 'input'"
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseEnter')"
|
|
|
+ @input="(e) => commonsEmit(e, i)"
|
|
|
+ @change="(e) => commonsEmitChange(e, i)"
|
|
|
+ :type="i.itemType ? i.itemType : 'text'"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :max="i.max"
|
|
|
+ :min="i.min"
|
|
|
+ :maxlength="i.maxlength"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :style="i.style"
|
|
|
+ />
|
|
|
+ <el-input
|
|
|
+ v-if="i.type == 'selectInput'"
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseEnter')"
|
|
|
+ @input="(e) => commonsEmit(e, i)"
|
|
|
+ :type="i.itemType ? i.itemType : 'text'"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :max="i.max"
|
|
|
+ :min="i.min"
|
|
|
+ :maxlength="i.maxlength"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-tree-select
|
|
|
- v-model="formData[i.prop]"
|
|
|
- v-else-if="i.type == 'treeSelect'"
|
|
|
- :data="i.data"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :props="{
|
|
|
- value: i.propsTreeValue || 'id',
|
|
|
- label: i.propsTreeLabel || 'label',
|
|
|
- children: i.propsTreeChildren || 'children',
|
|
|
- }"
|
|
|
- value-key="id"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- check-strictly
|
|
|
- :style="i.style"
|
|
|
- />
|
|
|
- <el-date-picker
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- v-else-if="i.type == 'date'"
|
|
|
- :type="i.itemType"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseSelectTime')"
|
|
|
- @change="(e) => commonsEmit(e, i)"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :format="i.format ? i.format : dateFormatInit(i.itemType)"
|
|
|
- :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
|
|
|
- />
|
|
|
- <el-switch
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- v-else-if="i.type == 'switch'"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- v-model="formData[i.prop]"
|
|
|
- />
|
|
|
- <el-checkbox-group
|
|
|
- v-else-if="i.type == 'checkbox'"
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- v-for="j in i.data"
|
|
|
- :key="j.id || j.value"
|
|
|
- :label="j.id || j.value"
|
|
|
- name="type"
|
|
|
+ <template #prepend>
|
|
|
+ <el-select
|
|
|
+ v-model="formData[i.selectProp]"
|
|
|
+ :placeholder="i.selectPlaceholder || $t('common.pleaseSelect')"
|
|
|
+ @change="(e) => commonsEmit(e, i)"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ style="width: 80px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="j.title || j.name || j.label"
|
|
|
+ :value="j.id || j.value"
|
|
|
+ v-for="j in i.data"
|
|
|
+ :key="j.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-select
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ :multiple="i.multiple || false"
|
|
|
+ v-else-if="i.type == 'select'"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
+ @change="(e) => commonsEmit(e, i)"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :clearable="i.clearable ? i.clearable : false"
|
|
|
+ :filterable="i.filterable ? true : false"
|
|
|
+ :style="i.style"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
>
|
|
|
- {{ j.name || j.label }}
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- <el-radio-group
|
|
|
- v-else-if="i.type == 'radio'"
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- >
|
|
|
- <el-radio
|
|
|
- :border="i.border ? i.border : false"
|
|
|
- v-for="j in i.data"
|
|
|
- :key="j.id || j.value"
|
|
|
- :label="j.id || j.value"
|
|
|
- name="type"
|
|
|
+ <el-option
|
|
|
+ :label="j.title || j.name || j.label"
|
|
|
+ :value="j.id || j.value"
|
|
|
+ v-for="j in i.data"
|
|
|
+ :key="j.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-tree-select
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ v-else-if="i.type == 'treeSelect'"
|
|
|
+ :data="i.data"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :props="{
|
|
|
+ value: i.propsTreeValue || 'id',
|
|
|
+ label: i.propsTreeLabel || 'label',
|
|
|
+ children: i.propsTreeChildren || 'children',
|
|
|
+ }"
|
|
|
+ value-key="id"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ check-strictly
|
|
|
+ :style="i.style"
|
|
|
+ />
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ v-else-if="i.type == 'date'"
|
|
|
+ :type="i.itemType"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseSelectTime')"
|
|
|
+ @change="(e) => commonsEmit(e, i)"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :format="i.format ? i.format : dateFormatInit(i.itemType)"
|
|
|
+ :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
|
|
|
+ />
|
|
|
+ <el-switch
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ v-else-if="i.type == 'switch'"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ />
|
|
|
+ <el-checkbox-group
|
|
|
+ v-else-if="i.type == 'checkbox'"
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
>
|
|
|
- {{ j.name || j.label }}
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <el-input-number
|
|
|
- v-else-if="i.type == 'number'"
|
|
|
- v-model="formData[i.prop]"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseEnter')"
|
|
|
- @change="(e) => commonsEmit(e, i)"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :min="i.min ? i.min : 0"
|
|
|
- :max="i.max ? i.max : 9999999999"
|
|
|
- :step="i.step ? i.step : 1"
|
|
|
- :precision="i.precision !== '' ? i.precision : 2"
|
|
|
- :controls="i.controls === false ? false : true"
|
|
|
- :style="i.style"
|
|
|
- onmousewheel="return false;"
|
|
|
- >
|
|
|
- </el-input-number>
|
|
|
- <el-tree
|
|
|
- v-else-if="i.type == 'tree'"
|
|
|
- :data="i.data"
|
|
|
- :props="i.props"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :show-checkbox="i.showCheckbox || true"
|
|
|
- >
|
|
|
- </el-tree>
|
|
|
- <el-cascader
|
|
|
- v-else-if="i.type == 'cascader'"
|
|
|
- :options="i.data"
|
|
|
- :props="i.props"
|
|
|
- :readonly="i.readonly ? i.readonly : false"
|
|
|
- :placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
- @change="(e) => commonsEmit(e, i)"
|
|
|
- :disabled="i.disabled ? i.disabled : false"
|
|
|
- :style="i.style"
|
|
|
- >
|
|
|
- </el-cascader>
|
|
|
- <div class="form-title" v-else-if="i.type == 'title'">
|
|
|
- {{ i.title }}
|
|
|
- </div>
|
|
|
- <slot :name="i.slotName" v-else-if="i.type == 'slot'">
|
|
|
- {{ i.slotName }}插槽占位符
|
|
|
- </slot>
|
|
|
- <div class="upload" v-else-if="i.type == 'upload'">
|
|
|
- <el-upload
|
|
|
+ <el-checkbox
|
|
|
+ v-for="j in i.data"
|
|
|
+ :key="j.id || j.value"
|
|
|
+ :label="j.id || j.value"
|
|
|
+ name="type"
|
|
|
+ >
|
|
|
+ {{ j.name || j.label }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <el-radio-group
|
|
|
+ v-else-if="i.type == 'radio'"
|
|
|
v-model="formData[i.prop]"
|
|
|
- action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
- :data="uploadData"
|
|
|
- list-type="picture-card"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :on-success="handleSuccess"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
>
|
|
|
- <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
|
|
|
- <el-icon><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-else-if="i.type == 'table'"
|
|
|
- class="by-form-table"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table :data="formData[i.prop]" style="width: 100%">
|
|
|
- <el-table-column
|
|
|
- :prop="j.prop"
|
|
|
- :label="j.label"
|
|
|
- :width="i.width"
|
|
|
- v-for="(j, jindex) in i.column"
|
|
|
+ <el-radio
|
|
|
+ :border="i.border ? i.border : false"
|
|
|
+ v-for="j in i.data"
|
|
|
+ :key="j.id || j.value"
|
|
|
+ :label="j.id || j.value"
|
|
|
+ name="type"
|
|
|
>
|
|
|
- <template #default="scope" v-if="j.type">
|
|
|
- <component
|
|
|
- @change="(e) => formTableChange(e, scope, j)"
|
|
|
- v-model="scope.row[j.prop]"
|
|
|
- :is="formTableObj[j.type]"
|
|
|
- :placeholder="j.placeholder || $t('common.pleaseEnter')"
|
|
|
- :type="j.type == 'number' ? 'number' : 'text'"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- :label="n.title || n.name || n.label"
|
|
|
- :value="n.id || n.value"
|
|
|
- v-for="n in j.data"
|
|
|
- :key="n.id"
|
|
|
- v-if="j.type == 'select'"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </component>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div v-else-if="i.type == 'json'">
|
|
|
- <byForm
|
|
|
- :formConfig="i.json"
|
|
|
- :formOption="formOption"
|
|
|
+ {{ j.name || j.label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-input-number
|
|
|
+ v-else-if="i.type == 'number'"
|
|
|
v-model="formData[i.prop]"
|
|
|
- ref="byform"
|
|
|
- :rules="rules"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseEnter')"
|
|
|
+ @change="(e) => commonsEmit(e, i)"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :min="i.min ? i.min : 0"
|
|
|
+ :max="i.max ? i.max : 9999999999"
|
|
|
+ :step="i.step ? i.step : 1"
|
|
|
+ :precision="i.precision !== '' ? i.precision : 2"
|
|
|
+ :controls="i.controls === false ? false : true"
|
|
|
+ :style="i.style"
|
|
|
+ onmousewheel="return false;"
|
|
|
+ >
|
|
|
+ </el-input-number>
|
|
|
+ <el-tree
|
|
|
+ v-else-if="i.type == 'tree'"
|
|
|
+ :data="i.data"
|
|
|
+ :props="i.props"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :show-checkbox="i.showCheckbox || true"
|
|
|
>
|
|
|
- </byForm>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
+ </el-tree>
|
|
|
+ <el-cascader
|
|
|
+ v-else-if="i.type == 'cascader'"
|
|
|
+ :options="i.data"
|
|
|
+ :props="i.props"
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ :placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
+ @change="(e) => commonsEmit(e, i)"
|
|
|
+ :disabled="i.disabled ? i.disabled : false"
|
|
|
+ :style="i.style"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ <div class="form-title" v-else-if="i.type == 'title'">
|
|
|
+ {{ i.title }}
|
|
|
+ </div>
|
|
|
+ <slot :name="i.slotName" v-else-if="i.type == 'slot'">
|
|
|
+ {{ i.slotName }}插槽占位符
|
|
|
+ </slot>
|
|
|
+ <div class="upload" v-else-if="i.type == 'upload'">
|
|
|
+ <el-upload
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
+ :data="uploadData"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ >
|
|
|
+ <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else-if="i.type == 'table'"
|
|
|
+ class="by-form-table"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table :data="formData[i.prop]" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ :prop="j.prop"
|
|
|
+ :label="j.label"
|
|
|
+ :width="i.width"
|
|
|
+ v-for="(j, jindex) in i.column"
|
|
|
+ >
|
|
|
+ <template #default="scope" v-if="j.type">
|
|
|
+ <component
|
|
|
+ @change="(e) => formTableChange(e, scope, j)"
|
|
|
+ v-model="scope.row[j.prop]"
|
|
|
+ :is="formTableObj[j.type]"
|
|
|
+ :placeholder="j.placeholder || $t('common.pleaseEnter')"
|
|
|
+ :type="j.type == 'number' ? 'number' : 'text'"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="n.title || n.name || n.label"
|
|
|
+ :value="n.id || n.value"
|
|
|
+ v-for="n in j.data"
|
|
|
+ :key="n.id"
|
|
|
+ v-if="j.type == 'select'"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </component>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="i.type == 'json'">
|
|
|
+ <byForm
|
|
|
+ :formConfig="i.json"
|
|
|
+ :formOption="formOption"
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ ref="byform"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ </byForm>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -520,10 +528,10 @@ loadInit();
|
|
|
}
|
|
|
.by-form .el-form--inline .el-form-item {
|
|
|
margin-right: 0px;
|
|
|
-
|
|
|
+
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
-.by-form .el-form--inline>.el-form-item{
|
|
|
+.by-form .el-form--inline > .el-form-item {
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
|
|
@@ -539,6 +547,6 @@ loadInit();
|
|
|
}
|
|
|
|
|
|
.by-form-json {
|
|
|
- padding: 0px!important;
|
|
|
+ padding: 0px !important;
|
|
|
}
|
|
|
</style>
|