joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

iscs 代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-07 17:56:40 +08:00
parent 7ed95d2701
commit 156a63ea02
7 changed files with 723 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/iscs_new/core/form/builderFactory.js
View File

@ -8,46 +8,24 @@ class BuilderFactory {
const elementList = Object.values(elementConst);
elementList.forEach(element=>{
const temp = Object.assign({}, element);
temp.formGroup = [];
temp.model = {};
temp.rules = {};
// 添加通用配置
temp.model['base'] = {};
temp.rules['base'] = {};
form2Base.forEach(each=>{
temp.model['base'][each.prop] = each.value;
if (each.rules) {
each.required = true;
temp.rules['base'][each.prop] = each.rules;
}
});
temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
// 添加样式配置 样式
temp.model['style'] = {};
temp.rules['style'] = {};
const styleList = element.formList.style;
styleList.forEach(each=>{
temp.model['style'][each.prop] = each.value;
if (each.rules) {
each.required = true;
temp.rules['style'][each.prop] = each.rules;
}
const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
list.forEach(eachType=>{
temp.model[eachType.type] = {};
const eachList = element.formList[eachType.type];
eachList.forEach(each=>{
temp.model[eachType.type][each.prop] = each.value;
});
temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList});
});
temp.formGroup.push({name:'样式配置', code:'style', styleList:styleList});
// shape
// element
// temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
// temp.rules
// let ClassName=element.code;
// const = elementTypeList[element];
// temp.formStyle=new ClassName();
// 添加样式配置 style
this.formList.push(temp);
});
return this.formList;

349
src/iscs_new/core/form/elementConst.js
View File

@ -1,6 +1,7 @@
import * as graphic from '../../core/graphic';
import form2ShapeStyle from './form2ShapeStyle';
import types from './types';
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
export const elementConst = {
@ -12,10 +13,30 @@ export const elementConst = {
...form2ShapeStyle
],
shape: [
// opts.shape.x1 number 0 起始点横坐标。
// opts.shape.y1 number 0 起始点纵坐标。
// opts.shape.x2 number 0 终止点横坐标。
// opts.shape.y2 number 0 终止点纵坐标。
{prop: 'x1', label: '起始点横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入起始点横坐标', trigger: 'blur' }
],
value: 10,
description: '起始点横坐标'},
{prop: 'y1', label: '起始点纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
],
value: 10,
description: '起始点纵坐标'},
{prop: 'x2', label: '终止点横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' }
],
value: 10,
description: '终止点横坐标'},
{prop: 'y2', label: '终止点纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
],
value: 10,
description: '终止点纵坐标'}
// opts.shape.percent number 1 已显示的百分比，用于绘制动画。
]
}
@ -37,11 +58,50 @@ export const elementConst = {
name:'矩形',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape: [
]
{prop: 'x', label: '左上角横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' }
],
value: 10,
description: '左上角横坐标'},
{prop: 'y', label: '左上角纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
],
value: 10,
description: '左上角纵坐标'},
{prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入宽度', trigger: 'blur' }
],
value: 50,
description: '宽度'},
{prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入高度', trigger: 'blur' }
],
value: 50,
description: '高度'},
{prop: 'r', label: '圆角矩形半径', type: types.NumberArray, precision: 0, step:1, length:4,
rules:[
{ required: true, message:'请输入圆角矩形半径', trigger: 'blur' }
],
value: [5, 5, 5, 5],
description: '用于创建圆角矩形。左上、右上、右下、左下角的半径依次为 r1、 r2、 r3、 r4。[1, 1, 1, 1]'
}]
}
},
[graphicType.Circle]: {
@ -49,10 +109,37 @@ export const elementConst = {
name:'圆形',
formList:{
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape: [
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入半径', trigger: 'blur' }
],
value: 20,
description: '半径'}
]
}
},
@ -61,6 +148,16 @@ export const elementConst = {
name:'多边形',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape: [
@ -97,10 +194,43 @@ export const elementConst = {
name:'正多边形',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape:[
{prop: 'x', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'y', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入半径', trigger: 'blur' }
],
value: 20,
description: '半径'},
{prop: 'n', label: '边数', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入边数', trigger: 'blur' }
],
value: 20,
description: '边数'}
]
}
},
@ -109,10 +239,43 @@ export const elementConst = {
name:'椭圆',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape:[
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'rx', label: '横向半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入横向半径', trigger: 'blur' }
],
value: 20,
description: '横向半径'},
{prop: 'ry', label: '纵向半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入纵向半径', trigger: 'blur' }
],
value: 20,
description: '纵向半径'}
]
}
},
@ -124,7 +287,46 @@ export const elementConst = {
...form2ShapeStyle
],
shape: [
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入半径', trigger: 'blur' }
],
value: 20,
description: '半径'},
{prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
],
value: 20,
description: '起始弧度'},
{prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
],
value: 20,
description: '终止弧度'},
{
prop: 'clockwise',
label: '顺时针方向',
type: types.Boolean,
rules:[
{ required: true, message:'请选择图形是否不可见', trigger: 'change' }
],
value: true,
description: '顺时针方向。'
}
]
}
},
@ -133,10 +335,65 @@ export const elementConst = {
name:'扇形',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape: [
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入半径', trigger: 'blur' }
],
value: 20,
description: '半径'},
{prop: 'r0', label: '内半径', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入内半径', trigger: 'blur' }
],
value: 20,
description: '内半径'},
{prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
],
value: 20,
description: '起始弧度'},
{prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
],
value: 20,
description: '终止弧度'},
{
prop: 'clockwise',
label: '顺时针方向',
type: types.Boolean,
rules:[
{ required: true, message:'请选择图形是否不可见', trigger: 'change' }
],
value: true,
description: '顺时针方向。'
}
]
}
},
@ -145,10 +402,43 @@ export const elementConst = {
name:'心形',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape: [
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入宽度', trigger: 'blur' }
],
value: 50,
description: '宽度'},
{prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入高度', trigger: 'blur' }
],
value: 50,
description: '高度'}
]
}
},
@ -157,10 +447,43 @@ export const elementConst = {
name:'水滴',
formList: {
style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle
],
shape: [
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
],
value: 10,
description: '圆心横坐标'},
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
],
value: 10,
description: '圆心纵坐标'},
{prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入宽度', trigger: 'blur' }
],
value: 50,
description: '宽度'},
{prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
rules:[
{ required: true, message:'请输入高度', trigger: 'blur' }
],
value: 50,
description: '高度'}
]
}
}

