需求如图：两张图片根据分数值，设置图片背景色的高度，最高100分
对比图
代码如下：
<template>
<div class="compare-pk">
<div v-for="(item, index) in list" :key="index" class="pk-item">
<p>{
{
item.name }}</p>
<p>总分: {
{
item.proportion }}</p>
<div class="icon-crown">
<a-icon v-show="item.top" type="crown" />
</div>
<div class="img-box">
<div v-if="item.gender == 1" id="man">
<div class="bgc" :style="{ height: item.proportion + '%' }"></div>
<div
class="bgc2"
:style="{ height: item.proportion * 0.9 + '%' }"
></div>
</div>
<div v-else id="woman">
<div class="bgc" :style="{ height: item.proportion + '%' }"></div>
<div
class="bgc2"
:style="{ height: item.proportion * 0.9 + '%' }"
></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ComparePk',
data() {
return {
list: [
{
name: '张三',
gender: 1,
proportion: '40',
top: false,
},
{
name: '王老大',
gender: 2,
proportion: '60',
top: true,
},
],
}
},
methods: {
},
}
</script>
<style lang="less" scoped>
.compare-pk {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
.pk-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
color: orange;
font-weight: 700;
.icon-crown {
width: 30px;
height: 32px;
line-height: 30px;
font-size: 30px;
}
.img-box {
#man {
position: relative;
width: 100px;
height: 220px;
background-color: #5d5c5c;
clip-path: path(
'M 68 18 A 10 10 0 0 0 32 18 A 10 10 0 0 0 68 18 M 12 66 V 66 M 30 40 L 80 40 Q 100 40 100 55 L 100 130 Q 93 140 85 130 L 85 70 L 75 70 L 75 155 L 75 155 L 75 215 Q 65 225 55 215 L 55 120 L 45 120 L 45 215 Q 35 225 25 215 L 25 155 L 25 155 L 25 70 L 15 70 L 15 130 Q 7 140 0 130 L 0 55 Q 0 40 20 40 Z'
);
.bgc {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
background-color: #7380bf;
transition: height 0.5s;
// border-radius: 50%;
animation: spin 5s linear infinite; /* 应用动画 */
}
.bgc2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
background-color: #7380bf;
}
}
#woman {
position: relative;
width: 100px;
height: 220px;
background-color: #5d5c5c;
clip-path: path(
'M 68 18 A 10 10 0 0 0 32 18 A 10 10 0 0 0 68 18 M 12 66 V 66 M 30 40 L 70 40 Q 75 40 80 45 L 100 120 Q 95 130 90 120 L 75 70 L 65 70 L 85 155 L 65 155 L 65 215 Q 60 225 55 215 L 55 155 L 45 155 L 45 215 Q 40 225 35 215 L 35 155 L 15 155 L 35 70 L 25 70 L 10 120 Q 5 130 0 120 L 20 45 Q 25 40 30 40 Z'
);
.bgc {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
background-color: #7380bf;
transition: height 0.5s;
// border-radius: 50%;
animation: spin 5s linear infinite; /* 应用动画 */
}
.bgc2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
background-color: #7380bf;
}
}
@keyframes spin {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
}
}
}
</style>
其中css中的两个svg图，是用svg绘图工具网址生成的
绘制时，L为直线，Q为曲线。