zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ui设计稿

Browse Source
This commit is contained in:
Ironsp
2026-09-30 15:55:36 +08:00
parent ce8210fb3f
commit 9ab6253c81
102 changed files with 4855 additions and 2359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/CaseCard.vue
View File

@@ -68,8 +68,10 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
<style lang="less" scoped>
.case-card {
overflow: hidden;
border: 1px solid @cases-card-border;
border-radius: @radius-base;
background: @white;
box-shadow: @cases-card-shadow;
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
@@ -80,10 +82,8 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
&__cover {
position: relative;
margin: @spacing-sm @spacing-sm 0;
border-radius: @radius-base;
aspect-ratio: 396 / 138; // 设计04 封面 396×137.8，通栏无留白
overflow: hidden;
aspect-ratio: 16 / 5;
}
&__img {
@@ -92,21 +92,21 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
object-fit: cover;
&--placeholder {
background: linear-gradient(135deg, @primary-light, @bg-color);
background: @primary-strong; // 设计04 封面占位实底 rgba(2,79,255)
}
}
&__tag {
position: absolute;
top: 10px;
left: 10px;
height: 24px;
padding: 0 10px;
border-radius: @radius-round;
background: @primary-color;
top: 6px;
left: 14px;
height: 19px; // 设计15 标签 24 × 0.77
padding: 0 6px;
border-radius: @radius-sm;
background: @primary-strong;
color: @white;
font-size: @font-size-sm;
line-height: 24px;
font-size: 11px; // 设计 10 → 7.7，取可读下限 11
line-height: 19px;
&--hardware {
background: @tag-hardware;
@@ -160,13 +160,13 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
}
&__body {
padding: @spacing-sm @spacing-base @spacing-base;
padding: 13px 16px 11px; // 上 17 / 左 20 / 下 14 × 0.77
}
&__title {
font-size: @font-size-lg;
font-weight: 600;
color: @heading-color;
font-size: 12px; // 设计 16 × 0.77 ≈ 12.3
font-weight: 500;
color: @cases-text;
.ellipsis();
}
@@ -175,9 +175,9 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px @spacing-sm;
margin-top: @spacing-sm;
font-size: @font-size-sm;
font-size: 11px; // 设计 10 → 7.7，取可读下限 11
line-height: 1.5;
color: @heading-color;
color: @cases-text;
li {
/* 值可能较长（如「完成时间：2026/11/30」），换行而非截断，避免丢信息 */
@@ -186,16 +186,16 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
}
&__label {
color: @text-color-secondary;
color: inherit; // 设计04 标签与值同色 rgba(51,51,51)
}
&__more {
display: block;
width: fit-content;
margin: @spacing-base 0 0 auto;
color: @primary-color;
font-size: @font-size-base;
font-weight: 500;
margin: 11px 0 0 auto; // 设计 14 × 0.77
color: @primary-strong; // 设计04 实取 rgba(2,79,255)
font-size: 11px; // 设计 12 → 9.2，取可读下限 11
font-weight: 400;
}
}
</style>