75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<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>
|
||
</view>
|
||
<view class="service-btn">立即联系</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const emit = defineEmits(['tap']);
|
||
|
||
const handleClick = () => {
|
||
emit('tap');
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.floating-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);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx 0 24rpx;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.service-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
|
||
.service-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.service-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
|
||
.service-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.service-desc {
|
||
font-size: 22rpx;
|
||
color: var(--text-tertiary);
|
||
}
|
||
}
|
||
}
|
||
|
||
.service-btn {
|
||
padding: 16rpx 32rpx;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
border-radius: 40rpx;
|
||
}
|
||
</style> |