称重抓取

src/views/weightManage/index.vue

@@ -25,19 +25,19 @@
         <div class="main-content">
           <!-- 左侧表单 -->
           <div class="left-section">
-            <a-image  v-if="!formData.photoUrl" :src="formData.photoUrl"/>
+            <a-image v-if="!formData.photoUrl" :src="formData.photoUrl" />
             <img v-else :src="formData.photoUrl" class="sample-image square-image" alt="样图">
-            
+
             <a-form :model="formData" layout="vertical">
               <div class="form-row">
                 <div class="form-item">
                   <a-form-item label="物料名称">
-                    <a-input v-model="formData.materialName" placeholder="物料名称" disabled /> 
+                    <a-input v-model="formData.materialName" placeholder="物料名称" disabled />
                   </a-form-item>
                 </div>
                 <div class="form-item">
                   <a-form-item label="物料规格">
-                    <a-input v-model="formData.materialSpec" placeholder="物料规格" disabled /> 
+                    <a-input v-model="formData.materialSpec" placeholder="物料规格" disabled />
                   </a-form-item>
                 </div>
               </div>
@@ -57,7 +57,7 @@
                 <div class="form-item">
                   <a-form-item label="物料编码">
                     <a-input
-                      v-model="formData.inputMaterialCode" 
+                      v-model="formData.inputMaterialCode"
                       placeholder="请使用扫码枪扫描物料编码"
                       @change="handleMaterialCodeChange"
                     />
@@ -73,7 +73,7 @@
               <div class="image-placeholder square-image">实时画面 相机1</div>
               <div class="image-placeholder square-image">实时画面 相机2</div>
             </div>
-            
+
             <div class="info-section">
               <div class="info-card">
                 <h4>识别信息</h4>
@@ -87,18 +87,19 @@
                 </div>
               </div>
 
-
               <div class="info-card">
                 <h4>比对结果</h4>
                 <div class="info-item">
                   <span class="label">比对结果:</span>
-                  <span class="value match-result" :class="{
-                    'match-success': formData.matchResult === 'success',
-                    'match-failed': formData.matchResult === 'failed',
-                    'match-pending': !formData.matchResult
-                  }">
-                    <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;"/>
-                    <icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;"/>
+                  <span
+                    class="value match-result" :class="{
+                      'match-success': formData.matchResult === 'success',
+                      'match-failed': formData.matchResult === 'failed',
+                      'match-pending': !formData.matchResult,
+                    }"
+                  >
+                    <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;" />
+                    <icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;" />
 
                     {{ formData.matchResult === 'success' ? '成功' : formData.matchResult === 'failed' ? '失败' : '-' }}
                   </span>
@@ -109,7 +110,7 @@
         </div>
       </div>
 
-      <!-- 称重登记页面 -->
+      <!-- 称重登记页面 - 这里放FLV播放器 -->
       <div v-else-if="activeStep === 2" class="step-content">
         <div class="weighing-content">
           <!-- 左侧输入区域 -->
@@ -135,10 +136,46 @@
             <div class="form-row">
               <div class="form-item">
                 <label>对应重量:</label>
-                <a-input v-model="inputWeight" placeholder="-" disabled/>
+                <a-input v-model="inputWeight" placeholder="-" disabled />
               </div>
             </div>
