icon-base( path = '', size = 0.56rem, bgSize = 100%, bgPosX = 0, bgPosY = 0)
&::before
content ''
position absolute
width size
height size
background url(path) no-repeat
background-position bgPosX bgPosY
background-size bgSize
top 50%
transform scale(1,1) translateY(-50%) //和元素本身处于同一水平线上
.icon-lottery
icon-base '~@/assets/images/user.png' 0.56rem 100% 0 1%
.icon-fix
icon-base '~@/assets/images/user.png' 0.56rem 100% 0 13%
.icon-welfare
icon-base '~@/assets/images/user.png' 0.56rem 100% 0 25%
.icon-address
icon-base '~@/assets/images/user.png' 0.56rem 100% 0 38%
计算高度百分比工具calc.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>雪碧图计算百分比</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div class="outer">
<figure>
<label for=""><span>除数</span></label>
<input id="input1" type="text" class="input1" placeholder="请输入数值">
</figure>
<figure>
<label for=""><span>input</span></label>
<input id="input2" type="text" class="input1" placeholder="请输入数值" onblur="inputOnBlur();" onkeyup="inputOnBlur();">
</figure>
<figure>
<label for=""><span>output</span></label>
<input id="input3" type="text" class="input1" placeholder="请输入数值">
</figure>
</div>
<Br/>
</div>
<div class="line"></div>
<div class="outer">
<button onclick="calc()">点击计算值(数组)</button>
<figure>
<label for=""><span>output</span></label>
<input id="input5" type="text" class="input5" placeholder="请输入数值">
</figure>
</div>
</body>
<style>
html{
background: rgb(203, 233, 203);
}
.outer::after{
clear: both;
content: "";
display: block;
height: 0;
line-height: 0;
}
.line::after{
clear: both;
content: "";
display: block;
height: 2px;
width:100%;
background: red;
line-height: 0;
margin-bottom:30px;
}
figure {
width: 80%;
height: 80px;
float: left;
}
.input1 {
height: 40px;
width: 100%;
}
.input5{
height: 120px;
width: 100%;
}
button{
position: relative;
left: 40px;
height: 40px;
clear:both;
}
</style>
<script type="text/javascript">
function inputOnBlur() {
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
document.getElementById("input3").value = input2 / input1;
}
function calc(){
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
var arr1 = [];
var input2 = document.getElementById("input1").value;
for (var i=0; i< arr.length; i++){
arr1[i] = arr[i] / input2;
}
// let str = arr.map((item) => {
// return item / input2
// }, this)
console.log(arr1)
document.getElementById("input5").value = arr1;
}
</script>
</html>