style: 修改碳需求市场样式

This commit is contained in:
zheng020 2026-04-30 01:50:15 +08:00
parent baf775acbd
commit d966ffff1d
2 changed files with 258 additions and 252 deletions

View File

@ -884,6 +884,11 @@ export default {
color: #00b96b;
font-size: 14px;
font-weight: 400;
&:hover {
background: rgba(0, 154, 41, 0.1);
cursor: pointer;
}
}
.price-value {

View File

@ -16,13 +16,77 @@
{{ tab.label }}
</button>
</div>
<button class="publish-btn" @click="handlePublish">免费发布需求</button>
<div class="nav-right">
<span class="list-count"> {{ page.total }} 条需求</span>
<button class="publish-btn" @click="handlePublish">免费发布需求</button>
</div>
</div>
</div>
<main class="xqsc-main">
<div class="content-area">
<!-- 左侧筛选栏 -->
<!-- 左侧需求卡片列表 -->
<div class="demand-list">
<!-- 加载状态 -->
<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"
:data-gx-uuid="card.gxUuid"
class="demand-card"
>
<!-- 卡片头部 -->
<div class="card-header">
<div class="card-title-box">
<div class="card-title-text">
<div class="card-title-row">
<div :class="['demand-title', { urgent: card.urgent }]">
{{ card.bt1 }}
</div>
</div>
<div class="card-title-sub">
<div class="card-company">
<img src="../../assets/fwsc/city.svg" />
<span class="company-name">{{ card.qymc }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<p class="card-desc">{{ card.fwnr }}</p>
<div class="card-tags">
<span v-for="(tag, i) in card.fwlxbqList" :key="i" class="tag">{{ tag }}</span>
</div>
</div>
<!-- 卡片底部 -->
<div class="card-footer">
<div class="card-budget">
<span class="budget-label">预算</span>
<span class="budget-value">{{ card.ysfwDm1 }}</span>
</div>
<div class="card-actions">
<span @click="handleContact(card)">立即咨询</span>
</div>
</div>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && cardList.length === 0" class="empty-state">
<p>暂无需求信息</p>
</div>
</div>
<!-- 右侧筛选栏 -->
<aside class="filter-sidebar">
<div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
<span class="toggle-text">筛选</span>
@ -32,14 +96,13 @@
<!-- 内容搜索 -->
<div class="filter-section">
<div class="filter-title">内容搜索</div>
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch" />
<div class="filter-buttons">
<t-button theme="primary" @click="onSearch">查询</t-button>
<t-button theme="default" @click="onReset">重置</t-button>
</div>
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch">
<template #suffix-icon>
<SearchIcon />
</template>
</t-input>
</div>
<!-- 服务地区 -->
<div class="filter-section">
<div class="filter-title">服务地区</div>
@ -63,78 +126,19 @@
</div>
</div>
</aside>
<!-- 右侧需求卡片列表 -->
<div class="demand-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 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"
:data-gx-uuid="card.gxUuid"
class="demand-card"
>
<!-- 卡片头部 -->
<div class="card-header">
<div :class="['demand-title', { urgent: card.urgent }]">
{{ card.bt1 }}
</div>
<div class="demand-company">{{ card.qymc }}</div>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<div class="card-tags">
<span v-for="(tag, i) in card.fwlxbqList" :key="i" class="tag">{{ tag }}</span>
</div>
<p class="card-desc">{{ card.fwnr }}</p>
</div>
<!-- 卡片底部 -->
<div class="card-footer">
<div class="card-budget">
<span class="budget-label">预算</span>
<span class="budget-value">{{ card.ysfwDm1 }}</span>
</div>
<div class="card-actions">
<t-button theme="primary" size="small" @click="handleContact(card)">联系客户</t-button>
</div>
</div>
</div>
</div>
<!-- 空状态 -->
<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>
<!-- 分页 -->
<div class="pagination-box" v-if="page.total > 0">
<div class="pagination-total"> {{ page.total }} 条数据</div>
<t-pagination
v-model="page.pageNo"
:total="page.total"
:page-size.sync="page.pageSize"
:page-size-options="[3, 9, 27, 45]"
:totalContent='false'
:page-size-options="[10, 20, 30, 50]"
@change="onPageChange"
align="center"
/>
</div>
</main>
@ -199,6 +203,7 @@
</template>
<script>
import { SearchIcon } from 'tdesign-icons-vue';
import NewNav from '@/pages/index/components/new-nav/index.vue';
import Footer from '@/pages/index/components/footer/index.vue';
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
@ -212,6 +217,7 @@ export default {
Footer,
BreadcrumbNav,
XqscPublish,
SearchIcon,
},
data() {
return {
@ -237,7 +243,7 @@ export default {
//
page: {
pageNo: 1,
pageSize: 9,
pageSize: 10,
total: 0,
},
//
@ -445,8 +451,7 @@ export default {
//
.secondary-nav {
background: #fff;
border-bottom: 1px solid #eee;
border-bottom: none;
}
.secondary-nav-content {
@ -454,60 +459,53 @@ export default {
align-items: center;
justify-content: space-between;
max-width: 1400px;
padding: 0 20px;
padding: 20px 20px 0;
margin: 0 auto;
}
.nav-tabs {
display: flex;
gap: 8px;
gap: 40px;
width: 596px;
height: 42px;
}
.nav-right {
display: flex;
align-items: center;
gap: 20px;
}
.nav-tab {
position: relative;
padding: 12px 20px;
font-size: 14px;
color: #666;
min-width: max-content;
height: 42px;
padding: 8px 16px;
font-size: 18px;
font-weight: 500;
color: #003B1A;
cursor: pointer;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 32px;
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;
&::after {
width: 100%;
}
background: #8CFFCE;
box-shadow: inset 0 0 0 1px #00B96B;
}
}
.publish-btn {
padding: 8px 24px;
font-size: 14px;
font-weight: 500;
width: 220px;
height: 42px;
line-height: 26px;
padding: 8px 16px;
font-size: 18px;
font-weight: 400;
color: #fff;
cursor: pointer;
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
@ -529,6 +527,7 @@ export default {
.content-area {
display: flex;
gap: 20px;
align-items: stretch;
}
//
@ -536,7 +535,6 @@ export default {
position: sticky;
top: 104px;
width: 220px;
height: fit-content;
flex-shrink: 0;
}
@ -595,12 +593,11 @@ export default {
}
.filter-section {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px dashed #e0e0e0;
&:last-child {
padding-bottom: 0;
padding: 10px 0;
margin-bottom: 0;
border-bottom: none;
}
@ -631,92 +628,30 @@ export default {
}
}
.filter-buttons {
display: flex;
gap: 8px;
margin-top: 16px;
margin-bottom: 16px;
.t-button {
flex: 1;
}
}
//
.demand-list {
flex: 1;
min-width: 0;
}
.list-header {
display: flex;
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;
}
font-weight: 400;
color: #6B8575;
}
//
.demand-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
gap: 24px;
}
.demand-card {
position: relative;
display: flex;
flex-direction: column;
padding: 20px;
overflow: hidden;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
@ -725,40 +660,71 @@ export default {
&.highlight-card {
animation: highlight-pulse 3s ease-out;
}
&::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, 154, 41, 0.15);
&::before {
transform: scaleX(1);
}
}
}
.card-header {
margin-bottom: 12px;
position: relative;
padding: 16px;
height: 70px;
&::after {
position: absolute;
right: 16px;
bottom: -6px;
left: 16px;
height: 1px;
background: #E8F0EC;
content: '';
}
}
.card-title-box {
display: flex;
justify-content: space-between;
}
.card-title-text {
flex: 1;
min-width: 0;
}
.card-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.card-title-sub {
display: flex;
gap: 12px;
justify-content: space-between;
}
.card-company {
display: flex;
align-items: center;
gap: 8px;
}
.company-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
color: #6B8575;
font-weight: 400;
}
.demand-title {
margin-bottom: 8px;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: #333;
flex: 1;
overflow: hidden;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #003B1A;
text-overflow: ellipsis;
white-space: nowrap;
&.urgent {
color: #d25f00;
@ -767,31 +733,30 @@ export default {
.demand-company {
font-size: 14px;
color: #666;
color: #6B8575;
}
.card-content {
flex: 1;
margin-bottom: 12px;
padding: 16px;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.tag {
padding: 2px 8px;
font-size: 12px;
color: #2e7d32;
background: #dcf9e2;
font-size: 13px;
font-weight: 400;
color: #00B96B;
background: #EEFAE2;
border-radius: 4px;
}
.card-desc {
display: box;
display: block;
height: 70px;
overflow: hidden;
font-size: 14px;
@ -799,15 +764,25 @@ export default {
color: #666;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
box-orient: vertical;
}
.card-footer {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 14px;
border-top: 1px dashed #979797;
padding: 14px 16px;
height: 64px;
&::before {
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 1px;
background: #E8F0EC;
content: '';
}
}
.card-budget {
@ -823,8 +798,24 @@ export default {
.budget-value {
font-size: 20px;
font-weight: 700;
color: #D25F00;
font-weight: 600;
color: #FF4D4F;
}
.card-actions {
display: flex;
height: 32px;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #00b96b;
color: #00b96b;
font-size: 14px;
font-weight: 400;
&:hover {
background: rgba(0, 154, 41, 0.1);
cursor: pointer;
}
}
//
@ -833,26 +824,20 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
width: 100%;
min-height: 300px;
padding: 40px;
background: #fff;
border-radius: 12px;
animation: fadeIn 0.5s ease;
.empty-illustration {
margin-bottom: 20px;
font-size: 64px;
.empty-icon {
margin-bottom: 16px;
font-size: 48px;
color: #d0d0d0;
}
.empty-text {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.empty-hint {
margin: 0;
p {
font-size: 14px;
color: #999;
}
@ -904,10 +889,28 @@ export default {
}
//
.pagination-total {
font-size: 16px;
color: #666;
}
.pagination-box {
display: flex;
align-items: center;
justify-content: center;
padding-top: 32px;
gap: 10px;
::v-deep .t-pagination {
display: flex !important;
justify-content: center;
flex-wrap: wrap;
width: initial;
.t-input.t-is-readonly {
width: 110px;
}
}
}
//
@ -927,8 +930,8 @@ export default {
}
@media (max-width: 1200px) {
.demand-grid {
grid-template-columns: 1fr;
.demand-card {
width: calc((100% - 20px) / 2);
}
}
@ -979,32 +982,30 @@ export default {
width: 100%;
}
.list-header {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.demand-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.demand-card {
padding: 16px;
}
.card-footer {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.card-actions {
width: 100%;
}
.card-actions .t-button {
.card-header {
padding: 12px;
}
.card-content {
padding: 12px;
}
.card-footer {
padding: 12px;
flex-direction: column;
gap: 12px;
}
.card-actions {
width: 100%;
}
@ -1032,12 +1033,12 @@ export default {
font-size: 13px;
}
.list-title-box .list-title {
font-size: 18px;
.filter-sidebar-content {
padding: 12px;
}
.demand-title {
font-size: 16px;
.card-title-main {
font-size: 14px;
}
.card-desc {