NumberQiu.vue
2.0 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
90
91
<template>
<view style="display: flex; flex-direction: row; width: 100%; justify-content: space-between; line-height: ;">
<view v-for="(item, index) in rebArray" style="display: flex; flex-direction: row;">
<text :class="((item == select_number) || qiu_shi) ? 'reb' : 'reb_xun' "
:style="'height:'+ qiu_height + ' ; width: '+qiu_height+' ;line-height:'+qiu_height+' ;' ">{{item}}</text>
</view>
<view style="display: flex; flex-direction: row; ">
<text :class="((blueNumber == select_number) || qiu_shi) ? 'blue' : 'blue_xun' "
:style="'height:'+ qiu_height + ' ; width: '+qiu_height+' ;line-height:'+qiu_height+' ;' ">{{blueNumber}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
blueNumber: "",
rebArray: [],
};
},
props: {
data_info: [String],
qiu_height: [String],
qiu_shi: [Boolean],
select_number: [Number]
},
methods: {
},
mounted() {
if (this.data_info) {
var numberArray = this.data_info.split("+")
this.rebArray = numberArray[0].split(",")
this.blueNumber = numberArray[1]
}
}
}
</script>
<style>
.reb_xun {
height: 56rpx;
width: 56rpx;
color: #FF3333;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
text-align: center;
line-height: 56rpx;
border: 2rpx solid #FF3333;
}
.reb {
height: 56rpx;
width: 56rpx;
color: white;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
text-align: center;
line-height: 56rpx;
background-color: #FF3333;
}
.blue_xun {
height: 56rpx;
width: 56rpx;
color: #3917EA;
text-align: center;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
line-height: 56rpx;
text-align: center;
border: 2rpx solid #3917EA;
}
.blue {
height: 56rpx;
width: 56rpx;
color: white;
text-align: center;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
line-height: 56rpx;
text-align: center;
background-color: #3917EA;
}
</style>