From 52ac32ff955917de528726df47f670aecbe02bb5 Mon Sep 17 00:00:00 2001 From: Zones <765289303@qq.com> Date: Mon, 6 Jul 2026 17:56:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/page.scss | 124 +++++++++++++++++-- components/nbd-anti-record.vue | 46 +++---- scanpages/hj/do_anti_rust.vue | 191 ------------------------------ scanpages/hj/make_right.vue | 133 ++++----------------- scanpages/hj/materials_detail.vue | 46 ++----- 5 files changed, 158 insertions(+), 382 deletions(-) diff --git a/assets/css/page.scss b/assets/css/page.scss index 016f5b2..c2abb05 100644 --- a/assets/css/page.scss +++ b/assets/css/page.scss @@ -1707,9 +1707,18 @@ } } -// ===== 详情页区块与卡片通用样式(do_anti_rust / 焊口详情页等)===== +// ===== 区块标题 ===== .section { margin: 0 24rpx 20rpx; + animation: fadeUp 0.5s ease-out both; + + &:nth-child(2) { + animation-delay: 0.05s; + } + + &:nth-child(3) { + animation-delay: 0.15s; + } &__header { display: flex; @@ -1722,79 +1731,170 @@ &__bar { width: 6rpx; height: 26rpx; - background: #2979ff; + background: linear-gradient(180deg, $app-primary, #6ba3ff); border-radius: 3rpx; flex-shrink: 0; + animation: breathe 2.5s ease-in-out infinite; } &__title { font-size: 28rpx; font-weight: 600; - color: #0f1724; + color: $app-text; letter-spacing: 0.5rpx; } + + .img-box { + padding: 20rpx; + border-radius: 16rpx; + background-color: #ffffff; + } } +// ===== 信息卡片 ===== +$card-bg: #ffffff; +$shadow-md: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); + .card { - background: #fff; - border-radius: 16rpx; + background: $card-bg; + border-radius: $app-radius; overflow: hidden; - box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06); + box-shadow: $shadow-md; &__row { display: flex; align-items: center; padding: 22rpx 28rpx; - border-bottom: 1rpx solid #e8ecf1; + border-bottom: 1rpx solid $app-border; + transition: background 0.25s ease; &:last-child { border-bottom: none; } + &:active { + background: #f5f4f1; + } + &--stack { flex-direction: column; align-items: flex-start; + .card__label { - margin-bottom: 8rpx; + width: auto; + padding-left: 16rpx; + margin-bottom: 12rpx; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4rpx; + height: 16rpx; + background: $app-primary-mid; + border-radius: 2rpx; + } } + + .card__value { + width: 100%; + text-align: left; + } + .card__value-wrap { width: 100%; justify-content: flex-start; } + + .card__input { + text-align: left; + min-height: 132rpx; + } + + .remark-input { + width: 100%; + text-align: left; + font-size: 28rpx; + color: $app-text; + padding: 20rpx 24rpx; + background: #f7f8fa; + border-radius: 12rpx; + line-height: 1.6; + min-height: 140rpx; + box-sizing: border-box; + + &::placeholder { + color: #b0bec5; + } + } } } &__label { width: 180rpx; font-size: 26rpx; - color: #6b7c93; + color: $app-text-secondary; flex-shrink: 0; + position: relative; + padding-left: 16rpx; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4rpx; + height: 16rpx; + background: $app-primary-mid; + border-radius: 2rpx; + } + + &.required::before { + background: #ff0000; + } } &__value { flex: 1; + font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: 28rpx; + font-weight: 500; color: #0f1724; + letter-spacing: 0.3rpx; text-align: left; + + &--placeholder { + color: #888888; + font-weight: 400; + } } &__value-wrap { flex: 1; display: flex; align-items: center; + justify-content: flex-start; gap: 8rpx; + + &--clickable { + min-height: 48rpx; + justify-content: flex-end; + } } &__unit { font-size: 24rpx; - color: #6b7c93; + color: $app-text-secondary; flex-shrink: 0; } &__input { flex: 1; font-size: 28rpx; - color: #0f1724; + color: $app-text; text-align: left; height: 48rpx; @@ -1802,4 +1902,4 @@ color: #b0bec5; } } -} +} \ No newline at end of file diff --git a/components/nbd-anti-record.vue b/components/nbd-anti-record.vue index a13a2cd..30393e0 100644 --- a/components/nbd-anti-record.vue +++ b/components/nbd-anti-record.vue @@ -87,8 +87,8 @@ - - + + 全部防腐记录 @@ -162,7 +162,7 @@ - + @@ -328,16 +328,24 @@ $text-secondary: #8e99a4; } &__value { - font-size: 26rpx; color: $text; flex: 1; text-align: left; + font-family: "SF Mono", "Menlo", "Consolas", monospace; + font-size: 28rpx; + font-weight: 500; + color: #0f1724; + letter-spacing: 0.3rpx; &--stack { - font-size: 24rpx; padding-left: 20rpx; padding-bottom: 8rpx; padding-top: 8rpx; + font-family: "SF Mono", "Menlo", "Consolas", monospace; + font-size: 28rpx; + font-weight: 500; + color: #0f1724; + letter-spacing: 0.3rpx; } } @@ -386,24 +394,12 @@ $text-secondary: #8e99a4; } // ===== 弹窗 ===== - &__overlay { - position: fixed; - inset: 0; - z-index: 999; - background: rgba(0, 0, 0, 0.45); - display: flex; - align-items: flex-end; - justify-content: center; - } - &__popup { - width: 100%; - height: 80vh; background: #fff; - border-radius: 24rpx 24rpx 0 0; display: flex; flex-direction: column; - animation: slideUp 0.3s ease-out; + height: 80vh; + border-radius: 24rpx 24rpx 0 0; } &__popup-hd { @@ -431,7 +427,7 @@ $text-secondary: #8e99a4; box-sizing: border-box; overflow-y: auto; background: #f5f5f5; - padding: 12rpx 28rpx 36rpx; + padding: 12rpx 20rpx 20rpx; } &__card--popup { @@ -445,14 +441,4 @@ $text-secondary: #8e99a4; margin-bottom: 0; } } - -@keyframes slideUp { - 0% { - transform: translateY(100%); - } - - 100% { - transform: translateY(0); - } -} diff --git a/scanpages/hj/do_anti_rust.vue b/scanpages/hj/do_anti_rust.vue index 02b09c4..0e2816f 100644 --- a/scanpages/hj/do_anti_rust.vue +++ b/scanpages/hj/do_anti_rust.vue @@ -481,197 +481,6 @@ $shadow-md: 0 2rpx 12rpx rgba(0, 0, 0, 0.04), 0 8rpx 24rpx rgba(0, 0, 0, 0.06); } } -// ===== 区块标题 ===== -.section { - margin: 0 24rpx 20rpx; - animation: fadeUp 0.5s ease-out both; - - &:nth-child(2) { - animation-delay: 0.05s; - } - - &:nth-child(3) { - animation-delay: 0.15s; - } - - &__header { - display: flex; - align-items: center; - gap: 12rpx; - margin-bottom: 14rpx; - padding: 0 6rpx; - } - - &__bar { - width: 6rpx; - height: 26rpx; - background: linear-gradient(180deg, $primary, #6ba3ff); - border-radius: 3rpx; - flex-shrink: 0; - animation: breathe 2.5s ease-in-out infinite; - } - - &__title { - font-size: 28rpx; - font-weight: 600; - color: $text; - letter-spacing: 0.5rpx; - } - - .img-box { - padding: 20rpx; - border-radius: 16rpx; - background-color: #ffffff; - } -} - -// ===== 信息卡片 ===== -.card { - background: $card-bg; - border-radius: $radius; - overflow: hidden; - box-shadow: $shadow-md; - - &__row { - display: flex; - align-items: center; - padding: 22rpx 28rpx; - border-bottom: 1rpx solid $border; - transition: background 0.25s ease; - - &:last-child { - border-bottom: none; - } - - &:active { - background: #f5f4f1; - } - - &--stack { - flex-direction: column; - align-items: flex-start; - - .card__label { - width: auto; - padding-left: 16rpx; - margin-bottom: 12rpx; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 4rpx; - height: 16rpx; - background: $primary-mid; - border-radius: 2rpx; - } - } - - .card__value { - width: 100%; - text-align: left; - } - - .card__value-wrap { - width: 100%; - justify-content: flex-start; - } - - .card__input { - text-align: left; - min-height: 132rpx; - } - - .remark-input { - width: 100%; - text-align: left; - font-size: 28rpx; - color: $text; - padding: 20rpx 24rpx; - background: #f7f8fa; - border-radius: 12rpx; - line-height: 1.6; - min-height: 140rpx; - box-sizing: border-box; - - &::placeholder { - color: #b0bec5; - } - } - } - } - - &__label { - width: 180rpx; - font-size: 26rpx; - color: $text-secondary; - flex-shrink: 0; - position: relative; - padding-left: 16rpx; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 4rpx; - height: 16rpx; - background: $primary-mid; - border-radius: 2rpx; - } - - &.required::before { - background: #ff0000; - } - } - - &__value { - flex: 1; - font-size: 28rpx; - color: $text; - font-weight: 500; - text-align: left; - - &--placeholder { - color: #888888; - font-weight: 400; - } - } - - &__value-wrap { - flex: 1; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 8rpx; - - &--clickable { - min-height: 48rpx; - justify-content: flex-end; - } - } - - &__unit { - font-size: 24rpx; - color: $text-secondary; - flex-shrink: 0; - } - - &__input { - flex: 1; - font-size: 28rpx; - color: $text; - text-align: left; - height: 48rpx; - - &::placeholder { - color: #b0bec5; - } - } -} // ===== 不合格区域切换动画 ===== .fail-section { diff --git a/scanpages/hj/make_right.vue b/scanpages/hj/make_right.vue index 61c5558..3e6317c 100644 --- a/scanpages/hj/make_right.vue +++ b/scanpages/hj/make_right.vue @@ -348,129 +348,36 @@ $shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); } } -// ===== 区块标题 ===== -.section { - margin: 0 24rpx 20rpx; - - &__header { - display: flex; - align-items: center; - gap: 12rpx; - margin-bottom: 14rpx; - padding: 0 6rpx; +// ===== 卡片页面覆盖(继承 page.scss 公共 .card 样式)===== +.card__row { + &:active { + background: #fafbfc; } - &__bar { - width: 6rpx; - height: 26rpx; - background: linear-gradient(180deg, $primary, #6ba3ff); - border-radius: 3rpx; - flex-shrink: 0; - } - - &__title { - font-size: 28rpx; - font-weight: 600; - color: $text; - letter-spacing: 0.5rpx; - } - - .img-box { - padding: 20rpx; - border-radius: 16rpx; - background-color: #ffffff; + &--warn .card__label::before { + background: #ef4444; } } -// ===== 信息卡片 ===== -.card { - background: $card-bg; - border-radius: $radius; - overflow: hidden; - box-shadow: $shadow-md; +.card__value { + text-align: right; - &__row { - display: flex; - align-items: center; - padding: 22rpx 28rpx; - border-bottom: 1rpx solid $border; - - &:last-child { - border-bottom: none; - } - - &:active { - background: #fafbfc; - } - - &--warn .card__label::before { - background: #ef4444; - } + &--placeholder { + color: #b0bec5; + font-weight: 400; } +} - &__label { - width: 180rpx; - font-size: 26rpx; - color: $text-secondary; - flex-shrink: 0; - position: relative; - padding-left: 16rpx; +.card__value-wrap { + justify-content: flex-end; +} - &::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 4rpx; - height: 16rpx; - background: $primary-mid; - border-radius: 2rpx; - } - } +.card__input { + text-align: right; + padding: 0; - &__value { - flex: 1; - font-size: 28rpx; - color: $text; - font-weight: 500; - text-align: right; - - &--placeholder { - color: #b0bec5; - font-weight: 400; - } - } - - &__value-wrap { - flex: 1; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 8rpx; - - &--clickable { - min-height: 48rpx; - } - } - - &__input { - flex: 1; - font-size: 28rpx; - color: $text; - text-align: right; - height: 48rpx; - padding: 0; - - &::placeholder { - color: #b0bec5; - } - } - - &__unit { - font-size: 24rpx; - color: $text-secondary; - flex-shrink: 0; + &::placeholder { + color: #b0bec5; } } diff --git a/scanpages/hj/materials_detail.vue b/scanpages/hj/materials_detail.vue index acc685e..e6b7ef2 100644 --- a/scanpages/hj/materials_detail.vue +++ b/scanpages/hj/materials_detail.vue @@ -156,64 +156,41 @@ const showPrint = ref(false) } - // ===== 区块标题 ===== + // ===== 区块标题(页面覆盖)===== .section { - margin: 0 24rpx 20rpx; + // 无动画 + animation: none; &__header { - display: flex; - align-items: center; - gap: 12rpx; margin-bottom: 16rpx; padding: 0 4rpx; } &__bar { - width: 6rpx; height: 28rpx; background: $primary; - border-radius: 3rpx; - flex-shrink: 0; - } - - &__title { - font-size: 28rpx; - font-weight: 600; - color: $text; + animation: none; } } - // ===== 卡片 ===== + // ===== 卡片(页面覆盖,继承 page.scss 公共 .card 样式)===== .card { - background: $card-bg; - border-radius: $radius; - overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); &__row { - display: flex; - align-items: center; padding: 24rpx 28rpx; - border-bottom: 1rpx solid $border; - - &:last-child { - border-bottom: none; - } } &__label { width: 120rpx; - font-size: 26rpx; - color: $text-secondary; - flex-shrink: 0; + padding-left: 0; + + &::before { + display: none; + } } &__value { - flex: 1; - font-size: 28rpx; - color: $text; - font-weight: 500; - &--mono { font-family: monospace; color: $primary-dark; @@ -221,9 +198,6 @@ const showPrint = ref(false) } &__value-wrap { - flex: 1; - display: flex; - align-items: center; gap: 12rpx; } }