zhxy-desk/pages/studentRanked/components/view-button-item.vue

<template>
    <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="onClick">
        <image :src="src" style="width: 40px;height: 40px;" mode=""></image>
        <view style="line-height: 1;">
            <text class="txt-white f24">{{title}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        props : {
            src : '',
            title : ''
        },
        methods : {
            onClick(e){
                this.$emit('click')
            }
        }
    }
</script>

<style>
    .bottom-btn-item,
    .bottom-btn-item-disabled{
        position: relative;
    }
    .bottom-btn-item-disabled{
        opacity: 0.5;
    }
    
    .bottom-btn-item:hover {
        cursor: pointer;
        background-color: #ffffff3b;
        border-radius: 8px;
    }
</style>