<template>
|
<div class="changePic" v-if="showdia">
|
<div>
|
<span class="value">最大值:</span>
|
<el-input v-model="maxValue" placeholder="请输入内容"></el-input>
|
<el-color-picker v-model="maxColor"></el-color-picker>
|
</div>
|
<div>
|
<span class="value">最小值:</span>
|
<el-input v-model="minValue" placeholder="请输入内容"></el-input>
|
<el-color-picker v-model="minColor"></el-color-picker>
|
</div>
|
<div class="btns">
|
<span @click="getcolor">保存</span>
|
<span @click="close">取消</span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import bus from "../../utils/bus"
|
export default {
|
name: "changePic",
|
data() {
|
return {
|
maxColor: "#FF0000",
|
maxValue: "100",
|
minValue: "0",
|
minColor: "#0000FF",
|
showdia:false
|
};
|
},
|
mounted(){
|
bus.$on("changeColor",(e)=>{
|
this.showdia = true
|
})
|
},
|
methods: {
|
close(){
|
this.showdia = false
|
},
|
getcolor() {
|
let obj = {};
|
obj.maxColor = this.maxColor;
|
obj.maxValue = this.maxValue;
|
obj.minValue = this.minValue;
|
obj.minColor = this.minColor;
|
|
this.$emit("colordata", obj);
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.changePic {
|
width: 700px;
|
height: 500px;
|
position: absolute;
|
top: 1180px;
|
left: 0px;
|
background: url(~@/assets/image/test/22.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
.changePic > div {
|
display: flex;
|
justify-content: center;
|
margin-top: 70px;
|
}
|
.changePic > div > span {
|
font-size: 40px;
|
color: #fff;
|
}
|
.value {
|
transform: translateY(10px);
|
}
|
.changePic >>> .el-color-picker__trigger {
|
height: 55px;
|
width: 55px;
|
margin-top: 10px;
|
}
|
.changePic >>> .el-input {
|
width: 40%;
|
margin: 0% 50px;
|
}
|
.btns > span {
|
display: block;
|
width: 200px;
|
height: 70px;
|
text-align: center;
|
font-size: 35px;
|
margin: 0 50px;
|
line-height: 70px;
|
cursor: pointer;
|
background: #23609b;
|
}
|
.btns {
|
margin-top: 100px;
|
width: 100%;
|
height: 70px;
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
