From b37cb241eef9429ba21dcefba395a0bebfc3974d Mon Sep 17 00:00:00 2001 From: qinzhenpen Date: Tue, 29 Sep 2026 17:21:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=9F=E4=B8=80=E5=B0=86?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=9B=BF=E6=8D=A2=E4=B8=BA=E5=85=B1?= =?UTF-8?q?=E7=94=A8=E7=9A=84=20TrainingTaskToolbar=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将多个页面的独立工具栏（包含资料按钮和导出按钮）替换为共用的 TrainingTaskToolbar 组件，新增统一的 task-action-strip 样式类，简化代码结构，提升组件复用性。 --- src/assets/styles/sidebar.scss | 305 +++++++++++------- src/views/channel/index.vue | 50 +-- src/views/channel/supplier.vue | 34 +- src/views/demand/business-feasibility.vue | 29 +- .../competitive-environment-analysis.vue | 35 +- src/views/demand/consumer-behavior.vue | 44 +-- src/views/demand/consumer-scenario.vue | 42 ++- src/views/demand/feature-conversion.vue | 43 ++- src/views/demand/industry-demand-analysis.vue | 21 +- src/views/demand/people.vue | 40 ++- src/views/product/after-sales-service.vue | 41 +-- src/views/product/differentiation.vue | 39 ++- src/views/product/hardware-cost.vue | 29 +- .../product/market-opportunity-selection.vue | 32 +- src/views/product/price.vue | 79 ++--- src/views/product/requirements-doc.vue | 33 +- src/views/product/structure.vue | 33 +- 17 files changed, 478 insertions(+), 451 deletions(-) diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 573fb5b..ca6fa2c 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -1,7 +1,7 @@ #app { .main-container { height: calc(100% - 50px); - transition: margin-left .28s; + transition: margin-left 0.28s; margin-left: $base-sidebar-width; position: relative; } @@ -9,10 +9,10 @@ margin-left: 0 !important; } .sidebar-container { - -webkit-transition: width .28s; + -webkit-transition: width 0.28s; transition: width 0.28s; width: 239px !important; - background: url('../images/sidebar-background.webp') no-repeat center; + background: url("../images/sidebar-background.webp") no-repeat center; // background-color: $base-menu-background; background-size: 100% 100%; height: 100%; @@ -23,11 +23,14 @@ left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35); - box-shadow: 2px 0 6px rgba(0, 21, 41, .35); + -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); + box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); // reset element-ui css .horizontal-collapse-transition { - transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + transition: + 0s width ease-in-out, + 0s padding-left ease-in-out, + 0s padding-right ease-in-out; } .scrollbar-wrapper { overflow-x: hidden !important; @@ -72,7 +75,7 @@ .el-sub-menu__title { height: 37px; line-height: 37px; - background: url('../images/sidebar-normal.png') no-repeat; + background: url("../images/sidebar-normal.png") no-repeat; background-size: 100% 100% !important; } .el-menu { @@ -90,7 +93,7 @@ } } } - .is-opened{ + .is-opened { margin-bottom: 0px !important; } .el-menu-item { @@ -100,25 +103,24 @@ height: 37px; line-height: 37px; color: #fff; - background: url('../images/sidebar-normal.png') no-repeat; + background: url("../images/sidebar-normal.png") no-repeat; background-size: 100% 100% !important; } .is-active { - background: url('../images/sidebar-active.png') no-repeat !important; - .el-menu{ - .nest-menu{ - .is-active{ + background: url("../images/sidebar-active.png") no-repeat !important; + .el-menu { + .nest-menu { + .is-active { color: #008efe !important; } } } .el-sub-menu__title { - background: url('../images/sidebar-active.png') no-repeat !important; + background: url("../images/sidebar-active.png") no-repeat !important; background-size: 100% 100% !important; } } - } .el-menu-item, @@ -140,11 +142,11 @@ } } - & .theme-dark .is-active>.el-sub-menu__title { + & .theme-dark .is-active > .el-sub-menu__title { color: $base-menu-color-active !important; } - & .nest-menu .el-sub-menu>.el-sub-menu__title, + & .nest-menu .el-sub-menu > .el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: $base-sidebar-width !important; @@ -153,7 +155,7 @@ } } - & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, + & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, & .theme-dark .el-sub-menu .el-menu-item { background-color: $base-sub-menu-background !important; @@ -187,20 +189,19 @@ .el-sub-menu { overflow: hidden; - &>.el-sub-menu__title { + & > .el-sub-menu__title { padding: 0 !important; .svg-icon { margin-left: 20px; } - } } .el-menu--collapse { .el-sub-menu { - &>.el-sub-menu__title { - &>span { + & > .el-sub-menu__title { + & > span { height: 0; width: 0; overflow: hidden; @@ -208,7 +209,7 @@ display: inline-block; } - &>i { + & > i { height: 0; width: 0; overflow: hidden; @@ -229,7 +230,7 @@ } .sidebar-container { - transition: transform .28s; + transition: transform 0.28s; width: $base-sidebar-width !important; } @@ -251,10 +252,7 @@ .platform-admin-main { height: calc(100vh - 50px); overflow: auto !important; - background: - radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%), - radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%), - linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important; + background: radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%), radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%), linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important; &::-webkit-scrollbar { width: 5px; @@ -274,17 +272,11 @@ .studentLayout, .teacherLayout { - background: - radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.74), transparent 34%), - radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.24), transparent 28%), - linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%); + background: radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.74), transparent 34%), radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.24), transparent 28%), linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%); .main-container { margin-left: 304px; - background: - radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.72), transparent 34%), - radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.22), transparent 28%), - linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%); + background: radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.72), transparent 34%), radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.22), transparent 28%), linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%); } .app-main, @@ -292,10 +284,7 @@ height: calc(100vh - 50px); padding: 28px 32px 40px 24px; overflow: auto; - background: - radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%), - radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%), - linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important; + background: radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%), radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%), linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important; &::-webkit-scrollbar { width: 5px; @@ -350,7 +339,9 @@ border: 1px solid rgba(0, 180, 255, 0.25); border-radius: 32px; background: rgba(8, 18, 28, 0.7); - box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(169, 229, 255, 0.08); + box-shadow: + 0 22px 48px rgba(0, 0, 0, 0.22), + inset 0 1px 0 rgba(169, 229, 255, 0.08); backdrop-filter: blur(12px); } @@ -408,7 +399,12 @@ white-space: normal; overflow: hidden; cursor: pointer; - transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + transition: + color 0.2s ease, + transform 0.2s ease, + border-color 0.2s ease, + background 0.2s ease, + box-shadow 0.2s ease; } .student-course-icon { @@ -423,10 +419,10 @@ border: 1px solid rgba(0, 170, 255, 0.26); border-radius: 10px; color: #7ee9ff; - background: - linear-gradient(135deg, rgba(0, 170, 255, 0.24), rgba(43, 110, 255, 0.08)), - rgba(1, 24, 36, 0.82); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 10px rgba(0, 170, 255, 0.08); + background: linear-gradient(135deg, rgba(0, 170, 255, 0.24), rgba(43, 110, 255, 0.08)), rgba(1, 24, 36, 0.82); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 0 10px rgba(0, 170, 255, 0.08); svg { width: 15px; @@ -487,7 +483,9 @@ font-size: 14px; font-weight: 800; cursor: pointer; - transition: background 0.2s ease, box-shadow 0.2s ease; + transition: + background 0.2s ease, + box-shadow 0.2s ease; &:hover, &.active { @@ -557,10 +555,10 @@ box-sizing: border-box; border: 0; border-radius: 0; - background: - radial-gradient(circle at 18% 10%, rgba(0, 170, 255, 0.12), transparent 34%), - rgba(8, 18, 28, 0.82); - box-shadow: inset -1px 0 0 rgba(169, 229, 255, 0.06), 12px 0 32px rgba(0, 5, 16, 0.2); + background: radial-gradient(circle at 18% 10%, rgba(0, 170, 255, 0.12), transparent 34%), rgba(8, 18, 28, 0.82); + box-shadow: + inset -1px 0 0 rgba(169, 229, 255, 0.06), + 12px 0 32px rgba(0, 5, 16, 0.2); } .student-course-list { @@ -589,7 +587,10 @@ font-size: 24px; line-height: 1; cursor: pointer; - transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; + transition: + background 0.2s ease, + border-color 0.2s ease, + transform 0.2s ease; &:hover { border-color: #70e4ff; @@ -637,7 +638,6 @@ margin-left: 64px; } } - } /* 仅学生实训任务页提供课程导航的图标轨道，离开任务页不改变原有学生布局。 */ @@ -666,7 +666,10 @@ font-size: 24px; line-height: 1; cursor: pointer; - transition: background .2s ease, border-color .2s ease, transform .2s ease; + transition: + background 0.2s ease, + border-color 0.2s ease, + transform 0.2s ease; &:hover, &:focus-visible { @@ -690,9 +693,8 @@ padding: 58px 11px 24px; border: 0; border-radius: 0; - background: - linear-gradient(180deg, rgba(8, 31, 47, .92), rgba(3, 16, 28, .98)); - box-shadow: inset -1px 0 0 rgba(132, 228, 255, .1); + background: linear-gradient(180deg, rgba(8, 31, 47, 0.92), rgba(3, 16, 28, 0.98)); + box-shadow: inset -1px 0 0 rgba(132, 228, 255, 0.1); } .student-course-heading, @@ -718,7 +720,7 @@ min-height: 42px; margin: 0 0 8px; border-radius: 13px; - background: rgba(255, 255, 255, .025); + background: rgba(255, 255, 255, 0.025); } .student-course-list { @@ -735,9 +737,9 @@ } .student-course-link.active { - border: 1px solid rgba(0, 190, 255, .85); - background: linear-gradient(135deg, rgba(0, 174, 255, .28), rgba(18, 95, 190, .14)); - box-shadow: 0 0 14px rgba(0, 178, 255, .25); + border: 1px solid rgba(0, 190, 255, 0.85); + background: linear-gradient(135deg, rgba(0, 174, 255, 0.28), rgba(18, 95, 190, 0.14)); + box-shadow: 0 0 14px rgba(0, 178, 255, 0.25); transform: none; } @@ -756,13 +758,13 @@ } // when menu collapsed .el-menu--vertical { - &>.el-menu { + & > .el-menu { .svg-icon { margin-right: 16px; } } - .nest-menu .el-sub-menu>.el-sub-menu__title, + .nest-menu .el-sub-menu > .el-sub-menu__title, .el-menu-item { &:hover { // you can use $sub-menuHover @@ -771,7 +773,7 @@ } // the scroll bar appears when the sub-menu is too long - >.el-menu--popup { + > .el-menu--popup { max-height: 100vh; overflow-y: auto; @@ -798,24 +800,15 @@ #app .studentLayout, #app .teacherLayout { // 整体浅色背景 + 蓝色点缀，营造明亮的科技感 - background: - radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.07), transparent 34%), - radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.05), transparent 28%), - linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important; + background: radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.07), transparent 34%), radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.05), transparent 28%), linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important; .main-container { - background: - radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.06), transparent 34%), - radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.04), transparent 28%), - linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important; + background: radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.06), transparent 34%), radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.04), transparent 28%), linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important; } .app-main, .teacher-main { - background: - radial-gradient(circle at 12% 18%, rgba(30, 136, 229, 0.05), transparent 34%), - radial-gradient(circle at 78% 6%, rgba(66, 165, 245, 0.04), transparent 28%), - linear-gradient(135deg, #f7fafd 0%, #eef4fb 48%, #f5f8fc 100%) !important; + background: radial-gradient(circle at 12% 18%, rgba(30, 136, 229, 0.05), transparent 34%), radial-gradient(circle at 78% 6%, rgba(66, 165, 245, 0.04), transparent 28%), linear-gradient(135deg, #f7fafd 0%, #eef4fb 48%, #f5f8fc 100%) !important; &::-webkit-scrollbar { width: 6px; @@ -878,7 +871,9 @@ margin: 0 0 2px !important; min-height: 40px !important; padding: 0 12px !important; - transition: background-color 0.15s ease, color 0.15s ease; + transition: + background-color 0.15s ease, + color 0.15s ease; &:hover { color: #1f2937 !important; @@ -954,10 +949,16 @@ color: #9ca3af !important; box-shadow: -2px 0 6px rgba(17, 24, 39, 0.08) !important; cursor: pointer; - transition: background-color 0.15s ease, color 0.15s ease; + transition: + background-color 0.15s ease, + color 0.15s ease; - .toggle-arrow { font-size: 10px; } - .toggle-arrow--right { display: none; } + .toggle-arrow { + font-size: 10px; + } + .toggle-arrow--right { + display: none; + } &:hover, &:focus-visible { @@ -970,8 +971,31 @@ // 折叠态：左箭头隐藏、右箭头显示（与 .sidebar-container 同级，避免嵌套出双容器） .sidebar-container.is-collapse .course-sidebar-toggle { - .toggle-arrow--left { display: none; } - .toggle-arrow--right { display: inline-flex; } + .toggle-arrow--left { + display: none; + } + .toggle-arrow--right { + display: inline-flex; + } + } +} + +/* + * 教师端 sidebar 宽度单独缩减 50%（304 → 152px） + * 教师端使用 el-menu 直显式布局，无需学生端的内嵌卡片空间，原 304px 造成大量空白 + * 学生端保持 304px 不变（内部 .student-course-nav 卡片需要空间） + * 同时隐藏教师端唯一的分组标题"教学管理"（标识），仅保留菜单项 + */ +#app .teacherLayout { + .main-container { + margin-left: 180px !important; + } + .sidebar-container { + width: 180px !important; + } + // 隐藏教师端顶部分组标题（"教学管理"标识），不影响学生端多分组标题 + .student-course-nav > .student-course-heading { + display: none !important; } } @@ -1001,7 +1025,9 @@ border-right: 1px solid #e5e7eb !important; box-shadow: none !important; - &::after { display: none !important; } + &::after { + display: none !important; + } /* 清除遗留背景图：sidebar-normal.png / sidebar-active.png / sidebar-background.webp 这些 !important 老规则在 L15/L75/L103/L107 会给 li/sub-menu-title/menu-item @@ -1045,13 +1071,19 @@ /* 侧边栏滚动条中性化 */ .el-scrollbar__wrap { - &::-webkit-scrollbar { width: 5px; } - &::-webkit-scrollbar-track { background: transparent; } + &::-webkit-scrollbar { + width: 5px; + } + &::-webkit-scrollbar-track { + background: transparent; + } &::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; } - &::-webkit-scrollbar-thumb:hover { background: #9ca3af; } + &::-webkit-scrollbar-thumb:hover { + background: #9ca3af; + } } .el-scrollbar__bar.is-vertical { @@ -1060,7 +1092,9 @@ transition: opacity 0.2s ease; } - &:hover .el-scrollbar__bar.is-vertical { opacity: 1; } + &:hover .el-scrollbar__bar.is-vertical { + opacity: 1; + } } /* el-menu 菜单容器：白底、紧凑行高 */ @@ -1091,9 +1125,14 @@ background: transparent !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - transition: background-color 0.15s ease, color 0.15s ease; + transition: + background-color 0.15s ease, + color 0.15s ease; - .student-menu-icon { color: #1f2937 !important; transition: color 0.15s ease; } + .student-menu-icon { + color: #1f2937 !important; + transition: color 0.15s ease; + } &:hover, &:focus { @@ -1101,7 +1140,9 @@ background: #f9fafb !important; outline: none; - .student-menu-icon { color: #1f2937 !important; } + .student-menu-icon { + color: #1f2937 !important; + } } } @@ -1119,14 +1160,18 @@ background: #f3f4f6 !important; box-shadow: none; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } &:hover, &:focus { color: #111827 !important; background: #e5e7eb !important; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } } } @@ -1138,14 +1183,18 @@ background: transparent !important; box-shadow: none; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } &:hover, &:focus { color: #2563eb !important; background: #f9fafb !important; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } } } @@ -1157,14 +1206,18 @@ background: transparent !important; box-shadow: none; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } &:hover, &:focus { color: #2563eb !important; background: #f9fafb !important; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } } } @@ -1187,7 +1240,9 @@ font-size: 13px; font-weight: 400; background: transparent; - transition: background-color 0.15s ease, color 0.15s ease; + transition: + background-color 0.15s ease, + color 0.15s ease; .student-menu-icon { color: #9ca3af !important; @@ -1201,7 +1256,9 @@ color: #1f2937; outline: none; - .student-menu-icon { color: #6b7280 !important; } + .student-menu-icon { + color: #6b7280 !important; + } } &.is-active { @@ -1210,7 +1267,9 @@ font-weight: 600; box-shadow: none; - .student-menu-icon { color: #2563eb !important; } + .student-menu-icon { + color: #2563eb !important; + } &:hover { background: #e5e7eb !important; @@ -1270,7 +1329,9 @@ padding: 0; } - .student-menu-icon { margin-right: 0; } + .student-menu-icon { + margin-right: 0; + } /* 恢复折叠模式下 sub-menu title 里的 icon 尺寸 —— Element Plus 默认把 .hideSidebar 里 sub-menu title 的 也压成 0 宽高， @@ -1310,7 +1371,9 @@ font-size: 13px; font-weight: 400; background: transparent; - transition: background-color 0.15s ease, color 0.15s ease; + transition: + background-color 0.15s ease, + color 0.15s ease; &:hover, &:focus { @@ -1341,26 +1404,38 @@ #app .teacherLayout { background: #ffffff !important; - .main-container { background: #ffffff !important; } + .main-container { + background: #ffffff !important; + } .app-main, .teacher-main { background: #ffffff !important; - &::-webkit-scrollbar-track { background: transparent !important; } - &::-webkit-scrollbar-thumb { background: #d1d5db !important; } - &::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; } + &::-webkit-scrollbar-track { + background: transparent !important; + } + &::-webkit-scrollbar-thumb { + background: #d1d5db !important; + } + &::-webkit-scrollbar-thumb:hover { + background: #9ca3af !important; + } } // 实训页背景一并收敛为纯白 - .app-main:has(.student-training-shell) { background: #ffffff !important; } + .app-main:has(.student-training-shell) { + background: #ffffff !important; + } .sidebar-container { background: #ffffff !important; border-right: 1px solid #e5e7eb !important; box-shadow: none !important; - &::after { display: none !important; } + &::after { + display: none !important; + } // 导航容器：去掉大圆角玻璃卡片，铺满侧栏 .student-course-nav { @@ -1385,10 +1460,14 @@ letter-spacing: 0; text-transform: none; - &:hover { color: #1f2937 !important; } + &:hover { + color: #1f2937 !important; + } } - .student-course-list { margin: 0 0 16px; } + .student-course-list { + margin: 0 0 16px; + } // 菜单项：纯文字行、38px 高、8px 圆角 .student-course-link { @@ -1438,7 +1517,11 @@ background: #eff6ff !important; } - .student-course-link:hover .student-course-icon { color: #4b5563 !important; } - .student-course-link.active .student-course-icon { color: #3b82f6 !important; } + .student-course-link:hover .student-course-icon { + color: #4b5563 !important; + } + .student-course-link.active .student-course-icon { + color: #3b82f6 !important; + } } } diff --git a/src/views/channel/index.vue b/src/views/channel/index.vue index 17bb85d..4d58ae1 100644 --- a/src/views/channel/index.vue +++ b/src/views/channel/index.vue @@ -17,19 +17,9 @@

-
- - -
+ +
+
@@ -148,7 +138,6 @@
-
提交任务清空填写

第 {{ currentStep }} 步内容待配置

第 1 步 SWOT 分类已保存，可从上方步骤栏返回查看。
@@ -73,13 +63,13 @@