4
src/iscs_new/core/form/form2Base.js
View File

@ -4,7 +4,7 @@ export default [
{ prop: 'z1',
label: '层级z1',
type: types.Number,
precisionFlag: 0,
precision: 0,
min:0,
max:20,
step:1,
@ -18,7 +18,7 @@ export default [
prop: 'z2',
label: '层级z2',
type: types.Number,
precisionFlag: 0,
precision: 0,
min: 0,
max: 100,
step: 1,

68
src/iscs_new/core/form/form2ShapeStyle.js
View File

@ -8,23 +8,13 @@ export default [
min: 0,
max: 100,
step: 1,
precisionFlag: 0,
precision: 0,
rules:[
{ required: true, message:'请输入线宽', trigger: 'blur' }
],
value: 0,
value: 1,
description: '线宽'
},
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
{
prop: 'opacity',
label: '不透明度',
@ -32,7 +22,7 @@ export default [
min: 0,
max: 1,
step: 0.05,
precisionFlag: 2,
precision: 2,
rules:[
{ required: true, message:'请输入不透明度', trigger: 'blur' }
],
@ -43,9 +33,9 @@ export default [
prop: 'stroke',
label: '描边样式',
type: types.Color,
rules:[
{ required: true, message:'请输入描边样式', trigger: 'blur' }
],
// rules:[
// { required: true, message:'请输入描边样式', trigger: 'blur' }
// ],
value: '',
description: '描边样式。'
},
@ -57,10 +47,10 @@ export default [
min: 0,
max: 100,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入描边虚线样式', trigger: 'blur' }
],
precision: 0,
// rules:[
// { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
// ],
value: [0, 0],
description: '描边虚线样式，参考 SVG stroke-dasharray。'
},
@ -71,10 +61,10 @@ export default [
min: 0,
max: 100,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
],
precision: 0,
// rules:[
// { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
// ],
value: [0, 0],
description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
},
@ -82,9 +72,9 @@ export default [
prop: 'shadowColor',
label: '阴影颜色',
type: types.Color,
rules:[
{ required: true, message:'请输入阴影颜色', trigger: 'blur' }
],
// rules:[
// { required: true, message:'请输入阴影颜色', trigger: 'blur' }
// ],
value: '',
description: '阴影颜色。'
},
@ -95,10 +85,10 @@ export default [
min: 0,
max: 100,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
],
precision: 0,
// rules:[
// { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
// ],
value: 0,
description: '阴影横向偏移。'
},
@ -109,10 +99,10 @@ export default [
min: 0,
max: 100,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
],
precision: 0,
// rules:[
// { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
// ],
value: 0,
description: '阴影纵向偏移。'
},
@ -123,10 +113,10 @@ export default [
min: 0,
max: 100,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
],
precision: 0,
// rules:[
// { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
// ],
value: 0,
description: '阴影模糊大小。'
},

