leromro-mini/pages/common/rankingList/index.vue

<template>
    <view clang="ranking-main">
        <view class="serve-title ranking-title">本月热门服务</view>
        <view class="ranking-list">
            <view v-for="item in datas" :key="item.id" class="ranking-item">
                <img :src="item.img" alt="" srcset="" style="width: 160rpx;height: 160rpx;margin-right: 32rpx;">
                <view class="ranking-item-info">
                    <view class="ranking-item-name">{{ item.name }}</view>
                    <view class="ranking-item-tag flex-center">{{ item.tag }}</view>
                    <view class="ranking-item-text">{{ item.text }}</view>
                    <view class="ranking-item-dese">{{ item.dese }}</view>
                </view>

                <view class="ranking-item-start-box flex-center">
                    <img src="/static/serverImg/home/start.png" alt="" style="width: 32rpx;height: 32rpx;">
                    <view class="ranking-item-count">{{ item.count }}</view>
                </view>

            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

const datas = [
    {
        id: 1,
        img: '/static/serverImg/home/ranking.png',
        name: '专业深度保洁',
        tag: '家庭清洁',
        text: '专业设备，深度除螨，全面消毒',
        dese: '本月已服务2890',
        count: '4.9'
    },
    {
        id: 2,
        img: '/static/serverImg/home/ranking.png',
        name: '专业深度保洁',
        tag: '家庭清洁',
        text: '专业设备，深度除螨，全面消毒',
        dese: '本月已服务2890',
        count: '4.9'
    },
    {
        id: 3,
        img: '/static/serverImg/home/ranking.png',
        name: '专业深度保洁',
        tag: '家庭清洁',
        text: '专业设备，深度除螨，全面消毒',
        dese: '本月已服务2890',
        count: '4.9'
    }
]

</script>

<style scoped lang="scss">
.ranking-title {
    margin-bottom: 16px;
}

.ranking-list {

    .ranking-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 12px;

        border-radius: 8px;
        background: rgba(255, 255, 255, 1);

        border: 0px solid rgba(243, 244, 246, 1);

        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px rgba(0, 0, 0, 0.05);

        .ranking-item-info {
            flex: 1;

            .ranking-item-name {
                font-size: 32rpx;
                font-weight: 400;
                line-height: 48rpx;
                color: rgba(51, 51, 51, 1);
                margin-bottom: 16rpx;
            }

            .ranking-item-tag {
                width: 128.03rpx;
                height: 46rpx;
                opacity: 1;
                border-radius: 19998rpx;
                background: rgba(0, 122, 255, 0.1);
                margin-bottom: 16rpx;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 32rpx;
                color: rgba(0, 122, 255, 1);


            }

            .ranking-item-text {
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(102, 102, 102, 1);
                margin-bottom: 16rpx;

            }

            .ranking-item-dese {
                font-size: 24rpx;
                font-weight: 400;
                line-height: 32rpx;
                color: rgba(153, 153, 153, 1);
            }
        }

        .ranking-item-start-box {
            display: flex;

            .ranking-item-count {
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);
                margin-left: 9rpx;
            }
        }
    }
}
</style>