diff --git a/txw-mhzc-web/src/pages/index/views/gzt/components/EnterpriseCert.vue b/txw-mhzc-web/src/pages/index/views/gzt/components/EnterpriseCert.vue
new file mode 100644
index 0000000..1f4fb6f
--- /dev/null
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/EnterpriseCert.vue
@@ -0,0 +1,246 @@
+
+
+
+
+
+
+
+ 企业名称
+ {{ certData.qymc }}
+
+
+ 统一社会信用代码
+ {{ certData.nsrsbh }}
+
+
+ 认证时间
+ {{ formatDate(certData.lrrq) }}
+
+
+
+
+
+ 暂未认证企业信息
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue b/txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
index 38b7411..ce12eda 100644
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
@@ -86,6 +86,7 @@ export default {
@shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
.policy-news {
+ width: 100%;
overflow: hidden;
background: @bg-card;
border-radius: 16px;
diff --git a/txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue b/txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue
index 58c4d80..1fe49f9 100644
--- a/txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue
@@ -1,21 +1,24 @@
-
+
+
+
@@ -25,10 +28,10 @@ export default {
data() {
return {
actions: [
- { label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload' },
- { label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload' },
- { label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit' },
- { label: '质证申请', to: '/yhzx/zzgl', icon: 'certificate' },
+ { 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' },
],
};
},
@@ -44,112 +47,129 @@ export default {
@green-primary: #48C666;
@green-dark: #2D8A45;
@green-light: #E8FFEA;
-@green-glow: rgba(72, 198, 102, 0.2);
@text-dark: #1A2B3C;
@text-muted: #6B7C8D;
@bg-card: #FFFFFF;
-@border-light: rgba(72, 198, 102, 0.3);
+@border-light: rgba(0, 0, 0, 0.06);
+@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
.quick-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 14px;
- align-items: center;
+ .actions-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 12px;
+ }
}
-.action-btn {
+.action-item {
position: relative;
- display: inline-flex;
- padding: 0;
- font-family: inherit;
+ display: flex;
+ padding: 20px 12px;
+ overflow: hidden;
cursor: pointer;
- background: transparent;
- border: none;
- outline: none;
+ 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: 8px;
+ gap: 10px;
- .btn-bg {
+ &::before {
position: absolute;
- z-index: 0;
- background: linear-gradient(135deg, @green-light 0%, #fff 100%);
- border: 2px solid @green-primary;
- border-radius: 10px;
- opacity: 0;
- transform: scale(0.95);
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- inset: 0;
- }
-
- .btn-icon {
- position: relative;
- z-index: 1;
- display: flex;
- width: 40px;
- height: 40px;
- font-size: 18px;
- color: #fff;
- background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
- border-radius: 10px 0 0 10px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- align-items: center;
- justify-content: center;
- }
-
- .btn-label {
- position: relative;
- z-index: 1;
- padding: 10px 14px 10px 6px;
- font-size: 14px;
- font-weight: 600;
- color: @green-dark;
- white-space: nowrap;
- background: transparent;
- border: 2px solid @green-primary;
- border-left: none;
- border-radius: 0 10px 10px 0;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .btn-arrow {
- position: relative;
- z-index: 1;
- display: flex;
- width: 24px;
- height: 24px;
- margin-right: 10px;
- color: @green-primary;
- opacity: 0;
- transform: translateX(-8px);
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- align-items: center;
- justify-content: center;
+ 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;
}
&:hover {
- .btn-bg {
- opacity: 1;
- transform: scale(1);
+ border-color: transparent;
+ transform: translateY(-3px);
+ box-shadow: @shadow-hover;
+
+ &::before {
+ transform: scaleX(1);
}
- .btn-icon {
- transform: translateX(4px);
- box-shadow: 0 4px 16px @green-glow;
+ .item-icon {
+ transform: scale(1.1);
}
- .btn-label {
- padding-left: 10px;
- color: @green-primary;
- }
-
- .btn-arrow {
+ .item-arrow {
opacity: 1;
transform: translateX(0);
}
}
&:active {
- transform: scale(0.98);
+ transform: translateY(-1px);
+ }
+
+ .item-icon-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .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);
+ align-items: center;
+ justify-content: center;
+ }
+
+ .item-label {
+ font-size: 13px;
+ font-weight: 600;
+ 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);
+ }
+}
+
+@media (max-width: 1200px) {
+ .quick-actions .actions-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 480px) {
+ .quick-actions .actions-grid {
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
}
}
diff --git a/txw-mhzc-web/src/pages/index/views/gzt/index.vue b/txw-mhzc-web/src/pages/index/views/gzt/index.vue
index ef1b612..3c92b0a 100644
--- a/txw-mhzc-web/src/pages/index/views/gzt/index.vue
+++ b/txw-mhzc-web/src/pages/index/views/gzt/index.vue
@@ -8,67 +8,69 @@
-
-
-
-
-
-
碳信网
+
+
+
+
+
+
+
欢迎回来
+
{{ currentGreeting }},祝您工作顺利
+
+
-
欢迎回来
-
今天是碳市场活跃日,把握每一个交易机会
-
-
-
-
-
-
-
@@ -82,8 +84,10 @@
-
常用功能
-
快速访问核心功能
+
@@ -96,8 +100,10 @@
-
账号管理
-
账户设置与安全
+
@@ -119,6 +125,7 @@ import StatsCard from './components/StatsCard.vue';
import QuickActions from './components/QuickActions.vue';
import PolicyNews from './components/PolicyNews.vue';
import AccountShortcuts from './components/AccountShortcuts.vue';
+import EnterpriseCert from './components/EnterpriseCert.vue';
export default {
name: 'GztIndex',
@@ -127,11 +134,13 @@ export default {
QuickActions,
PolicyNews,
AccountShortcuts,
+ EnterpriseCert,
},
data() {
return {
currentDate: '',
currentWeekday: '',
+ currentGreeting: '',
};
},
mounted() {
@@ -140,9 +149,19 @@ export default {
methods: {
updateDateTime() {
const now = new Date();
+ const hours = now.getHours();
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 = '晚上好';
+ }
},
},
};
@@ -216,16 +235,35 @@ export default {
margin: 0 auto;
}
+// ========== 第一行布局 ==========
+.top-row {
+ display: grid;
+ grid-template-columns: 1fr 300px;
+ gap: 20px;
+ margin-bottom: 24px;
+ animation: fadeSlideUp 0.5s ease backwards;
+}
+
+.left-column {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.right-column {
+ display: flex;
+ width: 300px;
+ flex-shrink: 0;
+}
+
// ========== 欢迎区域 ==========
.welcome-section {
display: flex;
- padding: 28px 32px;
- margin-bottom: 28px;
+ 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: 20px;
+ border-radius: 16px;
box-shadow: @shadow-soft;
- animation: fadeSlideUp 0.5s ease backwards;
align-items: flex-start;
justify-content: space-between;
}
@@ -233,8 +271,8 @@ export default {
.welcome-left {
.welcome-badge {
display: inline-flex;
- padding: 6px 14px;
- margin-bottom: 12px;
+ padding: 5px 12px;
+ margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: @green-dark;
@@ -245,13 +283,13 @@ export default {
gap: 6px;
.t-icon {
- font-size: 14px;
+ font-size: 13px;
}
}
.welcome-title {
- margin: 0 0 8px;
- font-size: 28px;
+ margin: 0 0 6px;
+ font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px;
color: @text-dark;
@@ -259,28 +297,28 @@ export default {
.welcome-subtitle {
margin: 0;
- font-size: 14px;
+ font-size: 13px;
color: @text-muted;
}
}
.welcome-right {
.time-widget {
- padding: 12px 16px;
+ padding: 8px 12px;
text-align: right;
background: rgba(255, 255, 255, 0.8);
border: 1px solid @border-light;
- border-radius: 12px;
+ border-radius: 8px;
.time-date {
margin-bottom: 2px;
- font-size: 14px;
+ font-size: 12px;
font-weight: 600;
color: @text-dark;
}
.time-weekday {
- font-size: 12px;
+ font-size: 11px;
color: @text-muted;
}
}
@@ -288,7 +326,6 @@ export default {
// ========== 统计卡片区域 ==========
.stats-section {
- margin-bottom: 28px;
animation: fadeSlideUp 0.5s ease backwards;
animation-delay: 0.1s;
}
@@ -336,6 +373,11 @@ export default {
gap: 24px;
}
+.right-panel {
+ width: 300px;
+ flex-shrink: 0;
+}
+
.panel-card {
overflow: hidden;
background: @bg-card;
@@ -345,22 +387,25 @@ export default {
}
.panel-header {
- padding: 24px 28px 20px;
+ 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: inline-flex;
+ display: flex;
width: 40px;
height: 40px;
- margin-bottom: 12px;
font-size: 20px;
color: #fff;
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
- border-radius: 12px;
+ 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%);
@@ -368,22 +413,29 @@ export default {
}
}
+ .header-text {
+ flex: 1;
+ min-width: 0;
+ }
+
.panel-title {
- margin: 0 0 4px;
- font-size: 18px;
+ margin: 0;
+ font-size: 16px;
font-weight: 600;
+ line-height: 1.4;
color: @text-dark;
}
.panel-desc {
- margin: 0;
- font-size: 13px;
+ margin: 2px 0 0;
+ font-size: 12px;
+ line-height: 1.4;
color: @text-light;
}
}
.panel-body {
- padding: 24px 28px;
+ padding: 18px 24px;
}
// ========== 动画 ==========