pet-system-fulfiller-app/pages/mine/index.vue

<template>
    <view class="container">
        <!-- 顶部背景 -->
        <view class="nav-bg">
            <view class="bg-circle-1"></view>
            <view class="bg-circle-2"></view>
        </view>

        <!-- 头部用户信息 -->
        <view class="header-section">
            <view class="title-bar">个人中心</view>
            <view class="user-card" @click="navToProfile">
                <image class="avatar" :src="profile?.avatarUrl || '/static/touxiang.png'" mode="aspectFill"></image>
                <view class="info-content">
                    <view class="name-row">
                        <text class="name">{{ profile?.name || '未登录' }}</text>
                        <view class="tags">
                            <view class="tag green" v-if="profile?.status === '0'">接单中</view>
                            <view class="tag green" v-else-if="profile?.status === '1'">休息中</view>
                            <view class="tag" style="background:#eee;color:#999" v-else-if="profile?.status === '2'">已禁用
                            </view>
                            <view class="tag blue" v-if="profile?.workType === 'full_time'">全职</view>
                            <image class="bike-icon" src="/static/icons/motorbike.svg"></image>
                        </view>
                    </view>
                    <view class="detail-row">
                        <image class="small-icon" src="/static/icons/location.svg"></image>
                        <text>{{ profile?.stationName || profile?.cityName || '暂无站点' }}</text>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right_dark.svg"></image>
                    </view>
                    <view class="detail-row">
                        <image class="small-icon" src="/static/icons/calendar.svg"></image>
                        <text>已注册{{ profile?.registerDays || 0 }}天</text>
                    </view>
                </view>
                <image class="settings-icon" src="/static/icons/settings.svg" @click.stop="navToSettings"></image>
            </view>

            <!-- 黑金权益卡 -->
            <view class="vip-card">
                <view class="vip-left">
                    <image class="vip-icon" src="/static/icons/crown.svg"></image>
                    <view class="vip-text">
                        <text class="vip-title">{{ displayLevelName }}</text>
                        <text class="vip-desc">完成更多订单即可升级</text>
                    </view>
                </view>
                <view class="vip-btn" @click="navToLevel">
                    <text>查看权益</text>
                    <image class="arrow-icon-small" src="/static/icons/chevron_right_gold.svg"></image>
                </view>
            </view>
        </view>

        <!-- 统计面板 -->
        <view class="stats-panel">
            <view class="stat-item" @click="navToWallet">
                <view class="stat-header">
                    <view class="red-bar"></view>
                    <text class="label">我的钱包</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
                <view class="stat-value">
                    <text class="num">{{ profile?.balance ? (profile.balance / 100).toFixed(2) : '0.00' }}</text>
                    <text class="unit">元</text>
                </view>
                <text class="sub-text">账户余额</text>
            </view>
            <view class="divider"></view>
            <view class="stat-item" @click="navToOrderStats">
                <view class="stat-header">
                    <view class="green-bar"></view>
                    <text class="label">订单统计</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
                <view class="stat-value">
                    <text class="num">{{ profile?.orderCount || 0 }}</text>
                    <text class="unit">单</text>
                </view>
                <text class="sub-text">累计服务单量</text>
            </view>
            <view class="divider"></view>
            <view class="stat-item" @click="navToPoints">
                <view class="stat-header">
                    <view class="orange-bar"></view>
                    <text class="label">我的积分</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
                <view class="stat-value">
                    <text class="num">{{ profile?.points || 0 }}</text>
                    <text class="unit">分</text>
                </view>
                <text class="sub-text">可兑换权益</text>
            </view>
        </view>

        <!-- 菜单列表 -->
        <view class="menu-list">
            <!-- 此代码由AI生成 -->
            <!-- <view class="menu-item" @click="navToNotification">
                <image class="menu-icon" src="/static/icons/bell_linear.svg"></image>
                <text class="menu-text">消息中心</text>
                <view class="menu-right">
                    <view class="red-dot" v-if="totalUnread > 0"></view>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view> -->
            <view class="menu-item" @click="navToRewards">
                <image class="menu-icon" src="/static/icons/money_linear.svg"></image>
                <text class="menu-text">我的奖惩</text>
                <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
            </view>
            <view class="menu-item" @click="openServicePopup">
                <image class="menu-icon" src="/static/icons/headset_linear.svg"></image>
                <text class="menu-text">联系客服</text>
                <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
            </view>
        </view>

        <!-- 退出登录 -->
        <!-- 退出登录 -->
        <!-- <view class="logout-btn" @click="logout">退出登录</view>
        <view class="dev-tip">本APP部分功能开发当中，请只进行修改个人信息、修改设置、完成订单流程操作</view> -->
        <view class="logout-btn" @click="logout">退出登录</view>


        <!-- 联系客服弹窗 -->
        <view class="service-popup-mask" v-if="showServicePopup" @click="closeServicePopup">
            <view class="service-popup" @click.stop>
                <view class="service-header">
                    <text class="service-title">联系客服</text>
                    <image class="close-icon" src="/static/icons/close_gray.svg" @click="closeServicePopup"></image>
                </view>

                <view class="qr-section">
                    <text class="qr-title">客服二维码</text>
                    <image class="qr-img" :src="customerSetting.qrCodeUrl || '/static/logo.png'" @click="previewQRCode">
                    </image>
                    <text class="qr-desc">点击查看大图</text>
                </view>

                <view class="service-list">
                    <view class="service-row" @click="openOnlineService">
                        <image class="service-row-icon" src="/static/icons/headset_green.svg"></image>
                        <view class="service-info">
                            <text class="service-name">在线客服</text>
                            <text class="service-desc">{{ customerSetting.wechatAccount || '企业微信专属客服在线解答' }}</text>
                        </view>
                        <view class="call-btn" @click="openOnlineService">
                            <image class="phone-icon-small" src="/static/icons/headset_green.svg"></image>
                            <text>企业微信</text>
                        </view>
                    </view>

                    <view class="service-row">
                        <image class="service-row-icon" src="/static/icons/phone_orange.svg"></image>
                        <view class="service-info">
                            <text class="service-name">客服电话</text>
                            <text class="service-desc">{{ customerSetting.phoneNumber || '暂无电话' }}</text>
                        </view>
                        <view class="call-btn" @click="callServicePhone">
                            <image class="phone-icon-small" src="/static/icons/phone_green.svg"></image>
                            <text>拨打</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>


        <!-- 退出登录弹窗 -->
        <view class="logout-popup-mask" :class="{ 'show': showLogoutPopup }" @click="cancelLogout"
            @touchmove.stop.prevent>
            <view class="popup-modal" @click.stop>

                <text class="popup-title">退出登录</text>
                <text class="popup-desc">确定要退出当前账号吗？\n退出后需要重新登录才能使用完整功能。</text>
                <view class="popup-actions">
                    <view class="popup-btn cancel" @click="cancelLogout">取消</view>
                    <view class="popup-btn confirm" @click="confirmLogout">确定</view>
                </view>
            </view>
        </view>
    </view>
    <custom-tabbar currentPath="pages/mine/index"></custom-tabbar>
