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输入框 |
||||
.el-input--small .el-input__inner { |
||||
width: 420px; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
border-radius: 3px 3px 3px 3px; |
||||
color: #333; |
||||
position: relative; |
||||
border: 1px solid #CFCFCF |
||||
} |
||||
// input输入框label |
||||
.el-form--label-top .el-form-item__label { |
||||
font-size: 16px; |
||||
color: #273240; |
||||
padding: 0!important; |
||||
// // input输入框 |
||||
// .el-input--small .el-input__inner { |
||||
// width: 420px; |
||||
// height: 50px; |
||||
// line-height: 50px; |
||||
// border-radius: 3px 3px 3px 3px; |
||||
// color: #333; |
||||
// position: relative; |
||||
// border: 1px solid #CFCFCF |
||||
// } |
||||
// // input输入框label |
||||
// .el-form--label-top .el-form-item__label { |
||||
// font-size: 16px; |
||||
// color: #273240; |
||||
// 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