12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
- <div class="legend">
- <div v-for="(item,index) in legendObj" :key="index" v-show="(item.name!='平均温度')||avgTemp">
- <span :style="{background:item.color}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
- </div>
- </div>
- </template>
- <script>
- export default {
- props:{
- lineShow:{
- type:Boolean,
- default:false
- },
- numType:{
- type:Boolean,
- default:true
- },
- dotLine:{
- type:Boolean,
- default:false
- },
- avgTemp:{
- type:Boolean,
- default:true
- }
- },
- data(){
- return {
- legendObj:[
- {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
- {name:"达标占比",numName:"达标",color:"#ffffff"},
- {name:"偏热占比",numName:"偏热",color:"#F9908B"},
- {name:"平均温度",numName:"平均温度",color:"#ffffff"},
- ]
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .legend{
- display: inline-block;
- color: #848484;
- &>div{
- display: inline-block;
- margin-right: 16px;
- &>span{
- display: inline-block;
- vertical-align: middle;
- margin-right: 4px;
- width:12px;
- height:12px;
- border:1px solid rgba(214,218,223,1);
- }
- }
- &>div:nth-child(4){
- position: relative;
- z-index: 2;
- &>span{
- width:8px;
- height:8px;
- border-radius: 50%;
- position: relative;
- border:2px solid #0091ff;
- }
- &>span.dotLine::after{
- content: '';
- box-sizing: content-box;
- top: 1px;
- left:-4px;
- z-index: -1;
- background: #0091ff;
- position: absolute;
- display: inline-block;
- width: 12px;
- height: 2px;
- }
- }
- }
- </style>
|