feat: 企业工作台界面样式调整
This commit is contained in:
parent
ee3ce43c8e
commit
e54bd8af41
@ -27,7 +27,8 @@
|
||||
"Bash(\"/d/Program Files/apache-maven/apache-maven-3.6.3/bin/mvn\" compile -pl txw-mhzc-service-biz -am)",
|
||||
"Bash(\"/d/Program Files/apache-maven/apache-maven-3.6.3/bin/mvn\" clean package -pl txw-mhzc-service-biz -am -DskipTests)",
|
||||
"Bash(\"/d/Program Files/jdk8/bin/java\" -Xms256m -Xmx512m -Duser.timezone=Asia/Shanghai -jar target/txw-mhzc-service-biz.jar --spring.profiles.active=local)",
|
||||
"Bash(mvn compile *)"
|
||||
"Bash(mvn compile *)",
|
||||
"WebFetch(domain:www.figma.com)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<div class="footer-column">
|
||||
<div class="footer-title">友情链接</div>
|
||||
<div class="footer-links">
|
||||
<div class="footer-link-item">上海市企业走出去综合服务平台</div>
|
||||
<a class="footer-link-item" href="https://segg.sh.gov.cn/" target="_blank" rel="noopener">上海市企业走出去综合服务平台</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -141,6 +141,7 @@ export default {
|
||||
font-size: 14px;
|
||||
transition: color 0.3s;
|
||||
color: rgba(85, 102, 89, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #4caf50;
|
||||
|
||||
@ -267,6 +267,17 @@ export default {
|
||||
} else {
|
||||
this.loginFlag = false;
|
||||
}
|
||||
|
||||
// 初始化时根据当前路由更新菜单选中状态
|
||||
this.updateCurPageByRoute();
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler() {
|
||||
this.updateCurPageByRoute();
|
||||
},
|
||||
immediate: false,
|
||||
},
|
||||
},
|
||||
beforeUnmount() { },
|
||||
methods: {
|
||||
@ -301,6 +312,13 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理带query参数的路径（如 /gxnlpt?anchor=content-1）
|
||||
const pathWithoutQuery = path.split('?')[0];
|
||||
if (this.routeToMenuMap[pathWithoutQuery]) {
|
||||
this.curPage = this.routeToMenuMap[pathWithoutQuery];
|
||||
return;
|
||||
}
|
||||
|
||||
// 尝试从路径中提取关键部分进行匹配
|
||||
if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) {
|
||||
this.curPage = 'fwsc';
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<template>
|
||||
<div style="height: 100%" class="htglMenu">
|
||||
<t-menu style="width: 220px; background: #fff" v-model="activeMenuId" :collapsed="collapsed" :defaultExpanded="expanded" @change="gotoPage">
|
||||
<div class="title">用户中心</div>
|
||||
<div class="title">企业工作台</div>
|
||||
<!-- 循环实现 -->
|
||||
<template v-for="item in cdList">
|
||||
<t-menu-item v-if="!item.children" :value="item.id" :title="item.title" :key="item.id">
|
||||
@ -83,9 +83,15 @@ export default {
|
||||
{
|
||||
id: 'gzt',
|
||||
title: '工作台',
|
||||
icon: 'user',
|
||||
icon: '',
|
||||
name: 'gzt',
|
||||
},
|
||||
{
|
||||
id: 'qyzh',
|
||||
title: '企业账号',
|
||||
icon: '',
|
||||
name: '',
|
||||
children: [
|
||||
{
|
||||
id: 'qyrenzheng',
|
||||
title: '企业认证',
|
||||
@ -98,6 +104,14 @@ export default {
|
||||
icon: 'user',
|
||||
name: 'qyruzhu',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'qxgl',
|
||||
title: '供需管理',
|
||||
icon: '',
|
||||
name: '',
|
||||
children: [
|
||||
{
|
||||
id: 'tfwgj',
|
||||
title: '碳服务供给',
|
||||
@ -110,18 +124,31 @@ export default {
|
||||
icon: 'user',
|
||||
name: 'tfwxq',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: 'ggwhgl',
|
||||
id: 'xxzx',
|
||||
title: '消息中心',
|
||||
icon: 'user',
|
||||
icon: '',
|
||||
name: '',
|
||||
children: [
|
||||
{
|
||||
id: 'xttz',
|
||||
title: '系统通知',
|
||||
icon: '',
|
||||
name: 'ggwhgl',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'tlgl',
|
||||
title: '碳链管理',
|
||||
icon: '',
|
||||
name: '',
|
||||
children: [
|
||||
|
||||
{
|
||||
id: 'lsjy',
|
||||
title: '绿色交易',
|
||||
icon: 'user',
|
||||
name: 'lsjy',
|
||||
}, {
|
||||
id: 'zljggl',
|
||||
title: '质证结果管理',
|
||||
icon: 'user',
|
||||
@ -147,6 +174,8 @@ export default {
|
||||
name: 'chazhengjilu',
|
||||
iframeUrl: "https://ctn-web-pre.lingshu.net/query-record-mgt",
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
ejcdList: [],
|
||||
iFrameSrc: '',
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
<div class="gxnlpt-tab-box" v-for="(item, index) in GXNLPTtabList" :key="index">
|
||||
<t-anchor-item :href="item.href" :title="item.title"></t-anchor-item>
|
||||
<img class="icon-img" :src="getIconUrl(item.icon)" alt="" />
|
||||
<!-- <a :href="item.href" target="_self" class="">{{item.title}}</a> -->
|
||||
</div>
|
||||
</t-anchor>
|
||||
<div id="anchor-container">
|
||||
@ -33,13 +32,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部信息区 -->
|
||||
<Footer style="width:100%" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Footer from '@/pages/index/components/footer/index.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -173,10 +174,28 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Footer,
|
||||
},
|
||||
mounted() {
|
||||
const anchor = this.$route.query.anchor || this.$route.params.anchor;
|
||||
if (anchor) {
|
||||
this.$nextTick(() => {
|
||||
const el = document.getElementById(anchor);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick({ e, href, title }) {
|
||||
e.preventDefault();
|
||||
console.log('click', href, title);
|
||||
const id = href.replace('#', '');
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
},
|
||||
getIconUrl(iconName) {
|
||||
// 使用require动态加载图片
|
||||
@ -199,15 +218,11 @@ export default {
|
||||
background-image: linear-gradient(180deg, #f2fdf0, #e6f7fd);
|
||||
}
|
||||
.anchor-container-demo {
|
||||
// display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#anchor-container {
|
||||
flex-grow: 1;
|
||||
height: 770px;
|
||||
overflow: auto;
|
||||
}
|
||||
#anchor-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
flex: 1;
|
||||
}
|
||||
.gxnlpt-main {
|
||||
max-width: 1448px;
|
||||
@ -326,9 +341,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-box {
|
||||
height: 380px;
|
||||
}
|
||||
.anchor-container-box-img-img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
@ -1,27 +1,23 @@
|
||||
<template>
|
||||
<div class="account-shortcuts">
|
||||
<div class="shortcuts-grid">
|
||||
<div class="shortcuts-row">
|
||||
<button
|
||||
v-for="(item, index) in shortcuts"
|
||||
v-for="item in shortcuts"
|
||||
:key="item.label"
|
||||
class="shortcut-item"
|
||||
:style="{ '--delay': `${index * 0.06}s` }"
|
||||
@click="handleClick(item.to)"
|
||||
>
|
||||
<div class="item-icon" :style="{ background: item.bgColor, color: item.color }">
|
||||
<component :is="getIconComponent(item.icon)" />
|
||||
<div class="item-icon" :style="{ background: item.bgColor }">
|
||||
<component :is="getIconComponent(item.icon)" :style="{ color: item.color }" />
|
||||
</div>
|
||||
<span class="item-label">{{ item.label }}</span>
|
||||
<div class="item-arrow">
|
||||
<ArrowRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MailIcon, UserIcon, EditIcon, LockOnIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||
import { MailIcon, UserIcon, EditIcon, LockOnIcon } from 'tdesign-icons-vue';
|
||||
|
||||
const iconMap = {
|
||||
mail: MailIcon,
|
||||
@ -37,15 +33,13 @@ export default {
|
||||
UserIcon,
|
||||
EditIcon,
|
||||
LockOnIcon,
|
||||
ArrowRightIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shortcuts: [
|
||||
{ label: '消息中心', icon: 'mail', to: '/yhzx/ggwhgl', bgColor: '#FCE4EC', color: '#E91E63' },
|
||||
{ label: '我的认证', icon: 'user', to: '/yhzx/qyrenzheng', bgColor: '#E3F2FD', color: '#2196F3' },
|
||||
{ label: '账号编辑', icon: 'edit', to: '/yhzx/qyrenzheng', bgColor: '#FFF8E1', color: '#FF9800' },
|
||||
{ label: '修改密码', icon: 'lock-on', to: '/yhzx/zhanghugl', bgColor: '#E8F5E9', color: '#4CAF50' },
|
||||
{ label: '我的认证', icon: 'user', to: '/yhzx/qyrenzheng', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
{ label: '账号编辑', icon: 'edit', to: '/yhzx/qyrenzheng', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
{ label: '修改密码', icon: 'lock-on', to: '/yhzx/zhanghugl', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -62,127 +56,60 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@text-dark: #003B1A;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.account-shortcuts {
|
||||
.shortcuts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
.shortcuts-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 20px 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 14px;
|
||||
animation: fadeIn 0.4s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, @green-primary, @green-dark);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
background: @bg-card;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: @shadow-hover;
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-1px);
|
||||
background: #F5F7FA;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: @text-dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: @green-primary;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
transition: all 0.3s ease;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
line-height: 1.67;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.account-shortcuts .shortcuts-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.account-shortcuts .shortcuts-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.account-shortcuts .shortcuts-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
.shortcut-item {
|
||||
min-width: 33.33%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="panel-card carbon-service-table">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-title">标题</th>
|
||||
<th class="col-industry">所属行业</th>
|
||||
<th class="col-scope">服务范围</th>
|
||||
<th class="col-time">创建时间</th>
|
||||
<th class="col-status">状态</th>
|
||||
<th class="col-action">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableData" :key="item.id">
|
||||
<td class="col-title">{{ item.title }}</td>
|
||||
<td class="col-industry">{{ item.industry }}</td>
|
||||
<td class="col-scope">{{ item.scope }}</td>
|
||||
<td class="col-time">{{ item.createTime }}</td>
|
||||
<td class="col-status">
|
||||
<span class="status-dot" :class="item.status === 'online' ? 'status--online' : 'status--offline'"></span>
|
||||
{{ item.status === 'online' ? '已上线' : '未上线' }}
|
||||
</td>
|
||||
<td class="col-action">
|
||||
<a class="action-link" @click="handleView(item)">查看</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ListIcon } from 'tdesign-icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'CarbonServiceTable',
|
||||
components: {
|
||||
ListIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{ id: 1, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-20', status: 'online' },
|
||||
{ id: 2, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-18', status: 'online' },
|
||||
{ id: 3, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-15', status: 'offline' },
|
||||
{ id: 4, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-10', status: 'online' },
|
||||
{ id: 5, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-08', status: 'offline' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleView(item) {
|
||||
console.log('查看详情', item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
@shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.carbon-service-table {
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 4px;
|
||||
box-shadow: @shadow-card;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 18px 24px 16px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(72, 198, 102, 0.3);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: @text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid @border-light;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
color: @text-muted;
|
||||
background: #FAFBFC;
|
||||
}
|
||||
|
||||
td {
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(72, 198, 102, 0.03);
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.col-title {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.col-industry {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.col-scope {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
min-width: 120px;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
.col-status {
|
||||
min-width: 100px;
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
|
||||
&.status--online {
|
||||
background: @green-primary;
|
||||
}
|
||||
|
||||
&.status--offline {
|
||||
background: #F56161;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-action {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.action-link {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #3491FA;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: @green-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +1,28 @@
|
||||
<template>
|
||||
<div class="enterprise-cert">
|
||||
<div class="cert-bg"></div>
|
||||
<div class="cert-content">
|
||||
<div class="cert-header">
|
||||
<div class="cert-icon">
|
||||
<UserIcon />
|
||||
</div>
|
||||
<div class="cert-title">
|
||||
<h3>企业认证</h3>
|
||||
<span class="cert-status" :class="statusClass">{{ statusText }}</span>
|
||||
<span class="cert-status" v-show="certData.qymc">{{ statusText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-body">
|
||||
<template v-if="certData.qymc">
|
||||
<div class="cert-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">企业名称</span>
|
||||
<span class="name-icon"></span>
|
||||
<!-- <span class="info-label">企业名称</span> -->
|
||||
<span class="info-value">{{ certData.qymc }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">统一社会信用代码</span>
|
||||
<span class="eid-icon"></span>
|
||||
<!-- <span class="info-label">统一社会信用代码</span> -->
|
||||
<span class="info-value">{{ certData.nsrsbh }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="cert-icon"></span>
|
||||
<span class="info-label">认证时间</span>
|
||||
<span class="info-value">{{ formatDate(certData.lrrq) }}</span>
|
||||
</div>
|
||||
@ -31,11 +33,12 @@
|
||||
<span>暂未认证企业信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="cert-actions">
|
||||
<!-- <div class="cert-actions">
|
||||
<button class="cert-btn" @click="handleClick">
|
||||
<span>{{ certData.qymc ? '查看详情' : '立即认证' }}</span>
|
||||
<ArrowRightIcon />
|
||||
</button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,29 +46,20 @@
|
||||
|
||||
<script>
|
||||
import api from '@/pages/index/api/gxzx/index.js';
|
||||
import { UserIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||
import { ArrowRightIcon } from 'tdesign-icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'EnterpriseCert',
|
||||
components: {
|
||||
UserIcon,
|
||||
ArrowRightIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
certData: {},
|
||||
certData: {
|
||||
qymc: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
statusText() {
|
||||
if (!this.certData.qymc) return '未认证';
|
||||
return '已认证';
|
||||
},
|
||||
statusClass() {
|
||||
if (!this.certData.qymc) return 'status--unreviewed';
|
||||
return 'status--certified';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCertData();
|
||||
},
|
||||
@ -95,142 +89,160 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-primary: #00B42A;
|
||||
@green-dark: #008530;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@text-dark: #1D2129;
|
||||
@text-muted: #4E5969;
|
||||
@text-light: #86909C;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.enterprise-cert {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
width: 280px;
|
||||
height: 170px;
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-hover;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 185, 107, 0.2);
|
||||
}
|
||||
|
||||
.cert-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('./cert-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cert-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.cert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
|
||||
.cert-icon {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.cert-title {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.cert-status {
|
||||
padding: 3px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
|
||||
&.status--certified {
|
||||
color: @green-dark;
|
||||
background: @green-light;
|
||||
}
|
||||
|
||||
&.status--pending {
|
||||
color: #F9A825;
|
||||
background: #FFF8E1;
|
||||
}
|
||||
|
||||
&.status--unreviewed {
|
||||
color: @text-muted;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
width: 70px;
|
||||
height: 22px;
|
||||
background-image: url('./cert-label.png');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cert-body {
|
||||
padding: 16px 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cert-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
gap: 12px;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: @text-muted;
|
||||
font-size: 14px;
|
||||
color: #344F3D;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: @text-dark;
|
||||
font-size: 14px;
|
||||
// font-weight: 500;
|
||||
color: #344F3D;
|
||||
}
|
||||
}
|
||||
.name-icon {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('./cert-icon.png');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.eid-icon {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('./eid-icon.png');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.cert-icon {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('./cert-icon.png');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cert-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 13px;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
.cert-actions {
|
||||
margin-top: auto;
|
||||
|
||||
.cert-btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: @green-primary;
|
||||
cursor: pointer;
|
||||
background: @green-light;
|
||||
border: 1px solid rgba(72, 198, 102, 0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 180, 42, 0.2);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@ -239,7 +251,7 @@ export default {
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
<template>
|
||||
<div class="policy-news">
|
||||
<div class="panel-header">
|
||||
<div class="header-icon">
|
||||
<NotificationIcon />
|
||||
</div>
|
||||
<h3 class="header-title">{{ title }}</h3>
|
||||
<span class="header-tag">政策</span>
|
||||
</div>
|
||||
<div class="news-list">
|
||||
<div
|
||||
@ -15,25 +11,24 @@
|
||||
:style="{ '--delay': `${index * 0.08}s` }"
|
||||
>
|
||||
<div class="item-indicator">
|
||||
<div class="indicator-dot" :style="{ background: item.leftBorderColor }"></div>
|
||||
<div class="indicator-line" :style="{ background: item.leftBorderColor }"></div>
|
||||
<div class="date-block">
|
||||
<span class="date-day">{{ item.day || '18' }}</span>
|
||||
<span class="date-month">{{ item.month || '2026.04' }}</span>
|
||||
</div>
|
||||
<div class="date-line"></div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<div class="item-meta">
|
||||
<span class="meta-tag" :style="{ background: `${item.leftBorderColor}20`, color: item.leftBorderColor }">
|
||||
{{ item.tag || '重要' }}
|
||||
</span>
|
||||
<p class="item-desc">{{ item.desc || item.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<!-- <div class="panel-footer">
|
||||
<span class="more-link">
|
||||
查看全部
|
||||
<ArrowRightIcon />
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -56,22 +51,21 @@ export default {
|
||||
default: () => [
|
||||
{
|
||||
id: 1,
|
||||
title: '关于做好2026年全国碳排放权交易市场有关工作的通知',
|
||||
leftBorderColor: '#3491FA',
|
||||
title: '"十五五"新图景：增绿降碳 加减之间再造万亿级新机遇',
|
||||
content: '"十五五"规划纲要中提出，加快经济社会发展全面绿色转型。当前，一场增绿降碳的变革正在重塑我们的生产生活方式，持续激发绿色发展动能。',
|
||||
day: '18',
|
||||
month: '2026.04',
|
||||
tag: '官方',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '第一财经研究院碳市场月报：2026年全国碳市场相关工作安排出炉',
|
||||
leftBorderColor: '#F9A825',
|
||||
title: '全球最大输送容量海上风电项目进入首个集中施工期',
|
||||
content: '粤西海域，离岸70公里外，水深超50米，一场绿色能源的接力正在加紧进行。全球最大输送容量海上风电项目，现在进入开春后的首个集中施工期。',
|
||||
day: '17',
|
||||
month: '2026.04',
|
||||
tag: '研究',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '2026年全国碳市场重点工作：从存证到清缴，一步都不能少',
|
||||
leftBorderColor: '#78909C',
|
||||
tag: '解读',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -82,9 +76,9 @@ export default {
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@text-dark: #333333;
|
||||
@text-muted: #666666;
|
||||
@text-light: #999999;
|
||||
@bg-card: #FFFFFF;
|
||||
@bg-panel: #F8FAFB;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@ -95,7 +89,8 @@ export default {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border-radius: 16px;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 4px;
|
||||
box-shadow: @shadow-soft;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
@ -139,15 +134,18 @@ export default {
|
||||
letter-spacing: 0.5px;
|
||||
color: @green-primary;
|
||||
background: @green-light;
|
||||
border-radius: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
padding: 12px 20px;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
// flex-direction: column;
|
||||
gap: 32px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr;
|
||||
// gap: 20px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
@ -158,66 +156,86 @@ export default {
|
||||
animation-delay: var(--delay);
|
||||
transition: all 0.25s ease;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX(4px);
|
||||
|
||||
.item-title {
|
||||
color: @green-dark;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
transform: scale(1.3);
|
||||
color: @green-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.item-indicator {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
padding-top: 4px;
|
||||
width: 55px;
|
||||
// flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
gap: 14px;
|
||||
|
||||
.date-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.indicator-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.25s ease;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.indicator-line {
|
||||
width: 2px;
|
||||
margin-top: 6px;
|
||||
border-radius: 1px;
|
||||
opacity: 0.4;
|
||||
flex: 1;
|
||||
.date-day {
|
||||
font-family: 'San Francisco Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 1.19;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.date-month {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: @text-light;
|
||||
line-height: 1.27;
|
||||
}
|
||||
|
||||
.date-line {
|
||||
width: 0;
|
||||
height: 72px;
|
||||
border-left: 1px dashed #E7E7E7;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
padding-left: 12px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
// gap: 9px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
color: @text-dark;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: @text-dark;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.57;
|
||||
color: @text-muted;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
|
||||
@ -1,29 +1,23 @@
|
||||
<template>
|
||||
<div class="quick-actions">
|
||||
<div class="actions-grid">
|
||||
<div class="actions-row">
|
||||
<button
|
||||
v-for="(action, index) in actions"
|
||||
v-for="action in actions"
|
||||
:key="action.label"
|
||||
class="action-item"
|
||||
:style="{ '--delay': `${index * 0.06}s` }"
|
||||
@click="handleClick(action.to)"
|
||||
>
|
||||
<div class="item-icon-wrap">
|
||||
<div class="item-icon" :style="{ background: action.bgColor, color: action.color }">
|
||||
<component :is="getIconComponent(action.icon)" />
|
||||
</div>
|
||||
<div class="item-icon" :style="{ background: action.bgColor }">
|
||||
<component :is="getIconComponent(action.icon)" :style="{ color: action.color }" />
|
||||
</div>
|
||||
<span class="item-label">{{ action.label }}</span>
|
||||
<div class="item-arrow">
|
||||
<ArrowRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon, ArrowRightIcon } from 'tdesign-icons-vue';
|
||||
import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon } from 'tdesign-icons-vue';
|
||||
|
||||
const iconMap = {
|
||||
upload: UploadIcon,
|
||||
@ -39,15 +33,14 @@ export default {
|
||||
CloudUploadIcon,
|
||||
EditIcon,
|
||||
BulletpointIcon,
|
||||
ArrowRightIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actions: [
|
||||
{ label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E8FFEA', color: '#48C666' },
|
||||
{ label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E3F2FD', color: '#2196F3' },
|
||||
{ label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#FFF8E1', color: '#FF9800' },
|
||||
{ label: '质证申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#FCE4EC', color: '#E91E63' },
|
||||
{ label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
{ label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
{ label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
{ label: '资质申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#E6F8F0', color: '#344F3D' },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -64,131 +57,63 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-dark: #003B1A;
|
||||
@text-link: #008CFF;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
@border-light: #E5E6EB;
|
||||
|
||||
.quick-actions {
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
.actions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 20px 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 14px;
|
||||
animation: fadeIn 0.4s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, @green-primary, @green-dark);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
background: @bg-card;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
width: calc(33.33% - 6px);
|
||||
min-width: 0;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: @shadow-hover;
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.item-icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F5F7FA;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: @text-dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: @green-primary;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
line-height: 1.67;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.quick-actions .actions-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.quick-actions .actions-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.quick-actions .actions-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
.action-item {
|
||||
min-width: 33.33%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,221 +1,105 @@
|
||||
<template>
|
||||
<div class="stats-card" :class="{ 'is-clickable': to }" @click="goTo">
|
||||
<div class="card-glow"></div>
|
||||
<div class="stats-card">
|
||||
<div class="card-inner">
|
||||
<div class="card-icon-wrap" :style="iconWrapStyle">
|
||||
<div class="icon-inner" :style="iconInnerStyle">
|
||||
<component :is="iconComponent" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-icon-wrap" :style="{ backgroundImage: `url(${iconUrl})` }"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">{{ title }}</div>
|
||||
<div class="card-value">
|
||||
<span class="value-num">{{ count }}</span>
|
||||
<span class="value-unit">{{ unit }}</span>
|
||||
</div>
|
||||
<div class="card-title">{{ title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-shine"></div>
|
||||
</div>
|
||||
</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],
|
||||
unit: { type: String, default: '条' },
|
||||
unit: { type: String, default: '个' },
|
||||
bgColor: { type: String, default: '#E8F5E9' },
|
||||
borderColor: { type: String, default: '#48C666' },
|
||||
iconName: String,
|
||||
to: String,
|
||||
},
|
||||
computed: {
|
||||
iconWrapStyle() {
|
||||
return {
|
||||
background: `linear-gradient(135deg, ${this.bgColor} 0%, ${this.lightenColor(this.bgColor)} 100%)`,
|
||||
boxShadow: this.borderColor !== 'transparent'
|
||||
? `0 8px 24px rgba(72, 198, 102, 0.25), inset 0 1px 0 rgba(255,255,255,0.4)`
|
||||
: `0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4)`,
|
||||
iconUrl() {
|
||||
const iconMap = {
|
||||
upload: require('./stats-1.png'),
|
||||
search: require('./stats-2.png'),
|
||||
swap: require('./stats-3.png'),
|
||||
mail: require('./stats-4.png'),
|
||||
};
|
||||
},
|
||||
iconInnerStyle() {
|
||||
return {
|
||||
color: this.borderColor !== 'transparent' ? this.borderColor : '#666',
|
||||
};
|
||||
},
|
||||
iconComponent() {
|
||||
return iconMap[this.iconName] || UploadIcon;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
lightenColor(hex) {
|
||||
// Simple lighten: blend with white
|
||||
const r = parseInt(hex.slice(1, 3), 16);
|
||||
const g = parseInt(hex.slice(3, 5), 16);
|
||||
const b = parseInt(hex.slice(5, 7), 16);
|
||||
return `rgb(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 60)})`;
|
||||
},
|
||||
goTo() {
|
||||
if (this.to) {
|
||||
this.$router.push(this.to);
|
||||
}
|
||||
return iconMap[this.iconName] || iconMap.upload;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@bg-card: #FFFFFF;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 8px 32px rgba(72, 198, 102, 0.18);
|
||||
@text-dark: #003B1A;
|
||||
@text-muted: #344F3D;
|
||||
@text-unit: #6B8575;
|
||||
@border-light: #E5E6EB;
|
||||
|
||||
.stats-card {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
background: @bg-card;
|
||||
border-radius: 16px;
|
||||
box-shadow: @shadow-soft;
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.is-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
box-shadow: @shadow-hover;
|
||||
|
||||
.card-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-shine {
|
||||
opacity: 1;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(circle, rgba(72, 198, 102, 0.15) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 16px 18px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
display: flex;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.icon-inner {
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
align-items: flex-end;
|
||||
gap: 7px;
|
||||
|
||||
.value-num {
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
line-height: 1.14;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: @text-muted;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: @text-unit;
|
||||
line-height: 1.54;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
color: @text-muted;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-shine {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
line-height: 1.54;
|
||||
}
|
||||
</style>
|
||||
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/cert-bg.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/cert-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/cert-icon.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/cert-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/cert-label.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/cert-label.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/eid-icon.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/eid-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-1.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-2.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-3.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-4.png
Normal file
BIN
txw-mhzc-web/src/pages/index/views/gzt/components/stats-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -1,490 +1,340 @@
|
||||
<template>
|
||||
<div class="gzt-page">
|
||||
<!-- 装饰背景 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="deco-circle deco-circle--1"></div>
|
||||
<div class="deco-circle deco-circle--2"></div>
|
||||
<div class="deco-dots"></div>
|
||||
<div class="dashboard-container">
|
||||
<!-- 主内容区域 - 左右布局 -->
|
||||
<section class="main-content">
|
||||
<!-- 左侧内容区 - 整块白色背景 -->
|
||||
<div class="content-left">
|
||||
<div class="left-panel">
|
||||
<!-- 欢迎登录 + 日期 -->
|
||||
<header class="panel-section welcome-section">
|
||||
<div class="header-left">
|
||||
<h1 class="welcome-title">欢迎登录</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="current-date">{{ currentDate }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="gzt-container">
|
||||
<!-- 第一行：欢迎区域 + 企业认证 -->
|
||||
<div class="top-row">
|
||||
<!-- 左侧：欢迎 + 统计 -->
|
||||
<div class="left-column">
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-left">
|
||||
<h1 class="welcome-title">欢迎回来</h1>
|
||||
<p class="welcome-subtitle">{{ currentGreeting }}，祝您工作顺利</p>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<div class="time-widget">
|
||||
<div class="time-date">{{ currentDate }}</div>
|
||||
<div class="time-weekday">{{ currentWeekday }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 统计卡片区域 -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<!-- 统计块 -->
|
||||
<div class="panel-section stats-section">
|
||||
<div class="stats-row">
|
||||
<StatsCard
|
||||
title="我的供给"
|
||||
:count="5"
|
||||
unit="条"
|
||||
bgColor="#E8FFEA"
|
||||
borderColor="#48C666"
|
||||
iconName="upload"
|
||||
to="/yhzx/wdgj"
|
||||
bg-color="#E3F2FD"
|
||||
border-color="#1890FF"
|
||||
icon-name="upload"
|
||||
/>
|
||||
<StatsCard
|
||||
title="我的需求"
|
||||
:count="2"
|
||||
unit="条"
|
||||
bgColor="#E3F2FD"
|
||||
borderColor="#2196F3"
|
||||
iconName="search"
|
||||
to="/yhzx/wdxq"
|
||||
bg-color="#E8F5E9"
|
||||
border-color="#00B42A"
|
||||
icon-name="search"
|
||||
/>
|
||||
<StatsCard
|
||||
title="绿色交易"
|
||||
:count="1"
|
||||
unit="条"
|
||||
bgColor="#FFF8E1"
|
||||
borderColor="#FF9800"
|
||||
iconName="swap"
|
||||
to="/yhzx/lsjy"
|
||||
bg-color="#E8FFEA"
|
||||
border-color="#00B42A"
|
||||
icon-name="swap"
|
||||
/>
|
||||
<StatsCard
|
||||
title="待处理消息"
|
||||
:count="6"
|
||||
unit="条"
|
||||
bgColor="#FCE4EC"
|
||||
borderColor="#E91E63"
|
||||
iconName="mail"
|
||||
to="/yhzx/ggwhgl"
|
||||
bg-color="#FFF7E6"
|
||||
border-color="#FF7D00"
|
||||
icon-name="mail"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 碳服务供给表格 -->
|
||||
<div class="panel-section table-section">
|
||||
<CarbonServiceTable />
|
||||
</div>
|
||||
|
||||
<!-- 右侧：企业认证 -->
|
||||
<div class="right-column">
|
||||
<EnterpriseCert />
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧：功能区 -->
|
||||
<div class="left-panel">
|
||||
<!-- 常用功能 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-header">
|
||||
<div class="header-icon">
|
||||
<AppIcon />
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h2 class="panel-title">常用功能</h2>
|
||||
<p class="panel-desc">快速访问核心功能</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<QuickActions />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账号管理 -->
|
||||
<div class="panel-card account-panel">
|
||||
<div class="panel-header">
|
||||
<div class="header-icon header-icon--account">
|
||||
<SettingIcon />
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h2 class="panel-title">账号管理</h2>
|
||||
<p class="panel-desc">账户设置与安全</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<AccountShortcuts />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：政策公告 -->
|
||||
<div class="right-panel">
|
||||
<!-- 政策公告 - 左右两个 -->
|
||||
<div class="panel-section policy-section">
|
||||
<PolicyNews />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧边栏 -->
|
||||
<aside class="content-right">
|
||||
<!-- 企业认证卡片 -->
|
||||
<EnterpriseCert />
|
||||
|
||||
<!-- 快捷入口 + 账号管理 -->
|
||||
<div class="right-section">
|
||||
<div class="section-header">
|
||||
<h3 class="header-title">快捷入口</h3>
|
||||
<a class="header-link">管理</a>
|
||||
</div>
|
||||
<QuickActions />
|
||||
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<div class="section-header">
|
||||
<h3 class="header-title">账号管理</h3>
|
||||
</div>
|
||||
<AccountShortcuts />
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AppIcon, SettingIcon } from 'tdesign-icons-vue';
|
||||
import StatsCard from './components/StatsCard.vue';
|
||||
import QuickActions from './components/QuickActions.vue';
|
||||
import CarbonServiceTable from './components/CarbonServiceTable.vue';
|
||||
import PolicyNews from './components/PolicyNews.vue';
|
||||
import AccountShortcuts from './components/AccountShortcuts.vue';
|
||||
import EnterpriseCert from './components/EnterpriseCert.vue';
|
||||
import QuickActions from './components/QuickActions.vue';
|
||||
import AccountShortcuts from './components/AccountShortcuts.vue';
|
||||
import { SettingIcon } from 'tdesign-icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'GztIndex',
|
||||
name: 'DashboardIndex',
|
||||
components: {
|
||||
AppIcon,
|
||||
SettingIcon,
|
||||
StatsCard,
|
||||
QuickActions,
|
||||
CarbonServiceTable,
|
||||
PolicyNews,
|
||||
AccountShortcuts,
|
||||
EnterpriseCert,
|
||||
QuickActions,
|
||||
AccountShortcuts,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDate: '',
|
||||
currentWeekday: '',
|
||||
currentGreeting: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.updateDateTime();
|
||||
},
|
||||
methods: {
|
||||
updateDateTime() {
|
||||
computed: {
|
||||
currentDate() {
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const day = now.getDate();
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
|
||||
this.currentWeekday = weekdays[now.getDay()];
|
||||
if (hours < 12) {
|
||||
this.currentGreeting = '早上好';
|
||||
} else if (hours < 14) {
|
||||
this.currentGreeting = '中午好';
|
||||
} else if (hours < 18) {
|
||||
this.currentGreeting = '下午好';
|
||||
} else {
|
||||
this.currentGreeting = '晚上好';
|
||||
}
|
||||
const weekday = weekdays[now.getDay()];
|
||||
return `${year}年${month}月${day}日 ${weekday}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@bg-page: #F5F7FA;
|
||||
@bg-card: #FFFFFF;
|
||||
@text-dark: #003B1A;
|
||||
@text-muted: #4E5969;
|
||||
@text-light: #86909C;
|
||||
@border-light: #E5E6EB;
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@green-soft: rgba(72, 198, 102, 0.08);
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@bg-page: #F4F7F6;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
@shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
@link-color: #008CFF;
|
||||
@link-hover: #0066CC;
|
||||
|
||||
// ========== 页面布局 ==========
|
||||
.gzt-page {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding: 28px 32px;
|
||||
overflow: hidden;
|
||||
.dashboard-container {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
background: @bg-page;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
inset: 0;
|
||||
|
||||
.deco-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
|
||||
&--1 {
|
||||
top: -120px;
|
||||
right: -80px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(72, 198, 102, 0.12) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, rgba(45, 138, 69, 0.08) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
&--dots {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gzt-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// ========== 第一行布局 ==========
|
||||
.top-row {
|
||||
// 主内容区域
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
// 左侧内容区
|
||||
.content-left {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
// 整块白色面板
|
||||
.left-panel {
|
||||
padding: 20px;
|
||||
background: @bg-card;
|
||||
border-radius: 4px;
|
||||
box-shadow: @shadow-soft;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ========== 欢迎区域 ==========
|
||||
// 面板内的区块
|
||||
.panel-section {
|
||||
// padding: 24px 28px;
|
||||
}
|
||||
|
||||
// 分割线
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: @border-light;
|
||||
}
|
||||
|
||||
// 欢迎登录区块
|
||||
.welcome-section {
|
||||
display: flex;
|
||||
padding: 20px 24px;
|
||||
background: linear-gradient(135deg, #FFF 0%, #FAFFFE 50%, @green-soft 100%);
|
||||
border: 1px solid rgba(72, 198, 102, 0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: @shadow-soft;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.welcome-left {
|
||||
.welcome-badge {
|
||||
display: inline-flex;
|
||||
padding: 5px 12px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: @green-dark;
|
||||
background: @green-light;
|
||||
border: 1px solid rgba(72, 198, 102, 0.2);
|
||||
border-radius: 20px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.t-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
align-items: flex-start;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.header-left {
|
||||
.welcome-title {
|
||||
margin: 0 0 6px;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
.time-widget {
|
||||
padding: 8px 12px;
|
||||
text-align: right;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 8px;
|
||||
|
||||
.time-date {
|
||||
margin-bottom: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.time-weekday {
|
||||
font-size: 11px;
|
||||
.header-right {
|
||||
.current-date {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 统计卡片区域 ==========
|
||||
// 统计块
|
||||
.stats-section {
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
animation-delay: 0.1s;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
|
||||
& > :not(:last-child) {
|
||||
padding-right: 16px;
|
||||
margin-right: 16px;
|
||||
border-right: 1px dashed @border-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格区块
|
||||
.table-section {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
// 政策公告区块
|
||||
.policy-section {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
// 右侧边栏
|
||||
.content-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.right-section {
|
||||
padding: 20px;
|
||||
background: @bg-card;
|
||||
border-radius: 4px;
|
||||
box-shadow: @shadow-soft;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.header-line {
|
||||
width: 32px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, @green-primary, @green-dark);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
color: @text-muted;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// ========== 主要内容区 ==========
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 24px;
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 20px;
|
||||
box-shadow: @shadow-card;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 18px 24px 16px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(72, 198, 102, 0.3);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--account {
|
||||
background: linear-gradient(135deg, #78909C 0%, #546E7A 100%);
|
||||
box-shadow: 0 4px 12px rgba(120, 144, 156, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
.header-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
color: @text-dark;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.panel-desc {
|
||||
margin: 2px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: @text-light;
|
||||
.header-link {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 18px 24px;
|
||||
}
|
||||
|
||||
// ========== 动画 ==========
|
||||
@keyframes fadeSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
.section-divider {
|
||||
height: 0;
|
||||
margin: 20px 0;
|
||||
border-top: 1px solid @border-light;
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 响应式 ==========
|
||||
@media (max-width: 1024px) {
|
||||
// 响应式
|
||||
@media (max-width: 1400px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr 280px;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 280px;
|
||||
|
||||
.right-section {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 16px;
|
||||
.content-right {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section .stats-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.policy-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gzt-page {
|
||||
padding: 20px 16px;
|
||||
.dashboard-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
margin-top: 16px;
|
||||
|
||||
.time-widget {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.stats-section .stats-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
</div>
|
||||
|
||||
<div class="capability-grid">
|
||||
<div class="capability-card" v-for="(item, index) in capabilityList" :key="index">
|
||||
<div class="capability-card" v-for="(item, index) in capabilityList" :key="index" @click="handleCapabilityClick(item)">
|
||||
<div class="capability-card-content">
|
||||
<img :src="item.icon" :alt="item.name" class="capability-icon" />
|
||||
<span class="capability-name">{{ item.name }}</span>
|
||||
@ -260,12 +260,12 @@ export default {
|
||||
// require('@/pages/index/assets/home-top-bg3.jpg'),
|
||||
],
|
||||
capabilityList: [
|
||||
{ name: '碳核算平台', icon: require('@/pages/index/assets/home-thspt-icon.png') },
|
||||
{ name: '碳交易平台', icon: require('@/pages/index/assets/home-tjypt-icon.png') },
|
||||
{ name: '碳认证机构', icon: require('@/pages/index/assets/home-trzjg-icon.png') },
|
||||
{ name: '碳金融服务', icon: require('@/pages/index/assets/home-tjrfw-icon.png') },
|
||||
{ name: '碳技术咨询', icon: require('@/pages/index/assets/home-tjszx-icon.png') },
|
||||
{ name: '更多能力', icon: require('@/pages/index/assets/home-gdnl-icon.png') }
|
||||
{ name: '碳核算平台', icon: require('@/pages/index/assets/home-thspt-icon.png'), anchor: 'content-1' },
|
||||
{ name: '碳交易平台', icon: require('@/pages/index/assets/home-tjypt-icon.png'), anchor: 'content-3' },
|
||||
{ name: '碳认证机构', icon: require('@/pages/index/assets/home-trzjg-icon.png'), anchor: 'content-2' },
|
||||
{ name: '碳金融服务', icon: require('@/pages/index/assets/home-tjrfw-icon.png'), anchor: 'content-4' },
|
||||
{ name: '碳技术咨询', icon: require('@/pages/index/assets/home-tjszx-icon.png'), anchor: 'content-5' },
|
||||
{ name: '更多能力', icon: require('@/pages/index/assets/home-gdnl-icon.png'), anchor: '' }
|
||||
],
|
||||
coreList: [
|
||||
{
|
||||
@ -460,6 +460,13 @@ export default {
|
||||
console.log('点击企业出海:', item.title);
|
||||
this.$message.info(`${item.title} - ${item.btnText}`);
|
||||
},
|
||||
handleCapabilityClick(item) {
|
||||
if (item.anchor) {
|
||||
this.$router.push({ path: '/gxnlpt', query: { anchor: item.anchor } });
|
||||
} else {
|
||||
this.$router.push('/gxnlpt');
|
||||
}
|
||||
},
|
||||
// 行业动态点击
|
||||
handleNewsClick(item) {
|
||||
if (item.src) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="change-password-page">
|
||||
<div class="page-header">
|
||||
<div class="page-title">账号管理</div>
|
||||
<div class="page-title">修改密码</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<t-form
|
||||
|
||||
Loading…
Reference in New Issue
Block a user