-            <div class="image-placeholder large-image">实时画面</div>
+
+            <!-- 这里是摄像头画面 - 替换成FLV播放器 -->
+            <div class="video-container large-image">
+              <video
+                ref="cameraVideo"
+                autoplay
+                muted
+                playsinline
+                style="width: 100%; height: 100%; object-fit: cover;"
+              ></video>
+
+              <!-- 加载状态 -->
+              <div v-if="cameraStatus === 'connecting'" class="video-overlay">
+                <a-spin />
+                <span style="margin-left: 8px;">加载中...</span>
+              </div>
+
+              <!-- 错误状态 -->
+              <div v-if="cameraStatus === 'error'" class="video-overlay error">
+                <icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
+                <span>连接失败</span>
+                <a-button size="small" type="primary" @click="reconnectCamera">重试</a-button>
+              </div>
+
+              <!-- 未连接状态 -->
+              <div v-if="cameraStatus === 'disconnected'" class="video-overlay">
+                <icon-pause-circle-fill style="color: #999; font-size: 24px;" />
+                <span>未连接</span>
+                <a-button size="small" type="primary" @click="initCamera">连接</a-button>
+              </div>
+
+              <!-- 摄像头状态标识 -->
+              <div v-if="cameraStatus === 'connected'" class="camera-badge">
+                <span class="live-badge">LIVE</span>
+              </div>
+            </div>
+
             <div class="weighing-actions">
               <a-button type="primary" @click="handleConfirm">确定</a-button>
               <a-button style="margin-left: 12px;" @click="handleReset">重置</a-button>
@@ -170,7 +207,7 @@
       <div v-else-if="activeStep === 3" class="step-content">
         <div class="completion-content">
           <div class="completion-icon">
-            <a-icon type="check-circle" :size="64" style="color: #52c41a;" />
+            <icon-check-circle-fill :size="64" style="color: #52c41a;" />
           </div>
           <h2>创建完成</h2>
           <p>任务已成功创建，以下是任务详情：</p>
@@ -206,17 +243,17 @@
       <div class="action-buttons">
         <a-button
           v-if="activeStep > 1 && activeStep < 3"
-          @click="handlePrevious"
           class="previous-button"
+          @click="handlePrevious"
         >
           上一步
         </a-button>
-        <a-button 
-          v-if="activeStep < 3" 
-          type="primary" 
-          @click="handleNext"
+        <a-button
+          v-if="activeStep < 3"
+          type="primary"
           :disabled="activeStep === 1 && formData.matchResult !== 'success'"
           class="next-button"
+          @click="handleNext"
         >
           {{ activeStep === 2 ? '完成' : '下一步' }}
         </a-button>
@@ -226,9 +263,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-import { Modal } from '@arco-design/web-vue'
-import { getMaterialDetail } from "@/apis/weightManage/weightManage";
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import { catchPhoto } from '@/apis/material/materialInfo'
+import { getMaterialDetail } from '@/apis/weightManage/weightManage'
+
+defineOptions({ name: 'WeightManage' })
+
+// 动态导入flv.js
+const flvjs = ref<any>(null)
 
 // 当前步骤
 const activeStep = ref(1)
