112 lines
2.2 KiB
Vue
112 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref, computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
diameter: {
|
|
type: Number,
|
|
default: 90,
|
|
},
|
|
});
|
|
|
|
const side = computed(() => {
|
|
return props.diameter / 10;
|
|
});
|
|
|
|
const rings = ["X", "10", "9", "8", "7", "6"];
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
class="container circle"
|
|
:style="{
|
|
width: diameter + 'vw',
|
|
height: diameter + 'vw',
|
|
background: '#00BAE9',
|
|
}"
|
|
>
|
|
<view
|
|
class="circle"
|
|
:style="{
|
|
background: '#FF5665',
|
|
width: side * 8 + 'vw',
|
|
height: side * 8 + 'vw',
|
|
}"
|
|
>
|
|
<view class="rings" :style="{ transform: `translateX(-${side}vw)` }">
|
|
<text
|
|
v-for="(ring, index) in rings"
|
|
:key="ring"
|
|
:style="{
|
|
width: side + 'vw',
|
|
transform: `translateX(${
|
|
index === 0 ? side / 2 : index === 1 ? side / 4.5 : 0
|
|
}vw)`,
|
|
}"
|
|
>{{ ring }}</text
|
|
>
|
|
</view>
|
|
<view
|
|
class="circle"
|
|
:style="{
|
|
background: '#FF5665',
|
|
width: side * 6 + 'vw',
|
|
height: side * 6 + 'vw',
|
|
}"
|
|
>
|
|
<view
|
|
class="circle"
|
|
:style="{
|
|
background: '#FDDC61',
|
|
width: side * 4 + 'vw',
|
|
height: side * 4 + 'vw',
|
|
}"
|
|
>
|
|
<view
|
|
class="circle"
|
|
:style="{
|
|
background: '#FDDC61',
|
|
width: side * 2 + 'vw',
|
|
height: side * 2 + 'vw',
|
|
}"
|
|
>
|
|
<view
|
|
class="circle"
|
|
:style="{
|
|
background: '#FDDC61',
|
|
width: side + 'vw',
|
|
height: side + 'vw',
|
|
}"
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
position: relative;
|
|
}
|
|
.rings {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
left: 50%;
|
|
}
|
|
.rings > text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
.circle {
|
|
border: 1rpx solid #3e3e3e66;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|