luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构移动端 H5 页面视觉设计

Browse Source 
基于移动优先原则优化布局、排版、颜色和间距，提升设计感和专业度。

- 重构全局设计系统：颜色、阴影、间距、圆角、排版
- 优化 UserInfoCard：更大的头像和状态徽章设计
- 优化 DeviceStatusCard：信息层级和指标网格
- 优化 TrafficCard：进度条和数字排版
- 优化 FunctionCard：4列布局和触摸反馈
- 优化 WifiCard：列表设计和信息层次
- 优化 FloatingButton：去除渐变，纯色设计

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
huang
2026-04-15 18:18:25 +08:00
parent 727c4126dd
commit c341ef1aac
12 changed files with 12049 additions and 1337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/FloatingButton.vue
View File

@@ -1,13 +1,17 @@
<template>
<view class="floating-service-card" @click="handleClick">
<view class="service-left">
<image class="service-icon" src="/static/link.png" mode="aspectFit"></image>
<view class="service-content">
<text class="service-title">需要帮助？</text>
<text class="service-desc">专属客服在线解答</text>
<view class="service-card" @click="handleClick">
<view class="service-inner">
<view class="service-left">
<view class="service-icon-wrap">
<image class="service-icon" src="/static/link.png" mode="aspectFit"></image>
</view>
<view class="service-content">
<text class="service-title">需要帮助？</text>
<text class="service-desc">专属客服在线解答</text>
</view>
</view>
<view class="service-btn">立即联系</view>
</view>
<view class="service-btn">立即联系</view>
</view>
</template>
@@ -20,56 +24,71 @@
</script>
<style scoped lang="scss">
.floating-service-card {
.service-card {
position: fixed;
bottom: 20rpx;
left: 20rpx;
right: 20rpx;
height: 120rpx;
background: #fff;
border-radius: 60rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
left: var(--space-4);
right: var(--space-4);
z-index: 999;
}
.service-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx 0 24rpx;
z-index: 1000;
padding: var(--space-4) var(--space-5);
background: var(--bg-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.service-left {
display: flex;
align-items: center;
gap: 20rpx;
gap: var(--space-4);
}
.service-icon {
width: 60rpx;
height: 60rpx;
}
.service-icon-wrap {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-tint);
border-radius: var(--radius-md);
}
.service-content {
display: flex;
flex-direction: column;
gap: 4rpx;
.service-icon {
width: 44rpx;
height: 44rpx;
}
.service-title {
font-size: 28rpx;
font-weight: 600;
color: var(--text-primary);
}
.service-content {
display: flex;
flex-direction: column;
gap: 2rpx;
}
.service-desc {
font-size: 22rpx;
color: var(--text-tertiary);
}
}
.service-title {
font-size: 28rpx;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.service-desc {
font-size: 24rpx;
color: var(--text-tertiary);
line-height: 1.3;
}
.service-btn {
padding: 16rpx 32rpx;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: #fff;
padding: var(--space-3) var(--space-5);
background: var(--primary);
color: var(--text-inverse);
font-size: 26rpx;
font-weight: 600;
border-radius: 40rpx;
border-radius: var(--radius-full);
line-height: 1;
}
</style>