94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
```vue
|
|
<!-- 轮盘（一级圆盘 + 二级左半弧滚动盘）-->
|
|
<template>
|
|
<view class="draw-all">
|
|
<view class="button-father">
|
|
<view v-for="(item,index) in ballarray" :key="index" class="white-ball" @click="clickball(index)">
|
|
<image style="width: 50%;height: 50%;" v-if="item.url" :src="item.url" />
|
|
<view v-else >
|
|
{{ index===5? changerightbottom : item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, computed, nextTick, watch, onBeforeUnmount,defineProps } from 'vue'
|
|
|
|
|
|
// 接收父组件传入的宽度百分比
|
|
const props = defineProps({
|
|
changerightbottom: {
|
|
type: String,
|
|
default: "标准"
|
|
}
|
|
})
|
|
const ballarray = ref([
|
|
{
|
|
name:'周期',
|
|
url:""
|
|
},
|
|
{
|
|
name:'放大',
|
|
url:"/static/index/getbig.png"
|
|
},
|
|
{
|
|
name:'日常',
|
|
url:""
|
|
},
|
|
{
|
|
name:'缩小',
|
|
url:"/static/index/getsmall.png"
|
|
},
|
|
{
|
|
name:'全部',
|
|
url:""
|
|
},
|
|
{
|
|
name:'标准',
|
|
url:""
|
|
},
|
|
|
|
])
|
|
|
|
const emit = defineEmits(["clickball"])
|
|
|
|
const clickball = (index:number) => {
|
|
emit("clickball",index)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.draw-all {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background-color: #eff0f4;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.button-father{
|
|
position: absolute;
|
|
bottom: 150rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
height: 400rpx;
|
|
// background-color: red;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
.white-ball{
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin: 30rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
</style>
|
|
``` |