|
@@ -4,12 +4,7 @@
|
|
|
<div class="round" :class="`round--${length}`">
|
|
|
<div class="round--center">
|
|
|
<div v-for="(img, i) in list" :key="i" class="header">
|
|
|
- <van-image
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- fit="cover"
|
|
|
- :src="img"
|
|
|
- />
|
|
|
+ <van-image width="100%" height="100%" fit="cover" :src="img" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -25,39 +20,38 @@ const props = defineProps({
|
|
|
imgUrls: Array
|
|
|
})
|
|
|
|
|
|
-const length = ref(0);
|
|
|
-const list = ref([]);
|
|
|
+const length = ref(0)
|
|
|
+const list = ref([])
|
|
|
|
|
|
const initStyle = () => {
|
|
|
- const root = document.documentElement;
|
|
|
- const size = props.size;
|
|
|
- root.style.setProperty('--round-size', size + 'px');
|
|
|
- root.style.setProperty('--round-size-header', size * 22/44 + 'px');
|
|
|
- root.style.setProperty('--round-size-sm-header', size * 15/44 + 'px');
|
|
|
+ const root = document.documentElement
|
|
|
+ const size = props.size
|
|
|
+ root.style.setProperty('--round-size', size + 'px')
|
|
|
+ root.style.setProperty('--round-size-header', (size * 22) / 44 + 'px')
|
|
|
+ root.style.setProperty('--round-size-sm-header', (size * 15) / 44 + 'px')
|
|
|
}
|
|
|
|
|
|
const initData = () => {
|
|
|
- list.value = (props.imgUrls ?? []).slice(0, 9);
|
|
|
- length.value = list.value.length;
|
|
|
+ list.value = (props.imgUrls ?? []).slice(0, 9)
|
|
|
+ length.value = list.value.length
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
- initStyle();
|
|
|
- initData();
|
|
|
-});
|
|
|
-
|
|
|
+ initStyle()
|
|
|
+ initData()
|
|
|
+})
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.round-comp {
|
|
|
width: var(--round-size);
|
|
|
height: var(--round-size);
|
|
|
- background: #F7F8FA;
|
|
|
+ background: #f7f8fa;
|
|
|
border-radius: 100%;
|
|
|
}
|
|
|
.round {
|
|
|
- margin: 10px auto;
|
|
|
+ margin: 0px auto;
|
|
|
width: var(--round-size);
|
|
|
height: var(--round-size);
|
|
|
- background: #F7F8FA;
|
|
|
+ background: #f7f8fa;
|
|
|
border-radius: 100%;
|
|
|
overflow: clip;
|
|
|
position: relative;
|
|
@@ -88,7 +82,6 @@ onMounted(() => {
|
|
|
height: var(--round-size);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.round--2 {
|
|
@@ -198,4 +191,4 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|