xl-mobile/src/components/XDropdownItem.vue

<script setup>
const {active} = defineProps({
    active: {
        type: Boolean,
        default: false,
    }
});
</script>

<template>
    <view :class="['!py-[14rpx] !px-[24rpx] text', active ? 'active' : '']">
        <slot></slot>
    </view>
</template>

<style lang="scss" scoped>
.text {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
    background-color: #fff;
    transition: 500ms;
}

.active {
    background-color: rgba(106, 161, 255, 0.2);
}
</style>