From f103fae39b433245cc861a9896e6ade999385a3d Mon Sep 17 00:00:00 2001
From: liulong <18539103286>
Date: Tue, 9 Jun 2026 01:33:48 +0800
Subject: [PATCH] =?UTF-8?q?style(xqsc):=20=E7=A2=B3=E9=9C=80=E6=B1=82?=
 =?UTF-8?q?=E5=B8=82=E5=9C=BA=E6=A0=B7=E5=BC=8F=E4=B8=8E=E7=A2=B3=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=B8=82=E5=9C=BA=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 外层接入 portal-figma-scale-viewport/stage 外壳

- script 引入 portalFigmaScaleMixin、comingSoonMixin、scrollPortalContentToTop

- 卡片 class 命名统一为 card-list/service-grid/service-card/card-title-main

- nav-tab 圆角 32px 胶囊改 6px 长方形+圆角

- card-header/card-footer 改为 min-height + height:auto

- card-desc 改为 -webkit-box 三行截断

- card-actions 圆角 4px 改 6px 并补全 inline-flex 排版

- 容器背景 #f5f5f5 改 #F6F7FA + portal-figma-scale-page() mixin

- 移动端响应式与分页样式与 fwsc.vue 完全对齐

- 保留需求市场特有：预算展示、联系客户弹窗、需求类型/服务地区/所属行业筛选项、急用需求标题高亮

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/pages/index/views/fwsc/xqsc.vue       | 422 ++++++++++++++----
 1 file changed, 335 insertions(+), 87 deletions(-)

diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
index cf90d41..2dcaecf 100644
--- a/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="xqsc-container">
+  <div class="xqsc-container fwsc-page portal-page-shell portal-market-figma-page">
+    <div class="portal-figma-scale-viewport">
+      <div class="portal-figma-scale-stage" ref="figmaStage">
     <!-- 面包屑导航 -->
     <!-- <BreadcrumbNav currentPage="碳需求市场" /> -->
 
@@ -26,26 +28,26 @@
     <main class="xqsc-main">
       <div class="content-area">
         <!-- 左侧需求卡片列表 -->
-        <div class="demand-list">
+        <div class="card-list">
           <!-- 加载状态 -->
           <div v-if="loading" class="loading-state">
             <div class="loading-spinner"></div>
             <p>加载中...</p>
           </div>
 
-          <div class="demand-grid" v-else>
+          <div class="service-grid" v-else>
             <div
               v-for="card in cardList"
               :key="card.gxUuid"
               :data-gx-uuid="card.gxUuid"
-              class="demand-card"
+              class="service-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 }]">
+                      <div :class="['card-title-main', { urgent: card.urgent }]">
                         {{ card.bt1 }}
                       </div>
                     </div>
@@ -54,6 +56,10 @@
                         <img src="../../assets/fwsc/city.svg" />
                         <span class="company-name">{{ card.qymc }}</span>
                       </div>
+                      <div class="location" v-if="card.fwfw">
+                        <img src="../../assets/fwsc/map.svg" />
+                        <span class="company-name">{{ card.fwfw }}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -69,12 +75,12 @@
 
               <!-- 卡片底部 -->
               <div class="card-footer">
-                <div class="card-budget">
+                <div class="card-price-info">
                   <span class="budget-label">预算</span>
                   <span class="budget-value">{{ card.ysfwDm1 }}</span>
                 </div>
-                <div class="card-actions">
-                  <span @click="handleContact(card)">立即咨询</span>
+                <div class="card-actions" @click="handleContact(card)">
+                  <span>立即咨询</span>
                 </div>
               </div>
             </div>
@@ -142,6 +148,8 @@
         />
       </div>
     </main>
+      </div>
+    </div>
 
     <!-- 发布需求抽屉 -->
     <XqscPublish
@@ -206,9 +214,13 @@ import NewNav from '@/pages/index/components/new-nav/index.vue';
 import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
 import XqscPublish from './components/XqscPublish.vue';
 import api from '@/pages/index/api/fwsc/index.js';
