meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lx

Browse Source
This commit is contained in:
lixin
2018-12-14 17:21:41 +08:00
parent 2d6d5b382d
commit 971c658d97
14 changed files with 2074 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/views/BasicData/FactoryCalendar/index.vue Normal file
View File

@@ -0,0 +1,257 @@
<template>
<div style="width: 100%;">
<el-card style="width: 400px;margin: auto;margin-top: 20px">
<div class="flex">
<div>
<calendar :events="calendar1.events" :value="calendar1.value" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" @search="search" @select="select" />
</div>
</div>
</el-card>
<el-card style="width: 400px;text-align: center;margin: auto">
<el-button type="primary" plain @click="setWork">上班</el-button>
<el-button type="success" plain @click="setRest">休息</el-button>
<el-button type="warning" plain @click="setToday">返回今天</el-button>
</el-card>
</div>
</template>
<script>
import { initClendar, changeState } from '@/api/BasicData/FactoryCalendar'
import calendar from '@/components/Calendar/calendar.vue'
export default {
components: {
calendar
},
data() {
return {
year: '', // 年
month: '', // 月
selectDate: '', // 选择的日期
time: '',
serNum: [], // 工作日流水号
serNumValue: '', // 工作日流水号值
arr: [], // 日期数组
arr1: [], // 日期数组
calendar1: {
value: [],
weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
events: {} // 上不上班
}
}
},
created() {
this.fetchData()
},
methods: {
select(val) { // 选择
this.selectDate = val[0] + '-' + val[1] + '-' + val[2]
},
setToday() { // 返回今天
this.fetchData()
},
fetchData() { // 日历初始化
var date = new Date()
this.year = date.getFullYear()
this.month = date.getMonth() + 1
this.day = date.getDate()
this.calendar1.value = [this.year, this.month, this.day] // 当前日期!
var events = Object() // 声明events是object对象
initClendar(this.year, this.month).then(response => {
for (let i = 0; i < response.data.length; i++) { // 这个循环是将时间1900-01-01转成1900-1-1型
var str = response.data[i].工作日期
var str1 = str.substr(0, 10)
var nian = str.substr(0, 4)
var yue = str.substr(5, 2)
var ri = str.substr(8, 2)
if (str.substr(5, 1) === '0') {
yue = yue.replace('0', '')
}
if (str.substr(8, 1) === '0') {
ri = ri.replace('0', '')
}
var x = nian + '-' + yue + '-' + ri
events[x] = response.data[i].是否工作
this.arr.push(x)
this.arr1.push(str1)
}
this.calendar1.events = events
})
},
search(year1, month1) { // ！子组件的，上下月，改变年
var events = Object() // 声明events是object对象
initClendar(year1, month1).then(response => {
this.serNum = []
this.arr = []
this.arr1 = []
for (let i = 0; i < response.data.length; i++) { // 这个循环是将时间1900-01-01转成1900-1-1型
var str = response.data[i].工作日期
var str1 = str.substr(0, 10)
var nian = str.substr(0, 4)
var yue = str.substr(5, 2)
var ri = str.substr(8, 2)
if (str.substr(5, 1) === '0') {
yue = yue.replace('0', '')
}
if (str.substr(8, 1) === '0') {
ri = ri.replace('0', '')
}
var x = nian + '-' + yue + '-' + ri
this.arr.push(x)
this.arr1.push(str1)
events[x] = response.data[i].是否工作
}
this.calendar1.events = events
})
},
setWork() { // 上班
this.code = 1
for (let i = 0; i < this.arr.length; i++) {
if (this.arr[i] === this.selectDate) {
this.time = this.arr1[i]
break
}
}
changeState(this.time, this.code).then(response => {
if (response.data[0].result === '1') {
this.fetchData()
this.$message.success('更改状态成功')
} else {
this.$message.error('更改状态失败')
}
})
},
setRest() { // 休息
this.code = 0
for (let i = 0; i < this.arr.length; i++) {
if (this.arr[i] === this.selectDate) {
this.time = this.arr1[i]
break
}
}
changeState(this.time, this.code).then(response => {
if (response.data[0].result === '1') {
this.fetchData()
this.$message.success('更改状态成功')
} else {
this.$message.error('更改状态失败')
}
})
}
}
}
</script>
<style>
/*demo*/
.flex{
box-sizing: border-box;
display: -webkit-box;
-webkit-box-pack: start;
-webkit-box-align: start;
display: -webkit-flex;
-webkit-justify-content: space-between;
-webkit-align-items: top;
display: flex;
justify-content: space-between;
align-items: top;
flex-flow:row wrap
}
.flex>div{
margin:10px;
padding:20px;
width:25%;
min-width:300px;
border-radius: 2px;
position: relative;
}
.flex>div>span{
position: absolute;
left:0px;
top:0px;
padding:2px 10px;
font-size:10px;
border-radius:0 0 2px 0;
background:#ea6151;
color:#fff;
}
.flex>div>input{
box-sizing: border-box;
width:100%;
margin-top:20px;
border-radius: 2px;
border:1px solid #dedede;
padding:10px;
font-size: 16px;
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwpAZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IGlmb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUuZW90PyNpZWZpeCIpIGZvcm1hdCgiZW1iZWRkZWQtb3BlbnR5cGUiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzE0NDIzNzM4OTZfNDc1NDQ1NS53b2ZmIikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUudHRmIikgZm9ybWF0KCJ0cnVldHlwZSIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTQ0MjM3Mzg5Nl80NzU0NDU1LnN2ZyNpZm9udCIpIGZvcm1hdCgic3ZnIik7IH0KCl1dPjwvc3R5bGU+PC9kZWZzPjxnIGNsYXNzPSJ0cmFuc2Zvcm0tZ3JvdXAiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUsIDAuMDE1NjI1KSI+PHBhdGggZD0iTTcxMS4zMDYyIDI5MC42OTcyYzI0LjI4MjEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTU0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMjYgMC00My45ODggMTkuNzI4NC00My45ODggNDQuMDUzNXYyMDAuMTA0OTZDNjY3LjMxODMgMjcwLjk5MDMgNjg3LjAwMzYgMjkwLjY5NzIgNzExLjMwNjIgMjkwLjY5NzJ6TTYyMy40ODA4IDExMy40MjAzSDQwMC43NjQ5Mjh2NjYuNTEzOTJoMjIyLjcxNTkwNDAwMDAwMDAyVjExMy40MjAyODh6TTg4NC4wNTMgMTEzLjQyMDNoLTgyLjc3NDAxNnY2Ni4xNDUyOGg4NS45NDAyMjRjMjUuMjc4NSAwIDQ2LjYxMTUgMjEuMzc2IDQ2LjYxMTUgNDYuNjc3djE1My45Mjc2OEg5MC40Mzg2NTYwMDAwMDAwMXYtMTUzLjkyNzY4YzAtMjUuMyAyMS4zMzMtNDYuNjc3IDQ2LjYxMTUtNDYuNjc3aDg2LjUwMzQyNFYxMTMuNDIwMjg4aC04Mi42NDI5NDRjLTY0LjA4NiAwLTExNi41MDc2IDUyLjUwODctMTE2LjUwNzYgMTE2LjcwMzJ2Njc2LjgwMTUzNTk5OTk5OTljMCA2NC4xNzQxIDUwLjQ5MTQgMTE2LjY4MDcgMTE0LjU3NzQgMTE2LjY4MDdIODg0LjA1Mjk5MmM2NC4wNjI1IDAgMTE2LjUwNjYtNTIuNTA2NiAxMTYuNTA2Ni0xMTYuNjgwN1YyMzAuMTIzNTE5OTk5OTk5OThDMTAwMC41NTk2IDE2NS45MjkgOTQ4LjExNDQgMTEzLjQyMDMgODg0LjA1MyAxMTMuNDIwM3pNOTMzLjgyOTYgOTEwLjM1MTRjMCAyNS4zLTIxLjMzMyA0Ni42NzYtNDYuNjExNSA0Ni42NzZIMTM3LjA1MDExMTk5OTk5OTk4Yy0yNS4yNzg1IDAtNDYuNjExNS0yMS4zNzYtNDYuNjExNS00Ni42NzZWNDQ2LjQ0NTU2OEg5MzMuODI5NjMyVjkxMC4zNTEzNnpNMjY3LjEwODQgNjQ2LjE4MTljMzYuODc3MyAwIDY2Ljc1MjUtMjkuOTM5NyA2Ni43NTI1LTY2Ljg4MTUgMC0zNi45MjI0LTI5Ljg3NTItNjYuODYxMS02Ni43NTI1LTY2Ljg2MTEtMzYuODU0OCAwLTY2Ljc1MjUgMjkuOTM5Ny02Ni43NTI1IDY2Ljg2MTFDMjAwLjM1NTggNjE2LjI0MjIgMjMwLjI1MjUgNjQ2LjE4MTkgMjY3LjEwODQgNjQ2LjE4MTl6TTUxMS41NDg0IDY0Ni4xODE5YzM2Ljg1NTggMCA2Ni43NTI1LTI5LjkzOTcgNjYuNzUyNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTU3LTY2Ljg2MTEtNjYuNzUyNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzQ0NC43OTU5IDYxNi4yNDIyIDQ3NC42NzExIDY0Ni4xODE5IDUxMS41NDg0IDY0Ni4xODE5ek0yNjUuOTE2NCA4OTAuNzA5YzM2Ljg3NzMgMCA2Ni43NTE1LTI5LjkzOTcgNjYuNzUxNS02Ni44NjExIDAtMzYuOTQyOC0yOS44NzQyLTY2Ljg4MjYtNjYuNzUxNS02Ni44ODI2LTM2Ljg1NTggMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44ODI2QzE5OS4xNjM5IDg2MC43NjkzIDIyOS4wNTk2IDg5MC43MDkgMjY1LjkxNjQgODkwLjcwOXpNNTExLjU0ODQgODkwLjcwOWMzNi44NTU4IDAgNjYuNzUyNS0yOS45Mzk3IDY2Ljc1MjUtNjYuODYxMSAwLTM2Ljk0MjgtMjkuODk1Ny02Ni44ODI2LTY2Ljc1MjUtNjYuODgyNi0zNi44NzczIDAtNjYuNzUyNSAyOS45Mzk3LTY2Ljc1MjUgNjYuODgyNkM0NDQuNzk1OSA4NjAuNzY5MyA0NzQuNjcxMSA4OTAuNzA5IDUxMS41NDg0IDg5MC43MDl6TTc1NS42NDEzIDY0Ni4xODE5YzM2Ljg1NjggMCA2Ni43NTM1LTI5LjkzOTcgNjYuNzUzNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTY3LTY2Ljg2MTEtNjYuNzUzNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzY4OC44ODk5IDYxNi4yNDIyIDcxOC43NjQgNjQ2LjE4MTkgNzU1LjY0MTMgNjQ2LjE4MTl6TTMxMS43MDM2IDI5MC42OTcyYzI0LjI4MTEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTQ0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMTYgMC00My45ODkgMTkuNzI4NC00My45ODkgNDQuMDUzNXYyMDAuMTA0OTZDMjY3LjcxNDYgMjcwLjk5MDMgMjg3LjQwMiAyOTAuNjk3MiAzMTEuNzAzNiAyOTAuNjk3MnoiIGZpbGw9IiM1ZTdhODgiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==) no-repeat 8px 10px;
padding-left: 36px;
color:#666;
}
/*transition*/
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease-in-out;
}
.fade-enter,.fade-leave-active{
opacity: 0;
transform: translateY(-10px);
}
/*下拉框*/
.calendar-dropdown{
background: #fff;
position: absolute;
left:0;
top:0;
padding:20px;
border: 1px solid #eee;
border-radius: 2px;
}
.calendar-dropdown:before {
position: absolute;
left:30px;
top: -10px;
content: "";
border:5px solid rgba(0, 0, 0, 0);
border-bottom-color: #DEDEDE;
}
.calendar-dropdown:after {
position: absolute;
left:30px;
top: -9px;
content: "";
border:5px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
}
/*弹出框*/
.calendar-dialog{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.calendar-dialog-mask{
background:rgba(255,255,255,.5);
width:100%;
height:100%;
}
.calendar-dialog-body{
background: #fff;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
padding:20px;
border: 1px solid #eee;
border-radius: 2px;
}
</style>

301
src/views/BasicData/ShiftManagement/index.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<div class="app-container">
<table style="width: 100%">
<el-card>
<span style="margin-left: 15px">班次类型:</span>
<el-select v-model="roleName" placeholder="班次类型" clearable size="small" style="width:200px">
<el-option
v-for="item in roleNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<el-button type="success" icon="el-icon-search" size="small" style="margin-left: 15px" @click="pageCurrent1=1;searchTable()">查询</el-button>
<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handelAdd">增加</el-button>
</el-card>
<el-card>
<el-table :data="tableData" highlight-current-row>
<el-table-column label="开始工作时间">
<template slot-scope="scope">
{{ scope.row.开始工作时间 }}
</template>
</el-table-column>
<el-table-column disabled label="结束工作时间" >
<template slot-scope="scope">
{{ scope.row.结束工作时间 }}
</template>
</el-table-column>
<el-table-column label="班次类型">
<template slot-scope="scope">
{{ scope.row.班次类型 }}
</template>
</el-table-column>
<el-table-column label="班次代码">
<template slot-scope="scope">
{{ scope.row.班次代码 }}
</template>
</el-table-column>
<el-table-column label="是否夜班">
<template slot-scope="scope">
{{ scope.row.是否夜班 }}
</template>
</el-table-column>
<el-table-column label="是否工作">
<template slot-scope="scope">
{{ scope.row.是否工作 }}
</template>
</el-table-column>
<el-table-column label="是否工作">
<template slot-scope="scope">
{{ scope.row.是否工作 }}
</template>
</el-table-column>
<el-table-column label="日工作能力">
<template slot-scope="scope">
{{ scope.row.日工作能力 }}
</template>
</el-table-column>
<el-table-column label="是否可以安排高难度件">
<template slot-scope="scope">
{{ scope.row.是否可以安排高难度件 }}
</template>
</el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
@click="submitEdit(scope.$index, scope.row)">修改</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent1"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="10"
:total="total1"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"/>
</div>
</el-card>
</table>
<el-dialog :visible.sync="dialogFormVisible1" title="增加" center style="min-height: 270px" width="800px">
<el-form ref="form1" :model="form1" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="员工姓名" prop="staffName">
<el-input v-model="form1.staffName" placeholder="请双击选择" size="small" clearable style="width:200px" @dblclick.native="dialogTableVisible()"/>
</el-form-item>
<el-form-item label="角色名称" prop="roleName">
<el-select v-model="form1.roleName" placeholder="角色名称" size="small" clearable style="width:200px">
<el-option
v-for="item in roleNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考勤编号" >
<el-input
v-model="cjscgy"
disabled
size="small"
style="width:200px"/>
</el-form-item>
<el-form-item label="所属部门" >
<el-input v-model="ssks" size="small" style="width:200px"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOFF">取 消</el-button>
<el-button type="primary" @click="submitAdd1()">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogFormVisible2" title="编辑" center style="min-height: 270px" width="800px">
<el-form ref="form2" :model="form2" :rules="rules1" label-position="left" label-width="110px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="员工姓名" >
<el-input v-model="form2.staffName" disabled size="small" clearable style="width:200px"/>
</el-form-item>
<el-form-item label="角色名称" prop="roleName">
<el-select v-model="form2.roleName" placeholder="角色名称" clearable size="small" style="width:200px">
<el-option
v-for="item in roleNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考勤编号" >
<el-input
v-model="cjscgy"
disabled
size="small"
style="width:200px"/>
</el-form-item>
<el-form-item disabled="true" label="所属部门" >
<el-input v-model="ssks" disabled size="small" style="width:200px"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOFF">取消</el-button>
<el-button type="primary" @click="submitAdd2()">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getScheduling, searchProgramme, addShift, editShift, deleteShift } from '@/api/BasicData/ShiftManagement'
export default {
data() {
return {
roleName: '',
roleNames: [],
tableData: [],
hour: '',
minutes: '',
seconds: '',
tableDatate: [],
dialogFormVisible: false
}
},
created() {
this.searchData()
},
methods: {
searchData() {
searchProgramme().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.roleNames.push({
label: response.data[i].班次代码,
value: response.data[i].班次代码
})
}
})
},
searchTable() {
getScheduling(this.roleName).then(response => {
this.tableDatate = response.data
console.log(response.data)
for (let i = 0; i < this.tableDatate.length; i++) {
this.hour = this.tableDatate[i].开始工作时间.Hours
this.minutes = this.tableDatate[i].开始工作时间.Minutes
this.seconds = this.tableDatate[i].开始工作时间.Seconds
this.tableDatate[i].开始工作时间 = JSON.stringify(this.tableDatate[i].开始工作时间)
this.tableDatate[i].开始工作时间 = this.hour.toString() + ':' + this.minutes.toString() + ':' + this.seconds.toString()
}
for (let i = 0; i < this.tableDatate.length; i++) {
this.hour = this.tableDatate[i].结束工作时间.Hours
this.minutes = this.tableDatate[i].结束工作时间.Minutes
this.seconds = this.tableDatate[i].结束工作时间.Seconds
this.tableDatate[i].结束工作时间 = JSON.stringify(this.tableDatate[i].结束工作时间)
this.tableDatate[i].结束工作时间 = this.hour.toString() + ':' + this.minutes.toString() + ':' + this.seconds.toString()
}
this.tableData = this.tableDatate
})
},
submitAdd1() {
this.$refs['form1'].validate((valid) => {
if (valid) {
addShift(this.personnelNumber, this.form1.roleName).then(response => {
if (response.data[0].result === '1') {
this.$message.success('增加成功')
this.ssks = ''
this.form1.staffName = ''
this.form1.roleName = ''
this.searchData()
this.dialogFormVisible1 = false
} else { this.$message.error('增加失败') }
})
} else {
console.log('error submit!!')
return false
}
})
},
submitAdd2() {
this.$refs['form2'].validate((valid) => {
if (valid) {
editShift(this.personnelStream, this.personnelNumber, this.form2.roleName).then(response => {
if (response.data[0].result === '1') {
this.$message.success('修改成功')
this.ssks = ''
this.searchData()
this.dialogFormVisible2 = false
} else { this.$message.error('修改失败') }
})
} else {
console.log('error submit!!')
return false
}
})
},
handleDelete(row) { // 删除
this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteShift(row.人员角色流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
} else { this.$message.error('删除失败') }
this.searchData()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handleCurrentChange(row) { // 获取当前行人员信息
this.ssks = row.节点名称
this.number = row.考勤编号
this.name = row.姓名
this.personnelNumber = row.人员编号
},
getName() { // 提交人员
this.cjscgy = this.number
this.dialogFormVisible = false
this.form1.staffName = this.name
this.form2.staffName = this.name
}
}
}
</script>
<style scoped>
.el-card{
margin-bottom:15px;
margin-left: 15px;
margin-right: 15px;
}
</style>