@@ -241,7 +284,252 @@ const formData = reactive({
   materialSpec: '', // 物料规格
   unitWeight: 0, // 重量
   photoUrl: '', // 样图URL
-  matchResult: '' // 比对结果
+  matchResult: '', // 比对结果
+})
+
+// 摄像头状态
+const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
+
+// 视频元素引用
+const cameraVideo = ref<HTMLVideoElement | null>(null)
+
+// FLV播放器实例
+let player: any = null
+
+const reconnectCount = ref(0)
+const maxReconnectAttempts = 5
+const reconnectTimer = ref<any>(null)
+
+// 直接写死FLV流地址（根据你的实际地址修改）
+const FLV_URL = 'http://192.168.2.87:8866/live?url=rtsp://admin:admin%40123@192.168.2.59:554/media/video1' // 摄像头的FLV地址
+
+// 加载flv.js
+const loadFlvJs = async () => {
+  if (typeof window !== 'undefined') {
+    const module = await import('flv.js')
+    flvjs.value = module.default
+  }
+}
+
+// 初始化摄像头
+const initCamera = () => {
+  if (!cameraVideo.value || !flvjs.value) {
+    return
+  }
+
+  // 检查浏览器支持
+  if (!flvjs.value.isSupported()) {
+    Message.error('当前浏览器不支持FLV播放')
+    cameraStatus.value = 'error'
+    return
+  }
+
+  cameraStatus.value = 'connecting'
+
+  // 清除之前的重连定时器
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+
+  try {
+    // 销毁旧的播放器
+    if (player) {
+      player.destroy()
+      player = null
+    }
+
+    // 创建新的播放器
+    player = flvjs.value.createPlayer({
+      type: 'flv',
+      url: FLV_URL,
+      isLive: true,
+      hasAudio: false,
+      hasVideo: true,
+      enableStashBuffer: false,
+      stashInitialSize: 128,
+      enableWorker: true,
+      autoCleanupSourceBuffer: true,
+    })
+
+    // 绑定视频元素
+    player.attachMediaElement(cameraVideo.value)
+
+    // 加载并播放
+    player.load()
+    player.play().then(() => {
+      cameraStatus.value = 'connected'
+      reconnectCount.value = 0 // 连接成功，重置重连计数
+    }).catch((error: any) => {
+      cameraStatus.value = 'error'
+      Message.error('摄像头播放失败,正在重连')
+      // 触发自动重连
+      handleReconnect()
+    })
+
+    // 监听各种事件
+    player.on(flvjs.value.Events.ERROR, (err: any) => {
+      cameraStatus.value = 'error'
+      // 触发自动重连
+      handleReconnect()
+    })
+
+    player.on(flvjs.value.Events.STALLED, () => {
+      // 可以在这里处理卡顿，但不立即重连
+    })
+
+    player.on(flvjs.value.Events.RECOVERED_EARLY, () => {
+      if (cameraStatus.value !== 'connected') {
+        cameraStatus.value = 'connected'
+      }
+    })
+  } catch (error) {
+    cameraStatus.value = 'error'
+    handleReconnect()
+  }
+}
+
+// 处理自动重连
+const handleReconnect = () => {
+  // 只有当前在称重页面才重连
+  if (activeStep.value !== 2) return
+
+  // 检查重连次数
+  if (reconnectCount.value >= maxReconnectAttempts) {
+    Message.error('摄像头连接失败，请手动重试')
+    return
+  }
+
+  // 增加重连计数
+  reconnectCount.value++
+
+  // 计算重连延迟（指数退避）
+  const delay = Math.min(1000 * 2 ** (reconnectCount.value - 1), 30000)
+
+  // 清除旧的定时器
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+  }
+
+  // 设置新的重连定时器
+  reconnectTimer.value = setTimeout(() => {
+    initCamera()
+  }, delay)
+}
+
+// 重新连接摄像头（手动）
+const reconnectCamera = () => {
+  reconnectCount.value = 0 // 手动重连时重置计数
+  initCamera()
+}
+
+// 添加一个定时检查状态的函数
+const checkCameraStatus = () => {
+  if (!player || !cameraVideo.value) return
+
+  try {
+    // 检查播放器状态
+    if (player.isPlaying && !player.isPlaying()) {
+      if (cameraStatus.value === 'connected') {
+        cameraStatus.value = 'error'
+        handleReconnect()
+      }
+    }
+  } catch (error) {
+  }
+}
+
+// 启动状态检查定时器
+let statusCheckTimer: any = null
+
+// 监听步骤变化
+watch(activeStep, (newVal) => {
+  if (newVal === 2) {
+    // 进入称重登记页面，启动摄像头
+    reconnectCount.value = 0 // 重置重连计数
+    nextTick(() => {
+      initCamera()
+    })
+
+    // 启动状态检查（每30秒检查一次）
+    statusCheckTimer = setInterval(checkCameraStatus, 30000)
+  } else {
+    // 离开称重登记页面，停止摄像头和定时器
+    stopCamera()
+    if (statusCheckTimer) {
+      clearInterval(statusCheckTimer)
+      statusCheckTimer = null
+    }
+    if (reconnectTimer.value) {
+      clearTimeout(reconnectTimer.value)
+      reconnectTimer.value = null
+    }
+    reconnectCount.value = 0
+  }
+})
+
+// 组件卸载时清理所有定时器
+onBeforeUnmount(() => {
+  stopCamera()
+  if (statusCheckTimer) {
+    clearInterval(statusCheckTimer)
+    statusCheckTimer = null
+  }
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+})
+
+// 重新连接摄像头
+// const reconnectCamera = () => {
+//   if (player) {
+//     player.unload()
+//     player.detachMediaElement()
+//     player.destroy()
+//     player = null
+//   }
+//   setTimeout(() => initCamera(), 1000)
+// }
+
+// 停止摄像头
+const stopCamera = () => {
+  if (player) {
+    player.pause()
+    player.unload()
+    player.detachMediaElement()
+    player.destroy()
+    player = null
+    cameraStatus.value = 'disconnected'
+  }
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+  reconnectCount.value = 0
+}
+
+// 监听步骤变化
+watch(activeStep, (newVal) => {
+  if (newVal === 2) {
+    // 进入称重登记页面，启动摄像头
+    nextTick(() => {
+      initCamera()
+    })
+  } else {
+    // 离开称重登记页面，停止摄像头
+    stopCamera()
+  }
+})
+
+// 组件挂载时
+onMounted(async () => {
+  await loadFlvJs()
+})
+
+// 组件卸载时
+onBeforeUnmount(() => {
+  stopCamera()
 })
 
 // 称重登记页面数据