</template>

<script>
import { logout as logoutApi } from '@/api/auth'
import { getMyProfile } from '@/api/fulfiller/fulfiller'
import { listAllLevelConfigs } from '@/api/fulfiller/levelConfig'
import { getCustomerServiceSetting } from '@/api/system/customerServiceSetting'
import { clearAuth, isLoggedIn } from '@/utils/auth'
import { listMyNotice } from '@/api/system/notice'
import customTabbar from '@/components/custom-tabbar/index.vue'

export default {
    components: {
        customTabbar
    },
    data() {
        return {
            showServicePopup: false,
            showLogoutPopup: false,
            profile: null,
            profileLoading: false,
            levelConfigs: [], // 等级配置列表
            customerSetting: {
                wechatAccount: '',
                phoneNumber: '400-123-4567',
                qrCodeUrl: '/static/logo.png',
                enterpriseWechatLink: '',
                startServiceTime: '',
                endServiceTime: ''
            },
            totalUnread: 0
        }
    },
    computed: {
        // 根据 profile.level 匹配对应的等级名称
        displayLevelName() {
            if (!this.profile || !this.levelConfigs.length) return '普通履约者'
            const config = this.levelConfigs.find(c => c.lvNo === this.profile.level)
            return config ? config.name : (this.profile.levelName || '普通履约者')
        }
    },
    onShow() {
        uni.hideTabBar()
        if (isLoggedIn()) {
            this.loadProfile()
            this.loadLevelConfigs()
            this.fetchCustomerServiceSetting()
            // 此代码由AI生成
            // this.fetchUnreadCount()
        }
    },
    methods: {
        async fetchUnreadCount() {
            try {
                const res = await listMyNotice({
                    readFlag: false,
                    pageNum: 1,
                    pageSize: 1
                });
                this.totalUnread = Number(res.total) || 0;
            } catch (err) {
                console.error('获取总未读数失败:', err);
            }
        },
        async loadProfile() {
            if (this.profileLoading) return
            this.profileLoading = true
            try {
                const res = await getMyProfile()
                this.profile = res.data || null
            } catch (err) {
                console.error('获取个人信息失败:', err)
            } finally {
                this.profileLoading = false
            }
        },
        async loadLevelConfigs() {
            try {
                const res = await listAllLevelConfigs()
                this.levelConfigs = res.data || []
            } catch (err) {
                console.error('加载等级配置失败:', err)
            }
        },
        async fetchCustomerServiceSetting() {
            try {
                const res = await getCustomerServiceSetting(1)
                if (res.code === 200 && res.data) {
                    this.customerSetting = { ...this.customerSetting, ...res.data }
                }
            } catch (err) {
                console.error('获取客服配置失败:', err)
            }
        },
        navToSettings() {
            uni.navigateTo({
                url: '/pages/mine/settings/index'
            });
        },
        navToProfile() {
            uni.navigateTo({
                url: '/pages/mine/settings/profile/index'
            });
        },
        navToLevel() {
            uni.navigateTo({
                url: '/pages/mine/level/index'
            });
        },
        navToNotification() {
            uni.navigateTo({
                url: '/pages/mine/message/index'
            });
        },
        navToWallet() {
            uni.navigateTo({
                url: '/pages/mine/wallet/index'
            });
        },
        navToPoints() {
            uni.navigateTo({
                url: '/pages/mine/points/index'
            });
        },
        navToOrderStats() {
            uni.navigateTo({
                url: '/pages/mine/order-stats/index'
            });
        },
        navToRewards() {
            uni.navigateTo({
                url: '/pages/mine/rewards/index'
            });
        },
        openServicePopup() {
            this.showServicePopup = true;
        },
        closeServicePopup() {
            this.showServicePopup = false;
        },
        previewQRCode() {
            if (!this.customerSetting.qrCodeUrl) return;
            uni.previewImage({
                urls: [this.customerSetting.qrCodeUrl]
            });
        },
        openOnlineService() {
            // 如果有企业微信链接，则打开
            if (this.customerSetting.enterpriseWechatLink) {
                // #ifdef H5
                window.location.href = this.customerSetting.enterpriseWechatLink;
                // #endif
                // #ifndef H5
                uni.setClipboardData({
                    data: this.customerSetting.wechatAccount || this.customerSetting.enterpriseWechatLink,
                    success: () => {
                        uni.showToast({ title: '链接已复制，请在浏览器或微信打开', icon: 'none' });
                    }
                });
                // #endif
            } else {
                uni.showToast({
                    title: '在线客服暂未配置',
                    icon: 'none'
                });
            }
        },
        callServicePhone() {
            if (!this.customerSetting.phoneNumber) {
                uni.showToast({ title: '暂无联系电话', icon: 'none' });
                return;
            }
            uni.makePhoneCall({
                phoneNumber: this.customerSetting.phoneNumber
            });
        },
        logout() {
            this.showLogoutPopup = true;
        },
        cancelLogout() {
            this.showLogoutPopup = false;
        },
        async confirmLogout() {
            this.showLogoutPopup = false;
            try {
                await logoutApi()
            } catch (e) {
                // 即使后端退出失败，也清除本地登录态
            }
            clearAuth()
            uni.reLaunch({
                url: '/pages/login/index'
            });
        }
    }
}
</script>

