完善列表卡片公共组件

Tevin

2023-04-03 7fa67d91bfedaa79bc62b08a7d3cbe2d0bee815b

完善列表卡片公共组件

 layout/card/CCardAction.vue

@@ -4,8 +4,12 @@
 */

<template>
    <view class="c-card-action">
    </view>
    <scroll-view
        class="c-card-action m-border-strong-top"
        :scroll-x="true"
    >
        <slot />
    </scroll-view>
</template>

<script>

 layout/card/CCardContent.vue

@@ -5,6 +5,7 @@

<template>
    <view class="c-card-content">
        <slot />
    </view>
</template>


 layout/card/CCardTitle.vue

@@ -4,7 +4,11 @@
 */

<template>
    <view class="c-card-title">
    <view class="c-card-title m-border-strong-bottom">
        <view class="c-card-title-title">{{title}}</view>
        <view class="c-card-title-extra">
            <slot />
        </view>
    </view>
</template>

@@ -15,7 +19,18 @@
export default {
    name: 'CCardTitle',
    components: {},
    props: {},
    props: {
        // 标题
        title: {
            type: String,
            default: '列表卡片标题',
        },
        // 标题点击
        onTitleClick: {
            type: Function,
            default: () => null,
        },
    },
    data() {
        return {};
    },

 layout/card/cCard.scss

@@ -9,4 +9,50 @@
    margin: 0 16px 16px;
    background-color: #fff;
    border-radius: 8px;
    .c-card-title {
        @include flexbox(flex, space-between center);
        padding: 0 20px;
    }
    .c-card-title-title {
        flex: 1;
        padding: 16px 12px 16px 0;
    }
    .c-card-title-extra {
        white-space: nowrap;
        view,
        text,
        taro-view-core,
        taro-text-core {
            vertical-align: middle;
        }
        .at-button__text {
            vertical-align: baseline;
        }
    }
    .c-card-content {
        width: 100%;
        padding: 12px 20px;
        box-sizing: border-box;
    }
    .c-card-action {
        width: 100%;
        padding: 12px 16px;
        box-sizing: border-box;
        text-align: right;
        white-space: nowrap;
        line-height: 0;
        .at-button {
            min-width: 184px;
            height: 70px;
            padding: 0px 18px;
            margin-left: 16px;
            line-height: 68px;
            &:first-child {
                margin-left: 0;
            }
            .at-icon {
                vertical-align: baseline;
            }
        }
    }
}

 layout/card/index.js

@@ -4,9 +4,9 @@
 */

import CCard from '@components/layout/card/CCard.vue';
import CCardTitle from '@components/layout/card/CCard.vue';
import CCardContent from '@components/layout/card/CCard.vue';
import CCardAction from '@components/layout/card/CCard.vue';
import CCardTitle from '@components/layout/card/CCardTitle.vue';
import CCardContent from '@components/layout/card/CCardContent.vue';
import CCardAction from '@components/layout/card/CCardAction.vue';

export {
    CCard,