feat: 使用t-ui-plus完成图像源和多图采集模块内容开发
parent
21f381bd35
commit
6aabfd0832
@ -0,0 +1,105 @@
|
|||||||
|
/*
|
||||||
|
* @Author: donghao donghao@supervision.ltd
|
||||||
|
* @Date: 2025-07-29 10:48:37
|
||||||
|
* @LastEditors: donghao donghao@supervision.ltd
|
||||||
|
* @LastEditTime: 2025-07-31 14:07:39
|
||||||
|
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\Button.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import { defineComponent, h, computed, normalizeClass } from 'vue'
|
||||||
|
import addIcon from '@/assets/images/common/table_addBtn.png'
|
||||||
|
export interface DsAddItemButtonProps {
|
||||||
|
/**
|
||||||
|
* Button 前面的文案
|
||||||
|
*/
|
||||||
|
// prefixRender?: (...ags: any[]) => any // 前缀内容 render渲染
|
||||||
|
/**
|
||||||
|
* Button 后面的文案
|
||||||
|
*/
|
||||||
|
suffixRender?: (...ags: any[]) => any // 后缀内容 render渲染
|
||||||
|
/**
|
||||||
|
* Button 后面的文案
|
||||||
|
*/
|
||||||
|
suffixText?: string
|
||||||
|
/**
|
||||||
|
* container容器样式
|
||||||
|
*/
|
||||||
|
iconClassName?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 整体容器样式
|
||||||
|
*/
|
||||||
|
componentClassName?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'DSSwitch',
|
||||||
|
props: {
|
||||||
|
suffixRender: {
|
||||||
|
type: Function as DsAddItemButtonProps['suffixRender'],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
suffixText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
iconClassName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
componentClassName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props, { emit, attrs }) {
|
||||||
|
const { iconClassName, componentClassName, ...restProps } = props
|
||||||
|
// 处理自定义类名和 Vue 的 class 属性
|
||||||
|
const componentClasses = computed(() => {
|
||||||
|
const classes = [
|
||||||
|
'ds-formItem-add-btn cursor-pointer px-[10px] flex items-center',
|
||||||
|
componentClassName
|
||||||
|
]
|
||||||
|
// 处理 Vue 的 class 属性（支持字符串/数组/对象）
|
||||||
|
if (attrs.class) {
|
||||||
|
classes.push(normalizeClass(attrs.class))
|
||||||
|
}
|
||||||
|
return classes.filter((c) => c).join(' ')
|
||||||
|
})
|
||||||
|
// 处理自定义类名和 Vue 的 class 属性
|
||||||
|
const iconClasses = computed(() => {
|
||||||
|
const classes = ['w-[16px] h-[16px] mr-2', iconClassName]
|
||||||
|
// 处理 Vue 的 class 属性（支持字符串/数组/对象）
|
||||||
|
if (attrs.class) {
|
||||||
|
classes.push(normalizeClass(attrs.class))
|
||||||
|
}
|
||||||
|
return classes.filter((c) => c).join(' ')
|
||||||
|
})
|
||||||
|
|
||||||
|
// 渲染自定义前缀内容
|
||||||
|
// const renderPrefix = () => {
|
||||||
|
// if (props.prefixRender) {
|
||||||
|
// return props?.prefixRender?.()
|
||||||
|
// }
|
||||||
|
// return null
|
||||||
|
// }
|
||||||
|
// 渲染自定义后缀内容
|
||||||
|
const renderSuffix = () => {
|
||||||
|
if (props.suffixRender) {
|
||||||
|
return props?.suffixRender?.()
|
||||||
|
}
|
||||||
|
if (props.suffixText) {
|
||||||
|
return props.suffixText
|
||||||
|
}
|
||||||
|
return '添加数据'
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<div className={componentClasses.value}>
|
||||||
|
{/* {renderPrefix()} */}
|
||||||
|
<img src={addIcon} className={iconClasses.value} />
|
||||||
|
{renderSuffix()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
/*
|
||||||
|
* @Author: donghao donghao@supervision.ltd
|
||||||
|
* @Date: 2025-07-31 10:03:44
|
||||||
|
* @LastEditors: donghao donghao@supervision.ltd
|
||||||
|
* @LastEditTime: 2025-08-01 17:04:27
|
||||||
|
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\formList.tsx
|
||||||
|
* @Description: 定义 formList 组件
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
import { defineComponent, getCurrentInstance, ComputedRef, computed, toRaw } from 'vue'
|
||||||
|
import type { FormTypes } from '@wocwin/t-ui-plus'
|
||||||
|
import { TForm } from '@wocwin/t-ui-plus'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { generateId } from '@/utils/plugins/random'
|
||||||
|
import { DSAddItemButton } from '@/components/Button'
|
||||||
|
import { Delete } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
// 定义组件属性类型（保留所有 ElInputNumber 属性）
|
||||||
|
type DSFormListProps = {
|
||||||
|
formConfig: FormTypes
|
||||||
|
prefixRender?: (...ags: any[]) => any // 前置内容 render渲染
|
||||||
|
suffixRender?: (...ags: any[]) => any // 后置内容 render渲染
|
||||||
|
min?: number
|
||||||
|
max?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'DSFormList',
|
||||||
|
props: {
|
||||||
|
formConfig: {
|
||||||
|
type: Object as FormTypes,
|
||||||
|
default: {}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: Infinity
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue'],
|
||||||
|
setup(props: DSFormListProps, { emit, slots, attrs }) {
|
||||||
|
const tFormAttrs = (index) => {
|
||||||
|
const { formConfig, ...propsRest } = props
|
||||||
|
const refId = formConfig.ref + index
|
||||||
|
const finalOpts = {
|
||||||
|
...formConfig,
|
||||||
|
ref: refId,
|
||||||
|
modelValue: refId,
|
||||||
|
formData: props.modelValue[index]
|
||||||
|
}
|
||||||
|
return { ...finalOpts, formOpts: finalOpts }
|
||||||
|
}
|
||||||
|
|
||||||
|
const addItem = () => {
|
||||||
|
const list = props.modelValue
|
||||||
|
if (list.length >= props.max) {
|
||||||
|
ElMessage.warning(`最多只能添加 ${props.max} 项`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
list.push({ formItemsUuid: generateId() })
|
||||||
|
emit(
|
||||||
|
'update:modelValue',
|
||||||
|
list.map(({ formItemsUuid, ...rest }) => rest)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeItem = (formItem, index) => {
|
||||||
|
const list = props.modelValue
|
||||||
|
if (list.length <= props.min) {
|
||||||
|
ElMessage.warning(`至少需要保留 ${props.min} 项`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log('removeItem', formItem, index)
|
||||||
|
list.splice(index, 1)
|
||||||
|
emit('update:modelValue', list)
|
||||||
|
}
|
||||||
|
|
||||||
|
const moveItem = (index, direction) => {
|
||||||
|
const list = props.modelValue
|
||||||
|
if (
|
||||||
|
(direction === 'up' && index === 0) ||
|
||||||
|
(direction === 'down' && index === list.length - 1)
|
||||||
|
) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const newIndex = direction === 'up' ? index - 1 : index + 1
|
||||||
|
const item = list.splice(index, 1)[0]
|
||||||
|
list.splice(newIndex, 0, item)
|
||||||
|
emit('update:modelValue', list)
|
||||||
|
}
|
||||||
|
// const canAdd = list.length < props.max
|
||||||
|
// const canRemove = list.length > props.min
|
||||||
|
// 渲染自定义前缀内容
|
||||||
|
const renderPrefix = (formItem, index) => {
|
||||||
|
// props?.suffixRender &&
|
||||||
|
if (props.prefixRender) {
|
||||||
|
return props?.prefixRender?.()
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span>
|
||||||
|
{props.formConfig?.title}
|
||||||
|
{Number(index) + 1}
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
onClick={() => removeItem(formItem, index)}
|
||||||
|
class="flex items-center justify-center ds-dialog-formList-delete"
|
||||||
|
>
|
||||||
|
<Delete />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return () => (
|
||||||
|
<div class="ds-form-list-comp">
|
||||||
|
<ul class="form-list">
|
||||||
|
{props.modelValue
|
||||||
|
.map((item) => ({
|
||||||
|
...item,
|
||||||
|
formItemsUuid: item?.id || generateId()
|
||||||
|
}))
|
||||||
|
.map((formItem, index) => (
|
||||||
|
<li class="form-item-card" key={formItem.formItemsUuid}>
|
||||||
|
{renderPrefix(formItem, index)}
|
||||||
|
<TForm className="ds-form-list-comp-form" {...tFormAttrs(index)}></TForm>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<DSAddItemButton {...tFormAttrs.value} onClick={() => addItem()}></DSAddItemButton>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -1,270 +0,0 @@
|
|||||||
<template>
|
|
||||||
<t-layout-page>
|
|
||||||
<t-layout-page-item>
|
|
||||||
<t-form
|
|
||||||
ref="TFormDemo"
|
|
||||||
v-model="formOpts.ref"
|
|
||||||
:formOpts="formOpts"
|
|
||||||
:widthSize="2"
|
|
||||||
@handleEvent="handleEvent"
|
|
||||||
/>
|
|
||||||
</t-layout-page-item>
|
|
||||||
</t-layout-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="tsx">
|
|
||||||
import { ref, reactive } from "vue"
|
|
||||||
// 获取ref
|
|
||||||
const TFormDemo = ref<HTMLElement | any>(null)
|
|
||||||
const table = {
|
|
||||||
data: [
|
|
||||||
{ id: 1, code: "1111", codeName: "供应商1", mobile: "13011111111", contact: "张三" },
|
|
||||||
{ id: 2, code: "2222", codeName: "供应商2", mobile: "13022222222", contact: "李四" },
|
|
||||||
{ id: 3, code: "3333", codeName: "供应商3", mobile: "13033333333", contact: "王五" },
|
|
||||||
{ id: 4, code: "4444", codeName: "供应商4", mobile: "13044444444", contact: "赵六" },
|
|
||||||
{ id: 5, code: "5555", codeName: "供应商5", mobile: "13055555555", contact: "钱七" },
|
|
||||||
{ id: 6, code: "6666", codeName: "供应商6", mobile: "13066666666", contact: "孙八" },
|
|
||||||
{ id: 7, code: "7777", codeName: "供应商7", mobile: "13077777777", contact: "周九" },
|
|
||||||
{ id: 8, code: "8888", codeName: "供应商8", mobile: "13088888888", contact: "吴十" },
|
|
||||||
{ id: 9, code: "9999", codeName: "供应商9", mobile: "13099999999", contact: "郑十一" }
|
|
||||||
],
|
|
||||||
columns: [
|
|
||||||
{ label: "供应商编号", width: "100px", prop: "code" },
|
|
||||||
{ label: "供应商名称", width: "149px", prop: "codeName" },
|
|
||||||
{ label: "负责人", width: "149px", prop: "contact" },
|
|
||||||
{ label: "电话号码", width: "110px", prop: "mobile" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
// 提交formOpts.ref 方式form表单
|
|
||||||
const submitForm = () => {
|
|
||||||
formOpts.ref.validate(valid => {
|
|
||||||
console.log(88, valid)
|
|
||||||
console.log(77, formOpts.formData)
|
|
||||||
if (!valid) return
|
|
||||||
console.log("最终数据", formOpts.formData)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 重置form表单
|
|
||||||
const resetForm = () => {
|
|
||||||
TFormDemo.value.selfResetFields()
|
|
||||||
}
|
|
||||||
// 清除校验
|
|
||||||
const clearValidate = () => {
|
|
||||||
TFormDemo.value.clearValidate()
|
|
||||||
}
|
|
||||||
// 邮箱校验
|
|
||||||
const validatorEmail = (rule, value, callback) => {
|
|
||||||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
|
|
||||||
callback(new Error(rule.message))
|
|
||||||
}
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
const formOpts = reactive<FormTypes.FormOpts>({
|
|
||||||
// labelPosition: 'top',
|
|
||||||
ref: null,
|
|
||||||
formData: {
|
|
||||||
password: null, // *用户密码
|
|
||||||
name: null, // *用户昵称
|
|
||||||
sex: null, // *性别: 0:男 1:女
|
|
||||||
phone: null, // 手机号码
|
|
||||||
createDate: null, // 创建时间
|
|
||||||
valDate: null, // el日期选择范围
|
|
||||||
wechat: null, // 微信
|
|
||||||
qq: null, // qq
|
|
||||||
email: null, // 邮箱
|
|
||||||
desc: null, // 描述
|
|
||||||
code: null, // 物料编号',
|
|
||||||
codeName: null, // 物料名称',
|
|
||||||
mobile: null // 单位名称',
|
|
||||||
},
|
|
||||||
fieldList: [
|
|
||||||
{
|
|
||||||
label: "手机号码",
|
|
||||||
value: "phone",
|
|
||||||
type: "input",
|
|
||||||
comp: "el-input",
|
|
||||||
bind: { maxlength: 11 }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "密码",
|
|
||||||
value: "password",
|
|
||||||
type: "password",
|
|
||||||
comp: "el-input",
|
|
||||||
placeholder: "请先输入手机号码",
|
|
||||||
bind: formData => {
|
|
||||||
return {
|
|
||||||
disabled: formData.phone ? false : true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ label: "昵称", value: "name", type: "input", comp: "el-input" },
|
|
||||||
{
|
|
||||||
label: "性别",
|
|
||||||
value: "sex",
|
|
||||||
type: "select-arr",
|
|
||||||
comp: "el-select",
|
|
||||||
list: "sexList",
|
|
||||||
arrLabel: "key",
|
|
||||||
arrKey: "value",
|
|
||||||
placeholder: "请先输入昵称",
|
|
||||||
bind: formData => {
|
|
||||||
return {
|
|
||||||
disabled: formData.name ? false : true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
{ label: "QQ", value: "qq", type: "input", comp: "el-input" },
|
|
||||||
{
|
|
||||||
label: "邮箱",
|
|
||||||
value: "email",
|
|
||||||
type: "input",
|
|
||||||
comp: "el-input",
|
|
||||||
placeholder: "请先输入QQ",
|
|
||||||
bind: formData => {
|
|
||||||
return {
|
|
||||||
disabled: formData.qq ? false : true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "供应商编号",
|
|
||||||
value: "code",
|
|
||||||
placeholder: "t-select-table联动使用",
|
|
||||||
comp: "t-select-table",
|
|
||||||
isSelfCom: true,
|
|
||||||
bind: (formData: any) => {
|
|
||||||
return {
|
|
||||||
isKeyup: true,
|
|
||||||
maxHeight: 400,
|
|
||||||
selectWidth: 500,
|
|
||||||
defaultSelectVal: [formData.code],
|
|
||||||
keywords: { label: "code", value: "code" },
|
|
||||||
table: table,
|
|
||||||
columns: table.columns
|
|
||||||
}
|
|
||||||
},
|
|
||||||
eventHandle: {
|
|
||||||
radioChange: (val: any) => radioChange(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "供应商名称",
|
|
||||||
value: "codeName",
|
|
||||||
placeholder: "t-select-table联动使用",
|
|
||||||
comp: "t-select-table",
|
|
||||||
isSelfCom: true,
|
|
||||||
bind: (formData: any) => {
|
|
||||||
return {
|
|
||||||
isKeyup: true,
|
|
||||||
maxHeight: 400,
|
|
||||||
selectWidth: 500,
|
|
||||||
defaultSelectVal: [formData.codeName],
|
|
||||||
keywords: { label: "codeName", value: "codeName" },
|
|
||||||
table: table,
|
|
||||||
columns: table.columns
|
|
||||||
}
|
|
||||||
},
|
|
||||||
eventHandle: {
|
|
||||||
radioChange: (val: any) => radioChange1(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "电话号码",
|
|
||||||
value: "mobile",
|
|
||||||
placeholder: "t-select-table联动使用",
|
|
||||||
comp: "t-select-table",
|
|
||||||
isSelfCom: true,
|
|
||||||
bind: (formData: any) => {
|
|
||||||
return {
|
|
||||||
isKeyup: true,
|
|
||||||
maxHeight: 400,
|
|
||||||
selectWidth: 500,
|
|
||||||
defaultSelectVal: [formData.mobile],
|
|
||||||
keywords: { label: "mobile", value: "mobile" },
|
|
||||||
table: table,
|
|
||||||
columns: table.columns
|
|
||||||
}
|
|
||||||
},
|
|
||||||
eventHandle: {
|
|
||||||
radioChange: (val: any) => radioChange2(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "描述",
|
|
||||||
value: "desc",
|
|
||||||
type: "textarea",
|
|
||||||
comp: "el-input",
|
|
||||||
widthSize: 1
|
|
||||||
}
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
account: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
|
||||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
|
||||||
name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
|
|
||||||
phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
|
|
||||||
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
|
||||||
hobby: [
|
|
||||||
{
|
|
||||||
type: "array",
|
|
||||||
required: true,
|
|
||||||
message: "请至少选择一个爱好",
|
|
||||||
trigger: "change"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
email: [
|
|
||||||
{
|
|
||||||
validator: validatorEmail,
|
|
||||||
message: "自定义配置校验规则",
|
|
||||||
trigger: "blur"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
operatorList: [
|
|
||||||
{ label: "提交", bind: { type: "danger" }, fun: submitForm },
|
|
||||||
{ label: "重置", bind: { type: "primary" }, fun: resetForm },
|
|
||||||
{ label: "清除校验", bind: { type: "danger" }, fun: clearValidate }
|
|
||||||
],
|
|
||||||
// 相关列表
|
|
||||||
listTypeInfo: {
|
|
||||||
hobbyList: [
|
|
||||||
{ label: "吉他", value: "0" },
|
|
||||||
{ label: "看书", value: "1" },
|
|
||||||
{ label: "美剧", value: "2" },
|
|
||||||
{ label: "旅游", value: "3" },
|
|
||||||
{ label: "音乐", value: "4" }
|
|
||||||
],
|
|
||||||
sexList: [
|
|
||||||
{ key: "女", value: 1 },
|
|
||||||
{ key: "男", value: 0 }
|
|
||||||
],
|
|
||||||
statusList: [
|
|
||||||
{ key: "启用", value: 1 },
|
|
||||||
{ key: "停用", value: 0 }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 触发事件
|
|
||||||
const handleEvent = (type, val) => {
|
|
||||||
switch (type) {
|
|
||||||
case "checkbox":
|
|
||||||
console.log("checkbox", val, type)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const radioChange = (row: any) => {
|
|
||||||
formOpts.formData.code = row?.code
|
|
||||||
formOpts.formData.codeName = row?.codeName
|
|
||||||
formOpts.formData.mobile = row?.mobile
|
|
||||||
}
|
|
||||||
const radioChange1 = (row: any) => {
|
|
||||||
formOpts.formData.code = row?.code
|
|
||||||
formOpts.formData.codeName = row?.codeName
|
|
||||||
formOpts.formData.mobile = row?.mobile
|
|
||||||
}
|
|
||||||
const radioChange2 = (row: any) => {
|
|
||||||
formOpts.formData.code = row?.code
|
|
||||||
formOpts.formData.codeName = row?.codeName
|
|
||||||
formOpts.formData.mobile = row?.mobile
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/* 弹框整体样式 */
|
|
||||||
.controllerManagement-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 766px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.controllerManagement-content {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 16px 24px 24px;
|
|
||||||
|
|
||||||
.form-device-btn {
|
|
||||||
width: 80px;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-table {
|
|
||||||
.customList-table {
|
|
||||||
width: 100%;
|
|
||||||
height: 190px;
|
|
||||||
background: #363940;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-add-btn {
|
|
||||||
/* 按钮样式 */
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 128px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue