|
@@ -16,7 +16,12 @@
|
|
<el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
<el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
- <div class='input-right' v-if='ruleForm.type==1 || ruleForm.type==3'></div>
|
|
|
|
|
|
+ <div class='input-right' v-if='ruleForm.type==1 || ruleForm.type==3'>
|
|
|
|
+ <div
|
|
|
|
+ class='model'
|
|
|
|
+ :style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
|
|
|
|
+ ></div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div v-if='ruleForm.type==1' class='form3'>
|
|
<div v-if='ruleForm.type==1' class='form3'>
|
|
<div class='form3-top'>
|
|
<div class='form3-top'>
|
|
@@ -29,14 +34,21 @@
|
|
<el-color-picker v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
|
|
<el-color-picker v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
|
|
<el-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
|
|
<el-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
|
|
|
|
|
|
- <el-select v-model='ruleForm.borderLine' placeholder='请选择' size='small' style='width:120px;margin-right:24px'>
|
|
|
|
- <el-option v-for='item in borderLineOption' :key='item.value' :value='item.value'>
|
|
|
|
- <img :src='item.label' alt />
|
|
|
|
|
|
+ <el-select
|
|
|
|
+ v-model='ruleForm.borderLine'
|
|
|
|
+ placeholder='请选择'
|
|
|
|
+ size='small'
|
|
|
|
+ style='width:160px;margin-right:24px'
|
|
|
|
+ ref='select1'
|
|
|
|
+ @change='changeSelection1'
|
|
|
|
+ >
|
|
|
|
+ <el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
|
|
|
|
+ <img :src='item.src' alt />
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
- <el-select v-model='ruleForm.linepx' placeholder='请选择' size='small' style='width:120px;'>
|
|
|
|
- <el-option v-for='item in linepxOption' :key='item.value' :label='item.label' :value='item.value'>
|
|
|
|
- <img :src='item.label' alt />
|
|
|
|
|
|
+ <el-select v-model='ruleForm.linepx' placeholder='请选择' size='small' style='width:160px;' ref='select' @change='changeSelection'>
|
|
|
|
+ <el-option v-for='item in linepxOption' :key='item.id' :label='item.src' :value='item.id'>
|
|
|
|
+ <img :src='item.src' alt />
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
@@ -77,8 +89,8 @@ export default {
|
|
ruleForm: {
|
|
ruleForm: {
|
|
color: 'rgba(19, 206, 102, 0.8)',
|
|
color: 'rgba(19, 206, 102, 0.8)',
|
|
borderColor: 'rgba(19, 206, 102, 0.8)',
|
|
borderColor: 'rgba(19, 206, 102, 0.8)',
|
|
- borderLine: '_____________',
|
|
|
|
- linepx: '________________',
|
|
|
|
|
|
+ borderLine: '',
|
|
|
|
+ linepx: '',
|
|
code: '',
|
|
code: '',
|
|
name: '',
|
|
name: '',
|
|
type: '2',
|
|
type: '2',
|
|
@@ -100,37 +112,54 @@ export default {
|
|
],
|
|
],
|
|
borderLineOption: [
|
|
borderLineOption: [
|
|
{
|
|
{
|
|
- value: '1',
|
|
|
|
- label: require('@/assets/imgs/solidLine.jpg')
|
|
|
|
|
|
+ id: 'solid',
|
|
|
|
+ src: require('@/assets/imgs/1pxline.jpg')
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- value: '2',
|
|
|
|
- label: require('@/assets/imgs/dashedLine.jpg')
|
|
|
|
|
|
+ id: 'dashed',
|
|
|
|
+ src: require('@/assets/imgs/dashedLine.jpg')
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- value: '3',
|
|
|
|
- label: require('@/assets/imgs/dotLine.jpg')
|
|
|
|
|
|
+ id: 'dotted',
|
|
|
|
+ src: require('@/assets/imgs/dotLine.jpg')
|
|
}
|
|
}
|
|
],
|
|
],
|
|
linepxOption: [
|
|
linepxOption: [
|
|
{
|
|
{
|
|
- value: '1',
|
|
|
|
- label: require('@/assets/imgs/1pxline.jpg')
|
|
|
|
|
|
+ id: '1',
|
|
|
|
+ src: require('@/assets/imgs/1pxline.jpg')
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- value: '2',
|
|
|
|
- label: require('@/assets/imgs/2pxline.jpg')
|
|
|
|
|
|
+ id: '2',
|
|
|
|
+ src: require('@/assets/imgs/2pxline.jpg')
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- value: '3',
|
|
|
|
- label: require('@/assets/imgs/3pxline.jpg')
|
|
|
|
|
|
+ id: '3',
|
|
|
|
+ src: require('@/assets/imgs/3pxline.jpg')
|
|
}
|
|
}
|
|
],
|
|
],
|
|
fileList: [],
|
|
fileList: [],
|
|
value: ''
|
|
value: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- methods: {}
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ changeSelection() {
|
|
|
|
+ console.log(this.ruleForm.linepx)
|
|
|
|
+ let path = this.$refs.select.selectedLabel
|
|
|
|
+ this.$refs.select.$el.children[0].children[0].setAttribute(
|
|
|
|
+ 'style',
|
|
|
|
+ 'background:url(' + path + ') center center no-repeat;color:transparent;'
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ changeSelection1() {
|
|
|
|
+ console.log(this.ruleForm.borderLine)
|
|
|
|
+ let path = this.$refs.select1.selectedLabel
|
|
|
|
+ this.$refs.select1.$el.children[0].children[0].setAttribute(
|
|
|
|
+ 'style',
|
|
|
|
+ 'background:url(' + path + ') center center no-repeat;color:transparent;'
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -171,6 +200,13 @@ export default {
|
|
background: rgba(245, 246, 247, 1);
|
|
background: rgba(245, 246, 247, 1);
|
|
display: inline-block;
|
|
display: inline-block;
|
|
margin-left: 18px;
|
|
margin-left: 18px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ .model {
|
|
|
|
+ width: 56px;
|
|
|
|
+ height: 6px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form3 {
|
|
.form3 {
|
|
@@ -188,10 +224,10 @@ export default {
|
|
margin-right: 78px;
|
|
margin-right: 78px;
|
|
}
|
|
}
|
|
.form3-span3 {
|
|
.form3-span3 {
|
|
- margin-right: 88px;
|
|
|
|
|
|
+ margin-right: 64px;
|
|
}
|
|
}
|
|
.form3-span4 {
|
|
.form3-span4 {
|
|
- margin-right: 88px;
|
|
|
|
|
|
+ margin-right: 130px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form3-bottom {
|
|
.form3-bottom {
|