feat: 样式调整、服务市场筛选框调整

2026-04-06 22:29:30 +08:00 · 2026-04-06 22:29:30 +08:00 · 2d009323e4
commit 2d009323e4
parent a2c31635dd
11 changed files with 238 additions and 54 deletions
--- a/txw-mhzc-web/src/pages/index/api/fwsc/index.js
+++ b/txw-mhzc-web/src/pages/index/api/fwsc/index.js
@ -28,7 +28,7 @@ export default {
    return fetchSso({
      url: `${basurl}/gxzx/gxdt/gxxxList`,
      method: 'post',
-      loading: true,
+      // loading: true,  // 组件自己管理 loading 状态
      data: JSON.stringify(params),
    });
  },
--- a/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
@ -33,18 +33,18 @@
            <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>
+  
+              
+              <!-- 只展示收藏项 -->
+              <div class="filter-section">
+                <t-checkbox v-model="filter.zzsscx" @change="onSearch">只展示收藏项</t-checkbox>
+              </div>
            </div>

-            <div class="filter-buttons">
-              <t-button theme="primary" @click="onSearch">查询</t-button>
-              <t-button theme="default" @click="onReset">重置</t-button>
-            </div>
-
-            
-            <!-- 只展示收藏项 -->
-            <div class="filter-section">
-              <t-checkbox v-model="filter.zzsscx" @change="onSearch">只展示收藏项</t-checkbox>
-            </div>

            <!-- 服务类型 -->
            <div class="filter-section">
@ -57,8 +57,22 @@
            <!-- 服务企业 -->
            <div class="filter-section">
              <div class="filter-title">服务企业</div>
-              <div class="filter-options enterprise-options">
-                <t-checkbox-group v-model="filter.qyuuids" :options="qyOptions" @change="onSearch" />
+              <t-input
+                v-model="qySearchKeyword"
+                placeholder="搜索企业名称"
+                clearable
+                class="qy-search-input"
+                @change="filterQyOptions"
+              >
+                <template #prefix-icon>
+                  <SearchIcon />
+                </template>
+              </t-input>
+              <div class="filter-options enterprise-options" v-if="qyFilteredOptions.length > 0">
+                <t-checkbox-group v-model="filter.qyuuids" :options="qyFilteredOptions" @change="onSearch" />
+              </div>
+              <div class="Qy-options-empty" v-else>
+                <span>未找到匹配企业</span>
              </div>
            </div>
          </div>
@ -203,7 +217,7 @@
 </template>

 <script>
