style.css
2.05 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/* @import url(../../../public/css/common.css); */
.gender-wrap {
height: 4.11rem;
}
.gender-distribute {
position: relative;
padding: .6rem 8% .56rem 10%;
}
.distribute-detail {
overflow: hidden;
}
.gender-box {
float: left;
text-align: center;
width: 50%;
}
.gender-photo {
display: block;
width: 1.98rem;
height: 2rem;
border-radius: 50%;
background: url(~@/assets/img/male.png) no-repeat center center;
background-size: 100% 100%;
margin: 0 auto 0.17rem;
}
.gender-female {
background: url(~@/assets/img/female.png) no-repeat center center;
background-size: 100% 100%;
}
.gender-ratio {
display: block;
font-size: 0.16rem;
color: #444444;
margin: 0 auto;
}
.gender-bar-wrap {
height: 0.13rem;
margin-top: 0.44rem;
border-radius: 0.06rem;
background: #f6f6f6;
overflow: hidden;
cursor: pointer;
}
.gender-bar {
float: left;
height: 100%;
background: #3BB8FF;
}
.gender-male-bar {
/* width: 40%; */
}
.gender-female-bar {
/* width: 60%; */
background: #FFC62E;
}
.gender-tooltip {
position: absolute;
border-style: solid;
white-space: nowrap;
z-index: 9999999;
transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
background-color: rgb(255, 255, 255);
border-width: 0px;
border-color: rgb(51, 51, 51);
border-radius: 4px;
color: rgb(51, 51, 51);
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: 14px;
font-family: "Microsoft YaHei";
line-height: 21px;
padding: 0px;
left: 1244px;
bottom: 18px;
box-shadow: rgba(3, 3, 3, 0.4) 0px 0px 10px -4px;
}
.gender-tooltip-text {
font-size: 16px;
height: 31px;
color: #333;
border-radius: 4px;
line-height: 31px;
padding-left: 10px;
padding-top: 6px;
}
.gender-tooltip-text:last-of-type {
padding-right: 15px;
}
.showbox-img{
height: 12px;
}
.rise-text {
color: green;
}
.decline-text {
color: red;
}