feat:更新核心驱动页面UI设计
This commit is contained in:
liulong
parent
f1f05ca8cb
commit
48f89684ed
@ -76,9 +76,12 @@
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-if="item.displayList.length" class="gxnlpt-more-wrap">
|
||||
<button type="button" class="gxnlpt-more" @click="goViewMore(item)">
|
||||
查看更多>>
|
||||
<div
|
||||
v-if="item.cardList.length > item.previewSize"
|
||||
class="gxnlpt-more-wrap"
|
||||
>
|
||||
<button type="button" class="gxnlpt-more" @click="toggleViewMore(item)">
|
||||
{{ item.expanded ? '收起' : '查看更多>>' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@ -111,6 +114,9 @@ const DEMO_BY_CATEGORY = {
|
||||
{ bt1: '园区碳管理平台', qymc: '北京绿色交易所', bqjh: '["园区碳管理","能碳协同"]', scbz: 'N' },
|
||||
{ bt1: '供应链碳数据核算', qymc: '上海环境能源交易所', bqjh: '["范围三","供应链","数据填报"]', scbz: 'N' },
|
||||
{ bt1: '碳资产管理核算', qymc: '广州碳排放权交易中心', bqjh: '["碳资产","年度盘查","全国"]', scbz: 'Y' },
|
||||
{ bt1: '组织碳核查数据填报', qymc: '中国标准化研究院', bqjh: '["组织碳","数据填报","MRV"]', scbz: 'N' },
|
||||
{ bt1: '重点行业碳排放核算', qymc: '国家应对气候变化战略研究和国际合作中心', bqjh: '["重点行业","核算指南"]', scbz: 'N' },
|
||||
{ bt1: '碳排放监测与核算平台', qymc: '生态环境部环境规划院', bqjh: '["在线监测","核算","平台"]', scbz: 'N' },
|
||||
],
|
||||
'content-2': [
|
||||
{ bt1: '第三方碳核查服务', qymc: '中国船级社质量认证公司', bqjh: '["碳核查","第三方核查","重点排放单位"]', scbz: 'N' },
|
||||
@ -119,6 +125,8 @@ const DEMO_BY_CATEGORY = {
|
||||
{ bt1: '碳中和认证', qymc: '中国节能协会碳中和专业委员会', bqjh: '["碳中和","认证","抵消"]', scbz: 'N' },
|
||||
{ bt1: '自愿减排项目验证', qymc: '中国电力企业联合会', bqjh: '["自愿减排","验证","MRV"]', scbz: 'N' },
|
||||
{ bt1: '零碳工厂评价', qymc: '钛和认证（上海）有限公司', bqjh: '["零碳工厂","评价认证"]', scbz: 'N' },
|
||||
{ bt1: '产品碳足迹认证', qymc: '中国质量认证中心', bqjh: '["产品碳足迹","认证"]', scbz: 'N' },
|
||||
{ bt1: '绿色供应链认证', qymc: '中环联合认证中心', bqjh: '["供应链","绿色认证"]', scbz: 'N' },
|
||||
],
|
||||
'content-3': [
|
||||
{ bt1: '全国碳配额交易', qymc: '上海环境能源交易所', bqjh: '["碳配额","全国碳市场","交易"]', scbz: 'N' },
|
||||
@ -127,6 +135,8 @@ const DEMO_BY_CATEGORY = {
|
||||
{ bt1: '区域试点配额转让', qymc: '深圳碳排放权交易所', bqjh: '["试点市场","配额转让"]', scbz: 'N' },
|
||||
{ bt1: '碳资产托管服务', qymc: '湖北碳排放权交易中心', bqjh: '["托管","碳资产","履约"]', scbz: 'N' },
|
||||
{ bt1: '国际 VCS 碳信用交易', qymc: '中金公司碳交易部', bqjh: '["VCS","国际碳信用","跨境"]', scbz: 'N' },
|
||||
{ bt1: '碳配额大宗协议转让', qymc: '天津排放权交易所', bqjh: '["大宗交易","配额"]', scbz: 'N' },
|
||||
{ bt1: '碳普惠交易服务', qymc: '重庆碳排放权交易中心', bqjh: '["碳普惠","交易"]', scbz: 'N' },
|
||||
],
|
||||
'content-4': [
|
||||
{ bt1: '绿色信贷融资', qymc: '中国工商银行绿色金融部', bqjh: '["绿色信贷","融资","转型金融"]', scbz: 'N' },
|
||||
@ -135,6 +145,8 @@ const DEMO_BY_CATEGORY = {
|
||||
{ bt1: '碳基金投资管理', qymc: '华夏基金碳中和投资部', bqjh: '["碳基金","ESG","投资"]', scbz: 'N' },
|
||||
{ bt1: '绿色债券发行顾问', qymc: '中信证券投行委员会', bqjh: '["绿色债券","发行","顾问"]', scbz: 'N' },
|
||||
{ bt1: '企业碳配额回购融资', qymc: '国家开发银行行业一部', bqjh: '["回购融资","配额","全国"]', scbz: 'N' },
|
||||
{ bt1: '转型金融贷款服务', qymc: '中国银行绿色金融事业部', bqjh: '["转型金融","贷款"]', scbz: 'N' },
|
||||
{ bt1: '碳减排支持工具', qymc: '中国人民银行货币政策司', bqjh: '["碳减排","支持工具"]', scbz: 'N' },
|
||||
],
|
||||
'content-5': [
|
||||
{ bt1: '企业碳达峰路径规划', qymc: '清华大学碳中和研究院', bqjh: '["碳达峰","路径规划","咨询"]', scbz: 'N' },
|
||||
@ -143,6 +155,8 @@ const DEMO_BY_CATEGORY = {
|
||||
{ bt1: '碳信息披露辅导', qymc: '普华永道气候变化与可持续发展部', bqjh: '["信息披露","CDP","ESG报告"]', scbz: 'N' },
|
||||
{ bt1: '林业碳汇项目开发咨询', qymc: '北京林业大学碳汇研究中心', bqjh: '["林业碳汇","项目开发","CCER"]', scbz: 'N' },
|
||||
{ bt1: '零碳园区规划咨询', qymc: '中国城市规划设计研究院', bqjh: '["零碳园区","规划","综合能源"]', scbz: 'N' },
|
||||
{ bt1: '碳市场政策解读咨询', qymc: '国务院发展研究中心资源与环境政策研究所', bqjh: '["政策解读","碳市场"]', scbz: 'N' },
|
||||
{ bt1: '企业 ESG 碳议题咨询', qymc: '德勤中国可持续发展服务部', bqjh: '["ESG","碳议题","咨询"]', scbz: 'N' },
|
||||
],
|
||||
};
|
||||
|
||||
@ -177,6 +191,7 @@ function buildCategoryList() {
|
||||
displayList: [],
|
||||
total: 0,
|
||||
previewSize: PREVIEW_SIZE,
|
||||
expanded: false,
|
||||
}));
|
||||
}
|
||||
|
||||
@ -315,7 +330,8 @@ export default {
|
||||
});
|
||||
cat.cardList = list;
|
||||
cat.total = list.length;
|
||||
cat.displayList = list.slice(0, cat.previewSize);
|
||||
cat.expanded = false;
|
||||
this.refreshDisplayList(cat);
|
||||
});
|
||||
},
|
||||
applyDemoFallback() {
|
||||
@ -330,9 +346,19 @@ export default {
|
||||
})
|
||||
);
|
||||
cat.total = cat.cardList.length;
|
||||
cat.displayList = cat.cardList.slice(0, cat.previewSize);
|
||||
cat.expanded = false;
|
||||
this.refreshDisplayList(cat);
|
||||
});
|
||||
},
|
||||
refreshDisplayList(category) {
|
||||
category.displayList = category.expanded
|
||||
? category.cardList.slice()
|
||||
: category.cardList.slice(0, category.previewSize);
|
||||
},
|
||||
toggleViewMore(category) {
|
||||
category.expanded = !category.expanded;
|
||||
this.refreshDisplayList(category);
|
||||
},
|
||||
async loadAllSections() {
|
||||
this.pageLoading = true;
|
||||
this.useDemoData = false;
|
||||
@ -482,9 +508,6 @@ export default {
|
||||
}
|
||||
this.$router.push({ path: '/tfwsc', query: { id: card.gxUuid } });
|
||||
},
|
||||
goViewMore(category) {
|
||||
this.$router.push({ path: '/tfwsc', query: { from: 'gxnlpt', section: category.id } });
|
||||
},
|
||||
async handleCollect(card) {
|
||||
if (this.useDemoData || !card.gxUuid) {
|
||||
card.scbz = card.scbz === 'Y' ? 'N' : 'Y';
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 405 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 447 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 473 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 418 KiB |
@ -85,10 +85,19 @@
|
||||
|
||||
<div class="core-grid">
|
||||
<div class="core-item" v-for="(item, index) in coreList" :key="index">
|
||||
<div class="core-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
|
||||
<div class="core-name1">{{ item.name1 }}</div>
|
||||
<div class="core-name2">{{ item.name2 }}</div>
|
||||
<div class="core-desc">{{ item.desc }}</div>
|
||||
<div class="core-item-visual">
|
||||
<img
|
||||
class="core-icon"
|
||||
:src="item.icon"
|
||||
:alt="item.name1"
|
||||
:style="{ width: item.iconWidth + 'px', height: item.iconHeight + 'px' }"
|
||||
/>
|
||||
<div class="core-name1-bar">
|
||||
<span class="core-name1">{{ item.name1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="core-name2">{{ item.name2 }}</h4>
|
||||
<p class="core-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -330,25 +339,33 @@ export default {
|
||||
name1: '核心底座',
|
||||
name2: '国家区块链网络',
|
||||
desc: '依托国家区块链网络，确保每一笔碳数据拥有唯一的"链上基因"，实现国家级权威存证与不可篡改。',
|
||||
icon: require('@/pages/index/views/home2/assets/core-base@2x.png')
|
||||
icon: require('@/pages/index/views/home2/assets/core-base@2x.png'),
|
||||
iconWidth: 192,
|
||||
iconHeight: 183
|
||||
},
|
||||
{
|
||||
name1: '数据引擎',
|
||||
name2: '全场景可信流通',
|
||||
desc: '打破碳数据孤岛，支持从生产端到交易端的全链路数据锚定，让碳数据在多场景下实现秒级核验。',
|
||||
icon: require('@/pages/index/views/home2/assets/data-engine@2x.png')
|
||||
icon: require('@/pages/index/views/home2/assets/data-engine@2x.png'),
|
||||
iconWidth: 210,
|
||||
iconHeight: 183
|
||||
},
|
||||
{
|
||||
name1: '身份基石',
|
||||
name2: '碳数字身份体系',
|
||||
desc: '为企业构建唯一的链上"数字身份"，集成资质核验证、资产托管与信用评级，打造绿色经济的数字通行证。',
|
||||
icon: require('@/pages/index/views/home2/assets/identity-base@2x.png')
|
||||
icon: require('@/pages/index/views/home2/assets/identity-base@2x.png'),
|
||||
iconWidth: 212,
|
||||
iconHeight: 183
|
||||
},
|
||||
{
|
||||
name1: '闭环赋能',
|
||||
name2: '精准服务企业走出去',
|
||||
desc: '服务企业出海、国际互认。直击跨境合规与碳交易撮合痛点，通过智能合约实现供需精准匹配，助力企业低碳转型提速。',
|
||||
icon: require('@/pages/index/views/home2/assets/closed-loop@2x.png')
|
||||
icon: require('@/pages/index/views/home2/assets/closed-loop@2x.png'),
|
||||
iconWidth: 211,
|
||||
iconHeight: 183
|
||||
}
|
||||
],
|
||||
hotSearchTags: ["碳达峰", "碳核查", "ESG", "碳资产管理", "ISO 14067"],
|
||||
@ -1343,63 +1360,85 @@ export default {
|
||||
|
||||
.core-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 240px));
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
max-width: 1100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.core-item {
|
||||
text-align: center;
|
||||
max-width: 240px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 12px;
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
padding: 1px 24px 0;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.core-item:hover {
|
||||
background: #f8fff8;
|
||||
transform: translateY(-4px);
|
||||
background-color: #f8fff8;
|
||||
}
|
||||
|
||||
.core-item-visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.core-item .core-icon {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
margin: 0 auto 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.core-name1-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #e6efff 36.06%, #e6efff 62.5%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.core-item .core-name1 {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 18px;
|
||||
font-family: SimHei, 黑体;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #e6efff 36.06%, #e6efff 62.5%, #ffffff 100%);
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
width: 210px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.core-item .core-name2 {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #1a1a2e;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.core-item .core-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #556659;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -2437,24 +2476,23 @@ export default {
|
||||
|
||||
.core-grid {
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: stretch;
|
||||
gap: 16px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.core-item {
|
||||
max-width: none;
|
||||
padding: 20px 16px;
|
||||
padding: 1px 16px 0;
|
||||
}
|
||||
|
||||
.core-item .core-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 16px;
|
||||
width: 160px !important;
|
||||
height: auto !important;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.core-item .core-name1 {
|
||||
font-size: 14px;
|
||||
width: auto;
|
||||
font-size: 16px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.core-item .core-name2 {
|
||||
@ -2462,7 +2500,8 @@ export default {
|
||||
}
|
||||
|
||||
.core-item .core-desc {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* 共性能力区域 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user