| | |
| | | </view> |
| | | |
| | | <!-- 标签栏 --> |
| | | <view class="tabs-container"> |
| | | <scroll-view class="tabs" scroll-x="true" show-scrollbar="false"> |
| | | <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab" |
| | | @tap="switchTab(index, tab.id)"> |
| | | {{ tab.projName || tab.fcheckItem || '项目' + (index + 1) }} |
| | | </view> |
| | | </scroll-view> |
| | | <view class="tabs"> |
| | | <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab" |
| | | @tap="switchTab(index, tab.id)"> |
| | | {{ tab.projName || tab.fcheckItem || '项目' + (index + 1) }} |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="tab-content"> |
| | |
| | | <view class="info-label">检验数</view> |
| | | <view class="info-value">{{ formData.levelNum }}</view> |
| | | </view> |
| | | <view v-if="formData.minValue" class="info-item"> |
| | | <!-- 修复:使用更准确的判断条件,避免0被误判为falsy --> |
| | | <view v-if="formData.minValue != null" class="info-item"> |
| | | <view class="info-label">下限</view> |
| | | <view class="info-value">{{ formData.minValue }}</view> |
| | | </view> |
| | | <view v-if="formData.standardValue" class="info-item"> |
| | | <view v-if="formData.standardValue != null" class="info-item"> |
| | | <view class="info-label">标准值</view> |
| | | <view class="info-value">{{ formData.standardValue }}</view> |
| | | </view> |
| | | <view v-if="formData.maxValue" class="info-item"> |
| | | <view v-if="formData.maxValue != null" class="info-item"> |
| | | <view class="info-label">上限</view> |
| | | <view class="info-value">{{ formData.maxValue }}</view> |
| | | </view> |
| | |
| | | <view class="section-header">检验结果</view> |
| | | <view class="section-body"> |
| | | <view class="info-grid"> |
| | | <view v-if="formData.result" class="info-item"> |
| | | <view v-if="formData.result != null" class="info-item"> |
| | | <view class="info-label">预览结果</view> |
| | | <view class="info-value">{{ formData.result }}</view> |
| | | </view> |
| | | <view v-if="formData.remarks" class="info-item"> |
| | | <view v-if="formData.remarks != null" class="info-item"> |
| | | <view class="info-label">备注</view> |
| | | <view class="info-value danger">{{ formData.remarks }}</view> |
| | | </view> |
| | |
| | | <view class="section"> |
| | | <view class="section-header">检验结果录入</view> |
| | | <view class="section-body"> |
| | | <view v-if="!formData.maxValue && !formData.minValue" class="info-item edit"> |
| | | <!-- 修复:使用更准确的判断条件,避免0被误判为falsy --> |
| | | <view v-if="formData.maxValue == null && formData.minValue == null" class="info-item edit"> |
| | | <view class="info-label" style="color: #F56C6C">提示</view> |
| | | <view class="info-value" style="color: #F56C6C">没有最大值和最小值时填写0(未通过检验)或1(通过检验)</view> |
| | | </view> |
| | | |
| | | <view class="input-group input1"> |
| | | <view class="input-wrapper"> |
| | | <input v-if="tableData.length < formData.levelNum" v-model="formData.fcheckResu" class="result-input" |
| | | placeholder="请输入检验结果..." type="number"/> |
| | | <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit">保存结果 |
| | | </button> |
| | | <button v-if="isShowImg" class="btn upload-btn" @click="previewImage"> |
| | | <uni-icons color="#fff" size="16" type="image"></uni-icons> |
| | | 查看图片 |
| | | <button class="btn upload-btn" @click="chooseImage"> |
| | | <uni-icons type="upload" size="16" color="#fff"></uni-icons> |
| | | 上传/查看图片 |
| | | </button> |
| | | <button class="btn upload-btn" @click="saveRemarks"> |
| | | <uni-icons color="#fff" size="16" type="compose"></uni-icons> |
| | | <uni-icons type="compose" size="16" color="#fff"></uni-icons> |
| | | 备注 |
| | | </button> |
| | | <input v-if="(tableData.length < formData.levelNum)" v-model="formData.fcheckResu" class="result-input" |
| | | placeholder="请输入检验结果..." type="number"/> |
| | | <button v-if="(tableData.length < formData.levelNum)" class="btn primary-btn" @click="submit" style="margin: 0px;">保存结果 |
| | | </button> |
| | | </view> |
| | | </view> |
| | |
| | | <!-- 响应式设计的第二个输入组 --> |
| | | <view class="input-group input2"> |
| | | <view class="input-wrapper"> |
| | | <button v-if="isShowImg" class="btn upload-btn" @click="previewImage"> |
| | | <uni-icons color="#fff" size="16" type="image"></uni-icons> |
| | | 查看图片 |
| | | <button class="btn upload-btn" @click="chooseImage "> |
| | | <uni-icons type="upload" size="16" color="#fff"></uni-icons> |
| | | 上传/查看图片 |
| | | </button> |
| | | <button class="btn upload-btn" @click="saveRemarks"> |
| | | <uni-icons color="#fff" size="16" type="compose"></uni-icons> |
| | | <button v-if="current" class="btn upload-btn" @click="saveRemarks "> |
| | | <uni-icons type="compose" size="16" color="#fff"></uni-icons> |
| | | 备注 |
| | | </button> |
| | | </view> |
| | | <view class="input-wrapper" style="margin-top: 15px;"> |
| | | <input v-if="tableData.length < formData.levelNum" v-model="formData.fcheckResu" class="result-input" |
| | | <input v-if="(tableData.length < formData.levelNum)" v-model="formData.fcheckResu" class="result-input" |
| | | placeholder="请输入检验结果..." type="number"/> |
| | | <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit">保存结果 |
| | | </button> |
| | | |
| | | <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit" style="margin: 0px;" >保存结果 |
| | | </button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 结果表格 --> |
| | | <view v-if="tableData.length > 0" class="simple-table-container"> |
| | | <view class="simple-table-header"> |
| | | <view class="simple-title">检验记录 ({{ tableData.length }}/{{ formData.levelNum }})</view> |
| | | <view :class="{'completed': !(tableData.length < formData.levelNum)}" class="simple-status"> |
| | | {{ tableData.length < formData.levelNum ? '进行中' : '已完成' }} |
| | | </view> |
| | | <view v-if="tableData.length > 0" class="table-container"> |
| | | <view class="table-header"> |
| | | <view class="th">编号</view> |
| | | <view class="th">检验结果</view> |
| | | <view class="th" v-if="current">操作</view> |
| | | </view> |
| | | |
| | | <view class="simple-table"> |
| | | <view class="simple-header-row"> |
| | | <view class="simple-header-cell">编号</view> |
| | | <view class="simple-header-cell">检验结果</view> |
| | | <view class="simple-header-cell">操作</view> |
| | | <view v-for="(item, index) in tableData" :key="index" class="table-row"> |
| | | <view class="td">{{ index + 1 }}</view> |
| | | <view class="td"> |
| | | <view :class="['result-badge', item.fcheckResu]"> |
| | | {{ item.fcheckResu }} |
| | | </view> |
| | | </view> |
| | | |
| | | <view v-for="(item, index) in tableData" :key="index" class="simple-data-row"> |
| | | <view class="simple-data-cell simple-index"> |
| | | {{ index + 1 }} |
| | | </view> |
| | | <view class="simple-data-cell simple-result"> |
| | | <!-- 数字结果样式 --> |
| | | <view v-if="isNumber && !isNaN(parseFloat(item.fcheckResu))" class="simple-number-result"> |
| | | <view class="result-value">{{ item.fcheckResu }}</view> |
| | | <view v-if="formData.unitName" class="result-unit">{{ formData.unitName }}</view> |
| | | <view :class="{'pass': isInRange(item.fcheckResu), 'fail': !isInRange(item.fcheckResu)}" |
| | | class="result-status"> |
| | | {{ isInRange(item.fcheckResu) ? '合格' : '不合格' }} |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- NG/OK状态样式 --> |
| | | <view v-else class="simple-status-result"> |
| | | <view :class="{'pass': item.fcheckResu === '1', 'fail': item.fcheckResu !== '1'}" class="simple-status"> |
| | | {{ item.fcheckResu === '1' ? '合格' : '不合格' }} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="simple-data-cell simple-action"> |
| | | <button v-if="!isNumber" class="simple-btn" @click="numberEdit(item)"> |
| | | {{ editResult(item.fcheckResu) }} |
| | | </button> |
| | | <button v-if="isNumber" class="simple-btn" @click="toDetail(item)"> |
| | | 修改 |
| | | </button> |
| | | </view> |
| | | <view class="td" v-if="current" > |
| | | <button v-if="!isNumber" class="btn danger-btn" @click="numberEdit(item)"> |
| | | {{ editResult(item.fcheckResu) }} |
| | | </button> |
| | | <button v-if="isNumber" class="btn danger-btn" @click="toDetail(item)"> |
| | | 修改 |
| | | </button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | remarks: "", |
| | | remarksPopup: false, |
| | | currentTab: 0, |
| | | tabs: [] |
| | | tabs: [], |
| | | current: true // 控制是否可编辑 |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | return 0; |
| | | } |
| | | }); |
| | | |
| | | // 排序后自动跳转到第一个标签 |
| | | this.currentTab = 0; |
| | | if (this.tabs.length > 0) { |
| | | this.id = this.tabs[0].id; |
| | | this.refreshResult(); |
| | | } |
| | | } else { |
| | | // 没有项目时至少添加当前项目到标签 |
| | | this.tabs = [{id: this.id, projName: this.formData.projName || '当前项目'}]; |
| | |
| | | let count = this.formData.levelNum; |
| | | let fstand = "√"; |
| | | |
| | | //有最大值和最小值就根据是否符合标准值更新判定结果,没有最大值和最小值就根据是否通过检验判定结果 |
| | | if (this.formData.maxValue && this.formData.minValue) { |
| | | // 修复:使用更准确的判断条件,避免0被误判为falsy |
| | | if (this.formData.maxValue != null && this.formData.minValue != null) { |
| | | |
| | | if (!this.formData.fcheckResu) { |
| | | this.$showMessage("请输入检验值"); |
| | |
| | | this.isShowImg = true; |
| | | this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData; |
| | | } |
| | | if (this.formData.maxValue && this.formData.minValue && this.formData.standardValue) { |
| | | // 修复:使用更准确的判断条件,避免0被误判为falsy |
| | | if (this.formData.maxValue != null && this.formData.minValue != null && this.formData.standardValue != null) { |
| | | this.isNumber = true; |
| | | } |
| | | }) |
| | |
| | | |
| | | let fstand = "√"; |
| | | |
| | | if (this.formData.maxValue && this.formData.minValue) { |
| | | // 修复:使用更准确的判断条件,避免0被误判为falsy |
| | | if (this.formData.maxValue != null && this.formData.minValue != null) { |
| | | |
| | | if (!this.editData.fcheckResu) { |
| | | this.$showMessage("请输入检验值"); |
| | |
| | | this.editData.fcheckResu = 1 |
| | | } |
| | | |
| | | // 改进后的逻辑:根据检验结果值来判断合格与否 |
| | | if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) { |
| | | // 0表示不合格,1表示合格 |
| | | if (this.editData.fcheckResu == 0) { |
| | | fstand = "×"; |
| | | } else { |
| | | fstand = "√"; |
| | | } |
| | | } else { |
| | | this.$showMessage("无标准值时,检验结果只能为0或1!"); |
| | |
| | | this.loadTabItems(); |
| | | }) |
| | | }, |
| | | // 上传图片 |
| | | chooseImage() { |
| | | uni.navigateTo({ |
| | | url: 'ImageItem?id=777' + this.formData.id + '&gid=' + this.gid |
| | | }); |
| | | }, |
| | | saveRemarks() { |
| | | this.remarksPopup = !this.remarksPopup; |
| | | this.remarks = this.formData.remarks; |
| | |
| | | }, |
| | | // 判断数字是否在范围内 |
| | | isInRange(value) { |
| | | if (!this.formData.maxValue || !this.formData.minValue) return true; |
| | | // 修复:使用更准确的判断条件,避免0被误判为falsy |
| | | if (this.formData.maxValue == null || this.formData.minValue == null) return true; |
| | | const numValue = parseFloat(value); |
| | | return numValue >= parseFloat(this.formData.minValue) && |
| | | numValue <= parseFloat(this.formData.maxValue); |
| | | }, |
| | | // 获取数字结果的样式类 |
| | | getNumberResultClass(value) { |
| | | if (!this.formData.maxValue || !this.formData.minValue) return 'number-normal'; |
| | | // 修复:使用更准确的判断条件,避免0被误判为falsy |
| | | if (this.formData.maxValue == null || this.formData.minValue == null) return 'number-normal'; |
| | | return this.isInRange(value) ? 'number-pass' : 'number-fail'; |
| | | }, |
| | | // 获取状态结果的样式类 |
| | |
| | | this.billNo = params["billNo"]; |
| | | this.gid = params["gid"]; |
| | | this.currentTab = parseInt(params["index"] || 0); |
| | | this.current = params["current"] !== 'B'; // B表示已完成状态,不可编辑 |
| | | |
| | | this.refreshResult(); |
| | | this.loadTabItems(); |
| | |
| | | padding: 20px; |
| | | border-bottom: 1px solid $border-color; |
| | | background: linear-gradient(90deg, #f0f7ff, #e1f0ff); |
| | | margin-bottom: 0; /* 调整,因为下面有tab栏 */ |
| | | } |
| | | |
| | | .header .title { |
| | | font-size: 24px; |
| | | color: #333; |
| | | margin-bottom: 10px; |
| | | } |
| | | .title { |
| | | font-size: 24px; |
| | | color: #333; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .header .order-number { |
| | | color: #666; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | /* 标签栏样式 */ |
| | | .tabs-container { |
| | | width: 100%; |
| | | position: relative; |
| | | background-color: $bg-color; |
| | | border-bottom: 1px solid $border-color; |
| | | .order-number { |
| | | color: #666; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | |
| | | .tabs { |
| | | display: flex; |
| | | white-space: nowrap; |
| | | overflow-x: auto; |
| | | scrollbar-width: none; /* Firefox */ |
| | | -ms-overflow-style: none; /* IE and Edge */ |
| | | } |
| | | background-color: $bg-color; |
| | | border-bottom: 1px solid $border-color; |
| | | |
| | | .tabs::-webkit-scrollbar { |
| | | display: none; /* Chrome, Safari and Opera */ |
| | | } |
| | | .tab { |
| | | flex: 1; |
| | | text-align: center; |
| | | padding: 12px 0; |
| | | border-right: 1px solid $border-color; |
| | | color: #666; |
| | | transition: all 0.3s; |
| | | |
| | | .tab { |
| | | display: inline-block; |
| | | padding: 12px 20px; |
| | | text-align: center; |
| | | color: #666; |
| | | transition: all 0.3s; |
| | | border-right: 1px solid $border-color; |
| | | min-width: 100px; |
| | | } |
| | | &:last-child { |
| | | border-right: none; |
| | | } |
| | | |
| | | .tab.active { |
| | | background-color: #fff; |
| | | color: $primary-color; |
| | | font-weight: bold; |
| | | position: relative; |
| | | } |
| | | &.active { |
| | | background-color: #fff; |
| | | color: $primary-color; |
| | | font-weight: bold; |
| | | position: relative; |
| | | |
| | | .tab.active::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: 2px; |
| | | background-color: $primary-color; |
| | | &::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: 2px; |
| | | background-color: $primary-color; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tab-content { |
| | |
| | | color: #fff; |
| | | padding: 0 10px; |
| | | margin: 0; |
| | | height: 45px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border: none; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .primary-btn { |
| | | height: 45px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border: none; |
| | | border-radius: 4px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* 简洁表格样式 - 适合年长用户 */ |
| | | .simple-table-container { |
| | | margin: 20px 0; |
| | | border: 2px solid #ddd; |
| | | border-radius: 8px; |
| | | background: #fff; |
| | | } |
| | | |
| | | .simple-table-header { |
| | | padding: 15px 20px; |
| | | background: #f5f7fa; |
| | | border-bottom: 2px solid #ddd; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | .simple-title { |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | |
| | | .simple-status { |
| | | padding: 8px 16px; |
| | | border-radius: 6px; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | background: #ffc107; |
| | | color: #333; |
| | | } |
| | | |
| | | .simple-status.completed { |
| | | background: #28a745; |
| | | color: #fff; |
| | | } |
| | | |
| | | .simple-table { |
| | | width: 100%; |
| | | } |
| | | |
| | | .simple-header-row { |
| | | display: flex; |
| | | background: #e9ecef; |
| | | border-bottom: 2px solid #ddd; |
| | | } |
| | | |
| | | .simple-header-cell { |
| | | flex: 1; |
| | | padding: 15px 20px; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | text-align: center; |
| | | border-right: 1px solid #ddd; |
| | | } |
| | | |
| | | .simple-header-cell:first-child { |
| | | flex: 0 0 80px; |
| | | } |
| | | |
| | | .simple-header-cell:last-child { |
| | | border-right: none; |
| | | flex: 0 0 120px; |
| | | } |
| | | |
| | | .simple-data-row { |
| | | display: flex; |
| | | border-bottom: 1px solid #ddd; |
| | | } |
| | | |
| | | .simple-data-row:nth-child(even) { |
| | | background: #f8f9fa; |
| | | } |
| | | |
| | | .simple-data-cell { |
| | | flex: 1; |
| | | padding: 15px 20px; |
| | | text-align: center; |
| | | border-right: 1px solid #ddd; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .simple-index { |
| | | flex: 0 0 80px; |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | |
| | | .simple-result { |
| | | text-align: left; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .simple-action { |
| | | border-right: none; |
| | | flex: 0 0 120px; |
| | | } |
| | | |
| | | .simple-number-result { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | width: 100%; |
| | | } |
| | | |
| | | .result-value { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | |
| | | .result-unit { |
| | | font-size: 14px; |
| | | color: #666; |
| | | } |
| | | |
| | | .result-status { |
| | | padding: 6px 12px; |
| | | .table-container { |
| | | border: 1px solid $border-color; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | margin-left: auto; |
| | | } |
| | | margin-top: 20px; |
| | | |
| | | .result-status.pass { |
| | | background: #d4edda; |
| | | color: #155724; |
| | | border: 1px solid #c3e6cb; |
| | | } |
| | | |
| | | .result-status.fail { |
| | | background: #f8d7da; |
| | | color: #721c24; |
| | | border: 1px solid #f5c6cb; |
| | | } |
| | | |
| | | .simple-status-result { |
| | | width: 100%; |
| | | } |
| | | |
| | | .simple-status { |
| | | padding: 10px 20px; |
| | | border-radius: 6px; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | text-align: center; |
| | | display: inline-block; |
| | | } |
| | | |
| | | .simple-status.pass { |
| | | background: #28a745; |
| | | color: #fff; |
| | | } |
| | | |
| | | .simple-status.fail { |
| | | background: #dc3545; |
| | | color: #fff; |
| | | } |
| | | |
| | | .simple-btn { |
| | | padding: 10px 16px; |
| | | background: #007bff; |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 6px; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | cursor: pointer; |
| | | min-width: 80px; |
| | | } |
| | | |
| | | .simple-btn:active { |
| | | background: #0056b3; |
| | | } |
| | | |
| | | // 新的结果显示样式 |
| | | .result-display { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | width: 100%; |
| | | } |
| | | |
| | | // 数字结果样式 |
| | | .number-result { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | padding: 8px 12px; |
| | | border-radius: 8px; |
| | | min-width: 60px; |
| | | position: relative; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | |
| | | &.number-pass { |
| | | background: linear-gradient(135deg, #e8f5e8, #f0f9f0); |
| | | border: 2px solid #67C23A; |
| | | } |
| | | |
| | | &.number-fail { |
| | | background: linear-gradient(135deg, #fdeaea, #fef0f0); |
| | | border: 2px solid #F56C6C; |
| | | } |
| | | |
| | | &.number-normal { |
| | | background: linear-gradient(135deg, #f5f7fa, #fafbfc); |
| | | border: 2px solid #909399; |
| | | } |
| | | |
| | | .number-value { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .number-unit { |
| | | font-size: 10px; |
| | | color: #666; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .number-status { |
| | | position: absolute; |
| | | top: -4px; |
| | | right: -4px; |
| | | background: white; |
| | | border-radius: 50%; |
| | | width: 20px; |
| | | height: 20px; |
| | | .table-header { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
| | | } |
| | | } |
| | | background-color: $bg-color; |
| | | border-bottom: 1px solid $border-color; |
| | | |
| | | // 状态结果样式 |
| | | .status-result { |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 8px 16px; |
| | | border-radius: 20px; |
| | | font-weight: bold; |
| | | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); |
| | | transition: all 0.3s ease; |
| | | |
| | | &.status-pass { |
| | | background: linear-gradient(135deg, #67C23A, #85ce61); |
| | | color: white; |
| | | .th { |
| | | flex: 1; |
| | | padding: 12px; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | |
| | | &.status-fail { |
| | | background: linear-gradient(135deg, #F56C6C, #f78989); |
| | | color: white; |
| | | } |
| | | |
| | | .status-icon { |
| | | margin-right: 6px; |
| | | .table-row { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | border-bottom: 1px solid $border-color; |
| | | padding: 12px; |
| | | |
| | | .status-text { |
| | | font-size: 14px; |
| | | letter-spacing: 0.5px; |
| | | } |
| | | &:last-child { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | &:hover { |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| | | .td { |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 保留原有样式作为备用 |
| | | .result-badge { |
| | | display: inline-block; |
| | | padding: 4px 8px; |
| | |
| | | } |
| | | } |
| | | |
| | | .btn { |
| | | padding: 8px 20px; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | line-height: 1; |
| | | .action-buttons { |
| | | margin-top: 20px; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 12px; |
| | | |
| | | &.primary-btn { |
| | | background-color: $primary-color; |
| | | color: #fff; |
| | | } |
| | | .btn { |
| | | padding: 8px 20px; |
| | | border-radius: 4px; |
| | | |
| | | &.danger-btn { |
| | | background-color: $danger-color; |
| | | color: #fff; |
| | | } |
| | | &.primary-btn { |
| | | background-color: $primary-color; |
| | | color: #fff; |
| | | height: 45px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border: none; |
| | | border-radius: 4px; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | &.cancel-btn { |
| | | background-color: #909399; |
| | | color: #fff; |
| | | &.cancel-btn { |
| | | background-color: #909399; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .popup { |
| | | background-color: #fff; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); |
| | | width: 80%; |
| | | max-width: 500px; |
| | | border: 1px solid #ccc; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| | | width: 68vw; |
| | | /* 设置宽度为视口宽度的80% */ |
| | | height: 25vh; |
| | | /* 设置高度为视口高度的80% */ |
| | | } |
| | | |
| | | h3 { |
| | | margin-top: 0; |
| | | color: #2c3e50; |
| | | border-bottom: 1px solid #eee; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .form-group { |
| | | margin-bottom: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .form-label { |
| | | margin-bottom: 5px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .form-input { |
| | | padding: 8px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .popup-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 10px; |
| | | margin-top: 20px; |
| | | } |
| | | .updateBut { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | .input1 { |
| | |
| | | |
| | | .info-grid { |
| | | grid-template-columns: repeat(2, 1fr); |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 768px) { |
| | | .info-grid { |
| | | grid-template-columns: repeat(2, 1fr); |
| | | } |
| | | |
| | | .simple-table-header { |
| | | padding: 12px 16px; |
| | | } |
| | | |
| | | .simple-title { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .simple-header-cell, |
| | | .simple-data-cell { |
| | | padding: 12px 16px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .simple-index { |
| | | flex: 0 0 60px; |
| | | } |
| | | |
| | | .simple-action { |
| | | flex: 0 0 100px; |
| | | } |
| | | |
| | | .result-value { |
| | | font-size: 18px; |
| | | } |
| | | } |
| | | </style> |