创建列表卡片组件

Tevin

2023-04-01 6c4e0dbbd1b62fcbb8af3413bed67c77ece9ea0e

创建列表卡片组件

 layout/card/CCard.vue

New file
@@ -0,0 +1,26 @@
/**
 * CCard - 列表卡片（主体）
 * @author Tevin
 */

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

<script>
import Taro from '@tarojs/taro';
import {} from 'taro-ui-vue';
import './cCard.scss';

export default {
    name: 'CCard',
    components: {},
    props: {},
    data() {
        return {};
    },
    methods: {},
};
</script>

 layout/card/CCardAction.vue

New file
@@ -0,0 +1,24 @@
/**
 * CCardAction - 列表卡片操作
 * @author Tevin
 */

<template>
    <view class="c-card-action">
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import {} from 'taro-ui-vue';

export default {
    name: 'CCardAction',
    components: {},
    props: {},
    data() {
        return {};
    },
    methods: {},
};
</script>

 layout/card/CCardContent.vue

New file
@@ -0,0 +1,24 @@
/**
 * CCardContent - 列表卡片内容
 * @author Tevin
 */

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

<script>
import Taro from '@tarojs/taro';
import {} from 'taro-ui-vue';

export default {
    name: 'CCardContent',
    components: {},
    props: {},
    data() {
        return {};
    },
    methods: {},
};
</script>

 layout/card/CCardTitle.vue

New file
@@ -0,0 +1,24 @@
/**
 * CCardTitle - 列表卡片标题
 * @author Tevin
 */

<template>
    <view class="c-card-title">
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import {} from 'taro-ui-vue';

export default {
    name: 'CCardTitle',
    components: {},
    props: {},
    data() {
        return {};
    },
    methods: {},
};
</script>

 layout/card/cCard.scss

New file
@@ -0,0 +1,12 @@
/**
 * CCard
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-card {
    margin: 0 16px 16px;
    background-color: #fff;
    border-radius: 8px;
}

 layout/card/index.js

New file
@@ -0,0 +1,16 @@
/**
 * CCard
 * @author Tevin
 */

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';

export {
    CCard,
    CCardTitle,
    CCardContent,
    CCardAction,
}

 layout/description/CDescription.vue

@@ -21,7 +21,7 @@
<script>
import Taro from '@tarojs/taro';
import {} from 'taro-ui-vue';
import './CDescription.scss';
import './cDescription.scss';

export default {
    name: 'CDescription',

 layout/description/cDescription.scss