feat: 服务市场、需求市场美化
This commit is contained in:
parent
d85aadcf9a
commit
adbbcc321d
@ -62,6 +62,17 @@
|
||||
|
||||
<!-- 右侧服务卡片列表 -->
|
||||
<div class="card-list">
|
||||
<div class="list-header">
|
||||
<div class="list-title-box">
|
||||
<span class="list-icon">🛠️</span>
|
||||
<span class="list-title">碳服务市场</span>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="list-count"><span class="count-dot"></span>共 {{ page.total }} 条服务</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-grid">
|
||||
<div
|
||||
v-for="(card, index) in cardList"
|
||||
:key="card.gxUuid"
|
||||
@ -107,6 +118,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
||||
@ -475,6 +487,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -484,28 +497,55 @@ export default {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
border-radius: 1px;
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #009a29;
|
||||
border-bottom-color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #007a1f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -526,22 +566,38 @@ export default {
|
||||
.filter-sidebar-content {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: linear-gradient(180deg, #009a29, #48C666);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
@ -570,24 +626,102 @@ export default {
|
||||
// 右侧卡片列表
|
||||
.card-list {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.list-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #333 0%, #009a29 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
|
||||
.count-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(135deg, #009a29, #48C666);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc((100% - 20px) / 2);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -705,12 +839,37 @@ export default {
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
font-size: 48px;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
:class="{ active: selectedType === item.value }"
|
||||
@click="handleTypeChange(item.value)"
|
||||
>
|
||||
<span class="check-icon">{{ selectedType === item.value ? '✓' : '' }}</span>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
@ -229,6 +230,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -238,28 +240,55 @@ export default {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
border-radius: 1px;
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #009a29;
|
||||
border-bottom-color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #007a1f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -272,17 +301,26 @@ export default {
|
||||
min-width: 220px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: linear-gradient(180deg, #009a29, #48C666);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list {
|
||||
@ -292,25 +330,41 @@ export default {
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.check-icon {
|
||||
display: flex;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
background: #f0f9f0;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #009a29;
|
||||
color: #009a29;
|
||||
background: #e8f5e9;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #007a1f;
|
||||
.check-icon {
|
||||
background: #009a29;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -329,17 +383,35 @@ export default {
|
||||
}
|
||||
|
||||
.database-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.12);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -29,12 +29,12 @@
|
||||
<div class="filter-section">
|
||||
<div class="filter-title">内容搜索</div>
|
||||
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch" />
|
||||
</div>
|
||||
|
||||
<div class="filter-buttons">
|
||||
<t-button theme="primary" @click="onSearch">查询</t-button>
|
||||
<t-button theme="default" @click="onReset">重置</t-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 服务地区 -->
|
||||
<div class="filter-section">
|
||||
@ -63,11 +63,22 @@
|
||||
<!-- 右侧需求卡片列表 -->
|
||||
<div class="demand-list">
|
||||
<div class="list-header">
|
||||
<div class="list-title-box">
|
||||
<span class="list-icon">📋</span>
|
||||
<span class="list-title">碳需求市场</span>
|
||||
<span class="list-count">共 {{ page.total }} 条需求</span>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="list-count"><span class="count-dot"></span>共 {{ page.total }} 条需求</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demand-grid">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>加载中...</p>
|
||||
</div>
|
||||
|
||||
<div class="demand-grid" v-else>
|
||||
<div
|
||||
v-for="card in cardList"
|
||||
:key="card.gxUuid"
|
||||
@ -103,8 +114,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
||||
<p>暂无需求信息</p>
|
||||
<div v-if="!loading && cardList.length === 0" class="empty-state">
|
||||
<div class="empty-illustration">📋</div>
|
||||
<p class="empty-text">暂无需求信息</p>
|
||||
<p class="empty-hint">敬请期待更多优质需求上线</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -428,6 +441,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -437,28 +451,55 @@ export default {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
border-radius: 1px;
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #009a29;
|
||||
border-bottom-color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #007a1f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -479,22 +520,38 @@ export default {
|
||||
.filter-sidebar-content {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: linear-gradient(180deg, #009a29, #48C666);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
@ -524,20 +581,58 @@ export default {
|
||||
.list-header {
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 20px;
|
||||
.list-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.list-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #333 0%, #009a29 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
|
||||
.count-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(135deg, #009a29, #48C666);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 需求卡片网格
|
||||
@ -548,17 +643,35 @@ export default {
|
||||
}
|
||||
|
||||
.demand-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -643,11 +756,77 @@ export default {
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
|
||||
.empty-illustration {
|
||||
margin-bottom: 20px;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.loading-spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
border: 4px solid #e8f5e9;
|
||||
border-top-color: #009a29;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
|
||||
Loading…
Reference in New Issue
Block a user