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 @@ + + + + + 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 }},祝您工作顺利

+
+
+
+
{{ currentDate }}
+
{{ currentWeekday }}
+
+
-

欢迎回来

-

今天是碳市场活跃日,把握每一个交易机会

-
-
-
-
{{ currentDate }}
-
{{ currentWeekday }}
-
-
-
- -
-
-
- + +
+
+ + + + +
+
-
- - - - + + +
+
@@ -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; } // ========== 动画 ==========