huang
c341ef1aac
基于移动优先原则优化布局、排版、颜色和间距，提升设计感和专业度。 - 重构全局设计系统：颜色、阴影、间距、圆角、排版 - 优化 UserInfoCard：更大的头像和状态徽章设计 - 优化 DeviceStatusCard：信息层级和指标网格 - 优化 TrafficCard：进度条和数字排版 - 优化 FunctionCard：4列布局和触摸反馈 - 优化 WifiCard：列表设计和信息层次 - 优化 FloatingButton：去除渐变，纯色设计 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
166 lines
3.5 KiB
Vue
166 lines
3.5 KiB
Vue
<template>
|
||
<view class="user-info-card">
|
||
<view class="card-main">
|
||
<view class="user-avatar">
|
||
<image :src="avatarUrl" mode="aspectFill" alt="用户头像" />
|
||
</view>
|
||
<view class="user-details">
|
||
<view class="user-id">
|
||
<text class="device-id">{{ currentCardNo || '-' }}</text>
|
||
<view class="status-badge" :class="isOnline ? 'status-online' : 'status-offline'">
|
||
<text class="status-dot"></text>
|
||
<text class="status-text">{{ isOnline ? '在线' : '离线' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="user-meta">
|
||
<text class="meta-text" v-if="isDevice">IMEI：{{ deviceInfo.imei || '-' }}</text>
|
||
<text class="meta-text" v-else>手机号：{{ deviceInfo.bound_phone || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-footer" v-if="!isDevice">
|
||
<view class="network-badge" :class="networkStatus == 1 ? 'network-ok' : 'network-stop'">
|
||
{{ networkStatus == 1 ? '正常' : '停机' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import { useUserStore } from '@/store/index.js';
|
||
|
||
const props = defineProps({
|
||
currentCardNo: { type: String, default: '' },
|
||
deviceInfo: { type: Object, default: () => ({}) },
|
||
onlineStatus: { type: String, default: '离线' },
|
||
networkStatus: { type: [String, Number], default: '离线' },
|
||
isDevice: { type: Boolean, default: true }
|
||
});
|
||
|
||
const userStore = useUserStore();
|
||
|
||
const defaultAvatar = 'https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500';
|
||
|
||
const avatarUrl = computed(() => {
|
||
return userStore.state.userInfo.avatar || defaultAvatar;
|
||
});
|
||
|
||
const isOnline = computed(() => {
|
||
return props.onlineStatus === '在线';
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.user-info-card {
|
||
background: var(--bg-surface);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-5);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.card-main {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
border: 4rpx solid var(--gray-100);
|
||
flex-shrink: 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.user-details {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.user-id {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.device-id {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: var(--radius-full);
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-online {
|
||
background: var(--success-light);
|
||
color: var(--success);
|
||
}
|
||
|
||
.status-offline {
|
||
background: var(--warning-light);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
}
|
||
|
||
.status-text {
|
||
line-height: 1;
|
||
}
|
||
|
||
.user-meta {
|
||
margin-top: var(--space-2);
|
||
}
|
||
|
||
.meta-text {
|
||
font-size: 24rpx;
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.card-footer {
|
||
margin-top: var(--space-4);
|
||
padding-top: var(--space-4);
|
||
border-top: 1rpx solid var(--gray-100);
|
||
}
|
||
|
||
.network-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: var(--space-2) var(--space-4);
|
||
border-radius: var(--radius-full);
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.network-ok {
|
||
background: var(--success-light);
|
||
color: var(--success);
|
||
}
|
||
|
||
.network-stop {
|
||
background: var(--danger-light);
|
||
color: var(--danger);
|
||
}
|
||
</style> |