-import { LocationIcon } from 'tdesign-icons-vue';
+import { LocationIcon, 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';
@ -218,6 +232,7 @@ export default {
    BreadcrumbNav,
    FwscPublish,
    LocationIcon,
+    SearchIcon,
  },
  data() {
    return {
@ -240,6 +255,10 @@ export default {
      qyOptions: [],
      // 全部企业列表
      allQyOptions: [],
+      // 企业搜索关键词
+      qySearchKeyword: '',
+      // 过滤后的企业选项
+      qyFilteredOptions: [],
      // 卡片列表
      cardList: [],
      // 分页
@ -308,26 +327,44 @@ export default {
        });
        this.allQyOptions = options || [];
        this.qyOptions = options || [];
+        this.qyFilteredOptions = options || [];
      } catch (error) {
        this.allQyOptions = [];
        this.qyOptions = [];
+        this.qyFilteredOptions = [];
      }
    },
    // 服务类型变化时，动态过滤企业
    async onFwlxChange() {
+      this.qySearchKeyword = '';
      if (this.filter.fwlxjh.length > 0) {
        try {
          const res = await api.getQyuuidsByBq({ fwlxjh: this.filter.fwlxjh });
          const selectedCodes = res.data || [];
          this.qyOptions = this.allQyOptions.filter((q) => selectedCodes.includes(q.value));
+          this.qyFilteredOptions = this.qyOptions;
        } catch (error) {
          this.qyOptions = this.allQyOptions;
+          this.qyFilteredOptions = this.allQyOptions;
        }
      } else {
        this.qyOptions = this.allQyOptions;
+        this.qyFilteredOptions = this.allQyOptions;
      }
      this.onSearch();
    },
+    // 过滤企业选项
+    filterQyOptions() {
+      console.log('this.qySearchKeyword', this.qySearchKeyword);
+      if (!this.qySearchKeyword) {
+        this.qyFilteredOptions = this.qyOptions;
+      } else {
+        const keyword = this.qySearchKeyword.toLowerCase();
+        this.qyFilteredOptions = this.qyOptions.filter((q) =>
+          q.label.toLowerCase().includes(keyword)
+        );
+      }
+    },
    // 搜索列表
    async searchList() {
      this.loading = true;
@ -338,9 +375,8 @@ export default {
          ...this.filter,
          ...this.page,
        };
-        if (prame.scbz !== undefined) {
-          prame.scbz = this.filter.zzsscx ? 'Y' : '';
-        }
+        // 只展示收藏项：Y=是, N=否
+        prame.scbz = this.filter.zzsscx ? 'Y' : 'N';
        const { data } = await api.gxxxList(prame);
        if (data.records) {
          data.records.map((item) => {
@ -372,7 +408,9 @@ export default {
        nr: '',
        zzsscx: false,
      };
+      this.qySearchKeyword = '';
      this.qyOptions = this.allQyOptions;
+      this.qyFilteredOptions = this.allQyOptions;
      this.page.pageNo = 1;
      this.searchList();
    },
@ -665,6 +703,17 @@ export default {
  }
 }

+.qy-search-input {
+  margin-bottom: 12px;
+}
+
+.Qy-options-empty {
+  padding: 16px 0;
+  font-size: 14px;
+  color: #999;
+  text-align: center;
+}
+
 .filter-buttons {
  display: flex;
  gap: 8px;
--- a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
@ -112,48 +112,48 @@ export default {
        { label: '社会性数据', value: 'social' }
      ],
      cardList: [
-        {
-          id: 1,
-          name: '宝山绿色低碳数据创新实验室',
-          description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
-          tags: ['公共数据', '社会性数据'],
-          price: '免费'
-        },
        {
          id: 2,
          name: 'HiQLCD数据库',
-          description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
+          description: '覆盖生命周期碳足迹评估所需的基础数据，支持多种排放因子查询与自定义导入。',
          tags: ['商业数据'],
          price: '付费'
        },
        {
          id: 3,
          name: '天工数据库',
-          description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
+          description: '整合工业制造全流程能耗与排放因子，支持实时监测与历史数据追溯分析。',
          tags: ['公益数据'],
          price: '免费'
        },
        {
          id: 4,
          name: 'ecoinvent数据库',
-          description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
+          description: '国际权威生命周期评价数据库，收录全球超过18000种过程数据与排放因子。',
          tags: ['商业数据'],
          price: '付费'
        },
        {
          id: 5,
          name: 'ecoinvent数据库',
-          description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
+          description: '国际权威生命周期评价数据库，收录全球超过18000种过程数据与排放因子。',
          tags: ['商业数据'],
          price: '付费'
        },
        {
          id: 6,
          name: '天工数据库',
-          description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
+          description: '整合工业制造全流程能耗与排放因子，支持实时监测与历史数据追溯分析。',
          tags: ['公益数据'],
          price: '免费'
-        }
+        },
+        {
+          id: 1,
+          name: '宝山绿色低碳数据创新实验室',
+          description: '聚焦区域低碳发展数据汇聚与分析，提供碳排放核算模型与可视化报告。',
+          tags: ['公共数据', '社会性数据'],
+          price: '免费'
+        },
      ],
      // 移动端筛选折叠状态
      filterCollapsed: true,
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/AccountShortcuts.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/AccountShortcuts.vue
@ -9,11 +9,11 @@
        @click="handleClick(item.to)"
      >
        <div class="item-icon" :style="{ background: item.bgColor, color: item.color }">
-          <t-icon :name="item.icon" />
+          <component :is="getIconComponent(item.icon)" />
        </div>
        <span class="item-label">{{ item.label }}</span>
        <div class="item-arrow">
-          <t-icon name="arrow-right" />
+          <ArrowRightIcon />
        </div>
      </button>
    </div>
@ -21,8 +21,24 @@
 </template>

 <script>
+import { MailIcon, UserIcon, EditIcon, LockOnIcon, ArrowRightIcon } from 'tdesign-icons-vue';
+
+const iconMap = {
+  mail: MailIcon,
+  user: UserIcon,
+  edit: EditIcon,
+  'lock-on': LockOnIcon,
+};
+
 export default {
  name: 'AccountShortcuts',
+  components: {
+    MailIcon,
+    UserIcon,
+    EditIcon,
+    LockOnIcon,
+    ArrowRightIcon,
+  },
  data() {
    return {
      shortcuts: [
@ -34,6 +50,9 @@ export default {
    };
  },
  methods: {
+    getIconComponent(name) {
+      return iconMap[name] || MailIcon;
+    },
    handleClick(to) {
      this.$router.push(to);
    },
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/EnterpriseCert.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/EnterpriseCert.vue
@ -2,7 +2,7 @@
  <div class="enterprise-cert">
    <div class="cert-header">
      <div class="cert-icon">
-        <t-icon name="user" />
+        <UserIcon />
      </div>
      <div class="cert-title">
        <h3>企业认证</h3>
@ -34,7 +34,7 @@
      <div class="cert-actions">
        <button class="cert-btn" @click="handleClick">
          <span>{{ certData.qymc ? '查看详情' : '立即认证' }}</span>
-          <t-icon name="arrow-right" />
+          <ArrowRightIcon />
        </button>
      </div>
    </div>
@ -43,9 +43,14 @@

 <script>
 import api from '@/pages/index/api/gxzx/index.js';
+import { UserIcon, ArrowRightIcon } from 'tdesign-icons-vue';

 export default {
  name: 'EnterpriseCert',
+  components: {
+    UserIcon,
+    ArrowRightIcon,
+  },
  data() {
    return {
      certData: {},
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
@ -2,7 +2,7 @@
  <div class="policy-news">
    <div class="panel-header">
      <div class="header-icon">
-        <t-icon name="notification" />
+        <NotificationIcon />
      </div>
      <h3 class="header-title">{{ title }}</h3>
      <span class="header-tag">政策</span>
@ -31,15 +31,21 @@
    <div class="panel-footer">
      <span class="more-link">
        查看全部
-        <t-icon name="arrow-right" />
+        <ArrowRightIcon />
      </span>
    </div>
  </div>
 </template>

 <script>
+import { NotificationIcon, ArrowRightIcon } from 'tdesign-icons-vue';
+
 export default {
  name: 'PolicyNews',
+  components: {
+    NotificationIcon,
+    ArrowRightIcon,
+  },
  props: {
    title: {
      type: String,
@ -203,14 +209,15 @@ export default {
  }

  .item-title {
-    display: box;
+    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6;
    color: @text-dark;
-    box-orient: vertical;
-    transition: color 0.25s ease;
+    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    transition: color 0.25s ease;
  }

  .item-meta {
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue
@ -10,12 +10,12 @@
      >
        <div class="item-icon-wrap">
          <div class="item-icon" :style="{ background: action.bgColor, color: action.color }">
-            <t-icon :name="action.icon" />
+            <component :is="getIconComponent(action.icon)" />
          </div>
        </div>
        <span class="item-label">{{ action.label }}</span>
        <div class="item-arrow">
-          <t-icon name="arrow-right" />
+          <ArrowRightIcon />
        </div>
      </button>
    </div>
@ -23,8 +23,24 @@
 </template>

 <script>
+import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon, ArrowRightIcon } from 'tdesign-icons-vue';
+
+const iconMap = {
+  upload: UploadIcon,
+  'cloud-upload': CloudUploadIcon,
+  edit: EditIcon,
+  bulletpoint: BulletpointIcon,
+};
+
 export default {
  name: 'QuickActions',
+  components: {
+    UploadIcon,
+    CloudUploadIcon,
+    EditIcon,
+    BulletpointIcon,
+    ArrowRightIcon,
+  },
  data() {
    return {
      actions: [
@ -36,6 +52,9 @@ export default {
    };
  },
  methods: {
+    getIconComponent(name) {
+      return iconMap[name] || UploadIcon;
+    },
    handleClick(to) {
      this.$router.push(to);
    },
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/StatsCard.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/StatsCard.vue
@ -4,7 +4,7 @@
    <div class="card-inner">
      <div class="card-icon-wrap" :style="iconWrapStyle">
        <div class="icon-inner" :style="iconInnerStyle">
-          <t-icon :name="iconName" />
+          <component :is="iconComponent" />
        </div>
      </div>
      <div class="card-content">
@ -20,8 +20,23 @@
 </template>

 <script>
+import { UploadIcon, SearchIcon, SwapIcon, MailIcon } from 'tdesign-icons-vue';
+
+const iconMap = {
+  upload: UploadIcon,
+  search: SearchIcon,
+  swap: SwapIcon,
+  mail: MailIcon,
+};
+
 export default {
  name: 'StatsCard',
+  components: {
+    UploadIcon,
+    SearchIcon,
+    SwapIcon,
+    MailIcon,
+  },
  props: {
    title: String,
    count: [String, Number],
@ -45,6 +60,9 @@ export default {
        color: this.borderColor !== 'transparent' ? this.borderColor : '#666',
      };
    },
+    iconComponent() {
+      return iconMap[this.iconName] || UploadIcon;
+    },
  },
  methods: {
    lightenColor(hex) {
--- a/txw-mhzc-web/src/pages/index/views/gzt/index.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/index.vue
@ -82,7 +82,7 @@
          <div class="panel-card">
            <div class="panel-header">
              <div class="header-icon">
-                <t-icon name="app" />
+                <AppIcon />
              </div>
              <div class="header-text">
                <h2 class="panel-title">常用功能</h2>
@ -98,7 +98,7 @@
          <div class="panel-card account-panel">
            <div class="panel-header">
              <div class="header-icon header-icon--account">
-                <t-icon name="setting" />
+                <SettingIcon />
              </div>
              <div class="header-text">
                <h2 class="panel-title">账号管理</h2>
@ -121,6 +121,7 @@
 </template>

 <script>
+import { AppIcon, SettingIcon } from 'tdesign-icons-vue';
 import StatsCard from './components/StatsCard.vue';
 import QuickActions from './components/QuickActions.vue';
 import PolicyNews from './components/PolicyNews.vue';
@ -130,6 +131,8 @@ import EnterpriseCert from './components/EnterpriseCert.vue';
 export default {
  name: 'GztIndex',
  components: {
+    AppIcon,
+    SettingIcon,
    StatsCard,
    QuickActions,
    PolicyNews,
--- a/txw-mhzc-web/src/pages/index/views/home2/index.vue
+++ b/txw-mhzc-web/src/pages/index/views/home2/index.vue
@ -87,7 +87,7 @@
            </div>
            <div class="option-btn-box">
              <div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
-              <div class="btn" @click="handleNavigate(buttonLinks['碳证中心'])">碳证中心</div>
+              <div class="btn" @click="handleIframeNavigate(buttonLinks['碳证中心'])">碳证中心</div>
            </div>
          </div>
          <div class="option-item-box cyan">
@ -282,10 +282,10 @@ export default {
        '碳证核验': 'https://ctn-web-pre.lingshu.net/carbon-verify',
        '跨境互通': '',
        // 国家可信碳链
-        '上链指南': '',
+        '上链指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
        '上链标准': '',
        '上链工具': '',
-        '碳证中心': '',
+        '碳证中心': 'https://ctn-web-pre.lingshu.net/carbon-index',
        // 绿色服务
        '服务市场': '/tfwsc',
        '需求市场': '/txqsc',
@ -320,7 +320,10 @@ export default {
    },
    // 封装跳转方法 - 外部链接新窗口，内部链接当前窗口
    handleNavigate(link) {
-      if (!link) return;
+      if (!link) {
+        this.$message.info('敬请期待');
+        return;
+      }
      if (link.startsWith('http://') || link.startsWith('https://')) {
        window.open(link, '_blank');
      } else {
@ -329,8 +332,10 @@ export default {
    },
    // iframe页面跳转 - 通过parent事件触发main.vue的iframe显示
    handleIframeNavigate(url) {
-      console.log('url', url);
-      if (!url) return;
+      if (!url) {
+        this.$message.info('敬请期待');
+        return;
+      }
      if (url.startsWith('http://') || url.startsWith('https://')) {
        this.$emit('gotoIfreamPage', url);
      } else {
@ -1115,6 +1120,10 @@ export default {
    padding: 16px;
  }

+  .option-item-box:hover {
+    transform: none;
+  }
+
  .option-item-box-title {
    margin-top: 12px;
    font-size: 20px;
@ -1145,10 +1154,17 @@ export default {
    gap: 24px;
  }

+  .center-box .item {
+    padding: 16px 0;
+  }
+
  .center-box .item .name1 {
    font-size: 16px;
  }

+  .center-box .item .name2 {
+    font-size: 18px;
+  }

  .center-box .item .name3 {
    font-size: 14px;
@ -1168,6 +1184,10 @@ export default {
    background-size: cover !important;
  }

+  .gxnl-qych-hydt-box > div:hover {
+    transform: none;
+  }
+
  .gxnl-qych-hydt-box .name1 {
    font-size: 22px;
    line-height: 40px;
@ -1177,10 +1197,12 @@ export default {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
+    height: auto;
  }

  .gxnl-box .item {
-    height: 50px;
+    height: auto;
+    min-height: 50px;
    padding: 12px;
    grid-template-columns: 48px 1fr 24px;
  }
@ -1190,11 +1212,36 @@ export default {
    font-size: 14px;
  }

+  .qych-box .item {
+    height: auto;
+    min-height: 114px;
+    padding: 10px;
+  }
+
+  .qych-box .item .desc-btn-box {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .qych-box .item .desc-btn-box .btn {
+    width: 100%;
+  }
+
+  .hydt-box .tab > div {
+    font-size: 14px;
+  }
+
+  .hydt-box .item {
+    font-size: 12px;
+    padding: 12px;
+  }
+
  /* 底部区域 */
  .bottom-box {
    height: auto;
    min-height: 300px;
    padding: 40px 16px;
+    background-position: center;
  }

  .bottom-box .content {
@ -1219,6 +1266,15 @@ export default {
    font-size: 16px;
    line-height: 48px;
  }
+
+  .bottom-box .content .btn:hover {
+    transform: none;
+  }
+
+  /* 隐藏swiper导航在移动端 */
+  .top-box ::v-deep .t-swiper__navigation {
+    display: none;
+  }
 }

 /* 平板适配 */
--- a/txw-mhzc-web/vue.config.js
+++ b/txw-mhzc-web/vue.config.js
@ -286,15 +286,23 @@ module.exports = {
    // 会误伤 SPA 路由 /view/mhzc/...，刷新时整页请求被转发到后端导致 Proxy error。必须用 ^ 限定为路径前缀。
    proxy: {
      '^/sso': {
-        target: 'http://10.23.20.13:94/',
+        target: 'http://carbon.liantu.tech',
+        // target: 'http://10.23.20.13:94/',
        changeOrigin: true,
      },
      '^/mhzc': {
-        target: 'http://10.23.20.13:94/',
+        target: 'http://carbon.liantu.tech',
+        // target: 'http://10.23.20.13:94/',
        changeOrigin: true,
      },
      '^/gxzx': {
-        target: 'http://10.23.20.13:94/',
+        target: 'http://carbon.liantu.tech',
+        // target: 'http://10.23.20.13:94/',
+        changeOrigin: true,
+      },
+      '^/yygl': {
+        target: 'http://carbon.liantu.tech',
+        // target: 'http://10.23.20.13:94/',
        changeOrigin: true,
      },
    },