similarity.vue
1.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<div class="sim-box">
<div>
<div class="sim-num" :style="{'color':simcolor}">{{sim}}%</div>
<div class="sim-title" >相似度</div>
</div>
<div class="sim-pro">
<div class="bg-behind"></div>
<div class="bg-front" :style="{'height':sim + 'px'}">
<div class="front-pro"></div>
<div class="front-top"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['cid','sim'],
data(){
return{
simcolor:'#ccc',
}
},
methods:{
},
created(){
if(this.sim > 30 && this.sim <= 50){
this.simcolor = '#5dd8a2'
} else if (this.sim > 50 && this.sim <= 70){
this.simcolor = '#f8c8a4'
} else if (this.sim > 70 && this.sim <= 100){
this.simcolor = '#ff7c93'
}
}
}
</script>
<style lang="stylus" scoped>
.sim-box{
background #fff
position relative
}
.sim-pro{
position relative
height 100px
}
.sim-num{
color #ff7c93
font-size 16px
font-weight 600
}
.sim-title{
color #666666
font-size 14px
}
.bg-behind{
position absolute
left 0
right 0
z-index 100
height: 100px;
width: 20px;
margin 0 auto
background: red;
background url('../../assets/img/sim02.png')no-repeat
background-size 100% 100%
}
.bg-front{
position absolute
left 0
right 0
z-index 101
bottom 0
width: 20px;
height: 1000px;
margin 0 auto
overflow hidden
.front-pro{
position absolute
bottom 0
height: 100px;
width: 20px;
background url('../../assets/img/sim01.png')no-repeat
background-size 100% 100%
}
}
</style>>