From d8bc554368a78a0ad218b0f5903939fcc344b93a Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 06 三月 2026 16:58:34 +0800
Subject: [PATCH] 巡检管理更名
---
src/pages/equipmentManagement/inspection/index.vue | 881 +++++++++++++++++++++++++++++----------------------------
1 files changed, 449 insertions(+), 432 deletions(-)
diff --git a/src/pages/equipmentManagement/inspection/index.vue b/src/pages/equipmentManagement/inspection/index.vue
index bb949fa..c8fd6b5 100644
--- a/src/pages/equipmentManagement/inspection/index.vue
+++ b/src/pages/equipmentManagement/inspection/index.vue
@@ -1,8 +1,8 @@
<template>
<view class="inspection-page">
<!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 -->
- <PageHeader title="璁惧宸℃" @back="goBack" />
-
+ <PageHeader title="璁惧宸℃"
+ @back="goBack" />
<!-- 缁熻淇℃伅鍗＄墖 -->
<view class="stats-cards">
<view class="stat-card">
@@ -18,15 +18,20 @@
<text class="stat-label">寰呭贰妫�</text>
</view>
</view>
-
<!-- 宸℃娓呭崟 -->
- <view class="inspection-list" v-if="inspectionList.length > 0">
- <view v-for="(item, index) in inspectionList" :key="index">
- <view class="inspection-item" @click="startInspection(item)">
+ <view class="inspection-list"
+ v-if="inspectionList.length > 0">
+ <view v-for="(item, index) in inspectionList"
+ :key="index">
+ <view class="inspection-item"
+ @click="startInspection(item)">
<view class="item-header">
<view class="item-left">
- <view class="device-icon" :class="getStatusClass(item.status)">
- <up-icon :name="getStatusIcon(item.status)" size="16" color="#ffffff"></up-icon>
+ <view class="device-icon"
+ :class="getStatusClass(item.status)">
+ <up-icon :name="getStatusIcon(item.status)"
+ size="16"
+ color="#ffffff"></up-icon>
</view>
<view class="device-info">
<text class="device-name">{{ item.deviceName }}</text>
@@ -34,14 +39,13 @@
</view>
</view>
<view class="status-tag">
- <u-tag :type="getTagType(item.status)" size="mini">
+ <u-tag :type="getTagType(item.status)"
+ size="mini">
{{ getStatusText(item.status) }}
</u-tag>
</view>
</view>
-
<up-divider></up-divider>
-
<view class="item-details">
<view class="detail-row">
<text class="detail-label">璁惧缂栧彿</text>
@@ -55,472 +59,485 @@
<text class="detail-label">璐熻矗浜�</text>
<text class="detail-value">{{ item.inspector || '-' }}</text>
</view>
- <view class="detail-row" v-if="item.status === 2">
+ <view class="detail-row"
+ v-if="item.status === 2">
<text class="detail-label">瀹屾垚鏃堕棿</text>
<text class="detail-value">{{ formatDateTime(item.completedTime) || '-' }}</text>
</view>
</view>
-
<!-- 鎿嶄綔鎸夐挳 -->
<view class="action-buttons">
- <u-button
- type="primary"
- size="small"
- class="action-btn"
- :disabled="item.status === 2"
- @click.stop="startInspection(item)"
- >
+ <u-button type="primary"
+ size="small"
+ class="action-btn"
+ :disabled="item.status === 2"
+ @click.stop="startInspection(item)">
{{ item.status === 0 ? '寮�濮嬪贰妫�' : item.status === 1 ? '缁х画宸℃' : '鏌ョ湅璇︽儏' }}
</u-button>
- <u-button
- type="success"
- size="small"
- class="action-btn"
- :disabled="item.status !== 1"
- @click.stop="scanQRCode(item)"
- >
+ <u-button type="success"
+ size="small"
+ class="action-btn"
+ :disabled="item.status !== 1"
+ @click.stop="scanQRCode(item)">
鎵爜鎵撳崱
</u-button>
</view>
</view>
</view>
</view>
-
- <view v-else class="no-data">
- <up-empty mode="data" text="鏆傛棤宸℃浠诲姟"></up-empty>
+ <view v-else
+ class="no-data">
+ <up-empty mode="data"
+ text="鏆傛棤宸℃浠诲姟"></up-empty>
</view>
</view>
</template>
<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
-import PageHeader from '@/components/PageHeader.vue'
-// import { getInspectionList } from '@/api/inspectionUpload/index'
-import dayjs from 'dayjs'
+ import { ref, computed, onMounted } from "vue";
+ import { onShow } from "@dcloudio/uni-app";
+ import PageHeader from "@/components/PageHeader.vue";
+ // import { getInspectionList } from '@/api/inspectionUpload/index'
+ import dayjs from "dayjs";
-// 閫変腑鐨勬棩鏈�
-const selectedDate = ref(Date.now())
+ // 閫変腑鐨勬棩鏈�
+ const selectedDate = ref(Date.now());
-// 宸℃娓呭崟鏁版嵁
-const inspectionList = ref([])
+ // 宸℃娓呭崟鏁版嵁
+ const inspectionList = ref([]);
-// 鏄剧ず鎻愮ず淇℃伅
-const showToast = (message) => {
- uni.showToast({
- title: message,
- icon: 'none'
- })
-}
+ // 鏄剧ず鎻愮ず淇℃伅
+ const showToast = message => {
+ uni.showToast({
+ title: message,
+ icon: "none",
+ });
+ };
-// 璁＄畻缁熻鏁版嵁
-const totalCount = computed(() => inspectionList.value.length)
-const completedCount = computed(() => inspectionList.value.filter(item => item.status === 2).length)
-const pendingCount = computed(() => inspectionList.value.filter(item => item.status === 0).length)
+ // 璁＄畻缁熻鏁版嵁
+ const totalCount = computed(() => inspectionList.value.length);
+ const completedCount = computed(
+ () => inspectionList.value.filter(item => item.status === 2).length
+ );
+ const pendingCount = computed(
+ () => inspectionList.value.filter(item => item.status === 0).length
+ );
-// 杩斿洖涓婁竴椤�
-const goBack = () => {
- uni.navigateBack()
-}
+ // 杩斿洖涓婁竴椤�
+ const goBack = () => {
+ uni.navigateBack();
+ };
-// 鏃ユ湡鏍煎紡鍖栧櫒
-const dateFormatter = (type, value) => {
- if (type === 'year') {
- return `${value}骞碻
- }
- if (type === 'month') {
- return `${value}鏈坄
- }
- if (type === 'day') {
- return `${value}鏃
- }
- return value
-}
-
-// 鏍煎紡鍖栨棩鏈�
-const formatDate = (timestamp) => {
- return dayjs(timestamp).format('YYYY骞碝M鏈圖D鏃�')
-}
-
-// 鏍煎紡鍖栨棩鏈熸椂闂�
-const formatDateTime = (dateStr) => {
- if (!dateStr) return ''
- return dayjs(dateStr).format('MM-DD HH:mm')
-}
-
-// 鏃ユ湡鏀瑰彉浜嬩欢
-const onDateChange = (value) => {
- selectedDate.value = value.value
- getList()
-}
-
-// 鑾峰彇鐘舵�佹牱寮忕被
-const getStatusClass = (status) => {
- switch (status) {
- case 0: return 'status-pending'
- case 1: return 'status-progress'
- case 2: return 'status-completed'
- default: return 'status-pending'
- }
-}
-
-// 鑾峰彇鐘舵�佸浘鏍�
-const getStatusIcon = (status) => {
- switch (status) {
- case 0: return 'clock'
- case 1: return 'play-circle'
- case 2: return 'checkmark-circle'
- default: return 'clock'
- }
-}
-
-// 鑾峰彇鏍囩绫诲瀷
-const getTagType = (status) => {
- switch (status) {
- case 0: return 'warning'
- case 1: return 'primary'
- case 2: return 'success'
- default: return 'info'
- }
-}
-
-// 鑾峰彇鐘舵�佹枃鏈�
-const getStatusText = (status) => {
- switch (status) {
- case 0: return '寰呭贰妫�'
- case 1: return '宸℃涓�'
- case 2: return '宸插畬鎴�'
- default: return '鏈煡'
- }
-}
-
-// 寮�濮嬪贰妫�
-const startInspection = (item) => {
- // 瀛樺偍褰撳墠宸℃椤圭洰淇℃伅
- uni.setStorageSync('currentInspection', item)
- uni.navigateTo({
- url: '/pages/equipmentManagement/inspection/detail'
- })
-}
-
-// 鎵爜鎵撳崱
-const scanQRCode = (item) => {
- uni.scanCode({
- success: (res) => {
- console.log('鎵爜缁撴灉锛�', res)
- // 楠岃瘉浜岀淮鐮佸唴瀹�
- if (res.result.includes(item.deviceCode)) {
- showToast('鎵撳崱鎴愬姛')
- // 鏇存柊鎵撳崱鐘舵��
- updateCheckInStatus(item.id)
- } else {
- showToast('浜岀淮鐮佷笉鍖归厤锛岃鎵弿姝ｇ‘鐨勮澶囦簩缁寸爜')
- }
- },
- fail: (err) => {
- console.log('鎵爜澶辫触锛�', err)
- showToast('鎵爜澶辫触')
+ // 鏃ユ湡鏍煎紡鍖栧櫒
+ const dateFormatter = (type, value) => {
+ if (type === "year") {
+ return `${value}骞碻;
}
- })
-}
+ if (type === "month") {
+ return `${value}鏈坄;
+ }
+ if (type === "day") {
+ return `${value}鏃;
+ }
+ return value;
+ };
-// 鏇存柊鎵撳崱鐘舵��
-const updateCheckInStatus = (id) => {
- // 杩欓噷搴旇璋冪敤API鏇存柊鎵撳崱鐘舵��
- // 鏆傛椂妯℃嫙鏇存柊鏈湴鏁版嵁
- const item = inspectionList.value.find(item => item.id === id)
- if (item) {
- item.checkInTime = new Date().toISOString()
- }
-}
+ // 鏍煎紡鍖栨棩鏈�
+ const formatDate = timestamp => {
+ return dayjs(timestamp).format("YYYY骞碝M鏈圖D鏃�");
+ };
-// 鏌ヨ宸℃娓呭崟
-const getList = () => {
- uni.showLoading({
- title: '鍔犺浇涓�...',
- mask: true
- })
-
- const params = {
- date: dayjs(selectedDate.value).format('YYYY-MM-DD')
- }
-
- // 妯℃嫙鏁版嵁锛屽疄闄呭簲璇ヨ皟鐢ˋPI
- setTimeout(() => {
- inspectionList.value = [
- {
- id: 1,
- deviceName: '绌哄帇鏈篈01',
- deviceCode: 'KYJ-A01',
- location: '鐢熶骇杞﹂棿A鍖�',
- inspectionTime: '08:00-09:00',
- inspector: '寮犱笁',
- status: 0, // 0:寰呭贰妫� 1:宸℃涓� 2:宸插畬鎴�
- completedTime: null
+ // 鏍煎紡鍖栨棩鏈熸椂闂�
+ const formatDateTime = dateStr => {
+ if (!dateStr) return "";
+ return dayjs(dateStr).format("MM-DD HH:mm");
+ };
+
+ // 鏃ユ湡鏀瑰彉浜嬩欢
+ const onDateChange = value => {
+ selectedDate.value = value.value;
+ getList();
+ };
+
+ // 鑾峰彇鐘舵�佹牱寮忕被
+ const getStatusClass = status => {
+ switch (status) {
+ case 0:
+ return "status-pending";
+ case 1:
+ return "status-progress";
+ case 2:
+ return "status-completed";
+ default:
+ return "status-pending";
+ }
+ };
+
+ // 鑾峰彇鐘舵�佸浘鏍�
+ const getStatusIcon = status => {
+ switch (status) {
+ case 0:
+ return "clock";
+ case 1:
+ return "play-circle";
+ case 2:
+ return "checkmark-circle";
+ default:
+ return "clock";
+ }
+ };
+
+ // 鑾峰彇鏍囩绫诲瀷
+ const getTagType = status => {
+ switch (status) {
+ case 0:
+ return "warning";
+ case 1:
+ return "primary";
+ case 2:
+ return "success";
+ default:
+ return "info";
+ }
+ };
+
+ // 鑾峰彇鐘舵�佹枃鏈�
+ const getStatusText = status => {
+ switch (status) {
+ case 0:
+ return "寰呭贰妫�";
+ case 1:
+ return "宸℃涓�";
+ case 2:
+ return "宸插畬鎴�";
+ default:
+ return "鏈煡";
+ }
+ };
+
+ // 寮�濮嬪贰妫�
+ const startInspection = item => {
+ // 瀛樺偍褰撳墠宸℃椤圭洰淇℃伅
+ uni.setStorageSync("currentInspection", item);
+ uni.navigateTo({
+ url: "/pages/equipmentManagement/inspection/detail",
+ });
+ };
+
+ // 鎵爜鎵撳崱
+ const scanQRCode = item => {
+ uni.scanCode({
+ success: res => {
+ console.log("鎵爜缁撴灉锛�", res);
+ // 楠岃瘉浜岀淮鐮佸唴瀹�
+ if (res.result.includes(item.deviceCode)) {
+ showToast("鎵撳崱鎴愬姛");
+ // 鏇存柊鎵撳崱鐘舵��
+ updateCheckInStatus(item.id);
+ } else {
+ showToast("浜岀淮鐮佷笉鍖归厤锛岃鎵弿姝ｇ‘鐨勮澶囦簩缁寸爜");
+ }
},
- {
- id: 2,
- deviceName: '鍐峰嵈濉擝02',
- deviceCode: 'LQT-B02',
- location: '鐢熶骇杞﹂棿B鍖�',
- inspectionTime: '09:00-10:00',
- inspector: '鏉庡洓',
- status: 1,
- completedTime: null
+ fail: err => {
+ console.log("鎵爜澶辫触锛�", err);
+ showToast("鎵爜澶辫触");
},
- {
- id: 3,
- deviceName: '鍙樺帇鍣–03',
- deviceCode: 'BYQ-C03',
- location: '閰嶇數鎴�',
- inspectionTime: '10:00-11:00',
- inspector: '鐜嬩簲',
- status: 2,
- completedTime: '2024-01-15T10:30:00'
- }
- ]
- uni.hideLoading()
- }, 1000)
-
- // 瀹為檯API璋冪敤
- // getInspectionList(params)
- // .then((res) => {
- // inspectionList.value = res.records || res.data?.records || []
- // uni.hideLoading()
- // })
- // .catch(() => {
- // uni.hideLoading()
- // showToast('鑾峰彇鏁版嵁澶辫触')
- // })
-}
+ });
+ };
-onMounted(() => {
- getList()
-})
+ // 鏇存柊鎵撳崱鐘舵��
+ const updateCheckInStatus = id => {
+ // 杩欓噷搴旇璋冪敤API鏇存柊鎵撳崱鐘舵��
+ // 鏆傛椂妯℃嫙鏇存柊鏈湴鏁版嵁
+ const item = inspectionList.value.find(item => item.id === id);
+ if (item) {
+ item.checkInTime = new Date().toISOString();
+ }
+ };
-onShow(() => {
- getList()
-})
+ // 鏌ヨ宸℃娓呭崟
+ const getList = () => {
+ uni.showLoading({
+ title: "鍔犺浇涓�...",
+ mask: true,
+ });
+
+ const params = {
+ date: dayjs(selectedDate.value).format("YYYY-MM-DD"),
+ };
+
+ // 妯℃嫙鏁版嵁锛屽疄闄呭簲璇ヨ皟鐢ˋPI
+ setTimeout(() => {
+ inspectionList.value = [
+ {
+ id: 1,
+ deviceName: "绌哄帇鏈篈01",
+ deviceCode: "KYJ-A01",
+ location: "鐢熶骇杞﹂棿A鍖�",
+ inspectionTime: "08:00-09:00",
+ inspector: "寮犱笁",
+ status: 0, // 0:寰呭贰妫� 1:宸℃涓� 2:宸插畬鎴�
+ completedTime: null,
+ },
+ {
+ id: 2,
+ deviceName: "鍐峰嵈濉擝02",
+ deviceCode: "LQT-B02",
+ location: "鐢熶骇杞﹂棿B鍖�",
+ inspectionTime: "09:00-10:00",
+ inspector: "鏉庡洓",
+ status: 1,
+ completedTime: null,
+ },
+ {
+ id: 3,
+ deviceName: "鍙樺帇鍣–03",
+ deviceCode: "BYQ-C03",
+ location: "閰嶇數鎴�",
+ inspectionTime: "10:00-11:00",
+ inspector: "鐜嬩簲",
+ status: 2,
+ completedTime: "2024-01-15T10:30:00",
+ },
+ ];
+ uni.hideLoading();
+ }, 1000);
+
+ // 瀹為檯API璋冪敤
+ // getInspectionList(params)
+ // .then((res) => {
+ // inspectionList.value = res.records || res.data?.records || []
+ // uni.hideLoading()
+ // })
+ // .catch(() => {
+ // uni.hideLoading()
+ // showToast('鑾峰彇鏁版嵁澶辫触')
+ // })
+ };
+
+ onMounted(() => {
+ getList();
+ });
+
+ onShow(() => {
+ getList();
+ });
</script>
<style scoped lang="scss">
-@import '@/styles/sales-common.scss';
+ @import "@/styles/sales-common.scss";
-.inspection-page {
- background: #ffffff;
- min-height: 100vh;
- padding-bottom: 20px;
-}
-
-
-
-
-
-.stats-cards {
- display: flex;
- gap: 10px;
- padding: 0 15px;
- margin: 15px 0;
-}
-
-.stat-card {
- flex: 1;
- background: #ffffff;
- border-radius: 12px;
- padding: 15px 12px;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 6px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- border: 1px solid #f0f0f0;
- transition: all 0.3s ease;
-
- &:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ .inspection-page {
+ background: #ffffff;
+ min-height: 100vh;
+ padding-bottom: 20px;
}
-
- .stat-number {
- font-size: 24px;
- font-weight: 700;
- color: #1890ff;
+
+ .stats-cards {
+ display: flex;
+ gap: 10px;
+ padding: 0 15px;
+ margin: 15px 0;
}
-
- .stat-label {
+
+ .stat-card {
+ flex: 1;
+ background: #ffffff;
+ border-radius: 12px;
+ padding: 15px 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border: 1px solid #f0f0f0;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ }
+
+ .stat-number {
+ font-size: 24px;
+ font-weight: 700;
+ color: #1890ff;
+ }
+
+ .stat-label {
+ font-size: 13px;
+ color: #666;
+ font-weight: 500;
+ }
+ }
+
+ .inspection-list {
+ padding: 0 15px;
+ }
+
+ .inspection-item {
+ background: #ffffff;
+ border-radius: 12px;
+ padding: 15px;
+ margin-bottom: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border: 1px solid #f0f0f0;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ }
+ }
+
+ .item-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 12px;
+ }
+
+ .item-left {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ flex: 1;
+ }
+
+ .device-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+
+ &.status-pending {
+ background: linear-gradient(135deg, #faad14, #fa8c16);
+ box-shadow: 0 4px 16px rgba(250, 173, 20, 0.3);
+ }
+
+ &.status-progress {
+ background: linear-gradient(135deg, #1890ff, #096dd9);
+ box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
+ }
+
+ &.status-completed {
+ background: linear-gradient(135deg, #52c41a, #389e0d);
+ box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
+ }
+
+ &:hover {
+ transform: scale(1.05);
+ }
+ }
+
+ .device-info {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ }
+
+ .device-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: #1a1a1a;
+ line-height: 1.3;
+ }
+
+ .device-location {
font-size: 13px;
- color: #666;
+ color: #8c8c8c;
+ font-weight: 500;
+ padding: 2px 8px;
+ background: rgba(140, 140, 140, 0.1);
+ border-radius: 12px;
+ display: inline-block;
+ width: fit-content;
+ }
+
+ .status-tag {
+ flex-shrink: 0;
+ transform: scale(1.1);
+ }
+
+ .item-details {
+ margin: 15px 0;
+ background: rgba(248, 250, 252, 0.8);
+ border-radius: 12px;
+ padding: 12px;
+ backdrop-filter: blur(10px);
+ }
+
+ .detail-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ transition: all 0.2s ease;
+
+ &:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.5);
+ margin: 0 -8px;
+ padding-left: 8px;
+ padding-right: 8px;
+ border-radius: 8px;
+ }
+ }
+
+ .detail-label {
+ font-size: 14px;
+ color: #595959;
+ min-width: 80px;
font-weight: 500;
}
-}
-.inspection-list {
- padding: 0 15px;
-}
-
-.inspection-item {
- background: #ffffff;
- border-radius: 12px;
- padding: 15px;
- margin-bottom: 12px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- border: 1px solid #f0f0f0;
- transition: all 0.3s ease;
-
- &:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ .detail-value {
+ font-size: 14px;
+ color: #262626;
+ text-align: right;
+ flex: 1;
+ font-weight: 500;
}
-}
-.item-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 12px;
-}
-
-.item-left {
- display: flex;
- align-items: flex-start;
- gap: 12px;
- flex: 1;
-}
-
-.device-icon {
- width: 48px;
- height: 48px;
- border-radius: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease;
-
- &.status-pending {
- background: linear-gradient(135deg, #faad14, #fa8c16);
- box-shadow: 0 4px 16px rgba(250, 173, 20, 0.3);
+ .action-buttons {
+ display: flex;
+ gap: 10px;
+ margin-top: 15px;
+ padding-top: 15px;
+ border-top: 1px solid rgba(0, 0, 0, 0.06);
}
-
- &.status-progress {
- background: linear-gradient(135deg, #1890ff, #096dd9);
- box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
+
+ .action-btn {
+ flex: 1;
+ height: 44px;
+ border-radius: 12px;
+ font-weight: 600;
+ font-size: 14px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
}
-
- &.status-completed {
- background: linear-gradient(135deg, #52c41a, #389e0d);
- box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
+
+ .no-data {
+ padding: 80px 20px;
+ text-align: center;
}
-
- &:hover {
- transform: scale(1.05);
- }
-}
-
-.device-info {
- display: flex;
- flex-direction: column;
- gap: 6px;
-}
-
-.device-name {
- font-size: 18px;
- font-weight: 600;
- color: #1a1a1a;
- line-height: 1.3;
-}
-
-.device-location {
- font-size: 13px;
- color: #8c8c8c;
- font-weight: 500;
- padding: 2px 8px;
- background: rgba(140, 140, 140, 0.1);
- border-radius: 12px;
- display: inline-block;
- width: fit-content;
-}
-
-.status-tag {
- flex-shrink: 0;
- transform: scale(1.1);
-}
-
-.item-details {
- margin: 15px 0;
- background: rgba(248, 250, 252, 0.8);
- border-radius: 12px;
- padding: 12px;
- backdrop-filter: blur(10px);
-}
-
-.detail-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px 0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
- transition: all 0.2s ease;
-
- &:last-child {
- border-bottom: none;
- padding-bottom: 0;
- }
-
- &:hover {
- background: rgba(255, 255, 255, 0.5);
- margin: 0 -8px;
- padding-left: 8px;
- padding-right: 8px;
- border-radius: 8px;
- }
-}
-
-.detail-label {
- font-size: 14px;
- color: #595959;
- min-width: 80px;
- font-weight: 500;
-}
-
-.detail-value {
- font-size: 14px;
- color: #262626;
- text-align: right;
- flex: 1;
- font-weight: 500;
-}
-
-.action-buttons {
- display: flex;
- gap: 10px;
- margin-top: 15px;
- padding-top: 15px;
- border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.action-btn {
- flex: 1;
- height: 44px;
- border-radius: 12px;
- font-weight: 600;
- font-size: 14px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-
- &:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
- }
-
- &:active {
- transform: translateY(0);
- }
-}
-
-.no-data {
- padding: 80px 20px;
- text-align: center;
-}
</style>
\ No newline at end of file
--
Gitblit v1.9.3