@@ -251,9 +539,7 @@ const calculatedWeight = ref('')
 const weighingCount = ref(1)
 
 // 称重列表数据
-const weighingList = ref([
-  // 初始数据可以在这里添加
-])
+const weighingList = ref<any[]>([])
 
 // 任务ID
 const taskId = computed(() => {
@@ -267,42 +553,54 @@ const columns = [
   {
     title: '称重次数',
     dataIndex: 'count',
-    key: 'count'
+    key: 'count',
   },
   {
     title: '数量',
     dataIndex: 'quantity',
     key: 'quantity',
-    className: 'green-bg'
+    className: 'green-bg',
   },
   {
     title: '重量',
     dataIndex: 'weight',
     key: 'weight',
-    className: 'green-bg'
+    className: 'green-bg',
   },
   {
     title: '计算重量',
     dataIndex: 'calculatedWeight',
     key: 'calculatedWeight',
-    className: 'green-bg'
+    className: 'green-bg',
   },
   {
     title: '抓拍图片',
     dataIndex: 'image',
     key: 'image',
-    className: 'green-bg'
+    className: 'green-bg',
+    // 使用自定义渲染
+    render: ({ record }) => {
+      if (record.image && record.image !== '未抓拍') {
+        return h('div', { class: 'image-preview' }, [
+          h('img', {
+            src: record.image,
+            alt: '抓拍图片',
+            style: 'width: 60px; height: 45px; object-fit: cover; border-radius: 4px; cursor: pointer;',
+            onClick: () => previewImage(record.image),
+          }),
+        ])
+      }
+      return h('span', record.image || '-')
+    },
   },
   {
     title: '操作',
     dataIndex: 'action',
     key: 'action',
-    slotName: 'action'
-  }
+    slotName: 'action',
+  },
 ]
 
-
-
 // 处理物料编码变化
 const handleMaterialCodeChange = async () => {
   if (formData.inputMaterialCode) {
@@ -312,18 +610,18 @@ const handleMaterialCodeChange = async () => {
       console.error('获取物料数据失败:', error)
     }
   } else {
-    formData.encoding = "";
-    formData.materialName = "";
-    formData.materialSpec = "";
-    formData.unitWeight = 0;
-    formData.photoUrl = "";
-    formData.matchResult = "";
+    formData.encoding = ''
+    formData.materialName = ''
+    formData.materialSpec = ''
+    formData.unitWeight = 0
+    formData.photoUrl = ''
+    formData.matchResult = ''
   }
-};
+}
 
