Commit 3b7b3b38 authored by wangqinghua's avatar wangqinghua

update

parent ac336ff4
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisible" nzTitle="{{title}}" [nzFooter]="null" (nzOnCancel)="handleCancel()" <nz-modal [nzWidth]="1080" [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
(nzOnOk)="handleOk()">
<nz-tabset [nzSelectedIndex]="tabNum" (nzSelectedIndexChange)="tabsChange($event)" style="padding-bottom: 25px;min-height: 500px"> <nz-tabset [nzSelectedIndex]="tabNum" (nzSelectedIndexChange)="tabsChange($event)" style="padding-bottom: 25px;min-height: 500px">
<nz-tab nzTitle="1.场景"> <nz-tab nzTitle="1.场景">
<div nz-form class="ant-advanced-search-form form-select"> <div nz-form class="ant-advanced-search-form form-select">
<form nz-form class="ant-advanced-search-form"> <form nz-form class="ant-advanced-search-form">
<nz-collapse> <nz-collapse>
<nz-collapse-panel nzHeader="基本属性" [nzActive]="true"> <nz-collapse-panel nzHeader="基本属性" [nzActive]="false">
<div nz-row [nzGutter]="24"> <div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12"> <div nz-col [nzSpan]="12">
<nz-form-item nzFlex> <nz-form-item nzFlex>
...@@ -51,7 +50,7 @@ ...@@ -51,7 +50,7 @@
</div> </div>
</nz-collapse-panel> </nz-collapse-panel>
<nz-collapse-panel nzHeader="高级属性" [nzActive]="true"> <nz-collapse-panel nzHeader="高级属性" [nzActive]="false">
<div nz-row [nzGutter]="24"> <div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="2"> <div nz-col [nzSpan]="2">
变量 变量
...@@ -109,27 +108,22 @@ ...@@ -109,27 +108,22 @@
</form> </form>
</div> </div>
<div class="modal-footer-btn">
<button nz-button (click)="handleCancel()" nzType="primary">取消</button>
<button nz-button (click)="tabsChange(1)" nzType="primary">下一步</button>
</div>
</nz-tab> </nz-tab>
<nz-tab nzTitle="2.步骤"> <nz-tab nzTitle="2.步骤">
<button (click)="addStep()" nz-button nzType="default">添加步骤</button> <button class="margin-left-5" (click)="addStep()" nz-button nzType="default">添加步骤</button>
<div style="padding: 10px;"> <div style="padding: 10px;">
<div nz-row [nzGutter]="24"> <div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="1"> <div nz-col [nzSpan]="1" class="text-center">
No No
</div> </div>
<div nz-col [nzSpan]="3"> <div nz-col [nzSpan]="4">
<span class="color-red">*</span>步骤名称 <span class="color-red">*</span>步骤名称
</div> </div>
<div nz-col [nzSpan]="3"> <div nz-col [nzSpan]="2">
<span class="color-red">*</span>超时 <span class="color-red">*</span>超时
</div> </div>
<div nz-col [nzSpan]="3"> <div nz-col [nzSpan]="5">
<span class="color-red">*</span>URL <span class="color-red">*</span>URL
</div> </div>
<div nz-col [nzSpan]="3"> <div nz-col [nzSpan]="3">
...@@ -141,21 +135,21 @@ ...@@ -141,21 +135,21 @@
<div nz-col [nzSpan]="3"> <div nz-col [nzSpan]="3">
<span class="color-red">*</span>跟随跳转 <span class="color-red">*</span>跟随跳转
</div> </div>
<div nz-col [nzSpan]="1"> <div nz-col [nzSpan]="1"></div>
<div nz-col [nzSpan]="2"></div>
</div>
</div> </div>
<div nz-row [nzGutter]="12" *ngFor="let item of steps;let i = index;"> <ng-container *ngFor="let item of steps;let i = index;">
<div nz-col [nzSpan]="1"> <div nz-row [nzGutter]="12">
<div nz-col [nzSpan]="1" class="text-center middle">
{{i +1}} {{i +1}}
</div> </div>
<nz-form-control nz-col [nzSpan]="3"> <nz-form-control nz-col [nzSpan]="4">
<input nz-input placeholder="名称" [(ngModel)]="item.name"> <input nz-input placeholder="名称" [(ngModel)]="item.name">
</nz-form-control> </nz-form-control>
<nz-form-control nz-col [nzSpan]="3"> <nz-form-control nz-col [nzSpan]="2">
<input nz-input placeholder="15" [(ngModel)]="item.timeout"> <input nz-input placeholder="15" [(ngModel)]="item.timeout">
</nz-form-control> </nz-form-control>
<nz-form-control nz-col [nzSpan]="3"> <nz-form-control nz-col [nzSpan]="5">
<input nz-input placeholder="" [(ngModel)]="item.url"> <input nz-input placeholder="" [(ngModel)]="item.url">
</nz-form-control> </nz-form-control>
<nz-form-control nz-col [nzSpan]="3"> <nz-form-control nz-col [nzSpan]="3">
...@@ -165,21 +159,99 @@ ...@@ -165,21 +159,99 @@
<input nz-input placeholder="200" [(ngModel)]="item.status_codes"> <input nz-input placeholder="200" [(ngModel)]="item.status_codes">
</nz-form-control> </nz-form-control>
<nz-form-control nz-col [nzSpan]="3"> <nz-form-control nz-col [nzSpan]="3">
<nz-select name="equipmentType" nzPlaceHolder="是否跟随跳转" [(ngModel)]="item.follow_redirects"> <nz-select style="width: 100%" name="equipmentType" nzPlaceHolder="是否跟随跳转" [(ngModel)]="item.follow_redirects">
<nz-option nzValue="1" nzLabel="是"></nz-option> <nz-option nzValue="1" nzLabel="是"></nz-option>
<nz-option nzValue="0" nzLabel="否"></nz-option> <nz-option nzValue="0" nzLabel="否"></nz-option>
</nz-select> </nz-select>
</nz-form-control> </nz-form-control>
<div nz-col [nzSpan]="1"> <div nz-col [nzSpan]="1" class="middle">
<span (click)="deleteStep(index)" class="cursor">X</span> <span (click)="deleteStep(i)" class="cursor main-color">X</span>
</div>
<div nz-col [nzSpan]="2" (click)="showCon(i)" class="middle main-color cursor">阈值</div>
</div>
<div class="trigger-class" *ngIf="item.show">
<nz-form-item class="form-select">
<nz-form-control class="form-select">
<div nz-row [nzGutter]="12">
<nz-form-control nz-col [nzPush]="1" [nzSpan]="6">
<button nz-button nzType="primary" nzSize="small" (click)="addcondition(i)">添加条件</button>
<span>危险阈值</span>
</nz-form-control>
</div>
<div nz-row [nzGutter]="12" *ngFor="let fault of item.conditionList;let i1 = index;">
<nz-form-control nz-col [nzSpan]="1"></nz-form-control>
<nz-form-control nz-col [nzSpan]="5">
<nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.and" *ngIf="i1 > 0">
<nz-option nzValue=" and " nzLabel="并且"></nz-option>
<nz-option nzValue=" or " nzLabel="或"></nz-option>
</nz-select>
</nz-form-control>
<nz-form-control nz-col [nzSpan]="4">
<nz-select name="interfaces_main" [(ngModel)]="fault.time">
<nz-option nzValue="0" nzLabel="响应时间"></nz-option>
<nz-option nzValue="1" nzLabel="响应代码"></nz-option>
</nz-select>
</nz-form-control>
<nz-form-control nz-col [nzSpan]="5">
<nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
<nz-option nzValue="=" nzLabel="="></nz-option>
<nz-option nzValue=">" nzLabel=">"></nz-option>
<nz-option nzValue="<" nzLabel="<"></nz-option>
</nz-select>
</nz-form-control>
<nz-form-control nz-col [nzSpan]="5">
<input type="text" nz-input name="value" [(ngModel)]="fault.value">
</nz-form-control>
<nz-form-control nz-col [nzSpan]="2">
<button nz-button nzType="primary" (click)="deleteCondition(i,i1)"><i style="color: #fff" class="anticon anticon-close-circle-o"></i></button>
</nz-form-control>
</div> </div>
</nz-form-control>
</nz-form-item>
<nz-form-item class="form-select">
<nz-form-control class="form-select">
<div nz-row [nzGutter]="12">
<nz-form-control nz-col [nzPush]="1" [nzSpan]="6">
<button nz-button nzType="primary" nzSize="small" (click)="addFault(i)">添加条件</button>
<span>故障阈值</span>
</nz-form-control>
</div> </div>
<div nz-row [nzGutter]="12" *ngFor="let fault of item.faultConditionList;let i2 = index;">
<nz-form-control nz-col [nzSpan]="1"></nz-form-control>
<nz-form-control nz-col [nzSpan]="5">
<nz-select name="interfaces_main" [(ngModel)]="fault.and" *ngIf="i2 > 0">
<nz-option nzValue=" and " nzLabel="并且"></nz-option>
<nz-option nzValue=" or " nzLabel="或"></nz-option>
</nz-select>
</nz-form-control>
<nz-form-control nz-col [nzSpan]="4">
<nz-select name="interfaces_main" [(ngModel)]="fault.time">
<nz-option nzValue="0" nzLabel="响应时间"></nz-option>
<nz-option nzValue="1" nzLabel="响应代码"></nz-option>
</nz-select>
</nz-form-control>
<nz-form-control nz-col [nzSpan]="5">
<nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
<nz-option nzValue="=" nzLabel="="></nz-option>
<nz-option nzValue=">" nzLabel=">"></nz-option>
<nz-option nzValue="<" nzLabel="<"></nz-option>
</nz-select>
</nz-form-control>
<nz-form-control nz-col [nzSpan]="5">
<input type="text" nz-input name="value" [(ngModel)]="fault.value">
</nz-form-control>
<nz-form-control nz-col [nzSpan]="2">
<button nz-button nzType="primary" (click)="deleteFault(i,i2)"><i style="color: #fff" class="anticon anticon-close-circle-o"></i></button>
</nz-form-control>
</div> </div>
</nz-form-control>
</nz-form-item>
<div class="modal-footer-btn"> <div class="modal-footer-btn">
<button nz-button (click)="handleCancel()" nzType="primary">取消</button> <button nz-button (click)="closeCon(i,false)" nzType="primary">取消</button>
<button nz-button (click)="tabsChange(0)" nzType="primary">上一步</button> <button nz-button (click)="closeCon(i,true)" nzType="primary">保存</button>
<button nz-button (click)="tabsChange(2)" nzType="primary">下一步</button> </div>
</div>
</ng-container>
</div> </div>
</nz-tab> </nz-tab>
...@@ -244,11 +316,6 @@ ...@@ -244,11 +316,6 @@
</div> </div>
</div> </div>
</form> </form>
<div class="modal-footer-btn">
<button nz-button (click)="handleCancel()" nzType="primary">取消</button>
<button nz-button (click)="tabsChange(1)" nzType="primary">上一步</button>
<button nz-button (click)="handleOk()" nzType="primary">完成</button>
</div>
</nz-tab> </nz-tab>
</nz-tabset> </nz-tabset>
</nz-modal> </nz-modal>
\ No newline at end of file
...@@ -5,12 +5,31 @@ import {NzMessageService} from 'ng-zorro-antd'; ...@@ -5,12 +5,31 @@ import {NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
selector: 'smart-website', selector: 'smart-website',
templateUrl: './website.component.html', templateUrl: './website.component.html',
styles: [] styles: [
`
.middle {
height: 39px;
line-height: 39px;
}
.modal-footer-btn {
margin: 10px 0;
text-align: center;
}
.trigger-class {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
}
`
]
}) })
export class WebsiteComponent implements OnInit { export class WebsiteComponent implements OnInit {
@Output() done = new EventEmitter<any>(); @Output() done = new EventEmitter<any>();
isVisible = false; isVisible = false;
isOkLoading = false;
title; title;
tabNum = 0; tabNum = 0;
indexNo = 1; indexNo = 1;
...@@ -18,7 +37,7 @@ export class WebsiteComponent implements OnInit { ...@@ -18,7 +37,7 @@ export class WebsiteComponent implements OnInit {
validateForm; validateForm;
steps = []; steps = [];
constructor(private overAllSer:OverAllService,private message:NzMessageService) { constructor(private overAllSer: OverAllService, private message: NzMessageService) {
} }
ngOnInit() { ngOnInit() {
...@@ -29,25 +48,28 @@ export class WebsiteComponent implements OnInit { ...@@ -29,25 +48,28 @@ export class WebsiteComponent implements OnInit {
this.tabNum = 0; this.tabNum = 0;
this.steps = [ this.steps = [
{ {
name:'', name: '',
url:'', url: '',
status_codes:200, status_codes: 200,
posts:'', posts: '',
no:this.indexNo, no: this.indexNo,
timeout:'15', timeout: '15',
follow_redirects:'1', follow_redirects: '1',
condition:'', conditionList: [],
faultCondition:'', condition: '',
faultConditionList: [],
faultCondition: '',
show: false
} }
]; ];
this.validateForm = { this.validateForm = {
name: '', name: '',
delay:'', delay: '',
retries:'', retries: '',
http_proxy:'', http_proxy: '',
ssl_cert_file:'', ssl_cert_file: '',
ssl_key_file:'', ssl_key_file: '',
ssl_key_password:'', ssl_key_password: '',
steps: this.steps, steps: this.steps,
}; };
} }
...@@ -61,62 +83,154 @@ export class WebsiteComponent implements OnInit { ...@@ -61,62 +83,154 @@ export class WebsiteComponent implements OnInit {
this.title = '编辑网站监测'; this.title = '编辑网站监测';
this.isVisible = true; this.isVisible = true;
this.overAllSer.findWeb(id).subscribe( this.overAllSer.findWeb(id).subscribe(
(res)=>{ (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
res.data.steps.forEach(e => {
e.follow_redirects += '';
});
this.validateForm = res.data; this.validateForm = res.data;
this.steps = res.data.steps; this.steps = res.data.steps;
this.viewtrigger();
} }
} }
) );
}
//回显阈值
viewtrigger() {
this.steps.forEach(e => {
if (e.condition) {
e.condition = ' and ' + e.condition;
let strCon = e.condition.split(' ');
let arrCon = [];
let andArrCon = [];
strCon.forEach((value) => {
if (value.length > 0) {
if (value == 'and' || value == 'or') {
andArrCon.push(value);
} else {
const index = value.indexOf('}');
if (value.indexOf('0.0.0.0:web.test.time') > -1) { //响应时间
const obj1 = {
time: '0',
equal: value[index + 1],
value: value.substr(index + 2, value.length),
};
arrCon.push(obj1);
}
if (value.indexOf('0.0.0.0:web.test.rspcode') > -1) { //响应代码
const obj2 = {
time: '1',
equal: value[index + 1],
value: value.substr(index + 2, value.length),
};
arrCon.push(obj2);
}
}
}
});
arrCon.forEach((value, index) => {
value.and = ' ' + andArrCon[index] + ' ';
});
e.conditionList = arrCon;
}else{
e.condition = '';
e.conditionList = [];
}
if (e.faultCondition) {
e.faultCondition = ' and ' +e.faultCondition;
let strFau = e.faultCondition.split(' ');
let arrFau = [];
let andArrFau = [];
strFau.forEach((value) => {
if (value.length > 0) {
if (value == 'and' || value == 'or') {
andArrFau.push(value);
} else {
const index = value.indexOf('}');
if (value.indexOf('0.0.0.0:web.test.time') > -1) { //响应时间
const obj1 = {
time: '0',
equal: value[index + 1],
value: value.substr(index + 2, value.length),
};
arrFau.push(obj1);
}
if (value.indexOf('0.0.0.0:web.test.rspcode') > -1) { //响应代码
const obj2 = {
time: '1',
equal: value[index + 1],
value: value.substr(index + 2, value.length),
};
arrFau.push(obj2);
}
}
}
});
arrFau.forEach((value, index) => {
value.and = ' ' + andArrFau[index] + ' ';
});
e.faultConditionList = arrFau;
}else{
e.faultCondition = '';
e.faultConditionList = [];
}
});
console.log(this.steps);
} }
handleOk() { handleOk() {
if(!this.validateForm.name){ if (!this.validateForm.name) {
this.message.error("请输入网站名称"); this.message.error('请输入网站名称');
return false; return false;
} }
if(!this.validateForm.delay){ if (!this.validateForm.delay) {
this.message.error("请输入更新间隔"); this.message.error('请输入更新间隔');
return false; return false;
} }
if(this.title == '添加网站监测'){ this.isOkLoading = true;
this.getCondition();
if (this.title == '添加网站监测') {
this.create(); this.create();
}else{ } else {
this.update(); this.update();
} }
} }
//创建 //创建
create(){ create() {
const data = {};
this.overAllSer.createWebscenario(this.validateForm).subscribe( this.overAllSer.createWebscenario(this.validateForm).subscribe(
(res)=>{ (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
this.message.success('添加成功'); this.message.success('添加成功');
this.isVisible = false; this.isVisible = false;
this.done.emit(); this.done.emit();
this.initForm(); this.initForm();
}else{ } else {
this.message.error(res.errMsg); this.message.error(res.errMsg);
} }
this.isOkLoading = false;
} }
) );
} }
//更新 //更新
update(){ update() {
this.overAllSer.updateWebscenario(this.validateForm).subscribe( this.overAllSer.updateWebscenario(this.validateForm).subscribe(
(res)=>{ (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
this.message.success('保存成功'); this.message.success('保存成功');
this.isVisible = false; this.isVisible = false;
this.done.emit(); this.done.emit();
this.initForm(); this.initForm();
}else{ } else {
this.message.error(res.errMsg); this.message.error(res.errMsg);
} }
this.isOkLoading = false;
} }
) );
} }
handleCancel() { handleCancel() {
...@@ -128,25 +242,116 @@ export class WebsiteComponent implements OnInit { ...@@ -128,25 +242,116 @@ export class WebsiteComponent implements OnInit {
this.tabNum = index; this.tabNum = index;
} }
// 合成阈值
getCondition() {
this.validateForm.steps.forEach(e => { //步骤列表
if(e.conditionList){
e.condition = '';
e.conditionList.forEach(e1 => { //危险阈值列表
if (e1.time == '0') { //响应时间
e.condition += e1.and + '{0.0.0.0:web.test.time[' + this.validateForm.name + ',' + e.name + ',resp].last()}' + e1.equal + e1.value;
}
if (e1.time == '1') { //响应代码
e.condition += e1.and + '{0.0.0.0:web.test.rspcode[' + this.validateForm.name + ',' + e.name + '].last()}' + e1.equal + e1.value;
}
});
}
if(e.faultConditionList){
e.faultCondition = '';
e.faultConditionList.forEach(e2 => { //故障阈值列表
if (e2.time == '0') { //响应时间
e.faultCondition += e2.and + '{0.0.0.0:web.test.time[' + this.validateForm.name + ',' + e.name + ',resp].last()}' + e2.equal + e2.value;
}
if (e2.time == '1') { //响应代码
e.faultCondition += e2.and + '{0.0.0.0:web.test.rspcode[' + this.validateForm.name + ',' + e.name + '].last()}' + e2.equal + e2.value;
}
});
}
});
console.log(this.validateForm.steps);
}
//添加步骤 //添加步骤
addStep(){ addStep() {
this.indexNo += 1; this.indexNo += 1;
const data = const data =
{ {
name:'', name: '',
url:'', url: '',
status_codes:200, status_codes: 200,
posts:'', posts: '',
no:this.indexNo, no: this.indexNo,
timeout:'15', timeout: '15',
follow_redirects:'1', follow_redirects: '1',
condition:'', condition: '',
faultCondition:'', conditionList: [],
faultCondition: '',
faultConditionList: [],
show: false,
}; };
this.steps.push(data); this.steps.push(data);
} }
deleteStep(index){ showCon(i) {
this.steps.splice(index,1); this.steps[i].show = true;
}
closeCon(i, bool) {
if (!bool) {
this.steps[i].conditionList = [];
this.steps[i].faultConditionList = [];
}
this.steps[i].show = false;
}
//删除步骤
deleteStep(index) {
this.steps.splice(index, 1);
}
/**
* 故障阈值添加
* @param i 步骤下标
*/
addFault(i) {
const demo = {
time: '0',
and: ' and ',
equal: '=',
value: '',
};
this.steps[i].faultConditionList.push(demo);
}
/**
* 危险阈值增加
* @param i 步骤下标
*/
addcondition(i) {
const demo = {
time: '0',
and: ' and ',
equal: '=',
value: '',
};
this.steps[i].conditionList.push(demo);
}
/**
* 删除故障阈值
* @param i 步骤下标
* @param index 故障下标
*/
deleteFault(i, index) {
this.steps[i].faultConditionList.splice(index, 1);
}
/**
* 删除危险阈值
* @param i 步骤下标
* @param index 故障下标
*/
deleteCondition(i, index) {
this.steps[i].conditionList.splice(index, 1);
} }
} }
...@@ -209,7 +209,7 @@ ...@@ -209,7 +209,7 @@
<td></td> <td></td>
<td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand' <td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
(nzExpandChange)="getChildren(item)"> (nzExpandChange)="getChildren(item)">
<span>{{item.name}} <span style="color: #1b6b5bcc; margin-left: 10px">主机数量:{{item.hostcount}}</span> </span> <span>{{item.name}} <span style="color: #439d68; margin-left: 10px">主机数量:{{item.hostcount}}</span> </span>
</td> </td>
</ng-container> </ng-container>
<!--子集--> <!--子集-->
......
<nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
<form [formGroup]="validateForm" nz-form > <form [formGroup]="validateForm" nz-form >
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="groupName">部门名称</nz-form-label> <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="groupName">部门名称</nz-form-label>
......
...@@ -13,6 +13,7 @@ export class GroupModalComponent implements OnInit { ...@@ -13,6 +13,7 @@ export class GroupModalComponent implements OnInit {
title; title;
isVisible = false; isVisible = false;
isOkLoading = false;
validateForm:FormGroup; validateForm:FormGroup;
groupList:any[]; groupList:any[];
orgId; orgId;
...@@ -26,6 +27,7 @@ export class GroupModalComponent implements OnInit { ...@@ -26,6 +27,7 @@ export class GroupModalComponent implements OnInit {
} }
initForm(){ initForm(){
this.isOkLoading = false;
this.validateForm = this.fb.group({ this.validateForm = this.fb.group({
name:[null,[Validators.required,Validators.maxLength(15)]], name:[null,[Validators.required,Validators.maxLength(15)]],
parentId:[null], parentId:[null],
...@@ -64,6 +66,7 @@ export class GroupModalComponent implements OnInit { ...@@ -64,6 +66,7 @@ export class GroupModalComponent implements OnInit {
if(this.validateForm.invalid){ if(this.validateForm.invalid){
return false; return false;
} }
this.isOkLoading = true;
if(this.title == "新增部门"){ if(this.title == "新增部门"){
this.create(); this.create();
} }
......
...@@ -179,3 +179,9 @@ ...@@ -179,3 +179,9 @@
.margin-right-10{ .margin-right-10{
margin-right: 5px; margin-right: 5px;
} }
.margin-left-5{
margin-left: 5px;
}
.margin-left-10{
margin-left: 10px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment