<template>
|
<div class="specificationDetail-main">
|
<div class="page-header-tips">
|
<div class="search-bar">
|
<span :style="{marginRight:'12px', color:'#409EFF'}"> 产品名称：钢包钢心铝绞线</span>
|
<el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />V12</el-tag>
|
</div>
|
<div class="serve-btn">
|
<el-button type="primary" icon="el-icon-plus">编辑</el-button>
|
<el-button type="primary" icon="el-icon-plus">删除</el-button>
|
</div>
|
</div>
|
<div class="content-main">
|
<div class="specificationDetail-bom">
|
<div class="bom-item">
|
<div class="bom-item-search">
|
<el-row>
|
<el-col :span="19">
|
<el-input
|
v-model="filterText"
|
placeholder="输入关键字进行过滤"
|
/>
|
</el-col>
|
<el-col :span="5">
|
<el-button type="primary" size="small"><i class="el-icon-plus" /></el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-tree
|
ref="tree"
|
class="filter-tree"
|
:data="data"
|
:props="defaultProps"
|
default-expand-all
|
:filter-node-method="filterNode"
|
/>
|
</div>
|
<div class="bom-item">
|
<div class="bom-item-search">
|
<el-row>
|
<el-col :span="19">
|
<div class="tips">
|
<span />
|
<div>项目/子项目</div>
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<el-button type="primary" size="small" plain><i class="el-icon-plus" /></el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-tree
|
ref="tree"
|
class="filter-tree"
|
:data="item"
|
:props="defaultProps"
|
default-expand-all
|
:filter-node-method="filterNode"
|
/>
|
</div>
|
</div>
|
<div class="specificationDetail-card">
|
<div class="card-main">
|
<div class="tips-main">
|
<div class="tips">
|
<span />
|
<div>项目详情</div>
|
</div>
|
<div class="tips-btn">
|
<span><i class="el-icon-edit" />操作：</span>
|
<el-button type="text">编辑</el-button>
|
</div>
|
</div>
|
<div class="message">
|
<div class="message-item"><span><i class="el-icon-edit" />用户名：</span>121212121212</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />姓名：</span>
|
<el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />电话号码：</span>
|
19825217196</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />邮箱：</span>
|
1212112</div>
|
</div>
|
</div>
|
<div class="card-main">
|
<div class="tips-main">
|
<div class="tips">
|
<span />
|
<div>测试标准</div>
|
</div>
|
<div class="tips-btn">
|
<span><i class="el-icon-edit" />操作：</span>
|
<el-button type="text">编辑</el-button>
|
</div>
|
</div>
|
<div class="message">
|
<div class="message-item">
|
<el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>单位：欧姆</el-tag>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />招标人员要求：＜3444</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />内控值：＜3444</span>
|
1212112</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'SpecificationDetail',
|
data() {
|
return {
|
// 默认值
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
// 标准详情分类
|
data: [
|
{
|
id: 1,
|
label: '一级 1'
|
},
|
{
|
id: 2,
|
label: '一级 1'
|
},
|
{
|
id: 3,
|
label: '一级 1'
|
},
|
{
|
id: 4,
|
label: '一级 1'
|
}
|
],
|
item: [{
|
id: 1,
|
label: '一级 1',
|
children: [{
|
id: 4,
|
label: '二级 1-1',
|
children: [{
|
id: 9,
|
label: '三级 1-1-1'
|
}, {
|
id: 10,
|
label: '三级 1-1-2'
|
}]
|
}]
|
}],
|
searchData: {
|
keyword: ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.specificationDetail-main{
|
// 页面头部条件搜索
|
.page-header-tips{
|
background: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 24px 12px 24px;
|
.search-bar{
|
.el-radio-button.is-active{
|
color: #409EFF !important;
|
background: #ecf5ff !important;
|
border-color: #b3d8ff !important;
|
}
|
>span{
|
font-size: 20px;
|
}
|
}
|
}
|
// 页面中心内容区域
|
.content-main{
|
display: flex;
|
height: 100%;
|
min-height: calc(100vh - 88px);
|
// .specificationDetail-bom,.specificationDetail-card{
|
// padding: 20px;
|
// background: #fff;
|
// }
|
.specificationDetail-bom{
|
flex: 50%;
|
margin-right: 12px;
|
display: flex;
|
>div:nth-child(1){
|
flex: 43%;
|
|
margin-right: 12px;
|
padding: 20px;
|
background: #fff;
|
}
|
>div:nth-child(2){
|
flex: 57%;
|
|
margin-left: 12px;
|
background: #fff;
|
padding: 20px;
|
|
}
|
.bom-item{
|
flex: 50%;
|
.bom-item-search{
|
margin-bottom: 12px;
|
::v-deep .el-input{
|
input{
|
height: 33px;
|
line-height: 33px;
|
}
|
}
|
.tips{
|
height: 33px !important;
|
display: flex;
|
height: 24px;
|
align-items: center;
|
font-size: 16px;
|
// margin-bottom: 12px;
|
>span{
|
display: inline-block;
|
margin-right: 10px;
|
width: 4px;
|
height: 16px;
|
background: #0077DB;
|
}
|
>div{
|
height: 100%;
|
line-height: 36px;
|
}
|
.el-button{
|
padding: 0;
|
}
|
}
|
}
|
.bom-item-search .el-row{
|
// display: flex;
|
.el-col{
|
text-align: right;
|
}
|
}
|
}
|
}
|
.specificationDetail-card{
|
flex: 50%;
|
margin-left: 12px;
|
.card-main{
|
background: #fff;
|
// padding: 10px 20px 10px 20px;
|
margin: 0;
|
margin-bottom: 12px;
|
border-radius: 6px;
|
overflow: hidden;
|
.tips-main{
|
// margin: ;
|
padding: 10px 20px 0 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
// height: ;
|
&:hover{
|
background: #85bff810;
|
.tips-btn{
|
display: block;
|
left: 0;
|
opacity:1;
|
}
|
}
|
.tips-btn{
|
height: 100%;
|
// display: none;
|
position: relative;
|
opacity:0;
|
left: 100px;
|
transition: all 0.3s ease-in-out;
|
}
|
.tips{
|
height: 100%;
|
display: flex;
|
height: 24px;
|
align-items: center;
|
font-size: 16px;
|
// margin-bottom: 12px;
|
>span{
|
display: inline-block;
|
margin-right: 10px;
|
width: 4px;
|
height: 16px;
|
background: #0077DB;
|
}
|
>div{
|
height: 100%;
|
line-height: 26px;
|
}
|
.el-button{
|
padding: 0;
|
}
|
}
|
}
|
|
// 基本信息和企业信息的每一个信息项样式
|
.message{
|
padding: 0px 20px 10px 20px;
|
|
display: flex;
|
flex-wrap: wrap;
|
border-top: 1px solid #F2F6FC;
|
// border-top: 1px solid #F2F6FC;
|
>div{
|
flex: 50%;
|
max-width: 50%;
|
padding: 8px;
|
color: #606266;
|
align-items: center;
|
// height: 65px;
|
font-size: 12px;
|
height: 52px;
|
display: flex;
|
align-items: center;
|
>span{
|
color: #303133;
|
font-size: 16px;
|
//
|
>i{
|
margin-right: 8px;
|
}
|
}
|
}
|
// >div:nth-child(5){
|
// flex: 60%;
|
// max-width: 60%;
|
// }
|
}
|
}
|
}
|
}
|
}
|
</style>
|
