122 lines
2.9 KiB
Vue
122 lines
2.9 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="pk">
|
|
<div class="gender">
|
|
<div class="left">
|
|
<p class="name">男</p>
|
|
<image class="icon" src="/static/images/commercial/man.svg"></image>
|
|
</div>
|
|
<p class="rate">{{man}}%</p>
|
|
</div>
|
|
<image class="vs" src="/static/images/commercial/vs.svg"></image>
|
|
<div class="gender">
|
|
<div class="right" style="float: right">
|
|
<image class="icon" src="/static/images/commercial/woman.svg"></image>
|
|
<p class="name">女</p>
|
|
</div>
|
|
<p class="rate">{{woman}}%</p>
|
|
</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="man" :style="{width: man + '%'}"></div>
|
|
<div class="woman" :style="{width: woman + '%'}"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "customerSecond",
|
|
data() {
|
|
return {
|
|
man:'64.8',
|
|
woman:'35.2'
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
.pk{
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.vs{
|
|
width: 60px;
|
|
height: 36px;
|
|
}
|
|
.gender{
|
|
.left,.right{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
.name{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
.icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.rate{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
}
|
|
.progress{
|
|
width: 100%;
|
|
height: 14px;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
.man{
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;top: 0;
|
|
background: #1E80FF;
|
|
margin-right: 2px;
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
.man:after{
|
|
position: absolute;
|
|
content:'';
|
|
width: 1px;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
z-index:9;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.woman{
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;top: 0;
|
|
background: #00C2FF;
|
|
border-radius: 0 2px 2px 0 ;
|
|
}
|
|
.woman:after{
|
|
position: absolute;
|
|
content:'';
|
|
width: 1px;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
z-index:9;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |