feat ui设计稿
This commit is contained in:
Ironsp
@@ -85,71 +85,99 @@ function switchCategory(value: BusinessType | 'all'): void {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.home-cases {
|
||||
// 设计稿区块卡 1680×446 设计px：白底 + #E2E2E2 描边（内容区内左右缩 50 设计px）
|
||||
max-width: 1294px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 32px 54px 44px;
|
||||
border: 1px solid @home-section-border;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
|
||||
&__head {
|
||||
.flex(row, space-between);
|
||||
gap: @spacing-base;
|
||||
margin-bottom: @spacing-base;
|
||||
.flex(row, flex-start);
|
||||
gap: 20px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
// 设计稿栏目标题 36 设计px / 700 / #121212
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: 700;
|
||||
color: @home-ink;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
.flex(row, center);
|
||||
flex: 1;
|
||||
gap: @spacing-sm;
|
||||
// 设计稿分类紧跟标题左侧排布（间距 36 设计px ≈ 28）
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
height: 30px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-round;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
position: relative;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
// 设计稿分类 16 设计px / 500 / #121212（激活 #085DFF + 下划线）
|
||||
color: @home-ink;
|
||||
font-size: @font-size-sm;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
|
||||
&.is-active {
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
background: transparent;
|
||||
color: @home-tab-active;
|
||||
|
||||
// 设计稿激活下划线 29×2 设计px（#1F67EF）
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__more {
|
||||
font-size: @font-size-base;
|
||||
margin-left: auto;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: @spacing-base;
|
||||
// 设计稿案例卡间距 24 设计px ≈ 18 CSS
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__card {
|
||||
overflow: hidden;
|
||||
border-radius: @radius-lg;
|
||||
// 设计稿案例卡 368×248 设计px：白底 + #E0DEDE 描边 + 0 4 10 黑 8% 投影
|
||||
border: 1px solid @home-case-border;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
box-shadow: 0 4px 10px fade(@black, 8%);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-lg;
|
||||
box-shadow: 0 6px 14px fade(@black, 12%);
|
||||
transform: translateY(-2px);
|
||||
|
||||
.home-cases__view {
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
position: relative;
|
||||
height: 130px;
|
||||
// 设计稿封面区 128 设计px 高 ≈ 99 CSS
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -171,43 +199,46 @@ function switchCategory(value: BusinessType | 'all'): void {
|
||||
border-radius: @radius-sm;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
|
||||
&--hardware {
|
||||
background: #22b14c;
|
||||
background: @tag-hardware;
|
||||
}
|
||||
|
||||
&--iot {
|
||||
background: #7c4dff;
|
||||
background: @tag-iot;
|
||||
}
|
||||
|
||||
&--manufacturing {
|
||||
background: #ff8f1f;
|
||||
background: @tag-manufacturing;
|
||||
}
|
||||
|
||||
&--other {
|
||||
background: @text-color-secondary;
|
||||
background: @tag-other;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: @spacing-base;
|
||||
padding: 12px 15px 6px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-bottom: @spacing-sm;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
margin-bottom: 8px;
|
||||
// 设计稿案例名 16 设计px / 500 / #333333
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
color: @home-body;
|
||||
.multi-ellipsis(1);
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px @spacing-sm;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-secondary;
|
||||
// 设计稿元信息 10 设计px → 可读下限 11px / #333333
|
||||
gap: 3px @spacing-sm;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: @home-body;
|
||||
|
||||
li {
|
||||
.ellipsis();
|
||||
@@ -217,13 +248,13 @@ function switchCategory(value: BusinessType | 'all'): void {
|
||||
&__view {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: @spacing-base 0 0 auto;
|
||||
padding: 2px @spacing-base;
|
||||
border: 1px solid @primary-color;
|
||||
border-radius: @radius-sm;
|
||||
color: @primary-color;
|
||||
margin: 10px 0 0 auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
// 设计稿「查看详情>」12 设计px / #024FFF（无按钮描边）
|
||||
color: @primary-strong;
|
||||
font-size: @font-size-sm;
|
||||
transition: all 0.2s;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user