14
src/iscs_new/core/form/form2TextStyle.js
View File

@ -203,7 +203,7 @@ export default [
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
],
value: '',
description: "文字阴影颜色。"
description: '文字阴影颜色。'
},
{
prop: 'textShadowBlur',
@ -255,7 +255,7 @@ export default [
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
],
value: 'transparent',
description: "文字包围盒阴影颜色。"
description: '文字包围盒阴影颜色。'
},
{
prop: 'textBoxShadowBlur',
@ -307,7 +307,7 @@ export default [
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
],
value: false,
description: "文字是否跟随变换效果，仅对 Path 或 Image 元素有效"
description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
},
{
prop: 'textRotation',
@ -345,7 +345,7 @@ export default [
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
],
value: '',
description: "文字包围盒颜色。"
description: '文字包围盒颜色。'
},
{
prop: 'textBorderColor',
@ -355,7 +355,7 @@ export default [
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
],
value: '',
description: "文字包围盒描边颜色。"
description: '文字包围盒描边颜色。'
},
{
prop: 'textBorderWidth',
@ -397,6 +397,6 @@ export default [
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
],
value: 0,
description: "文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。"
description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
}
]
];

8
src/views/iscs_new/components/dataForm.vue
View File

@ -1,15 +1,15 @@
<template>
<el-form ref="form" :model="formModel" :rules="rules" class="composeForm" label-width="auto">
<el-form ref="form" :model="formModel" class="composeForm" label-width="180px">
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
<div class="styleGroupName">
{{ styleGroup.name }}
</div>
<template v-for="item in styleGroup.styleList">
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
<el-form-item :key="item.prop" :prop="styleGroup.code+'.'+item.prop" :label="item.label" class="formName" :rules="item.rules?item.rules:[]">
<!-- {{ tempModel=styleGroup.code?formModel[styleGroup.code]:formModel }} -->
<template v-if="checkFieldType(item, 'Number')">
<el-input-number
v-if="item.precisionFlag"
v-if="item.precision!=undefined"
v-model="formModel[styleGroup.code][item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
@ -100,6 +100,6 @@ export default {
.composeForm{padding: 10px 15px;}
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
.formName .el-form-item__label {font-size:14px;}
.formName.el-form-item {margin-bottom:12px}
.formName.el-form-item {margin-bottom:25px}
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
</style>

45
src/views/iscs_new/iscsDraw/index.vue
View File

@ -15,10 +15,15 @@
>保存</el-button>
</div>
<el-tabs v-model="enabledTab" class="card" type="card" @tab-click="handleTabClick">
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">
<data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" />
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
<data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
</el-tab-pane>
</el-tabs>
<div class="bottomBtnGroup">
<el-button type="primary" size="small" @click="onSubmit">添加</el-button>
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
</div>
</el-card>
</div>
<!-- <div class="right-card" :class="{'hide': tableShow}">
@ -51,6 +56,7 @@ export default {
draftShow: false,
// tableShow: false,
enabledTab:'',
showDeleteButton:false,
elementList:[]
};
},
@ -104,7 +110,24 @@ export default {
},
handleTabClick() {
},
onSubmit(){
let that=this;
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
let newModel=Object.assign({},formModel.base);
newModel.style=Object.assign({},formModel.style);
newModel.shape=Object.assign({},formModel.shape);
}
});
},
deleteDevice(){
},
initPage(){
},
}
};
</script>
@ -119,6 +142,7 @@ export default {
flex:1;
height: 100%;
overflow: auto;
padding-bottom:30px;
}
.map-view {
@ -176,6 +200,23 @@ export default {
box-shadow: -2px 0px 2px #000000;
}
}
.bottomBtnGroup{
position: absolute;
bottom: 0;
width: 100%;
height: 43px;
text-align: right;
right: 0px;
background: #fff;
z-index: 2;
padding-top: 5px;
border-bottom: 1px #dedede solid;
box-shadow: 2px -3px 5px #dedede;
}
.bottomBtnGroup button{
display: inline-block;
margin-right:10px;
}
</style>
<style lang="scss">
.heightClass .el-card__body{