<script setup>
|
const disposeList = $ref([
|
'彩釉',
|
'蒙砂',
|
'镀膜',
|
'贴膜',
|
'喷砂',
|
'磨边'
|
])
|
let processList = $ref([
|
'磨边',
|
'镀膜',
|
'倒角',
|
'清洗',
|
'打孔',
|
'挖缺',
|
'挖槽',
|
'水切割',
|
'丝印',
|
'半钢化',
|
'钢化',
|
'夹层',
|
'中空',
|
'包装'
|
])
|
|
</script>
|
|
<template>
|
<div id="main-div">
|
<div class="glass-param inline-flex"
|
:style="{
|
boxShadow: `var(--el-box-shadow-lighter)`,
|
}"
|
>
|
<div class="glass-type">
|
<h5>材料属性</h5>
|
<el-row :gutter="50">
|
<!-- <el-col :span="6"></el-col>-->
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-select size="small" clearable placeholder="*厚度:" />
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-select size="small" clearable placeholder="*颜色:" />
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content ep-bg-purple" >
|
<el-select size="small" clearable placeholder="*工艺属性:" />
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-select size="small" clearable placeholder="位置:" />
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content ep-bg-purple" >
|
<el-select size="small" clearable placeholder="LOW-E面:" />
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="line"/>
|
<div class="glass-dispose">
|
<h5>表面处理</h5>
|
<div class="glass-dispose-detail">
|
<div v-for="n in 2" class="glass-dispose-detail-1">
|
<p style="writing-mode: vertical-rl;">
|
{{n===1?'第一面':'第二面'}}
|
</p>
|
<div class="glass-dispose-detail-list"
|
v-for="(item,index) in disposeList"
|
>
|
<el-checkbox
|
:label="item" size="large" />
|
<el-input
|
v-if="index==0 && n==1"
|
class="dispose-input"
|
size="small"
|
clearable />
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
<div class="line"/>
|
<div class="glass-process">
|
<h5>材料属性</h5>
|
<el-checkbox
|
v-for="item in processList"
|
:label="item"
|
class="glass-process-checkbox"
|
size="small" />
|
</div>
|
<div class="line"/>
|
<div class="glass-spacer">
|
<div class="glass-spacer-jc">
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*中空厚度:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*充气方式:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*封胶:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*默认胶深:" />
|
<el-button
|
size="small"
|
type="primary"
|
round>中空间隔物</el-button>
|
|
</div>
|
<div class="glass-spacer-zk">
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*夹层厚度:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*类型:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*颜色:" />
|
<el-button
|
size="small"
|
type="primary"
|
style="margin-left: 100px"
|
round>夹层间隔物</el-button>
|
</div>
|
</div>
|
<div class="line"/>
|
<div class="glass-oneSlice">
|
<div class="glass-oneSlice-type">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1" style="margin-left: 0.5rem" >单片玻璃属性：</el-text>
|
</div>
|
</el-col>
|
<el-col :span="13">
|
<div class="grid-content ep-bg-purple" >
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="grid-content ep-bg-purple" >
|
<el-button
|
size="small"
|
type="primary"
|
round>重置</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="glass-oneSlice-type">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1" style="margin-left: 0.5rem" >工艺流程属性：</el-text>
|
</div>
|
</el-col>
|
<el-col :span="13">
|
<div class="grid-content ep-bg-purple" >
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="grid-content ep-bg-purple" >
|
<el-button
|
size="small"
|
type="primary"
|
round>确认</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="glass-other">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
快速查询：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
计重厚度：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
厚度：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
备注：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
</el-row>
|
|
</div>
|
</div>
|
|
|
<div class="glass-part inline-flex"
|
:style="{
|
boxShadow: `var(--el-box-shadow-lighter)`,
|
}">
|
<div class="glass-part-all">
|
<el-row >
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1" size="large" >产品名称：</el-text>
|
</div>
|
</el-col>
|
<el-col :span="20">
|
<div class="grid-content ep-bg-purple" >
|
<el-input size="large" disabled />
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<div class="glass-part-detail">
|
<el-row style="width: 90%" >
|
<el-col :span="4">
|
<el-button
|
size="small"
|
type="primary"
|
round>修改玻璃</el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-input
|
value="5mm白玻"
|
size="small"
|
disabled />
|
</el-col>
|
</el-row>
|
<el-row style="width: 90%" >
|
<el-col :span="4">
|
<el-button
|
size="small"
|
type="primary"
|
round>修改夹层</el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-input
|
value="5mmPVB透明"
|
size="small"
|
disabled />
|
</el-col>
|
</el-row>
|
<el-row style="width: 90%" >
|
<el-col :span="4">
|
<el-button
|
size="small"
|
type="primary"
|
round>修改玻璃</el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-input
|
value="5mm白玻"
|
size="small"
|
disabled />
|
</el-col>
|
</el-row>
|
|
</div>
|
<el-button
|
style="float: right;
|
margin-right: 0.5rem;"
|
|
size="large"
|
type="primary"
|
round>重置</el-button>
|
</div>
|
</div>
|
</template>
|
|
<style scoped >
|
#main-div{
|
width: 100%;
|
height: 100%;
|
}
|
.glass-param{
|
height: 100%;
|
width: 59.5%;
|
float: left;
|
}
|
.glass-part{
|
height: 100%;
|
width: 39.5%;
|
float: right;
|
}
|
.glass-type{
|
width: 100%;
|
height: 12%;
|
|
}
|
.glass-dispose{
|
width: 100%;
|
height: 20%;
|
}
|
.glass-dispose-detail{
|
margin-top: 0.5rem;
|
margin-left: 0.5rem;
|
|
}
|
.glass-dispose-detail-1{
|
width:50%;
|
height: 15vh;
|
float: left;
|
}
|
.glass-dispose-detail-1 p{
|
height: 80%;
|
float: left;
|
margin-top: 2%;
|
}
|
.glass-dispose-detail-list{
|
width: 45%;
|
float: left;
|
height: 25px;
|
}
|
.dispose-input{
|
width:70px;
|
margin-left: 1rem;
|
}
|
.glass-process{
|
width: 100%;
|
height: 25%;
|
}
|
.glass-process-checkbox{
|
margin-left: 0.5rem;
|
float: left;
|
}
|
.glass-spacer{
|
width: 100%;
|
height: 15%;
|
margin-bottom: 0;
|
}
|
.glass-spacer div{
|
width: 100%;
|
height: 50%;
|
}
|
.glass-oneSlice{
|
width: 100%;
|
height: 10%;
|
//background-color: #1890FF;
|
}
|
.glass-oneSlice-type{
|
width: 100%;
|
height: 20%;
|
}
|
.glass-other{
|
width: 100%;
|
height: 10%;
|
}
|
.glass-part-all{
|
margin-left: 2%;
|
margin-top: 2%;
|
width: 96%;
|
height: 10%;
|
}
|
.glass-part-detail{
|
margin-left: 2%;
|
margin-top: 2%;
|
width: 96%;
|
height: 75%;
|
}
|
|
|
|
/*玻璃组合明细 glass-part*/
|
|
h5{
|
margin-top: 0.5rem;
|
margin-left: 0.5rem;
|
}
|
/*布局css*/
|
.el-row {
|
margin-bottom: 20px;
|
margin-top: 1rem;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
/* .el-col{
|
background-color: #1890FF;
|
}*/
|
.line {
|
width: 100%;
|
height: 0;
|
border-top: 2px solid var(--el-border-color);
|
}
|
|
</style>
|
