From 7fa67d91bfedaa79bc62b08a7d3cbe2d0bee815b Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 03 Apr 2023 09:48:11 +0800
Subject: [PATCH] 完善列表卡片公共组件
---
layout/card/CCardContent.vue | 1
layout/card/CCardAction.vue | 8 +++-
layout/card/CCardTitle.vue | 19 ++++++++-
layout/card/cCard.scss | 46 +++++++++++++++++++++++
layout/card/index.js | 6 +-
5 files changed, 73 insertions(+), 7 deletions(-)
diff --git a/layout/card/CCardAction.vue b/layout/card/CCardAction.vue
index 41fc44f..b5e9075 100644
--- a/layout/card/CCardAction.vue
+++ b/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>
diff --git a/layout/card/CCardContent.vue b/layout/card/CCardContent.vue
index 90081e8..3040290 100644
--- a/layout/card/CCardContent.vue
+++ b/layout/card/CCardContent.vue
@@ -5,6 +5,7 @@
<template>
<view class="c-card-content">
+ <slot />
</view>
</template>
diff --git a/layout/card/CCardTitle.vue b/layout/card/CCardTitle.vue
index 2434682..7ef8b04 100644
--- a/layout/card/CCardTitle.vue
+++ b/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 {};
},
diff --git a/layout/card/cCard.scss b/layout/card/cCard.scss
index 9487f14..2c6e93e 100644
--- a/layout/card/cCard.scss
+++ b/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;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/layout/card/index.js b/layout/card/index.js
index f37d9fb..f19990b 100644
--- a/layout/card/index.js
+++ b/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,
--
Gitblit v1.9.1