500 lines
19 KiB
Plaintext
500 lines
19 KiB
Plaintext
<template>
|
||
<!-- {{.table.FunctionName}}详情抽屉 -->
|
||
{{$lens := .table.Columns|len}}
|
||
{{$businessName := .table.BusinessName | CaseCamelLower}}
|
||
{{$treeParentCode := .table.TreeParentCode}}
|
||
{{$treeCode := .table.TreeCode}}
|
||
{{$treeName := .table.TreeName}}
|
||
<div class="{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail">
|
||
<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
|
||
<template #header>
|
||
<h4>{{.table.FunctionName}}详情</h4>
|
||
</template>
|
||
<el-form ref="formRef" :model="formData" label-width="100px">
|
||
{{ $hasRowEnd := true }}
|
||
{{range $index, $column := .table.DetailColumns}}
|
||
{{if and (eq $column.IsRowStart true) (ne $index 0)}}
|
||
{{ $hasRowEnd = true }}
|
||
</el-row>
|
||
{{end}}
|
||
{{if or (eq $column.IsRowStart true) (eq $index 0)}}
|
||
{{ $hasRowEnd = false }}
|
||
<el-row>
|
||
{{end}}
|
||
{{if eq $column.HtmlType "input" "textarea" "radio" "checkbox" "select" "selects" "treeSelect" "treeSelects"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
{{if ne $column.LinkTableName ""}}
|
||
{{range $ti, $linkedTable := $.table.LinkedTables}}
|
||
{{if eq $column.LinkTableClass $linkedTable.ClassName}}
|
||
{{if eq $column.HtmlType "selects" "checkbox" "treeSelects"}}
|
||
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.map((res:any)=>{return res.{{CaseCamelLower $column.LinkLabelName}}}).join('，'):'' {{"}}"}}</el-form-item>
|
||
{{else}}
|
||
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.{{CaseCamelLower $column.LinkLabelName}}:'' {{"}}"}}</el-form-item>
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
{{else if ne $column.DictType ""}}
|
||
{{if eq $column.HtmlType "checkbox" }}
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<el-tag class="ml-2" type="success" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
|
||
{{"{{"}} proxy.getOptionValue(item, {{$column.HtmlField}}Options,'value','label') {{"}}"}}
|
||
</el-tag>
|
||
</el-form-item>
|
||
{{else}}
|
||
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.getOptionValue(formData.{{$column.HtmlField}}, {{$column.HtmlField}}Options,'value','label') {{"}}"}}</el-form-item>
|
||
{{end}}
|
||
{{else}}
|
||
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.{{$column.HtmlField}} {{"}}"}}</el-form-item>
|
||
{{end}}
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "date"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d}') {{"}}"}}</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "datetime"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d} {h}:{i}:{s}') {{"}}"}}</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "richtext"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<p v-html="formData.{{$column.HtmlField}}"></p>
|
||
</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "imagefile"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<el-image
|
||
style="width: 150px; height: 150px"
|
||
v-if="!proxy.isEmpty(formData.{{$column.HtmlField}})"
|
||
:src="proxy.getUpFileUrl(formData.{{$column.HtmlField}})"
|
||
fit="contain"></el-image>
|
||
</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "images"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<div class="pic-block" v-for="(img,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
|
||
<el-image
|
||
style="width: 150px; height: 150px"
|
||
v-if="!proxy.isEmpty(img.url)"
|
||
:src="proxy.getUpFileUrl(img.url)"
|
||
fit="contain"></el-image>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "file"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
|
||
<el-link type="primary" :underline="false"
|
||
:href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "files"}}
|
||
<el-col :span="{{$column.ColSpan}}">
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
|
||
<el-link type="primary" :underline="false"
|
||
:href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
{{else if eq $column.HtmlType "keyValue"}}
|
||
<el-form-item label="{{$column.ColumnComment}}">
|
||
<el-tag class="ml-2" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
|
||
{{"{{"}} item.key {{"}}"}} : {{"{{"}} item.value {{"}}"}}
|
||
</el-tag>
|
||
</el-form-item>
|
||
{{end}}
|
||
{{end}}
|
||
{{if not $hasRowEnd}}
|
||
</el-row>
|
||
{{end}}
|
||
</el-form>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
{{$tokenImp := false}}
|
||
{{$imgsImp := false}}
|
||
{{$editImp := false }}
|
||
{{$fileImp := false}}
|
||
{{$getUserList:=false}}
|
||
|
||
{{range $index,$column:=.table.Columns}}
|
||
{{if eq $column.HtmlType "richtext"}}
|
||
{{$editImp = true}}
|
||
{{else if eq $column.HtmlType "imagefile"}}
|
||
{{$tokenImp = true}}
|
||
{{else if eq $column.HtmlType "images"}}
|
||
{{$imgsImp = true}}
|
||
{{else if eq $column.HtmlType "file" "files"}}
|
||
{{$fileImp = true}}
|
||
{{end}}
|
||
{{if eq $column.HtmlField "createdBy" "updatedBy"}}
|
||
{{$getUserList = true}}
|
||
{{end}}
|
||
{{end}}
|
||
|
||
{{$plugin:=""}}
|
||
{{if ContainsI $.table.PackageName "plugins"}}
|
||
{{$plugin = "plugins/"}}
|
||
{{end}}
|
||
<script lang="ts">
|
||
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
|
||
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
|
||
{{/*去重处理*/}}
|
||
{{$hasImports:=newArray}}
|
||
import {
|
||
list{{.table.ClassName}},
|
||
get{{.table.ClassName}},
|
||
del{{.table.ClassName}},
|
||
add{{.table.ClassName}},
|
||
update{{.table.ClassName}},
|
||
{{range $index,$column:= .table.Columns}}
|
||
{{if and $column.IsStatus $column.IsList}}
|
||
change{{$.table.ClassName}}{{$column.GoField}},
|
||
{{end}}
|
||
{{end}}
|
||
} from "/@/api/{{$plugin}}{{.table.ModuleName}}/{{$businessName}}";
|
||
|
||
{{if $editImp}}
|
||
import GfUeditor from "/@/components/ueditor/index.vue"
|
||
{{end}}
|
||
{{if $tokenImp}}
|
||
import {getToken} from "/@/utils/gfast"
|
||
{{end}}
|
||
{{if $imgsImp}}
|
||
import uploadImg from "/@/components/uploadImg/index.vue"
|
||
{{end}}
|
||
{{if $fileImp}}
|
||
import uploadFile from "/@/components/uploadFile/index.vue"
|
||
{{end}}
|
||
import {
|
||
{{.table.ClassName}}TableColumns,
|
||
{{.table.ClassName}}InfoData,
|
||
{{.table.ClassName}}TableDataState,
|
||
{{.table.ClassName}}EditState
|
||
} from "/@/views/{{$plugin}}{{.table.ModuleName}}/{{$businessName}}/list/component/model"
|
||
export default defineComponent({
|
||
name:"{{$plugin}}{{if ne $plugin ""}}{{.apiVersion|replace "/" "_"|CaseCamel}}{{else}}{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{end}}{{.table.ModuleName|CaseCamel}}{{.table.ClassName}}Detail",
|
||
components:{
|
||
{{if $editImp}}
|
||
GfUeditor,
|
||
{{end}}
|
||
{{if $imgsImp}}
|
||
uploadImg,
|
||
{{end}}
|
||
{{if $fileImp}}
|
||
uploadFile,
|
||
{{end}}
|
||
},
|
||
props:{
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if ne $column.DictType ""}}
|
||
{{$column.HtmlField}}Options:{
|
||
type:Array,
|
||
default:()=>[]
|
||
},
|
||
{{else if ne $column.LinkTableName ""}}
|
||
{{if $column.IsCascade}}
|
||
{{/*级联处理*/}}
|
||
{{end}}
|
||
{{/*关联表处理*/}}
|
||
{{$column.HtmlField}}Options:{
|
||
type:Array,
|
||
default:()=>[]
|
||
},
|
||
{{end}}
|
||
{{end}}
|
||
{{if eq .table.TplCategory "tree"}}
|
||
// {{.table.FunctionName}}树选项
|
||
{{$businessName}}Options :{
|
||
type:Array,
|
||
default:()=>[]
|
||
},
|
||
{{end}}
|
||
},
|
||
setup(props,{emit}) {
|
||
{{if or $imgsImp $tokenImp $fileImp}}
|
||
const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
|
||
{{end}}
|
||
const {proxy} = <any>getCurrentInstance()
|
||
const formRef = ref<HTMLElement | null>(null);
|
||
const menuRef = ref();
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if eq $column.HtmlType "imagefile"}}
|
||
//图片上传地址
|
||
const imageUrl{{$column.GoField}} = ref('')
|
||
//上传加载
|
||
const upLoading{{$column.GoField}} = ref(false)
|
||
{{end}}
|
||
{{end}}
|
||
const state = reactive<{{.table.ClassName}}EditState>({
|
||
loading:false,
|
||
isShowDialog: false,
|
||
formData: {
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if eq $column.HtmlType "radio"}}
|
||
{{$column.HtmlField}}: false ,
|
||
{{else if eq $column.HtmlType "images" "file" "files" "checkbox" "selects" "treeSelects" "keyValue"}}
|
||
{{$column.HtmlField}}: [] ,
|
||
{{else}}
|
||
{{$column.HtmlField}}: undefined,
|
||
{{range $ti, $linkedTable := $.table.LinkedTables}}
|
||
{{if eq $column.LinkTableClass $linkedTable.ClassName}}
|
||
{{if eq $column.HtmlType "checkbox" "selects" "treeSelects"}}
|
||
linked{{$column.GoField}}:[],
|
||
{{else}}
|
||
linked{{$column.GoField}}:{{ "{" }}{{CaseCamelLower $column.LinkLabelId}}:undefined,{{CaseCamelLower $column.LinkLabelName}}:undefined {{ "}" }},
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
{{range $ti, $linkedTable := .table.LinkedTables}}
|
||
linked{{$.table.ClassName}}{{$linkedTable.ClassName}}: {
|
||
{{range $ci, $linkedColumn := $linkedTable.RefColumns.Values}}
|
||
{{$linkedColumn.HtmlField}}:{{if eq $linkedColumn.HtmlType "images" "file" "files"}}[]{{else}}undefined{{end}}, // {{$linkedColumn.ColumnComment}}
|
||
{{end}}
|
||
},
|
||
{{end}}
|
||
},
|
||
// 表单校验
|
||
rules: {
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if $column.IsRequired}}
|
||
{{$column.HtmlField}} : [
|
||
{ required: true, message: "{{$column.ColumnComment}}不能为空", trigger: "blur" }
|
||
]{{if ne $lens $index}},{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
}
|
||
});
|
||
// 打开弹窗
|
||
const openDialog = (row?: {{.table.ClassName}}InfoData) => {
|
||
resetForm();
|
||
if(row) {
|
||
get{{.table.ClassName}}(row.{{.table.PkColumn.HtmlField}}!).then((res:any)=>{
|
||
const data = res.data;
|
||
{{range $index, $column := .table.DetailColumns}}
|
||
{{if and (ne $treeParentCode "") (eq $column.HtmlField $treeParentCode)}}
|
||
data.{{$treeParentCode}} = getTreeVal(props.{{$businessName}}Options,data.{{$treeParentCode}})
|
||
{{else if eq $column.HtmlType "checkbox"}}
|
||
data.{{$column.HtmlField}} = data.{{$column.HtmlField}}.split(",")
|
||
{{else if eq $column.HtmlType "imagefile"}}
|
||
//单图地址赋值
|
||
imageUrl{{$column.GoField}}.value = data.{{$column.HtmlField}} ? proxy.getUpFileUrl(data.{{$column.HtmlField}}) : ''
|
||
{{else if eq $column.HtmlType "images" "file" "files" "keyValue"}}
|
||
data.{{$column.HtmlField}} =data.{{$column.HtmlField}}?JSON.parse(data.{{$column.HtmlField}}) : []
|
||
{{end}}
|
||
{{if eq $column.HtmlField "createdBy"}}
|
||
data.createdBy = data.createdUser?.userNickname
|
||
{{end}}
|
||
{{if eq $column.HtmlField "updatedBy"}}
|
||
data.updatedBy = data.updatedUser?.userNickname
|
||
{{end}}
|
||
{{end}}
|
||
state.formData = data;
|
||
})
|
||
}
|
||
state.isShowDialog = true;
|
||
};
|
||
// 关闭弹窗
|
||
const closeDialog = () => {
|
||
state.isShowDialog = false;
|
||
};
|
||
// 取消
|
||
const onCancel = () => {
|
||
closeDialog();
|
||
};
|
||
const resetForm = ()=>{
|
||
state.formData = {
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if eq $column.HtmlType "radio"}}
|
||
{{$column.HtmlField}}: false ,
|
||
{{else if eq $column.HtmlType "images" "file" "files" "checkbox" "selects" "treeSelects" "keyValue"}}
|
||
{{$column.HtmlField}}: [] ,
|
||
{{else}}
|
||
{{$column.HtmlField}}: undefined,
|
||
{{end}}
|
||
{{range $ti, $linkedTable := $.table.LinkedTables}}
|
||
{{if eq $column.LinkTableClass $linkedTable.ClassName}}
|
||
{{if eq $column.HtmlType "checkbox" "selects" "treeSelects"}}
|
||
linked{{$column.GoField}}:[],
|
||
{{else}}
|
||
linked{{$column.GoField}}:{{ "{" }}{{CaseCamelLower $column.LinkLabelId}}:undefined,{{CaseCamelLower $column.LinkLabelName}}:undefined {{ "}" }},
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
{{range $ti, $linkedTable := .table.LinkedTables}}
|
||
linked{{$.table.ClassName}}{{$linkedTable.ClassName}}: {
|
||
{{range $ci, $linkedColumn := $linkedTable.RefColumns.Values}}
|
||
{{$linkedColumn.HtmlField}}:{{if eq $linkedColumn.HtmlType "images" "file" "files"}}[]{{else}}undefined{{end}}, // {{$linkedColumn.ColumnComment}}
|
||
{{end}}
|
||
},
|
||
{{end}}
|
||
}
|
||
};
|
||
{{$setUpData:=true}}
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if ne $column.LinkTableName ""}}
|
||
//关联{{$column.LinkTableName}}表选项
|
||
const get{{$column.LinkTableClass}}Items{{$column.GoField}} = () => {
|
||
emit("get{{$column.LinkTableClass}}Items{{$column.GoField}}")
|
||
}
|
||
const get{{$column.GoField}}Op = computed(()=>{
|
||
get{{$column.LinkTableClass}}Items{{$column.GoField}}()
|
||
return props.{{$column.HtmlField}}Options
|
||
})
|
||
{{else if eq $column.HtmlType "richtext"}}
|
||
//富文本编辑器{{$column.ColumnComment}}
|
||
const set{{$column.GoField}}EditContent = (data:string) => {
|
||
state.formData.{{$column.HtmlField}} = data
|
||
}
|
||
{{else if eq $column.HtmlType "imagefile"}}
|
||
//单图上传{{$column.ColumnComment}}
|
||
const handleAvatarSuccess{{$column.GoField}}:UploadProps['onSuccess'] = (res, file) => {
|
||
if (res.code === 0) {
|
||
imageUrl{{$column.GoField}}.value = URL.createObjectURL(file.raw!)
|
||
state.formData.{{$column.HtmlField}} = res.data.path
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
upLoading{{$column.GoField}}.value = false
|
||
}
|
||
const beforeAvatarUpload{{$column.GoField}} = () => {
|
||
upLoading{{$column.GoField}}.value = true
|
||
return true
|
||
}
|
||
{{if $setUpData}}
|
||
const setUpData = () => {
|
||
return { token: getToken() }
|
||
}
|
||
{{$setUpData = false}}
|
||
{{end}}
|
||
{{else if eq $column.HtmlType "images"}}
|
||
const setUpImgList{{$column.GoField}} = (data:any)=>{
|
||
state.formData.{{$column.HtmlField}} = data
|
||
}
|
||
{{else if eq $column.HtmlType "file" "files"}}
|
||
const setUpFileList{{$column.GoField}} = (data:any)=>{
|
||
state.formData.{{$column.HtmlField}} = data
|
||
}
|
||
{{end}}
|
||
{{end}}
|
||
{{if eq .table.TplCategory "tree"}}
|
||
const getTreeVal = (data : any[],val : any) : any=>{
|
||
let findV:any = null
|
||
data.some((item:any)=>{
|
||
if(item.{{$treeCode}}==val){
|
||
findV = item.{{$treeName}}
|
||
return true
|
||
}
|
||
if(item.children) {
|
||
findV = getTreeVal(item.children, val)
|
||
if (findV) {
|
||
return findV
|
||
}
|
||
}
|
||
})
|
||
return findV
|
||
}
|
||
{{end}}
|
||
{{$setUpDataR:=true}}
|
||
return {
|
||
proxy,
|
||
openDialog,
|
||
closeDialog,
|
||
onCancel,
|
||
menuRef,
|
||
formRef,
|
||
{{range $index, $column := .table.Columns}}
|
||
{{if ne $column.LinkTableName ""}}
|
||
{{if $column.IsCascade}}
|
||
{{/*级联处理*/}}
|
||
{{else}}
|
||
{{/*关联表处理*/}}
|
||
get{{$column.LinkTableClass}}Items{{$column.GoField}},
|
||
get{{$column.GoField}}Op,
|
||
{{end}}
|
||
{{else if eq $column.HtmlType "richtext"}}
|
||
//富文本编辑器{{$column.ColumnComment}}
|
||
set{{$column.GoField}}EditContent,
|
||
{{else if eq $column.HtmlType "imagefile"}}
|
||
//图片上传地址
|
||
imageUrl{{$column.GoField}},
|
||
//上传加载
|
||
upLoading{{$column.GoField}},
|
||
handleAvatarSuccess{{$column.GoField}},
|
||
beforeAvatarUpload{{$column.GoField}},
|
||
{{if $setUpDataR}}
|
||
setUpData,
|
||
{{$setUpDataR = false}}
|
||
{{end}}
|
||
{{else if eq $column.HtmlType "images"}}
|
||
setUpImgList{{$column.GoField}},
|
||
{{else if eq $column.HtmlType "file" "files"}}
|
||
setUpFileList{{$column.GoField}},
|
||
{{end}}
|
||
{{end}}
|
||
{{if or $imgsImp $tokenImp $fileImp}}
|
||
baseURL,
|
||
{{end}}
|
||
...toRefs(state),
|
||
};
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
{{if $tokenImp}}
|
||
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.avatar-uploader .avatar) {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.avatar-uploader .el-upload) {
|
||
border: 1px dashed var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--el-transition-duration-fast);
|
||
}
|
||
|
||
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.avatar-uploader .el-upload:hover) {
|
||
border-color: var(--el-color-primary);
|
||
}
|
||
|
||
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.el-icon.avatar-uploader-icon) {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
text-align: center;
|
||
}
|
||
{{end}}
|
||
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.el-form-item--large .el-form-item__label){
|
||
font-weight: bolder;
|
||
}
|
||
.pic-block{
|
||
margin-right: 8px;
|
||
}
|
||
.file-block{
|
||
width: 100%;
|
||
border: 1px solid var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--el-transition-duration-fast);
|
||
margin-bottom: 5px;
|
||
padding: 3px 6px;
|
||
}
|
||
.ml-2{margin-right: 5px;}
|
||
</style> |