基于uniapp封装的card容器 带左右侧两侧标题内容区域
代码
<template><view class="card"><div class="x_flex_header"><div><title v-if="title !== ''" class="title" :title="title" :num="num"></title></div><div><slot name="xline_left"></slot></div></div><div class="card-body"><slot></slot></div></view>
</template><script>
export default {name: "xCard",props: {title: {type: String,default: ''},num: {type: Number,default: 1}},
}
</script><style lang="scss" scoped>
.card{border-radius: 8px;margin: 16px;box-shadow: none;overflow: hidden;font-size: 28rpx;box-sizing: border-box;padding: 20rpx;display: block;background: #fff;
}
.card-body{
}.title {display: block;
}
.x_flex_header{display: flex;justify-content: space-between;
}
</style>
全部资源：https://download.csdn.net/download/galaxyJING/88720610?spm=1001.2014.3001.5503