bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化card组件

master
yutent 2023-11-16 19:06:25 +08:00
parent c2b963a3be
commit 0ca65b2576
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/badge/index.js
View File

@ -47,6 +47,8 @@ class Badge extends Component {
padding: 0 4px; padding: 0 4px;
border-radius: 10px; border-radius: 10px;
background: var(--color-red-1); background: var(--color-red-1);
-webkit-user-select: none;
user-select: none;
} }
.num { .num {

19
src/card/index.js
View File

@ -22,7 +22,7 @@ class Card extends Component {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
width: 100%; width: 100%;
border: 1px solid var(--color-plain-2); border: 1px solid var(--wc-card-border-color, var(--color-plain-2));
border-radius: inherit; border-radius: inherit;
background: #fff; background: #fff;
color: var(--color-dark-1); color: var(--color-dark-1);
@ -34,16 +34,17 @@ class Card extends Component {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
min-height: 52px; min-height: var(--wc-card-header-height, 52px);
padding: var(--card-padding, 8px 16px); padding: var(--wc-card-header-padding, 8px 16px);
border-bottom: 1px solid var(--color-plain-2);
font-size: 16px; font-size: 16px;
box-shadow: inset 0 -1px 0 0 var(--color-plain-2);
-webkit-user-select: none;
user-select: none; user-select: none;
} }
.content { .content {
flex: 1; flex: 1;
min-height: 64px; min-height: 64px;
padding: var(--card-padding, 8px 16px); padding: var(--wc-card-padding, 8px 16px);
font-size: 14px; font-size: 14px;
color: var(--color-dark-1); color: var(--color-dark-1);
} }
@ -60,10 +61,12 @@ class Card extends Component {
render() { render() {
return html` return html`
<div class="card-box"> <main class="card-box">
<div class="header"><slot name="header">${this.header}</slot></div> <header class="header">
<slot name="header">${this.header}</slot>
</header>
<div class="content"><slot></slot></div> <div class="content"><slot></slot></div>
</div> </main>
` `
} }
} }