aiot-app/components/card/card.vue

<template>
    <view class="card-view">
        <view class="title">
            <slot name='title'>{{title}}</slot>
            <slot name='right'></slot>
        </view>
        <view class="content">
          <slot/>
        </view>
    </view>
</template>


<script>
export default {
    props:{
        title:String
    }
}
</script>

<style lang="scss" scoped>
.card-view{
    background: #fff;
    border: 1rpx solid #ccc;
    border-radius: 12rpx;
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $uni-font-size-base;
        font-weight: bold;
        padding: 10rpx;
        border-bottom: 1rpx solid #ccc;
    }
    .content{
        font-size: $uni-font-size-sm;
    }
}
</style>