87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
<template>
|
|
<div class="bomRight">
|
|
<div class="a">
|
|
<span>广州</span>
|
|
<span class="num">62,256</span>
|
|
</div>
|
|
<div class="b">
|
|
<span>香港</span>
|
|
<span class="num">9,256</span>
|
|
</div>
|
|
<div class="c">
|
|
<span>珠海</span>
|
|
<span class="num">823</span>
|
|
</div>
|
|
<div class="d">
|
|
<span>深圳</span>
|
|
<span class="num">4,958</span>
|
|
</div>
|
|
<div class="e">
|
|
<span>佛山</span>
|
|
<span class="num">94</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script></script>
|
|
<style lang="scss" scoped>
|
|
.bomRight {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
span {
|
|
margin-bottom: 4px;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.num {
|
|
font-size: 18px;
|
|
text-shadow: 0 0 4px #fff;
|
|
color: rgba($color: #fff, $alpha: 0.8);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.a {
|
|
top: 5px;
|
|
left: 175px;
|
|
width: 160px;
|
|
height: 160px;
|
|
background: url('../img/27.png') no-repeat center/cover;
|
|
}
|
|
.b {
|
|
bottom: 18px;
|
|
left: 50px;
|
|
width: 140px;
|
|
height: 140px;
|
|
background: url('../img/26.png') no-repeat center/cover;
|
|
}
|
|
.c {
|
|
bottom: 0px;
|
|
left: 300px;
|
|
width: 110px;
|
|
height: 110px;
|
|
background: url('../img/25.png') no-repeat center/cover;
|
|
}
|
|
.d {
|
|
top: 32px;
|
|
right: 110px;
|
|
width: 120px;
|
|
height: 120px;
|
|
background: url('../img/26.png') no-repeat center/cover;
|
|
}
|
|
.e {
|
|
bottom: 28px;
|
|
right: 58px;
|
|
width: 90px;
|
|
height: 90px;
|
|
background: url('../img/25.png') no-repeat center/cover;
|
|
}
|
|
}
|
|
</style>
|