+import { scrollPortalContentToTop } from '@/pages/index/utils/portal-scroll-mode';
+import portalFigmaScaleMixin from '@/pages/index/utils/portal-figma-scale-mixin';
+import comingSoonMixin from '@/pages/index/utils/coming-soon-mixin';
 
 export default {
   name: 'XqscPage',
+  mixins: [portalFigmaScaleMixin, comingSoonMixin],
   components: {
     NewNav,
     BreadcrumbNav,
@@ -360,6 +372,7 @@ export default {
     onPageChange(pageInfo) {
       this.page.pageNo = pageInfo.current;
       this.page.pageSize = pageInfo.pageSize;
+      scrollPortalContentToTop();
       this.searchList();
     },
     // 滚动到指定项并高亮
@@ -445,9 +458,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '../../styles/home-figma-variables.less';
+
 .xqsc-container {
-  min-height: 100vh;
-  background: #f5f5f5;
+  background: #F6F7FA;
+  .portal-figma-scale-page();
 }
 
 .xqsc-main {
@@ -494,7 +509,8 @@ export default {
   color: #003B1A;
   cursor: pointer;
   background: transparent;
-  border-radius: 32px;
+  /* 优化需求：按钮线框统一为长方形+圆角（不再使用 32px 胶囊） */
+  border-radius: 6px;
   transition: all 0.3s;
 
   &:hover {
@@ -546,13 +562,6 @@ export default {
   flex-shrink: 0;
 }
 
-.filter-sidebar-content {
-  padding: 20px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-}
-
 // 移动端筛选栏折叠
 .filter-toggle {
   display: none;
@@ -600,7 +609,15 @@ export default {
   }
 }
 
+.filter-sidebar-content {
+  padding: 20px;
+  background: #fff;
+  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;
 
@@ -636,8 +653,8 @@ export default {
   }
 }
 
-// 右侧需求列表
-.demand-list {
+// 右侧卡片列表
+.card-list {
   flex: 1;
   min-width: 0;
 }
@@ -648,14 +665,13 @@ export default {
   color: #6B8575;
 }
 
-// 需求卡片网格
-.demand-grid {
+.service-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
 }
 
-.demand-card {
+.service-card {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -672,8 +688,10 @@ export default {
 
 .card-header {
   position: relative;
+  box-sizing: border-box;
   padding: 16px;
-  height: 70px;
+  min-height: 70px;
+  height: auto;
 
   &::after {
     position: absolute;
@@ -696,35 +714,7 @@ export default {
   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 {
+.card-title-main {
   flex: 1;
   overflow: hidden;
   font-size: 16px;
@@ -739,15 +729,57 @@ export default {
   }
 }
 
-.demand-company {
+.card-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.card-company {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-title-sub {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.company-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 14px;
   color: #6B8575;
+  font-weight: 400;
+}
+
+.location {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .card-content {
   padding: 16px;
 }
 
+.card-desc {
+  display: -webkit-box;
+  min-height: 44px;
+  max-height: 70px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
 .card-tags {
   display: flex;
   flex-wrap: wrap;
@@ -763,24 +795,16 @@ export default {
   border-radius: 4px;
 }
 
-.card-desc {
-  display: block;
-  height: 70px;
-  overflow: hidden;
-  font-size: 14px;
-  line-height: 1.6;
-  color: #666;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 3;
-}
-
 .card-footer {
   position: relative;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 16px;
-  height: 64px;
+  min-height: 64px;
+  height: auto;
+  flex-shrink: 0;
 
   &::before {
     position: absolute;
@@ -793,9 +817,9 @@ export default {
   }
 }
 
-.card-budget {
+.card-price-info {
   display: flex;
-  align-items: center;
+  align-items: baseline;
 }
 
 .budget-label {
@@ -811,14 +835,21 @@ export default {
 }
 
 .card-actions {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   height: 32px;
   padding: 6px 12px;
-  border-radius: 4px;
+  /* 优化需求：按钮线框统一为长方形+圆角 */
+  border-radius: 6px;
   border: 1px solid #00b96b;
   color: #00b96b;
   font-size: 14px;
   font-weight: 400;
+  flex-shrink: 0;
+  white-space: nowrap;
+  transition: all 0.2s ease;
 
   &:hover {
     background: rgba(0, 154, 41, 0.1);
@@ -904,20 +935,36 @@ export default {
 
 .pagination-box {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   padding-top: 32px;
-  gap: 10px;
+  gap: 16px;
+  width: 100%;
+  box-sizing: border-box;
 
   ::v-deep .t-pagination {
     display: flex !important;
-    justify-content: center;
     flex-wrap: wrap;
-    width: initial;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    max-width: 100%;
+    gap: 12px 16px;
 
     .t-input.t-is-readonly {
       width: 110px;
     }
+
+    .t-pagination__select {
+      margin-right: 0;
+    }
+
+    /* 优化需求：分页按钮线框统一为长方形+圆角 */
+    .t-pagination__number,
+    .t-pagination__btn {
+      border-radius: 6px;
+    }
   }
 }
 
@@ -938,87 +985,258 @@ export default {
 }
 
 @media (max-width: 1200px) {
-  .demand-card {
-    width: calc((100% - 20px) / 2);
+  .service-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
   }
 }
 
 @media (max-width: 768px) {
   .xqsc-main {
     padding: 12px;
+    box-sizing: border-box;
   }
 
   .secondary-nav-content {
     flex-direction: column;
+    align-items: stretch;
     padding: 12px 16px;
     gap: 12px;
   }
 
   .nav-tabs {
     width: 100%;
+    max-width: 100%;
+    height: auto;
+    min-height: 42px;
     padding-bottom: 4px;
     overflow-x: auto;
-    gap: 4px;
+    overflow-y: hidden;
+    gap: 8px;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .nav-tab {
+    flex-shrink: 0;
     padding: 10px 12px;
     font-size: 13px;
     white-space: nowrap;
   }
 
+  .nav-right {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
   .publish-btn {
     width: 100%;
     padding: 10px;
+    box-sizing: border-box;
   }
 
   .content-area {
     flex-direction: column;
+    gap: 12px;
   }
 
   .filter-sidebar {
     position: relative;
     top: 0;
+    order: -1;
     width: 100%;
   }
 
-  .filter-sidebar-content {
-    padding: 12px;
-  }
-
-  .demand-list {
+  .card-list {
+    order: 0;
     width: 100%;
+    min-width: 0;
   }
 
-  .demand-grid {
+  .service-grid {
     grid-template-columns: 1fr;
     gap: 12px;
   }
 
-  .demand-card {
+  .service-card {
     width: 100%;
+    max-width: 100%;
   }
 
   .card-header {
-    padding: 12px;
+    min-height: 0;
+    padding: 12px 12px 14px;
+  }
+
+  .card-title-sub {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .card-company,
+  .location {
+    max-width: 100%;
+  }
+
+  .company-name {
+    white-space: normal;
   }
 
   .card-content {
     padding: 12px;
   }
 
+  .card-desc {
+    min-height: 0;
+    max-height: none;
+    height: auto;
+  }
+
   .card-footer {
+    min-height: 0;
     padding: 12px;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     gap: 12px;
   }
 
+  .card-price-info {
+    flex: 1;
+    min-width: 0;
+  }
+
   .card-actions {
-    width: 100%;
+    width: auto;
+    min-width: 96px;
+    height: 40px;
+    padding: 8px 14px;
   }
 
   .pagination-box {
-    padding-top: 20px;
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: 16px;
+    padding-bottom: 32px;
+    gap: 12px;
+  }
+
+  .pagination-total {
+    width: 100%;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .pagination-box ::v-deep .t-pagination {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center;
+    justify-content: center !important;
+    width: 100% !important;
+    max-width: 100%;
+    white-space: normal !important;
+    row-gap: 12px;
+    column-gap: 8px;
+  }
+
+  .pagination-box ::v-deep .t-pagination__total {
+    display: none;
+  }
+
+  .pagination-box ::v-deep .t-pagination__btn-prev {
+    order: 1;
+  }
+
+  .pagination-box ::v-deep .t-pagination__pager {
+    order: 2;
+  }
+
+  .pagination-box ::v-deep .t-pagination__btn-next {
+    order: 3;
+  }
+
+  .pagination-box ::v-deep .t-pagination__select {
+    order: 4;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+    margin: 0 0 0 8px !important;
+    display: flex;
+    justify-content: center;
+  }
+
+  .pagination-box ::v-deep .t-pagination__select .t-select__wrap {
+    width: auto;
+    max-width: none;
+  }
+
+  .pagination-box ::v-deep .t-pagination__pager {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    max-width: 100%;
+  }
+
+  @mob-pagination-h: 32px;
+
+  .pagination-box ::v-deep .t-pagination__number {
+    min-width: @mob-pagination-h;
+    height: @mob-pagination-h;
+    line-height: @mob-pagination-h;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  .pagination-box ::v-deep .t-pagination__btn {
+    min-width: @mob-pagination-h;
+    width: @mob-pagination-h;
+    height: @mob-pagination-h;
+    line-height: @mob-pagination-h;
+  }
+
+  .pagination-box ::v-deep .t-pagination__select {
+    height: @mob-pagination-h;
+    align-items: center;
+  }
+
+  .pagination-box ::v-deep .t-pagination__select .t-select__wrap,
+  .pagination-box ::v-deep .t-pagination__select .t-input__wrap,
+  .pagination-box ::v-deep .t-pagination__select .t-input {
+    height: @mob-pagination-h !important;
+    min-height: @mob-pagination-h !important;
+    box-sizing: border-box;
+  }
+
+  .pagination-box ::v-deep .t-pagination__select .t-input__inner {
+    height: @mob-pagination-h !important;
+    min-height: @mob-pagination-h !important;
+    line-height: @mob-pagination-h;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 13px;
+    box-sizing: border-box;
+  }
+
+  .pagination-box ::v-deep .t-pagination__jump {
+    display: none !important;
+  }
+
+  .pagination-box ::v-deep .t-input.t-is-readonly {
+    width: auto;
+    min-width: 96px;
+    max-width: none;
   }
 }
 
@@ -1057,6 +1275,36 @@ export default {
   .budget-value {
     font-size: 18px;
   }
+
+  .pagination-box {
+    padding-bottom: 40px;
+  }
+
+  @mob-pagination-h-sm: 28px;
+
+  .pagination-box ::v-deep .t-pagination__number {
+    min-width: @mob-pagination-h-sm;
+    height: @mob-pagination-h-sm;
+    line-height: @mob-pagination-h-sm;
+    font-size: 13px;
+  }
+
+  .pagination-box ::v-deep .t-pagination__btn {
+    min-width: @mob-pagination-h-sm;
+    width: @mob-pagination-h-sm;
+    height: @mob-pagination-h-sm;
+    line-height: @mob-pagination-h-sm;
+  }
+
+  .pagination-box ::v-deep .t-pagination__select,
+  .pagination-box ::v-deep .t-pagination__select .t-select__wrap,
+  .pagination-box ::v-deep .t-pagination__select .t-input__wrap,
+  .pagination-box ::v-deep .t-pagination__select .t-input,
+  .pagination-box ::v-deep .t-pagination__select .t-input__inner {
+    height: @mob-pagination-h-sm !important;
+    min-height: @mob-pagination-h-sm !important;
+    line-height: @mob-pagination-h-sm;
+  }
 }
 
 @keyframes highlight-pulse {