yangjl/sh-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
杨家亮
2026-07-06 17:56:55 +08:00
parent dd792ab197
commit 52ac32ff95
5 changed files with 158 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/page.scss
+112 -12
View File
@@ -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;
}
}
}
}
components/nbd-anti-record.vue
+16 -30
View File
@@ -87,8 +87,8 @@
</view>
<!-- 弹窗：全部记录 -->
<view class="anti-record__overlay" v-if="showPopup" @click="showPopup = false">
<view class="anti-record__popup" @click.stop>
<u-popup v-model="showPopup" mode="bottom" :safe-area-inset-bottom="true">
<view class="anti-record__popup">
<view class="anti-record__popup-hd">
<text class="anti-record__popup-title">全部防腐记录</text>
<text class="anti-record__popup-close" @click="showPopup = false">✕</text>
@@ -162,7 +162,7 @@
</view>
</scroll-view>
</view>
</view>
</u-popup>
</template>
</view>
</template>
@@ -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);
}
}
</style>
scanpages/hj/do_anti_rust.vue
-191
View File
@@ -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 {
scanpages/hj/make_right.vue
+20 -113
View File
@@ -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;
}
}
scanpages/hj/materials_detail.vue
+10 -36
View File
@@ -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;
}
}