<style>
/* 页面背景 */
page {
    background-color: #F8F8F8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
    padding-bottom: 30rpx;
    position: relative;
    overflow-x: hidden;
}

/* 顶部背景 */
.nav-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 增加高度以覆盖顶部，确保上移后背景仍然充足 */
    height: 550rpx;
    /* 调整渐变色，使其更接近设计图的暖色调 */
    background: linear-gradient(180deg, #FFE0B2 0%, #F8F8F8 100%);
    z-index: 1;
    overflow: hidden;
    border-bottom-left-radius: 60rpx;
    border-bottom-right-radius: 60rpx;
}

/* 装饰性圆球 - 加深颜色 */
.bg-circle-1 {
    position: absolute;
    top: -60rpx;
    right: -60rpx;
    width: 320rpx;
    height: 320rpx;
    /* 加深颜色 */
    background: radial-gradient(circle, rgba(255, 167, 38, 0.4) 0%, rgba(255, 167, 38, 0) 70%);
    border-radius: 50%;
}

.bg-circle-2 {
    position: absolute;
    top: 80rpx;
    left: -100rpx;
    width: 420rpx;
    height: 420rpx;
    /* 加深颜色 */
    background: radial-gradient(circle, rgba(255, 183, 77, 0.4) 0%, rgba(255, 183, 77, 0) 70%);
    border-radius: 50%;
}

