huang
c341ef1aac
基于移动优先原则优化布局、排版、颜色和间距，提升设计感和专业度。 - 重构全局设计系统：颜色、阴影、间距、圆角、排版 - 优化 UserInfoCard：更大的头像和状态徽章设计 - 优化 DeviceStatusCard：信息层级和指标网格 - 优化 TrafficCard：进度条和数字排版 - 优化 FunctionCard：4列布局和触摸反馈 - 优化 WifiCard：列表设计和信息层次 - 优化 FloatingButton：去除渐变，纯色设计 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
||
<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>
|
||
</template>
|
||
|
||
<script setup>
|
||
const emit = defineEmits(['tap']);
|
||
|
||
const handleClick = () => {
|
||
emit('tap');
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.service-card {
|
||
position: fixed;
|
||
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: 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: var(--space-4);
|
||
}
|
||
|
||
.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-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.service-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2rpx;
|
||
}
|
||
|
||
.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: var(--space-3) var(--space-5);
|
||
background: var(--primary);
|
||
color: var(--text-inverse);
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-full);
|
||
line-height: 1;
|
||
}
|
||
</style> |