卡片选项

<template>
    <div class="container-cell">
       <cell-c class="cell-box" v-for="(item, index) in list" :key="index" :data="item"></cell-c>
    </div>
</template>

<script setup>
import { defineComponent, ref } from 'vue'
import CellC from './cellC.vue'
const img = ref('./src/assets/images/91417411.jpg')
defineProps({ 
    list: {
        type: Array,
        default: () => [
            { img: './src/assets/images/91417411.jpg' ,title: '美食' , desc: '美食描述' , subtitle: '美食' ,subDesc: '0' },
            { img: './src/assets/images/91417411.jpg' , title: '科技' , desc: '科技描述' ,subtitle: '查看' , subDesc: '' },
        ]
    }
})

let itemCount = defineComponent(() => { 
   return 34
})


</script>

<style scoped lang="scss" >
.container-cell{
    .cell-box {
       position: relative;
       &::after {
           content: '';
           display: block;
           position: absolute;
           bottom: 0;
           left: 70px;
           right: 15px;
           height: 1px;
           background-color: #f5f5f5;
          transform: scaleY(0.5);
       }
       &:last-child::after {
           height: 0;
       }
    }
}
</style>

<template>
    <div class="cell-c-container">
        <img :src="data.img" />
        <div class="info">
            <div class="title">{{ data.title }}</div>
            <div class="desc">{{ data.desc }}</div>
        </div>
        <div class="extra-info">
            <div class="info-item first">{{ data.subtitle }}</div>
            <div class="info-item bottom" :class="{ show: data.subDesc }">{{ data.subDesc || 1 }}</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
</script>

<style scoped lang="scss">
.cell-c-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 15px;
    background-color: #fff;

    img {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        margin-right: 15px;
        object-fit: cover;
    }

    .info {
        flex: 1;

        .title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .desc {
            font-size: 12px;
            color: #999;
        }
    }

    .extra-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .info-item {
            font-size: 12px;
            color: #999;

            &.first {
                margin-bottom: 3px;
            }

            &.bottom {
                //display: none;
                opacity: 0;
            }

            &.show {
                //display: block;
                opacity: 1;
            }
        }

    }


}
</style>