/* 头部区域 */
.header-section {
    position: relative;
    z-index: 2;
    padding: 120rpx 30rpx 0;
}

.title-bar {
    text-align: center;
    font-size: 32rpx;
    /* 16pt = 32rpx, consistent with name */
    font-weight: 500;
    color: #333;
    margin-bottom: 30rpx;
}

.user-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30rpx;
    position: relative;
}

.avatar {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 3rpx solid #fff;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.info-content {
    flex: 1;
    padding-top: 5rpx;
}

.name-row {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
}

.name {
    /* 16号字体 = 32rpx */
    font-size: 32rpx;
    font-weight: bold;
    color: #1A1A1A;
    margin-right: 12rpx;
}

.tags {
    display: flex;
    align-items: center;
}

.tag {
    font-size: 18rpx;
    padding: 2rpx 6rpx;
    border-radius: 4rpx;
    margin-right: 8rpx;
    line-height: 1.2;
}

.tag.green {
    color: #4CAF50;
    background-color: #E8F5E9;
    border: 1px solid #C8E6C9;
}

.tag.blue {
    color: #2196F3;
    background-color: #E3F2FD;
    border: 1px solid #BBDEFB;
}

.bike-icon {
    width: 28rpx;
    height: 28rpx;
    background-color: #FFF3E0;
    border-radius: 4rpx;
    padding: 2rpx;
}

.detail-row {
    display: flex;
    align-items: center;
    /* 12号字体 = 24rpx */
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
}

.small-icon {
    width: 24rpx;
    /* Slightly increase icon to match font */
    height: 24rpx;
    margin-right: 8rpx;
}

.settings-icon {
    width: 36rpx;
    height: 36rpx;
    position: absolute;
    top: 0;
    right: 0;
}

/* VIP 卡片 - 独立卡片样式 */
.vip-card {
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FDD835;
    background: linear-gradient(90deg, #1f1f1f 0%, #141414 100%);
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
    margin-bottom: 30rpx;
    position: relative;
}

.vip-left {
    display: flex;
    align-items: center;
}

.vip-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
}

.vip-text {
    display: flex;
    flex-direction: column;
}

.vip-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #FFE082;
    margin-bottom: 4rpx;
}

.vip-desc {
    font-size: 16rpx;
    color: #9E9E9E;
}

.vip-btn {
    font-size: 20rpx;
    color: #FFE082;
    display: flex;
    /* Flex layout to align text and icon */
    align-items: center;
}

/* 统计面板 */
.stats-panel {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 0;
    margin: 0 30rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 3;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 30rpx;
}

.stat-header {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
    /* 12号字体 = 24rpx */
    font-size: 24rpx;
    color: #333;
    font-weight: normal;
}

.arrow-icon {
    width: 20rpx;
    height: 20rpx;
    margin-left: 6rpx;
    opacity: 0.6;
}

