feat 项目设置Info

2026-09-02 10:58:49 +08:00
parent 10b5624dac
commit 6eed913a82
9 changed files with 322 additions and 3 deletions
--- a/src/components/deviceInfo.vue
+++ b/src/components/deviceInfo.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  systemName?: string
+  deviceId?: string
+  version?: string
+  registerStatus?: string
+  expiryDate?: string
+}>(), {
+  systemName: 'UCS300',
+  deviceId: 'XS64H-2024-001',
+  version: 'HZ_UCS_V2.1.2.260513',
+  registerStatus: '已激活',
+  expiryDate: '2026年8月14日16:25:24',
+})
+</script>
+
+<template>
+  <view class="device-info">
+    <text class="section-title">
+      关于设备
+    </text>
+
+    <view class="info-list">
+      <view class="info-item">
+        <text class="info-label">
+          系统名称
+        </text>
+        <text class="info-value">
+          {{ systemName }}
+        </text>
+      </view>
+
+      <view class="info-item">
+        <text class="info-label">
+          设备ID
+        </text>
+        <text class="info-value">
+          {{ deviceId }}
+        </text>
+      </view>
+
+      <view class="info-item">
+        <text class="info-label">
+          版本号
+        </text>
+        <text class="info-value">
+          {{ version }}
+        </text>
+      </view>
+
+      <view class="info-item">
+        <text class="info-label">
+          注册状态
+        </text>
+        <text class="info-value status-active">
+          {{ registerStatus }}
+        </text>
+      </view>
+
+      <view class="info-item">
+        <text class="info-label">
+          到期日期
+        </text>
+        <text class="info-value">
+          {{ expiryDate }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.device-info {
+  background-color: #ffffff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  padding: 16px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+}
+
+.status-active {
+  color: #52c41a;
+}
+</style>