feat: 重构移动端 H5 页面视觉设计
基于移动优先原则优化布局、排版、颜色和间距，提升设计感和专业度。 - 重构全局设计系统：颜色、阴影、间距、圆角、排版 - 优化 UserInfoCard：更大的头像和状态徽章设计 - 优化 DeviceStatusCard：信息层级和指标网格 - 优化 TrafficCard：进度条和数字排版 - 优化 FunctionCard：4列布局和触摸反馈 - 优化 WifiCard：列表设计和信息层次 - 优化 FloatingButton：去除渐变，纯色设计 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,20 +1,25 @@
|
||||
<template>
|
||||
<view class="card user-info-card interactive">
|
||||
<view class="flex-row-g20">
|
||||
<view class="user-info-card">
|
||||
<view class="card-main">
|
||||
<view class="user-avatar">
|
||||
<image :src="avatarUrl" mode="aspectFill" alt="用户头像" />
|
||||
</view>
|
||||
<view class="user-details flex-col-g8">
|
||||
<view class="flex-row-g20">
|
||||
<view class="title">{{ currentCardNo || '-' }}</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 class="caption" v-if="isDevice">IMEI：{{ deviceInfo.imei || '-' }}</view>
|
||||
<view class="caption" v-else>手机号：{{ deviceInfo.bound_phone || '-' }}</view>
|
||||
</view>
|
||||
<view v-if="isDevice" class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
|
||||
{{ onlineStatus }}
|
||||
</view>
|
||||
<view v-else class="tag-apple" :class="networkStatus == 1 ? 'tag-success' : 'tag-warning'">
|
||||
</view>
|
||||
<view class="card-footer" v-if="!isDevice">
|
||||
<view class="network-badge" :class="networkStatus == 1 ? 'network-ok' : 'network-stop'">
|
||||
{{ networkStatus == 1 ? '正常' : '停机' }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -25,36 +30,137 @@
|
||||
import { computed } from 'vue';
|
||||
import { useUserStore } from '@/store/index.js';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
currentCardNo: { type: String, default: '' },
|
||||
deviceInfo: { type: Object, default: () => ({}) },
|
||||
onlineStatus: { type: String, default: '离线' },
|
||||
networkStatus: { 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';
|
||||
|
||||
// 用户头像，优先使用 store 中的头像，否则使用默认头像
|
||||
const avatarUrl = computed(() => {
|
||||
return userStore.state.userInfo.avatar || defaultAvatar;
|
||||
});
|
||||
|
||||
const isOnline = computed(() => {
|
||||
return props.onlineStatus === '在线';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-info-card {
|
||||
color: var(--text-primary);
|
||||
.user-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-medium);
|
||||
overflow: hidden;
|
||||
border: 2rpx solid var(--border-light);
|
||||
image { width: 100%; height: 100%; object-fit: cover; }
|
||||
}
|
||||
.user-details { flex: 1; }
|
||||
background: var(--bg-surface);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
</style>
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user