feat: 样式调整、服务市场筛选框调整
This commit is contained in:
parent
a2c31635dd
commit
2d009323e4
@ -28,7 +28,7 @@ export default {
|
|||||||
return fetchSso({
|
return fetchSso({
|
||||||
url: `${basurl}/gxzx/gxdt/gxxxList`,
|
url: `${basurl}/gxzx/gxdt/gxxxList`,
|
||||||
method: 'post',
|
method: 'post',
|
||||||
loading: true,
|
// loading: true, // 组件自己管理 loading 状态
|
||||||
data: JSON.stringify(params),
|
data: JSON.stringify(params),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
@ -33,18 +33,18 @@
|
|||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-title">内容搜索</div>
|
<div class="filter-title">内容搜索</div>
|
||||||
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch" />
|
<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>
|
||||||
|
|
||||||
<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">
|
<div class="filter-section">
|
||||||
@ -57,8 +57,22 @@
|
|||||||
<!-- 服务企业 -->
|
<!-- 服务企业 -->
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-title">服务企业</div>
|
<div class="filter-title">服务企业</div>
|
||||||
<div class="filter-options enterprise-options">
|
<t-input
|
||||||
<t-checkbox-group v-model="filter.qyuuids" :options="qyOptions" @change="onSearch" />
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -203,7 +217,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
import Footer from '@/pages/index/components/footer/index.vue';
|
import Footer from '@/pages/index/components/footer/index.vue';
|
||||||
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
||||||
@ -218,6 +232,7 @@ export default {
|
|||||||
BreadcrumbNav,
|
BreadcrumbNav,
|
||||||
FwscPublish,
|
FwscPublish,
|
||||||
LocationIcon,
|
LocationIcon,
|
||||||
|
SearchIcon,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -240,6 +255,10 @@ export default {
|
|||||||
qyOptions: [],
|
qyOptions: [],
|
||||||
// 全部企业列表
|
// 全部企业列表
|
||||||
allQyOptions: [],
|
allQyOptions: [],
|
||||||
|
// 企业搜索关键词
|
||||||
|
qySearchKeyword: '',
|
||||||
|
// 过滤后的企业选项
|
||||||
|
qyFilteredOptions: [],
|
||||||
// 卡片列表
|
// 卡片列表
|
||||||
cardList: [],
|
cardList: [],
|
||||||
// 分页
|
// 分页
|
||||||
@ -308,26 +327,44 @@ export default {
|
|||||||
});
|
});
|
||||||
this.allQyOptions = options || [];
|
this.allQyOptions = options || [];
|
||||||
this.qyOptions = options || [];
|
this.qyOptions = options || [];
|
||||||
|
this.qyFilteredOptions = options || [];
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.allQyOptions = [];
|
this.allQyOptions = [];
|
||||||
this.qyOptions = [];
|
this.qyOptions = [];
|
||||||
|
this.qyFilteredOptions = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 服务类型变化时,动态过滤企业
|
// 服务类型变化时,动态过滤企业
|
||||||
async onFwlxChange() {
|
async onFwlxChange() {
|
||||||
|
this.qySearchKeyword = '';
|
||||||
if (this.filter.fwlxjh.length > 0) {
|
if (this.filter.fwlxjh.length > 0) {
|
||||||
try {
|
try {
|
||||||
const res = await api.getQyuuidsByBq({ fwlxjh: this.filter.fwlxjh });
|
const res = await api.getQyuuidsByBq({ fwlxjh: this.filter.fwlxjh });
|
||||||
const selectedCodes = res.data || [];
|
const selectedCodes = res.data || [];
|
||||||
this.qyOptions = this.allQyOptions.filter((q) => selectedCodes.includes(q.value));
|
this.qyOptions = this.allQyOptions.filter((q) => selectedCodes.includes(q.value));
|
||||||
|
this.qyFilteredOptions = this.qyOptions;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.qyOptions = this.allQyOptions;
|
this.qyOptions = this.allQyOptions;
|
||||||
|
this.qyFilteredOptions = this.allQyOptions;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.qyOptions = this.allQyOptions;
|
this.qyOptions = this.allQyOptions;
|
||||||
|
this.qyFilteredOptions = this.allQyOptions;
|
||||||
}
|
}
|
||||||
this.onSearch();
|
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() {
|
async searchList() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
@ -338,9 +375,8 @@ export default {
|
|||||||
...this.filter,
|
...this.filter,
|
||||||
...this.page,
|
...this.page,
|
||||||
};
|
};
|
||||||
if (prame.scbz !== undefined) {
|
// 只展示收藏项:Y=是, N=否
|
||||||
prame.scbz = this.filter.zzsscx ? 'Y' : '';
|
prame.scbz = this.filter.zzsscx ? 'Y' : 'N';
|
||||||
}
|
|
||||||
const { data } = await api.gxxxList(prame);
|
const { data } = await api.gxxxList(prame);
|
||||||
if (data.records) {
|
if (data.records) {
|
||||||
data.records.map((item) => {
|
data.records.map((item) => {
|
||||||
@ -372,7 +408,9 @@ export default {
|
|||||||
nr: '',
|
nr: '',
|
||||||
zzsscx: false,
|
zzsscx: false,
|
||||||
};
|
};
|
||||||
|
this.qySearchKeyword = '';
|
||||||
this.qyOptions = this.allQyOptions;
|
this.qyOptions = this.allQyOptions;
|
||||||
|
this.qyFilteredOptions = this.allQyOptions;
|
||||||
this.page.pageNo = 1;
|
this.page.pageNo = 1;
|
||||||
this.searchList();
|
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 {
|
.filter-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|||||||
@ -112,48 +112,48 @@ export default {
|
|||||||
{ label: '社会性数据', value: 'social' }
|
{ label: '社会性数据', value: 'social' }
|
||||||
],
|
],
|
||||||
cardList: [
|
cardList: [
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: '宝山绿色低碳数据创新实验室',
|
|
||||||
description: '汇聚全国优质第三方服务机构,提供从核算到认证的全链条专业服务。',
|
|
||||||
tags: ['公共数据', '社会性数据'],
|
|
||||||
price: '免费'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: 'HiQLCD数据库',
|
name: 'HiQLCD数据库',
|
||||||
description: '汇聚全国优质第三方服务机构,提供从核算到认证的全链条专业服务。',
|
description: '覆盖生命周期碳足迹评估所需的基础数据,支持多种排放因子查询与自定义导入。',
|
||||||
tags: ['商业数据'],
|
tags: ['商业数据'],
|
||||||
price: '付费'
|
price: '付费'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: '天工数据库',
|
name: '天工数据库',
|
||||||
description: '汇聚全国优质第三方服务机构,提供从核算到认证的全链条专业服务。',
|
description: '整合工业制造全流程能耗与排放因子,支持实时监测与历史数据追溯分析。',
|
||||||
tags: ['公益数据'],
|
tags: ['公益数据'],
|
||||||
price: '免费'
|
price: '免费'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
name: 'ecoinvent数据库',
|
name: 'ecoinvent数据库',
|
||||||
description: '汇聚全国优质第三方服务机构,提供从核算到认证的全链条专业服务。',
|
description: '国际权威生命周期评价数据库,收录全球超过18000种过程数据与排放因子。',
|
||||||
tags: ['商业数据'],
|
tags: ['商业数据'],
|
||||||
price: '付费'
|
price: '付费'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
name: 'ecoinvent数据库',
|
name: 'ecoinvent数据库',
|
||||||
description: '汇聚全国优质第三方服务机构,提供从核算到认证的全链条专业服务。',
|
description: '国际权威生命周期评价数据库,收录全球超过18000种过程数据与排放因子。',
|
||||||
tags: ['商业数据'],
|
tags: ['商业数据'],
|
||||||
price: '付费'
|
price: '付费'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
name: '天工数据库',
|
name: '天工数据库',
|
||||||
description: '汇聚全国优质第三方服务机构,提供从核算到认证的全链条专业服务。',
|
description: '整合工业制造全流程能耗与排放因子,支持实时监测与历史数据追溯分析。',
|
||||||
tags: ['公益数据'],
|
tags: ['公益数据'],
|
||||||
price: '免费'
|
price: '免费'
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '宝山绿色低碳数据创新实验室',
|
||||||
|
description: '聚焦区域低碳发展数据汇聚与分析,提供碳排放核算模型与可视化报告。',
|
||||||
|
tags: ['公共数据', '社会性数据'],
|
||||||
|
price: '免费'
|
||||||
|
},
|
||||||
],
|
],
|
||||||
// 移动端筛选折叠状态
|
// 移动端筛选折叠状态
|
||||||
filterCollapsed: true,
|
filterCollapsed: true,
|
||||||
|
|||||||
@ -9,11 +9,11 @@
|
|||||||
@click="handleClick(item.to)"
|
@click="handleClick(item.to)"
|
||||||
>
|
>
|
||||||
<div class="item-icon" :style="{ background: item.bgColor, color: item.color }">
|
<div class="item-icon" :style="{ background: item.bgColor, color: item.color }">
|
||||||
<t-icon :name="item.icon" />
|
<component :is="getIconComponent(item.icon)" />
|
||||||
</div>
|
</div>
|
||||||
<span class="item-label">{{ item.label }}</span>
|
<span class="item-label">{{ item.label }}</span>
|
||||||
<div class="item-arrow">
|
<div class="item-arrow">
|
||||||
<t-icon name="arrow-right" />
|
<ArrowRightIcon />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -21,8 +21,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { MailIcon, UserIcon, EditIcon, LockOnIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
mail: MailIcon,
|
||||||
|
user: UserIcon,
|
||||||
|
edit: EditIcon,
|
||||||
|
'lock-on': LockOnIcon,
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AccountShortcuts',
|
name: 'AccountShortcuts',
|
||||||
|
components: {
|
||||||
|
MailIcon,
|
||||||
|
UserIcon,
|
||||||
|
EditIcon,
|
||||||
|
LockOnIcon,
|
||||||
|
ArrowRightIcon,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
@ -34,6 +50,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getIconComponent(name) {
|
||||||
|
return iconMap[name] || MailIcon;
|
||||||
|
},
|
||||||
handleClick(to) {
|
handleClick(to) {
|
||||||
this.$router.push(to);
|
this.$router.push(to);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="enterprise-cert">
|
<div class="enterprise-cert">
|
||||||
<div class="cert-header">
|
<div class="cert-header">
|
||||||
<div class="cert-icon">
|
<div class="cert-icon">
|
||||||
<t-icon name="user" />
|
<UserIcon />
|
||||||
</div>
|
</div>
|
||||||
<div class="cert-title">
|
<div class="cert-title">
|
||||||
<h3>企业认证</h3>
|
<h3>企业认证</h3>
|
||||||
@ -34,7 +34,7 @@
|
|||||||
<div class="cert-actions">
|
<div class="cert-actions">
|
||||||
<button class="cert-btn" @click="handleClick">
|
<button class="cert-btn" @click="handleClick">
|
||||||
<span>{{ certData.qymc ? '查看详情' : '立即认证' }}</span>
|
<span>{{ certData.qymc ? '查看详情' : '立即认证' }}</span>
|
||||||
<t-icon name="arrow-right" />
|
<ArrowRightIcon />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -43,9 +43,14 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import api from '@/pages/index/api/gxzx/index.js';
|
import api from '@/pages/index/api/gxzx/index.js';
|
||||||
|
import { UserIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EnterpriseCert',
|
name: 'EnterpriseCert',
|
||||||
|
components: {
|
||||||
|
UserIcon,
|
||||||
|
ArrowRightIcon,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
certData: {},
|
certData: {},
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="policy-news">
|
<div class="policy-news">
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<div class="header-icon">
|
<div class="header-icon">
|
||||||
<t-icon name="notification" />
|
<NotificationIcon />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="header-title">{{ title }}</h3>
|
<h3 class="header-title">{{ title }}</h3>
|
||||||
<span class="header-tag">政策</span>
|
<span class="header-tag">政策</span>
|
||||||
@ -31,15 +31,21 @@
|
|||||||
<div class="panel-footer">
|
<div class="panel-footer">
|
||||||
<span class="more-link">
|
<span class="more-link">
|
||||||
查看全部
|
查看全部
|
||||||
<t-icon name="arrow-right" />
|
<ArrowRightIcon />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NotificationIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PolicyNews',
|
name: 'PolicyNews',
|
||||||
|
components: {
|
||||||
|
NotificationIcon,
|
||||||
|
ArrowRightIcon,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -203,14 +209,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-title {
|
.item-title {
|
||||||
display: box;
|
display: -webkit-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: @text-dark;
|
color: @text-dark;
|
||||||
box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
transition: color 0.25s ease;
|
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
transition: color 0.25s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-meta {
|
.item-meta {
|
||||||
|
|||||||
@ -10,12 +10,12 @@
|
|||||||
>
|
>
|
||||||
<div class="item-icon-wrap">
|
<div class="item-icon-wrap">
|
||||||
<div class="item-icon" :style="{ background: action.bgColor, color: action.color }">
|
<div class="item-icon" :style="{ background: action.bgColor, color: action.color }">
|
||||||
<t-icon :name="action.icon" />
|
<component :is="getIconComponent(action.icon)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="item-label">{{ action.label }}</span>
|
<span class="item-label">{{ action.label }}</span>
|
||||||
<div class="item-arrow">
|
<div class="item-arrow">
|
||||||
<t-icon name="arrow-right" />
|
<ArrowRightIcon />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -23,8 +23,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
upload: UploadIcon,
|
||||||
|
'cloud-upload': CloudUploadIcon,
|
||||||
|
edit: EditIcon,
|
||||||
|
bulletpoint: BulletpointIcon,
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'QuickActions',
|
name: 'QuickActions',
|
||||||
|
components: {
|
||||||
|
UploadIcon,
|
||||||
|
CloudUploadIcon,
|
||||||
|
EditIcon,
|
||||||
|
BulletpointIcon,
|
||||||
|
ArrowRightIcon,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
actions: [
|
actions: [
|
||||||
@ -36,6 +52,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getIconComponent(name) {
|
||||||
|
return iconMap[name] || UploadIcon;
|
||||||
|
},
|
||||||
handleClick(to) {
|
handleClick(to) {
|
||||||
this.$router.push(to);
|
this.$router.push(to);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<div class="card-inner">
|
<div class="card-inner">
|
||||||
<div class="card-icon-wrap" :style="iconWrapStyle">
|
<div class="card-icon-wrap" :style="iconWrapStyle">
|
||||||
<div class="icon-inner" :style="iconInnerStyle">
|
<div class="icon-inner" :style="iconInnerStyle">
|
||||||
<t-icon :name="iconName" />
|
<component :is="iconComponent" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
@ -20,8 +20,23 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { UploadIcon, SearchIcon, SwapIcon, MailIcon } from 'tdesign-icons-vue';
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
upload: UploadIcon,
|
||||||
|
search: SearchIcon,
|
||||||
|
swap: SwapIcon,
|
||||||
|
mail: MailIcon,
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'StatsCard',
|
name: 'StatsCard',
|
||||||
|
components: {
|
||||||
|
UploadIcon,
|
||||||
|
SearchIcon,
|
||||||
|
SwapIcon,
|
||||||
|
MailIcon,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
title: String,
|
title: String,
|
||||||
count: [String, Number],
|
count: [String, Number],
|
||||||
@ -45,6 +60,9 @@ export default {
|
|||||||
color: this.borderColor !== 'transparent' ? this.borderColor : '#666',
|
color: this.borderColor !== 'transparent' ? this.borderColor : '#666',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
iconComponent() {
|
||||||
|
return iconMap[this.iconName] || UploadIcon;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
lightenColor(hex) {
|
lightenColor(hex) {
|
||||||
|
|||||||
@ -82,7 +82,7 @@
|
|||||||
<div class="panel-card">
|
<div class="panel-card">
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<div class="header-icon">
|
<div class="header-icon">
|
||||||
<t-icon name="app" />
|
<AppIcon />
|
||||||
</div>
|
</div>
|
||||||
<div class="header-text">
|
<div class="header-text">
|
||||||
<h2 class="panel-title">常用功能</h2>
|
<h2 class="panel-title">常用功能</h2>
|
||||||
@ -98,7 +98,7 @@
|
|||||||
<div class="panel-card account-panel">
|
<div class="panel-card account-panel">
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<div class="header-icon header-icon--account">
|
<div class="header-icon header-icon--account">
|
||||||
<t-icon name="setting" />
|
<SettingIcon />
|
||||||
</div>
|
</div>
|
||||||
<div class="header-text">
|
<div class="header-text">
|
||||||
<h2 class="panel-title">账号管理</h2>
|
<h2 class="panel-title">账号管理</h2>
|
||||||
@ -121,6 +121,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { AppIcon, SettingIcon } from 'tdesign-icons-vue';
|
||||||
import StatsCard from './components/StatsCard.vue';
|
import StatsCard from './components/StatsCard.vue';
|
||||||
import QuickActions from './components/QuickActions.vue';
|
import QuickActions from './components/QuickActions.vue';
|
||||||
import PolicyNews from './components/PolicyNews.vue';
|
import PolicyNews from './components/PolicyNews.vue';
|
||||||
@ -130,6 +131,8 @@ import EnterpriseCert from './components/EnterpriseCert.vue';
|
|||||||
export default {
|
export default {
|
||||||
name: 'GztIndex',
|
name: 'GztIndex',
|
||||||
components: {
|
components: {
|
||||||
|
AppIcon,
|
||||||
|
SettingIcon,
|
||||||
StatsCard,
|
StatsCard,
|
||||||
QuickActions,
|
QuickActions,
|
||||||
PolicyNews,
|
PolicyNews,
|
||||||
|
|||||||
@ -87,7 +87,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="option-btn-box">
|
<div class="option-btn-box">
|
||||||
<div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
|
||||||
<div class="btn" @click="handleNavigate(buttonLinks['碳证中心'])">碳证中心</div>
|
<div class="btn" @click="handleIframeNavigate(buttonLinks['碳证中心'])">碳证中心</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-item-box cyan">
|
<div class="option-item-box cyan">
|
||||||
@ -282,10 +282,10 @@ export default {
|
|||||||
'碳证核验': 'https://ctn-web-pre.lingshu.net/carbon-verify',
|
'碳证核验': 'https://ctn-web-pre.lingshu.net/carbon-verify',
|
||||||
'跨境互通': '',
|
'跨境互通': '',
|
||||||
// 国家可信碳链
|
// 国家可信碳链
|
||||||
'上链指南': '',
|
'上链指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
|
||||||
'上链标准': '',
|
'上链标准': '',
|
||||||
'上链工具': '',
|
'上链工具': '',
|
||||||
'碳证中心': '',
|
'碳证中心': 'https://ctn-web-pre.lingshu.net/carbon-index',
|
||||||
// 绿色服务
|
// 绿色服务
|
||||||
'服务市场': '/tfwsc',
|
'服务市场': '/tfwsc',
|
||||||
'需求市场': '/txqsc',
|
'需求市场': '/txqsc',
|
||||||
@ -320,7 +320,10 @@ export default {
|
|||||||
},
|
},
|
||||||
// 封装跳转方法 - 外部链接新窗口,内部链接当前窗口
|
// 封装跳转方法 - 外部链接新窗口,内部链接当前窗口
|
||||||
handleNavigate(link) {
|
handleNavigate(link) {
|
||||||
if (!link) return;
|
if (!link) {
|
||||||
|
this.$message.info('敬请期待');
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (link.startsWith('http://') || link.startsWith('https://')) {
|
if (link.startsWith('http://') || link.startsWith('https://')) {
|
||||||
window.open(link, '_blank');
|
window.open(link, '_blank');
|
||||||
} else {
|
} else {
|
||||||
@ -329,8 +332,10 @@ export default {
|
|||||||
},
|
},
|
||||||
// iframe页面跳转 - 通过parent事件触发main.vue的iframe显示
|
// iframe页面跳转 - 通过parent事件触发main.vue的iframe显示
|
||||||
handleIframeNavigate(url) {
|
handleIframeNavigate(url) {
|
||||||
console.log('url', url);
|
if (!url) {
|
||||||
if (!url) return;
|
this.$message.info('敬请期待');
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||||
this.$emit('gotoIfreamPage', url);
|
this.$emit('gotoIfreamPage', url);
|
||||||
} else {
|
} else {
|
||||||
@ -1115,6 +1120,10 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.option-item-box:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
.option-item-box-title {
|
.option-item-box-title {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -1145,10 +1154,17 @@ export default {
|
|||||||
gap: 24px;
|
gap: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center-box .item {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.center-box .item .name1 {
|
.center-box .item .name1 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center-box .item .name2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.center-box .item .name3 {
|
.center-box .item .name3 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -1168,6 +1184,10 @@ export default {
|
|||||||
background-size: cover !important;
|
background-size: cover !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gxnl-qych-hydt-box > div:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
.gxnl-qych-hydt-box .name1 {
|
.gxnl-qych-hydt-box .name1 {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
@ -1177,10 +1197,12 @@ export default {
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gxnl-box .item {
|
.gxnl-box .item {
|
||||||
height: 50px;
|
height: auto;
|
||||||
|
min-height: 50px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
grid-template-columns: 48px 1fr 24px;
|
grid-template-columns: 48px 1fr 24px;
|
||||||
}
|
}
|
||||||
@ -1190,11 +1212,36 @@ export default {
|
|||||||
font-size: 14px;
|
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 {
|
.bottom-box {
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
padding: 40px 16px;
|
padding: 40px 16px;
|
||||||
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-box .content {
|
.bottom-box .content {
|
||||||
@ -1219,6 +1266,15 @@ export default {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-box .content .btn:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏swiper导航在移动端 */
|
||||||
|
.top-box ::v-deep .t-swiper__navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 平板适配 */
|
/* 平板适配 */
|
||||||
|
|||||||
@ -286,15 +286,23 @@ module.exports = {
|
|||||||
// 会误伤 SPA 路由 /view/mhzc/...,刷新时整页请求被转发到后端导致 Proxy error。必须用 ^ 限定为路径前缀。
|
// 会误伤 SPA 路由 /view/mhzc/...,刷新时整页请求被转发到后端导致 Proxy error。必须用 ^ 限定为路径前缀。
|
||||||
proxy: {
|
proxy: {
|
||||||
'^/sso': {
|
'^/sso': {
|
||||||
target: 'http://10.23.20.13:94/',
|
target: 'http://carbon.liantu.tech',
|
||||||
|
// target: 'http://10.23.20.13:94/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
'^/mhzc': {
|
'^/mhzc': {
|
||||||
target: 'http://10.23.20.13:94/',
|
target: 'http://carbon.liantu.tech',
|
||||||
|
// target: 'http://10.23.20.13:94/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
'^/gxzx': {
|
'^/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,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user