Zlpt_Portal/src/components/equipCardHall/index.vue

<template>
    <div class="equipCard" @click="cardClick">
        <img :src="url" alt="" />
        <ul class="item-details">
            <li style="margin: 10px 0">
                <span class="item_1_span"> {{ name }} </span>
                <span>（{{ typeName }}）</span>
                <!-- <span class="item_2_span"> 待租 </span> -->
            </li>
            <li style="color: #b6b6b6; font-size: 14px">{{ company }}</li>
            <li style="color: #b6b6b6; font-size: 14px">
                <el-icon style="margin-right: 3px; color: #25ac9c"><PhoneFilled /></el-icon>
                {{ personPhone }}
            </li>
        </ul>

        <div style="margin: 10px 0; padding-right: 15px; text-align: right">
            <span style="text-align: right; color: #ff4800">
                <i style="font-size: 14px">￥</i>
                <i style="margin: 0 6px; font-size: 18px; font-weight: bold">{{ price }}</i>
                <i style="font-size: 14px">/ 天</i>
            </span>
        </div>
    </div>
</template>
<script lang="ts" setup>
const props: any = defineProps({
    url: {
        type: String,
        default:
            'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701536400&t=117e17eae3082b7b524f890245f7826f',
    },
    name: {
        type: String,
        default: '测试装备',
    },
    tags: {
        type: Array,
        default: ['待租', '合肥市'],
    },
    company: {
        type: String,
        default: '安徽某科技有限公司',
    },
    price: {
        type: [String, Number],
        default: 99,
    },
    timeUnit: {
        type: String,
        default: '月',
    },
    id: {
        type: [String, Number],
        default: '',
    },
    personPhone: {
        type: String,
        default: '',
    },
    typeName: {
        type: String,
        default: '',
    },
})

const emit = defineEmits(['onClick'])
const cardClick = () => {
    const data = {
        id: props.id,
    }
    emit('onClick', data)
}

const onHandelLessee = () => {
    console.log('立即租赁')
}
</script>
<style lang="scss" scoped>
.equipCard {
    width: 100%;
    background: #f7f9fa;
    display: flex;
    flex-direction: column;

    img {
        height: 240px;
    }

    .title {
        padding: 16px 2px;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-details {
        padding: 0 10px 0 10px;

        .address {
            padding-right: 15px;
        }
        .address span {
            width: 50%;
        }

        .item_1_span {
            font-size: 20px;
            font-weight: bold;
        }
        .item_2_span {
            margin-left: 20px;
            padding: 4px 10px;
            color: #005af2;
            border-radius: 4px;
            background-color: #fff;
            border: 1px solid #005af2;
        }
    }
    .item-details li {
        padding: 4px 0;
        display: flex;
        align-items: center;
        font-size: 12px;

        span:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .avatar {
        width: 37%;
        overflow: hidden;
        border-radius: 15px;
        .showImg {
            width: 100%;
            padding-bottom: 100%;
            position: relative;
            img {
                position: absolute;
                left: 0;
                top: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
    }
    .desc {
        box-sizing: border-box;
        margin-left: 10px;
        flex: 1;
        overflow: hidden;

        .tag {
            display: flex;
            margin-top: 8px;
            .item {
                background: white;

                font-weight: 400;
                color: #005af2;
                padding: 2px 3px;
                border: 1px solid #005af2;
                margin-right: 10px;
                border-radius: 4px;
            }
        }
        .company {
            margin-top: 10px;

            font-weight: 400;
            color: #a5a4a4;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .price {
            font-weight: 400;
            color: #ff4800;
            margin-top: 20px;
            span {
                font-size: 25px;
                font-weight: 600;
            }
        }
    }
}
</style>