.arrow-icon-small {
    width: 18rpx;
    height: 18rpx;
    margin-left: 4rpx;
    opacity: 0.8;
}

.red-bar,
.green-bar,
.orange-bar {
    width: 6rpx;
    height: 18rpx;
    margin-right: 10rpx;
    border-radius: 3rpx;
}

.red-bar {
    background-color: #FF5252;
}

.green-bar {
    background-color: #4CAF50;
}

.orange-bar {
    background-color: #FF9800;
}

.stat-value {
    margin-bottom: 6rpx;
    display: flex;
    align-items: baseline;
}

.num {
    /* 16号字体 = 32rpx */
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-right: 6rpx;
    line-height: 1;
}

.unit {
    font-size: 20rpx;
    color: #666;
}

.sub-text {
    font-size: 18rpx;
    color: #999;
}

.divider {
    width: 1px;
    height: 50rpx;
    background-color: #E0E0E0;
}

/* 菜单列表 */
.menu-list {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0 30rpx 30rpx;
    padding: 0 30rpx;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.03);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1px solid #F5F5F5;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
}

.menu-text {
    flex: 1;
    /* 14号字体 = 28rpx */
    font-size: 28rpx;
    color: #333;
}

.menu-right {
    display: flex;
    align-items: center;
}

/* 加大菜单列表的箭头 */
.menu-item .arrow-icon {
    width: 28rpx;
    height: 28rpx;
    opacity: 0.5;
}

.red-dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #FF5252;
    border-radius: 50%;
    margin-right: 12rpx;
}

/* 退出按钮 */
.logout-btn {
    background-color: #fff;
    margin: 0 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 20rpx;
    color: #FF5252;
    font-size: 28rpx;
    font-weight: 500;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.03);
}

/* 开发提示文字 */
.dev-tip {
    margin: 40rpx 60rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
    line-height: 1.6;
}

/* 联系客服弹窗样式 */
.service-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-popup {
    width: 600rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.service-title {
    /* 14号字体 = 28rpx，不加粗 */
    font-size: 28rpx;
    font-weight: normal;
    color: #333;
}

.close-icon {
    width: 28rpx;
    height: 28rpx;
    opacity: 0.6;
}

.qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
    background-color: #fff;
}

.qr-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 30rpx;
    font-weight: 500;
}

.qr-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.qr-desc {
    /* 12号字体 = 24rpx */
    font-size: 24rpx;
    color: #999;
}

.service-list {
    padding: 0 30rpx;
    padding-bottom: 30rpx;
}

.service-row {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-top: 1rpx solid #f5f5f5;
}

.service-row:last-child {
    border-bottom: none;
}

.service-row-icon {
    width: 56rpx;
    height: 56rpx;
    margin-right: 24rpx;
}

.service-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-name {
    /* 13号字体 = 26rpx */
    font-size: 26rpx;
    color: #333;
    margin-bottom: 4rpx;
    font-weight: 500;
}

.service-desc {
    /* 12号字体 = 24rpx */
    font-size: 24rpx;
    color: #999;
}

.call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8F5E9;
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
    height: 56rpx;
    box-sizing: border-box;
}

.call-btn text {
    font-size: 24rpx;
    color: #4CAF50;
    margin-left: 8rpx;
    font-weight: 500;
}

.phone-icon-small {
    width: 24rpx;
    height: 24rpx;
}

/* 退出登录弹窗样式 */
.logout-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.logout-popup-mask.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-modal {
    width: 520rpx;
    background-color: #fff;
    border-radius: 30rpx;
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s;
}

.logout-popup-mask.show .popup-modal {
    transform: scale(1);
}

.popup-icon-wrapper {
    width: 120rpx;
    height: 120rpx;
    background-color: #FFF3E0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
}

.popup-icon-large {
    width: 60rpx;
    height: 60rpx;
}

.popup-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.popup-desc {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 50rpx;
}

.popup-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.popup-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 40rpx;
    margin: 0 15rpx;
}

.popup-btn.cancel {
    background-color: #F5F5F5;
    color: #666;
}

.popup-btn.confirm {
    background-color: #FF9800;
    color: #fff;
    box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
}
</style>