<template>
|
<div class="contact-futrue">
|
<div class="h-40 textColor3 border-main lh-40 rounded-xl 0 pl-10 relative" @click="showSelect = !showSelect">
|
<span v-if="obj.profit_ratio">
|
{{ obj.time_num + (obj.time_unit ? obj.time_unit.substr(0, 1) : '') }}
|
- {{ obj.profit_ratio ? obj.profit_ratio.split('~')[0] : '' }}%
|
</span>
|
<ul class="w-full border-main tabBackground h-336 absolute top-90 left-0" style="overflow-y:auto;z-index:2;"
|
v-show="showSelect">
|
<li v-for="(item, index) in initFutrue.para" :key="item.para_id" class="h-40 flex items-center"
|
@click.stop="onSelect(item, index)">
|
<p class="w-95 h-full flex justify-center items-center font-16 flex-1"
|
:class="active === item.para_id ? 'contBackground colorMain' : 'textColor'">
|
{{ item.time_num + item.time_unit.substr(0, 1) }} - {{
|
item.profit_ratio ? item.profit_ratio.split('~')[0] : ''
|
}}%
|
</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { DropdownMenu, DropdownItem } from 'vant';
|
import { ref, onMounted } from "vue";
|
const emits = defineEmits(['paraId'])
|
const props = defineProps({
|
initFutrue: {
|
type: Object,
|
default() {
|
return {}
|
}
|
}
|
})
|
let value = ref(0)
|
let showSelect = ref(false)
|
let active = ref('')
|
let obj = ref({})
|
onMounted(() => {
|
if (props.initFutrue && props.initFutrue.para.length > 0) {
|
obj.value = props.initFutrue.para && props.initFutrue.para[0] ? props.initFutrue.para[0] : {};
|
active.value = obj.value.para_id ? obj.value.para_id : ''
|
emits('paraId', { id: active.value, index: 0 })
|
}
|
})
|
const onSelect = (item, index) => { // 选中
|
showSelect.value = false
|
obj.value = item;
|
active.value = item.para_id
|
emits('paraId', { id: active.value, index })
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/css/copy.scss';
|
|
.border-main {
|
border: 1px solid $border_color;
|
border-radius: 4px;
|
}
|
|
.lh-10 {
|
line-height: 10px;
|
}
|
</style>
|