组对
This commit is contained in:
+419
-358
@@ -22,8 +22,9 @@
|
||||
<text class="section__title">坡口类型</text>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="card__row" :class="{ 'card__row--warn': !form.GrooveTypeName }" @click="showGroovePicker = true">
|
||||
<text class="card__label">坡口类型名称</text>
|
||||
<view class="card__row" :class="{ 'card__row--warn': !form.GrooveTypeName }"
|
||||
@click="showGroovePicker = true">
|
||||
<text class="card__label"><text class="required">*</text>坡口类型名称</text>
|
||||
<view class="card__value-wrap card__value-wrap--clickable">
|
||||
<text class="card__value" :class="{ 'card__value--placeholder': !form.GrooveTypeName }">
|
||||
{{ form.GrooveTypeName || '请选择坡口类型' }}
|
||||
@@ -37,7 +38,9 @@
|
||||
</view>
|
||||
<view class="card__row">
|
||||
<text class="card__label">坡口加工类型</text>
|
||||
<text class="card__value">{{ form.GrooveProcessType || '--' }}</text>
|
||||
<view class="card__value-wrap">
|
||||
<input class="card__input" v-model="form.GrooveProcessType" type="digit" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -52,412 +55,470 @@
|
||||
<view class="card__row">
|
||||
<text class="card__label">坡口角度</text>
|
||||
<view class="card__value-wrap">
|
||||
<text class="card__value">{{ form.GrooveAngle ?? '--' }}</text>
|
||||
<input class="card__input" v-model="form.GrooveAngle" type="digit" placeholder="请输入" />
|
||||
<text class="card__unit">°</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card__row">
|
||||
<text class="card__label">组对间隙</text>
|
||||
<view class="card__value-wrap">
|
||||
<text class="card__value">{{ form.FitupGap ?? '--' }}</text>
|
||||
<input class="card__input" v-model="form.FitupGap" type="digit" placeholder="请输入" />
|
||||
<text class="card__unit">mm</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card__row">
|
||||
<text class="card__label">错边量</text>
|
||||
<view class="card__value-wrap">
|
||||
<text class="card__value">{{ form.Misalignment ?? '--' }}</text>
|
||||
<input class="card__input" v-model="form.Misalignment" type="digit" placeholder="请输入" />
|
||||
<text class="card__unit">mm</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 坡口类型选择器 -->
|
||||
<u-popup v-model="showGroovePicker" mode="bottom" border-radius="16">
|
||||
<view class="picker-panel">
|
||||
<view class="picker-panel__header">
|
||||
<text class="picker-panel__cancel" @click="showGroovePicker = false">取消</text>
|
||||
<text class="picker-panel__title">选择坡口类型</text>
|
||||
<text class="picker-panel__confirm" @click="showGroovePicker = false">确定</text>
|
||||
</view>
|
||||
<scroll-view class="picker-panel__list" scroll-y>
|
||||
<view class="picker-option" v-for="(item, idx) in grooveTypeOptions" :key="idx"
|
||||
:class="{ 'picker-option--active': pickerSelected === idx }"
|
||||
@click="selectGrooveType(idx)">
|
||||
<view class="picker-option__main">
|
||||
<text class="picker-option__label">{{ item.BaseInfoName }}</text>
|
||||
<text class="picker-option__code">{{ item.BaseInfoCode }}</text>
|
||||
</view>
|
||||
<u-icon v-if="pickerSelected === idx" name="checkmark" :size="28" color="#2979ff" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 备注 -->
|
||||
<view class="section">
|
||||
<view class="section__header">
|
||||
<view class="section__bar"></view>
|
||||
<text class="section__title">备注</text>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="card">
|
||||
<view class="card__row">
|
||||
<textarea class="remark-input" v-model="remark" placeholder="请输入备注信息（选填）" :maxlength="200" auto-height />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 现场照片 -->
|
||||
<view class="section">
|
||||
<view class="section__header">
|
||||
<view class="section__bar"></view>
|
||||
<text class="section__title">照片</text>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<nbd-photo-upload ref="photoRef" v-model:attachUrl="attachUrl" typeName="MakeRight" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-bar">
|
||||
<view class="submit-btn" @click="handleSubmit">
|
||||
<text class="submit-btn__text">提交</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 坡口类型选择器 -->
|
||||
<nbd-select v-model="showGroovePicker" title="选择坡口类型" :list="grooveTypeOptions" label-key="BaseInfoName"
|
||||
value-key="BaseInfoCode" @confirm="selectGrooveType" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useUserStore } from '@/store'
|
||||
import { reqPreWeldJointByWeldJointId, reqGetGrooveTypeList } from '@/api/hj'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useUserStore } from '@/store'
|
||||
import { reqPreWeldJointByWeldJointId, reqGetGrooveTypeList, reqSaveFitupCheck } from '@/api/hj'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { currentProject } = storeToRefs(userStore)
|
||||
|
||||
const showGroovePicker = ref(false)
|
||||
const pickerSelected = ref(-1)
|
||||
const grooveTypeOptions = ref([])
|
||||
const userStore = useUserStore()
|
||||
const { userInfo, currentProject } = storeToRefs(userStore)
|
||||
|
||||
const form = ref({
|
||||
WeldJointId: '',
|
||||
WeldJointCode: '',
|
||||
PipelineId: '',
|
||||
PipelineCode: '',
|
||||
ProjectId: '',
|
||||
GrooveTypeId: '',
|
||||
GrooveTypeCode: '',
|
||||
GrooveTypeName: '',
|
||||
GrooveProcessType: '',
|
||||
GrooveAngle: '',
|
||||
FitupGap: '',
|
||||
Misalignment: ''
|
||||
})
|
||||
const showGroovePicker = ref(false)
|
||||
const grooveTypeOptions = ref([])
|
||||
const attachUrl = ref('')
|
||||
const remark = ref('')
|
||||
const photoRef = ref(null)
|
||||
|
||||
const fetchGrooveTypes = async () => {
|
||||
try {
|
||||
const res = await reqGetGrooveTypeList()
|
||||
if (res.code === 1 && res.data) {
|
||||
grooveTypeOptions.value = res.data
|
||||
const form = ref({
|
||||
WeldJointId: '',
|
||||
WeldJointCode: '',
|
||||
PipelineId: '',
|
||||
PipelineCode: '',
|
||||
ProjectId: '',
|
||||
GrooveTypeId: '',
|
||||
GrooveTypeCode: '',
|
||||
GrooveTypeName: '',
|
||||
GrooveProcessType: '',
|
||||
GrooveAngle: '',
|
||||
FitupGap: '',
|
||||
Misalignment: ''
|
||||
})
|
||||
|
||||
const fetchGrooveTypes = async () => {
|
||||
try {
|
||||
const res = await reqGetGrooveTypeList()
|
||||
if (res.code === 1 && res.data) {
|
||||
grooveTypeOptions.value = res.data
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取坡口类型列表失败:', err)
|
||||
}
|
||||
}
|
||||
const selectGrooveType = (item) => {
|
||||
form.value.GrooveTypeId = item.BaseInfoId
|
||||
form.value.GrooveTypeCode = item.BaseInfoCode
|
||||
form.value.GrooveTypeName = item.BaseInfoName
|
||||
showGroovePicker.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchGrooveTypes()
|
||||
})
|
||||
|
||||
onLoad((opt) => {
|
||||
if (opt?.id) {
|
||||
loadData(opt.id)
|
||||
}
|
||||
if (currentProject.value?.ProjectId) {
|
||||
form.value.ProjectId = currentProject.value.ProjectId
|
||||
}
|
||||
})
|
||||
|
||||
const loadData = async (id) => {
|
||||
try {
|
||||
uni.showLoading({ title: '加载中...', mask: true })
|
||||
const res = await reqPreWeldJointByWeldJointId(id)
|
||||
if (res.code === 1 && res.data) {
|
||||
form.value = res.data
|
||||
attachUrl.value = res.data.FitupAttachUrl1 || ""
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载焊口数据失败:', err)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!form.value.GrooveTypeName) {
|
||||
uni.showToast({ title: '请选择坡口类型', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '确定提交组对检查结果吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
if (photoRef.value?.hasPending()) {
|
||||
uni.showLoading({ title: '上传照片中...', mask: true })
|
||||
await photoRef.value.uploadAll()
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
const checkTime = new Date().toISOString()
|
||||
|
||||
const params = {
|
||||
FitupCheckId: form.value.FitupCheckId || '',
|
||||
ProjectId: form.value?.ProjectId,
|
||||
WeldJointId: form.value.WeldJointId,
|
||||
PipelineCode: form.value.PipelineCode || '',
|
||||
WeldJointCode: form.value.WeldJointCode || '',
|
||||
GrooveTypeId: form.value.GrooveTypeId,
|
||||
GrooveTypeCode: form.value.GrooveTypeCode || '',
|
||||
GrooveTypeName: form.value.GrooveTypeName || '',
|
||||
GrooveProcessType: form.value.GrooveProcessType || '',
|
||||
GrooveAngle: Number(form.value.GrooveAngle) || 0,
|
||||
FitupGap: Number(form.value.FitupGap) || 0,
|
||||
Misalignment: Number(form.value.Misalignment) || 0,
|
||||
CheckPerson: userInfo.value?.PersonId || '',
|
||||
CheckPersonName: userInfo.value?.PersonName || '',
|
||||
CheckTime: checkTime,
|
||||
FitupAttachUrl1: attachUrl.value || form.value.FitupAttachUrl1 || '',
|
||||
Remark: remark.value || ''
|
||||
}
|
||||
console.log('提交参数:', params)
|
||||
await reqSaveFitupCheck(params)
|
||||
uni.showToast({ title: '提交成功', icon: 'none' })
|
||||
setTimeout(() => { uni.navigateBack() }, 1500)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取坡口类型列表失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const selectGrooveType = (idx) => {
|
||||
pickerSelected.value = idx
|
||||
const item = grooveTypeOptions.value[idx]
|
||||
form.value.GrooveTypeId = item.BaseInfoId
|
||||
form.value.GrooveTypeCode = item.BaseInfoCode
|
||||
form.value.GrooveTypeName = item.BaseInfoName
|
||||
showGroovePicker.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchGrooveTypes()
|
||||
})
|
||||
|
||||
onLoad((opt) => {
|
||||
if (opt?.id) {
|
||||
loadData(opt.id)
|
||||
}
|
||||
if (currentProject.value?.ProjectId) {
|
||||
form.value.ProjectId = currentProject.value.ProjectId
|
||||
}
|
||||
})
|
||||
|
||||
const loadData = async (id) => {
|
||||
try {
|
||||
uni.showLoading({ title: '加载中...', mask: true })
|
||||
const res = await reqPreWeldJointByWeldJointId(id)
|
||||
if (res.code === 1 && res.data) {
|
||||
form.value = res.data
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载焊口数据失败:', err)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$primary: #2979ff;
|
||||
$primary-light: #e8f0fe;
|
||||
$primary-mid: #d0ddff;
|
||||
$primary-dark: #1a56cc;
|
||||
$bg: #f0f2f5;
|
||||
$text: #0f1724;
|
||||
$text-secondary: #6b7c93;
|
||||
$border: #e8ecf1;
|
||||
$card-bg: #ffffff;
|
||||
$radius: 16rpx;
|
||||
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
$primary: #2979ff;
|
||||
$primary-light: #e8f0fe;
|
||||
$primary-mid: #d0ddff;
|
||||
$primary-dark: #1a56cc;
|
||||
$bg: #f0f2f5;
|
||||
$text: #0f1724;
|
||||
$text-secondary: #6b7c93;
|
||||
$border: #e8ecf1;
|
||||
$card-bg: #ffffff;
|
||||
$radius: 16rpx;
|
||||
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding-bottom: 180rpx;
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
// ===== 焊口主标识 =====
|
||||
.joint-hero {
|
||||
position: relative;
|
||||
margin: 24rpx;
|
||||
padding: 36rpx 32rpx 28rpx;
|
||||
background: $card-bg;
|
||||
border-radius: $radius;
|
||||
box-shadow: $shadow-md;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, $primary, #6ba3ff, $primary);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
// ===== 焊口主标识 =====
|
||||
.joint-hero {
|
||||
@keyframes shimmer {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
display: block;
|
||||
font-size: 52rpx;
|
||||
font-weight: 800;
|
||||
color: $text;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 28rpx;
|
||||
position: relative;
|
||||
margin: 24rpx;
|
||||
padding: 36rpx 32rpx 28rpx;
|
||||
background: $card-bg;
|
||||
border-radius: $radius;
|
||||
box-shadow: $shadow-md;
|
||||
overflow: hidden;
|
||||
padding-left: 24rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, $primary, #6ba3ff, $primary);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% { background-position: 0% 0; }
|
||||
50% { background-position: 100% 0; }
|
||||
}
|
||||
|
||||
&__code {
|
||||
display: block;
|
||||
font-size: 52rpx;
|
||||
font-weight: 800;
|
||||
color: $text;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 28rpx;
|
||||
position: relative;
|
||||
padding-left: 24rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6rpx;
|
||||
bottom: 6rpx;
|
||||
width: 4rpx;
|
||||
background: $primary;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
background: $primary-light;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid $primary-mid;
|
||||
|
||||
.pill-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-secondary;
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
.pill-value {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: $primary-dark;
|
||||
font-family: monospace;
|
||||
}
|
||||
top: 6rpx;
|
||||
bottom: 6rpx;
|
||||
width: 4rpx;
|
||||
background: $primary;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 区块标题 =====
|
||||
.section {
|
||||
margin: 0 24rpx 20rpx;
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 信息卡片 =====
|
||||
.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;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
&--warn .card__label::before {
|
||||
background: #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
|
||||
&__unit {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 坡口类型选择器弹窗 =====
|
||||
.picker-panel {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 32rpx;
|
||||
border-bottom: 1rpx solid $border;
|
||||
}
|
||||
|
||||
&__cancel,
|
||||
&__confirm {
|
||||
font-size: 26rpx;
|
||||
color: $text-secondary;
|
||||
padding: 8rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&__confirm {
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&__list {
|
||||
max-height: 560rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-option {
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
transition: background 0.2s;
|
||||
gap: 8rpx;
|
||||
background: $primary-light;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid $primary-mid;
|
||||
|
||||
&:active {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $primary-light;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $text;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__code {
|
||||
.pill-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-secondary;
|
||||
margin-top: 4rpx;
|
||||
display: block;
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
.pill-value {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: $primary-dark;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 区块标题 =====
|
||||
.section {
|
||||
margin: 0 24rpx 20rpx;
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
&--warn .card__label::before {
|
||||
background: #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 备注 =====
|
||||
.remark-input {
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
color: $text;
|
||||
min-height: 120rpx;
|
||||
padding: 8rpx 0;
|
||||
line-height: 1.6;
|
||||
|
||||
&::placeholder {
|
||||
color: #b0bec5;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 提交栏 =====
|
||||
.submit-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20rpx 24rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, rgba($bg, 0) 0%, $bg 20%);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx;
|
||||
background: linear-gradient(135deg, $primary, #5a9aff);
|
||||
border-radius: 14rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba($primary, 0.3);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user