-// 模拟调用后端接口
+// 调用后端接口
 const fetchMaterialData = async (code: string) => {
-  getMaterialDetail(code).then(res => {
+  getMaterialDetail(code).then((res) => {
     if (res.code == '0') {
       // 更新表单数据
       formData.encoding = res.data.encoding
@@ -331,25 +629,22 @@ const fetchMaterialData = async (code: string) => {
       formData.materialSpec = res.data.materialSpec
       formData.unitWeight = res.data.unitWeight
       formData.photoUrl = res.data.photoUrl
-      // 假设后端返回比对结果
-      // formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
-      formData.matchResult = res.data.matchResult || 'success' // 这里根据实际接口返回调整
+      formData.matchResult = res.data.matchResult || 'success'
       return true
     }
-  });
+  })
 }
 
 // 处理下一步
 const handleNext = () => {
   if (activeStep.value < 3) {
     if (activeStep.value === 2) {
-      // 当在称重登记页面点击完成时，显示确认弹框
       Modal.confirm({
         title: '确认完成',
         content: '确定要完成称重登记吗？',
         onOk: () => {
           activeStep.value++
-        }
+        },
       })
     } else {
       activeStep.value++
@@ -372,38 +667,105 @@ const handleBackToFirst = () => {
 // 计算重量
 const calculateWeight = () => {
   if (inputQuantity.value && formData.unitWeight) {
-    const singleWeight = parseFloat(formData.unitWeight.toString())
-    const quantity = parseFloat(inputQuantity.value)
-    if (!isNaN(singleWeight) && !isNaN(quantity)) {
-      calculatedWeight.value = (singleWeight * quantity).toFixed(2) + 'g'
+    const singleWeight = Number.parseFloat(formData.unitWeight.toString())
+    const quantity = Number.parseFloat(inputQuantity.value)
+    if (!Number.isNaN(singleWeight) && !Number.isNaN(quantity)) {
+      calculatedWeight.value = `${(singleWeight * quantity).toFixed(2)}g`
     }
   } else {
     calculatedWeight.value = ''
   }
 }
 
-
-
 // 处理确定
-const handleConfirm = () => {
-  // 生成新的列表数据
+const handleConfirm = async () => {
+  if (!inputQuantity.value) {
+    Message.warning('请输入数量')
+    return
+  }
+
+  // 1. 显示加载状态
+  Message.loading('正在处理...')
+
+  // 2. 抓拍当前画面
+  let captureUrl = ''
+  if (cameraVideo.value && cameraStatus.value === 'connected') {
+    captureUrl = await capturePhoto()
+  }
+
   const newItem = {
     key: (weighingList.value.length + 1).toString(),
     count: weighingCount.value,
     name: formData.materialName,
     quantity: inputQuantity.value,
-    unitWeight: inputWeight.value,
+    weight: inputWeight.value,
     calculatedWeight: calculatedWeight.value,
-    image: '图片'
+    image: captureUrl || '未抓拍',
   }
-  // 添加到列表
   weighingList.value.push(newItem)
-  // 重置输入
   inputQuantity.value = ''
   inputWeight.value = ''
   calculatedWeight.value = ''
-  // 称重次数累加
   weighingCount.value = weighingList.value.length + 1
+  Message.success('添加成功')
+}
+
+// 抓拍功能 - 内部方法，不暴露按钮
+const capturePhoto = async (): Promise<string> => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const video = cameraVideo.value
+      if (!video) {
+        reject(new Error('视频未初始化'))
+        return
+      }
+
+      // 创建canvas抓取当前帧
+      const canvas = document.createElement('canvas')
+      canvas.width = video.videoWidth || 640
+      canvas.height = video.videoHeight || 480
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+
+      // 转换为Blob
+      const blob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((b) => resolve(b), 'image/jpeg', 0.9)
+      })
+
+      // 创建FormData
+      const formData = new FormData()
+      formData.append('file', blob, `capture_${Date.now()}.jpg`)
+
+      // 调用后端接口
+      const response = await catchPhoto(formData)
+      if (!response.code === '200') {
+        reject(new Error('上传失败'))
+        return
+      }
+
+      const imageUrl = await response.data
+      resolve(imageUrl)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 图片预览函数
+const previewImage = (url: string) => {
+  // 使用Arco Design的图片预览组件
+  Modal.info({
+    title: '图片预览',
+    content: () => h('div', { style: 'text-align: center;' }, [
+      h('img', {
+        src: url,
+        style: 'max-width: 100%; max-height: 500px; object-fit: contain;',
+      }),
+    ]),
+    okText: '关闭',
+    hideCancel: true,
+    width: 'auto',
+  })
 }
 
 // 处理重置
@@ -414,18 +776,14 @@ const handleReset = () => {
 }
 
 // 处理删除
-const handleDelete = (key) => {
-  // 过滤掉要删除的项
-  weighingList.value = weighingList.value.filter(item => item.key !== key)
-  // 重新排序称重次数
+const handleDelete = (key: string) => {
+  weighingList.value = weighingList.value.filter((item) => item.key !== key)
   weighingList.value.forEach((item, index) => {
     item.count = index + 1
   })
-  // 更新当前称重次数
   weighingCount.value = weighingList.value.length + 1
+  Message.success('删除成功')
 }
-
-defineOptions({ name: 'WeightManage' })
 </script>
 
 <style scoped lang="scss">
@@ -524,12 +882,12 @@ defineOptions({ name: 'WeightManage' })
 /* 称重登记页面 */
 .weighing-content {
   display: flex;
+  gap: 30px;
   margin-bottom: 30px;
 }
 
 .left-weighing-section {
-  width: 400px;
-  margin-right: 30px;
+  width: 450px;
 }
 
 .right-weighing-section {
@@ -553,10 +911,68 @@ defineOptions({ name: 'WeightManage' })
   font-weight: bold;
 }
 
+/* 视频容器 - 替换原来的image-placeholder */
+.video-container {
+  position: relative;
+  width: 100%;
+  height: 240px;
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 20px 0;
+}
+
+.video-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  gap: 10px;
+}
+
+.video-overlay.error {
+  background: rgba(255, 77, 79, 0.2);
+}
+
+.camera-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+}
+
+.live-badge {
+  background: #ff4d4f;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
 .large-image {
   width: 100%;
-  height: 200px;
-  margin: 20px 0;
+  height: 240px;
 }
 
 .input-placeholder {
@@ -629,7 +1045,7 @@ defineOptions({ name: 'WeightManage' })
   margin-top: 40px;
 }
 
-/* 图片占位符 */
+/* 图片占位符（保留用于扫码核验页面） */
 .image-placeholder {
   width: 100%;
   height: 150px;
@@ -654,7 +1070,7 @@ defineOptions({ name: 'WeightManage' })
   border-radius: 4px;
 }
 
-/* 相机区域 */
+/* 相机区域（保留用于扫码核验页面） */
 .camera-section {
   display: flex;
   justify-content: space-between;
@@ -672,17 +1088,16 @@ defineOptions({ name: 'WeightManage' })
 
 .form-row {
   display: flex;
+  gap: 20px;
   margin-bottom: 16px;
 }
 
 .form-item {
   flex: 1;
-  margin-right: 20px;
 }
 
 .form-item.full-width {
   flex: 1;
-  margin-right: 0;
 }
 
 /* 确保输入框宽度一致 */
@@ -700,6 +1115,7 @@ defineOptions({ name: 'WeightManage' })
   margin-bottom: 8px;
   font-size: 16px;
   color: #666;
+  font-weight: 500;
 }
 
 .form-actions {
@@ -716,6 +1132,7 @@ defineOptions({ name: 'WeightManage' })
   border-radius: 4px;
   padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin-bottom: 16px;
 }
 
 .info-card h4 {
@@ -723,6 +1140,8 @@ defineOptions({ name: 'WeightManage' })
   font-size: 16px;
   font-weight: bold;
   color: #333;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 8px;
 }
 
 .info-item {
@@ -772,6 +1191,7 @@ defineOptions({ name: 'WeightManage' })
 .action-buttons {
   display: flex;
   justify-content: flex-end;
+  margin-top: 30px;
 }
 
 .next-button {
@@ -786,4 +1206,4 @@ defineOptions({ name: 'WeightManage' })
   font-size: 14px;
   margin-right: 12px;
 }
-</style>
+</style>