parent
bf5ad2a2c1
commit
c28dce9f17
11 changed files with 158 additions and 25 deletions
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 749 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
@ -1,16 +1,23 @@ |
|||||||
// input输入框 |
// // input输入框 |
||||||
.el-input--small .el-input__inner { |
// .el-input--small .el-input__inner { |
||||||
width: 420px; |
// width: 420px; |
||||||
height: 50px; |
// height: 50px; |
||||||
line-height: 50px; |
// line-height: 50px; |
||||||
border-radius: 3px 3px 3px 3px; |
// border-radius: 3px 3px 3px 3px; |
||||||
color: #333; |
// color: #333; |
||||||
position: relative; |
// position: relative; |
||||||
border: 1px solid #CFCFCF |
// border: 1px solid #CFCFCF |
||||||
} |
// } |
||||||
// input输入框label |
// // input输入框label |
||||||
.el-form--label-top .el-form-item__label { |
// .el-form--label-top .el-form-item__label { |
||||||
font-size: 16px; |
// font-size: 16px; |
||||||
color: #273240; |
// color: #273240; |
||||||
padding: 0!important; |
// padding: 0!important; |
||||||
|
// } |
||||||
|
// 包裹容器 |
||||||
|
.cus-container { |
||||||
|
margin: 0 38px; |
||||||
|
border: 1px solid blue; |
||||||
|
height: 100%; |
||||||
|
width: calc(100% - 76px); |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,119 @@ |
|||||||
|
<template> |
||||||
|
<div class="cus-container"> |
||||||
|
<el-form :model="searchForm"> |
||||||
|
<div class="search"> |
||||||
|
<div> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.company" |
||||||
|
placeholder="公司" |
||||||
|
class="search-select" |
||||||
|
|
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in conpanyList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.company" |
||||||
|
placeholder="公司" |
||||||
|
class="search-select" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in conpanyList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.company" |
||||||
|
placeholder="公司" |
||||||
|
class="search-select" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in conpanyList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.company" |
||||||
|
placeholder="公司" |
||||||
|
class="search-select" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in conpanyList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
<div style="display:flex;"> |
||||||
|
<el-input |
||||||
|
:rows="18" |
||||||
|
v-model="searchForm.name" |
||||||
|
placeholder="请输入" |
||||||
|
class="search-input" |
||||||
|
></el-input> |
||||||
|
<el-button class="search-btn">查询</el-button> |
||||||
|
<el-button class="search-btn" style="margin:0;background:#2EE27C;">导出</el-button> |
||||||
|
<div class="search-reset"> |
||||||
|
<i class="el-icon-refresh-right" style="font-size:20px;"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
<div>1</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
searchForm: {}, |
||||||
|
conpanyList: [{ label: "运维公司", value: 1 }], |
||||||
|
}; |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.search { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.search-select { |
||||||
|
width: 150px; |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.search-input { |
||||||
|
width: 288px; |
||||||
|
} |
||||||
|
.search-btn { |
||||||
|
width: 130px; |
||||||
|
height: 46px !important; |
||||||
|
background: #2E92F6; |
||||||
|
color:#fff; |
||||||
|
margin: 0 20px; |
||||||
|
} |
||||||
|
.search-reset { |
||||||
|
width: 46px; |
||||||
|
height: 46px !important; |
||||||
|
background: #FF9130; |
||||||
|
margin-left:20px; |
||||||
|
color:#fff; |
||||||
|
text-align: center; |
||||||
|
line-height: 46px; |
||||||
|
} |
||||||
|
/deep/ .el-input__inner{ |
||||||
|
height: 46px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue