修改流程样式

This commit is contained in:
zhoulingpo
2023-04-19 14:38:33 +08:00
parent 09260eb716
commit e4d9a33eb4
8 changed files with 214 additions and 163 deletions
+89 -58
View File
@@ -1,21 +1,29 @@
<template>
<div class="content">
<div class="centerBox content-height">
<div class="title">
<span>流程中心</span>
</div>
<div class="searchForm">
<div class="item">
<div>流程编号</div>
<el-input v-model="form.id" ></el-input>
</div>
<div class="item">
<div>流程名称</div>
<el-input v-model="form.name"></el-input>
</div>
<div class="item">
<div class="search">
<el-row>
<el-col :span="20">
<div class="search-box-left">
<div class="">
<label>流程编号:</label>
<el-input v-model="form.id" placeholder="请输入流程编号"></el-input>
</div>
<div class="">
<label>流程名称:</label>
<el-input v-model="form.name" placeholder="请输入流程名称"></el-input>
</div>
</div>
</el-col>
<el-col :span="4" align="right">
<div class="search-box-right">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="" @click="reset">重置</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="tabs">
<tabs />
@@ -25,68 +33,91 @@
<script>
import tabs from '../userCenter/processCenter/tabs.vue'
export default {
name:'processCenter',
components:{
tabs
},
data() {
return {
form: {}
}
},
created () {
;
},
mounted () {
;
},
methods: {
//查询
search() {
// this.$api.processCenter.search({})
},
//重置
reset(){
this.form={}
// this.$api.processCenter.reset({})
}
},
export default {
name: 'processCenter',
components: {
tabs
},
data () {
return {
form: {}
}
},
created () {
},
mounted () {
},
methods: {
// 查询
search () {
// this.$api.processCenter.search({})
},
// 重置
reset () {
this.form = {}
// this.$api.processCenter.reset({})
}
}
}
</script>
<style lang="scss" scoped>
.content{
.centerBox{
background-color: #fff;
height: 100%;
width: 100%;
.title {
border-bottom: 1px solid #EBEEF5;
height: 42px;
line-height: 42px;
margin: 0 18px 0 22px;
margin: 0 18px 0 22px;
span {
font-size: 16px;
font-weight: 600;
color: #262626;
}
}
.searchForm{
width: 1200px;
display: flex;
align-items: center;
margin: 20px 0 0 22px;
.item{
width: 300px;
display: flex;
align-items: center;
.search {
.search-box-left {
padding-top: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
label {
font-size: 14px;
font-weight: 400;
color: #595959;
margin-right: 5px;
padding-left: 22px;
}
::v-deep .el-input {
width: 167px;
margin-right: 5px;
}
@media screen and (max-width: 1366px) {
::v-deep .el-input {
width: 135px;
margin-right: 5px;
}
}
}
.search-box-right {
padding-top: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 14px;
}
}
.tabs{
margin: 20px 0 0 5px;
margin: 20px 20px 5px;
}
}
::v-deep .el-input{
width: 200px;
}
</style>
</style>