@hlw-uni/mp-vue 2.1.30 → 2.1.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -88,8 +88,6 @@ interface Props {
|
|
|
88
88
|
borderWidth?: string;
|
|
89
89
|
/** 圆角大小，对应 CSS 变量体系 */
|
|
90
90
|
radius?: "none" | "sm" | "md" | "lg" | "xl";
|
|
91
|
-
/** 卡片背景，支持任意 CSS background 值 */
|
|
92
|
-
background?: string;
|
|
93
91
|
/** 头部与内容之间是否显示虚线分隔，有 #header slot 时默认 true */
|
|
94
92
|
divider?: boolean;
|
|
95
93
|
/** body 是否有内边距，默认 true */
|
|
@@ -102,7 +100,6 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
102
100
|
borderStyle: "solid",
|
|
103
101
|
borderWidth: "",
|
|
104
102
|
radius: "xl",
|
|
105
|
-
background: "",
|
|
106
103
|
divider: undefined,
|
|
107
104
|
padding: true,
|
|
108
105
|
});
|
|
@@ -112,7 +109,6 @@ const rootStyle = computed<Record<string, string>>(() => {
|
|
|
112
109
|
if (props.borderColor) s["--card-border-color"] = props.borderColor;
|
|
113
110
|
if (props.borderStyle && props.borderStyle !== "solid") s["--card-border-style"] = props.borderStyle;
|
|
114
111
|
if (props.borderWidth) s["--card-border-width"] = props.borderWidth;
|
|
115
|
-
if (props.background) s.background = props.background;
|
|
116
112
|
return s;
|
|
117
113
|
});
|
|
118
114
|
|
|
@@ -159,7 +155,6 @@ const showDivider = computed(() => {
|
|
|
159
155
|
|
|
160
156
|
<style lang="scss" scoped>
|
|
161
157
|
.hlw-card {
|
|
162
|
-
position: relative;
|
|
163
158
|
width: 100%;
|
|
164
159
|
background: #fff;
|
|
165
160
|
overflow: hidden;
|
|
@@ -219,10 +214,7 @@ const showDivider = computed(() => {
|
|
|
219
214
|
|
|
220
215
|
/* 内容区 */
|
|
221
216
|
.hlw-card-body {
|
|
222
|
-
position: relative;
|
|
223
217
|
width: 100%;
|
|
224
|
-
overflow: hidden;
|
|
225
|
-
border-radius: inherit;
|
|
226
218
|
}
|
|
227
219
|
|
|
228
220
|
/* 底部 */
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
<view class="hlw-card-header" :class="{ 'hlw-card-header--divider': divider }">
|
|
3
3
|
<view class="hlw-card-header__left">
|
|
4
4
|
<slot name="left">
|
|
5
|
-
<
|
|
5
|
+
<view v-if="icon" class="hlw-card-header__icon-box">
|
|
6
|
+
<text class="hlw-card-header__icon" :class="icon" />
|
|
7
|
+
</view>
|
|
6
8
|
<text v-if="title" class="hlw-card-header__title">{{ title }}</text>
|
|
7
9
|
</slot>
|
|
8
10
|
</view>
|
|
@@ -80,12 +82,12 @@ defineOptions({
|
|
|
80
82
|
display: flex;
|
|
81
83
|
align-items: center;
|
|
82
84
|
justify-content: space-between;
|
|
83
|
-
padding:
|
|
85
|
+
padding: 32rpx 24rpx;
|
|
84
86
|
box-sizing: border-box;
|
|
85
87
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
&--divider {
|
|
89
|
+
border-bottom: var(--card-header-divider-width, 1rpx) var(--card-header-divider-style, dashed) var(--card-header-divider-color, var(--border-color, #e2e8f0));
|
|
90
|
+
}
|
|
89
91
|
}
|
|
90
92
|
|
|
91
93
|
.hlw-card-header__left {
|
|
@@ -93,7 +95,7 @@ defineOptions({
|
|
|
93
95
|
min-width: 0;
|
|
94
96
|
display: flex;
|
|
95
97
|
align-items: center;
|
|
96
|
-
gap:
|
|
98
|
+
gap: 16rpx;
|
|
97
99
|
}
|
|
98
100
|
|
|
99
101
|
.hlw-card-header__right {
|
|
@@ -101,19 +103,35 @@ defineOptions({
|
|
|
101
103
|
margin-left: 16rpx;
|
|
102
104
|
}
|
|
103
105
|
|
|
106
|
+
.hlw-card-header__icon-box {
|
|
107
|
+
flex-shrink: 0;
|
|
108
|
+
width: 56rpx;
|
|
109
|
+
height: 56rpx;
|
|
110
|
+
border-radius: var(--radius-md, 16rpx);
|
|
111
|
+
background: #eef2ff;
|
|
112
|
+
color: #6366f1;
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
}
|
|
117
|
+
|
|
104
118
|
.hlw-card-header__icon {
|
|
105
|
-
font-size:
|
|
119
|
+
font-size: 22rpx;
|
|
106
120
|
}
|
|
107
121
|
|
|
108
122
|
.hlw-card-header__title {
|
|
109
|
-
font-size:
|
|
110
|
-
font-weight:
|
|
123
|
+
font-size: 30rpx;
|
|
124
|
+
font-weight: 500;
|
|
111
125
|
color: var(--text-primary, #1e293b);
|
|
112
|
-
letter-spacing:
|
|
126
|
+
letter-spacing: 1rpx;
|
|
113
127
|
}
|
|
114
128
|
|
|
115
129
|
.hlw-card-header__extra {
|
|
116
|
-
|
|
117
|
-
|
|
130
|
+
padding: 4rpx 16rpx;
|
|
131
|
+
border-radius: var(--radius-sm, 8rpx);
|
|
132
|
+
background: rgba(241, 245, 249, 0.8);
|
|
133
|
+
color: var(--text-muted, #64748b);
|
|
134
|
+
font-size: 20rpx;
|
|
135
|
+
font-weight: 400;
|
|
118
136
|
}
|
|
119
137
|
</style>
|