<template> <view :class="['app-container', theme]...

下面给你一份可直接跑的 uni-app（Vue3 + <script setup>）打卡主页面，已经按你给的后端 API 做了对接：

• ✅ 16.clockInConfigShow：获取打卡配置
• ✅ 4.clockIn：上班/下班打卡 & 补卡
• ✅ 42.timekeeping：获取当月考勤记录，并回显“今天上/下班是否已打卡、打卡时间”
• ✅ 底部“审批 / 补卡”等入口 按截图移到页面内容里（不再 fixed 贴底），位置更靠上、更像截图效果
• ✅ 修复：按钮时间不动、shakeFlag 不生效、距离计算判空不严谨等问题

把下面整段保存为一个页面（例如：/pages/clockin/index.vue），然后把你的路由跳转地址按你项目真实路径改一下即可。

注意：我默认你的 ajax.post({ url: 'xxx', method:'post', data }) 会自动拼接 baseURL 并发请求；如果你们实际是 '/api/xxx' 这种，改下 url 即可。

vue
<template>
	<view :class="['app-container', theme]">
		<view class="content">
			<view class="overlay">
				<!-- Header -->
				<view class="header" :style="{ paddingTop: statusBarHeight + 'px', height: headerBarHeight + 'px' }">
					<view class="header-inner">
						<view class="left-box" @click="navigateBack">
							<uni-icons type="left" color="#000000" size="26" />
						</view>

						<view class="center-box">
							<text class="title-text">打卡</text>
						</view>

						<view class="right-box" @click="openMore">
							<uni-icons type="more-filled" color="#000000" size="22" />
						</view>
					</view>
				</view>

				<!-- body -->
				<view class="page">
					<!-- 顶部用户行 -->
					<view class="user-row">
						<image class="avatar" :src="userAvatar" mode="aspectFill" />
						<view class="user-meta">
							<text class="username">{{ userName }}</text>
							<text class="rules" @click="openRules">（打卡规则）</text>
						</view>
					</view>

					<!-- 主卡片 -->
					<view class="main-card">
						<view class="card-top">
							<text class="top-text">{{ topStatusText }}</text>
							<view class="refresh" @click="refreshAll">
								<uni-icons type="reload" color="#666666" size="18" />
							</view>
						</view>

						<view v-if="loadingConfig" class="skeleton">加载打卡配置...</view>

						<template v-else>
							<view class="row2">
								<!-- 上班 -->
								<view class="mini">
									<text class="mini-title">上班{{ startHHMM }}</text>
									<text class="mini-sub" :class="today.on ? 'ok' : 'muted'">
										{{ today.on ? ('打卡时间：' + formatTime(today.on.clockTime)) : '未打卡' }}
									</text>
								</view>

								<!-- 下班 -->
								<view class="mini">
									<text class="mini-title">下班{{ overHHMM }}</text>
									<text class="mini-sub" :class="today.off ? 'ok' : 'muted'">
										{{ today.off ? ('打卡时间：' + formatTime(today.off.clockTime)) : '未打卡' }}
									</text>
								</view>
							</view>

							<!-- 中央按钮 -->
							<view class="center-area">
								<view
									:class="[
										'big-btn',
										btnStateClass,
										pressed ? 'pressed' : '',
										shakeFlag ? 'shake' : ''
									]"
									@touchstart="pressed = true"
									@touchend="pressed = false"
									@touchcancel="pressed = false"
									@click="onBigClockClick"
								>
									<view class="pulse" v-if="canClock && !clocking"></view>

									<text class="big-line1">{{ bigLine1 }}</text>
									<text class="big-line2">{{ bigLine2 }}</text>
									<text class="big-line3">{{ bigLine3 }}</text>

									<view class="success-badge" v-if="showSuccess">
										<uni-icons type="checkmarkempty" color="#ffffff" size="20" />
									</view>
								</view>

								<!-- 地址 / 范围提示（截图是在圆点下方） -->
								<view class="addr-row" @click="chooseLocation">
									<view class="dot" :class="inScope ? 'dot-ok' : 'dot-warn'"></view>
									<text class="addr-text">
										{{ location.address || config?.address || '点击选择/刷新定位' }}
										<text v-if="distanceText" class="dist">（{{ distanceText }}）</text>
									</text>
								</view>

								<view v-if="!isWorkday" class="tip-warn">今天不是工作日，按规则无需打卡</view>
								<view v-else-if="configError" class="tip-warn">{{ configError }}</view>
							</view>
						</template>
					</view>

					<!-- ✅ 工具栏：按截图“往上移动”，放到页面内容里（不 fixed 贴底） -->
					<view class="tool-card">
						<view class="bar-item" @click="goApprove">
							<view class="bar-ico"><uni-icons type="list" color="#333333" size="22" /></view>
							<text class="bar-txt">审批</text>
						</view>

						<view class="bar-item active">
							<view class="bar-ico"><uni-icons type="flag" color="#333333" size="22" /></view>
							<text class="bar-txt">打卡</text>
						</view>

						<view class="bar-item" @click="openMakeup">
							<view class="bar-ico"><uni-icons type="compose" color="#333333" size="22" /></view>
							<text class="bar-txt">补卡</text>
						</view>

						<view class="bar-item" @click="goLeave">
							<view class="bar-ico"><uni-icons type="calendar" color="#333333" size="22" /></view>
							<text class="bar-txt">请假</text>
						</view>

						<view class="bar-item" @click="goStats">
							<view class="bar-ico"><uni-icons type="person" color="#333333" size="22" /></view>
							<text class="bar-txt">统计</text>
						</view>
					</view>

					<!-- 给底部留一点空间（更像截图） -->
					<view style="height: 24rpx;"></view>
				</view>

				<!-- 补卡弹层 -->
				<view v-if="makeup.visible" class="modal-mask" @click.self="makeup.visible=false">
					<view class="modal">
						<view class="modal-title">补卡</view>

						<view class="form-row">
							<text class="label">时间</text>
							<picker mode="date" :value="makeup.date" @change="e=>makeup.date=e.detail.value">
								<view class="picker">{{ makeup.date }}</view>
							</picker>
							<picker mode="time" :value="makeup.time" @change="e=>makeup.time=e.detail.value">
								<view class="picker">{{ makeup.time }}</view>
							</picker>
						</view>

						<view class="form-row">
							<text class="label">备注</text>
							<input class="input" v-model="makeup.remark" placeholder="补卡原因..." />
						</view>

						<view class="form-row">
							<text class="label">审批人ID</text>
							<input class="input" v-model="makeup.confirmConsumerId" placeholder="confirmConsumerId（可选/按后端要求）" />
						</view>

						<view class="btn-row">
							<view class="btn ghost" @click="makeup.visible=false">取消</view>
							<view class="btn" @click="submitMakeup" :class="clocking ? 'disabled' : ''">提交</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
import ajax from '@/api/ajax.js'
import { getStatusBarHeight, getTitleBarHeight } from '@/utils/system.js'
import { ref, reactive, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/index.js'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'

// theme
const store = useMainStore()
const { theme } = storeToRefs(store)

// header heights
const statusBarHeight = ref(getStatusBarHeight())
const headerBarHeight = ref(getTitleBarHeight())

// basic user
const userName = ref('用户名')
const userAvatar = ref('')

// params
const castingTeamId = ref('') // 组id
const consumerId = ref('')     // 用户id

// config
const loadingConfig = ref(false)
const configError = ref('')
const config = ref(null)

// today records
const today = reactive({
	on: null,  // { clockTime, type, address, longitude, latitude }
	off: null,
})

// ui states
const pressed = ref(false)
const clocking = ref(false)
const showSuccess = ref(false)
const shakeFlag = ref(false)

const location = reactive({
	latitude: null,
	longitude: null,
	address: ''
})

// 补卡
const makeup = reactive({
	visible: false,
	date: new Date().toISOString().slice(0, 10),
	time: String(new Date().getHours()).padStart(2, '0') + ':' + String(new Date().getMinutes()).padStart(2, '0'),
	remark: '',
	confirmConsumerId: ''
})

// 动态时间（让按钮上的秒表动起来）
const nowTime = ref(new Date())
let timer = null

// ---------- helpers ----------
function respData(res) {
	return res?.data || res || {}
}
function isSuccess(res) {
	const d = respData(res)
	const r = d?.result
	if (r === 'success' || r === true || r === 0 || r === '0') return true
	if (d?.code === 0 || d?.success === true) return true
	return false
}
function respMsg(res) {
	const d = respData(res)
	return d?.remark || d?.msg || d?.message || d?.error || ''
}

function navigateBack() {
	uni.navigateBack()
}

function openMore() {
	// 你原来的设置页
	uni.navigateTo({
		url: '/pages/sociAlize/Coffeegroup/application/CheckinSettings/Settings/Checksettings?castingTeamId=' + castingTeamId.value
	})
}

function openRules() {
	if (!config.value) return
	uni.showModal({
		title: '打卡规则',
		content: `上班：${startHHMM.value}\n下班：${overHHMM.value}\n范围：${config.value?.scope ?? '-'}m\n地址：${config.value?.address || ''}`,
		showCancel: false
	})
}

// 取 HH:mm（兼容：Date/ISO/“HH:mm”/“YYYY-MM-DD HH:mm:ss”）
function toHHMM(v) {
	if (!v) return '--:--'
	const s = String(v)
	const m = s.match(/(\d{2}):(\d{2})/)
	if (m) return `${m[1]}:${m[2]}`
	const d = new Date(v)
	if (!Number.isNaN(d.getTime())) {
		return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
	}
	return '--:--'
}

// 时间显示（打卡时间用）
function formatTime(v) {
	return toHHMM(v)
}

// 日期时间串（给后端 clockTime 用，避免 Date 直传被序列化不一致）
function formatDateTime(d) {
	const dt = (d instanceof Date) ? d : new Date(d)
	const yyyy = dt.getFullYear()
	const MM = String(dt.getMonth() + 1).padStart(2, '0')
	const dd = String(dt.getDate()).padStart(2, '0')
	const hh = String(dt.getHours()).padStart(2, '0')
	const mm = String(dt.getMinutes()).padStart(2, '0')
	const ss = String(dt.getSeconds()).padStart(2, '0')
	return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
}

const startHHMM = computed(() => config.value?.startTime ? (' ' + toHHMM(config.value.startTime)) : ' --:--')
const overHHMM  = computed(() => config.value?.overTime  ? (' ' + toHHMM(config.value.overTime))  : ' --:--')

// 工作日判断
const isWorkday = computed(() => {
	if (!config.value) return true
	const day = new Date().getDay() // 0 Sun ... 6 Sat
	const map = { 1:'monday', 2:'tuesday', 3:'wednesday', 4:'thursday', 5:'friday', 6:'saturday', 0:'sunday' }
	const key = map[day]
	const v = config.value?.[key]
	if (v === undefined || v === null) return true
	// 兼容 boolean / 0|1 / "0"|"1"
	return Boolean(Number(v) || v === true)
})

// 距离计算（米）
function haversine(lat1, lon1, lat2, lon2) {
	const toRad = x => (x * Math.PI) / 180
	const R = 6371000
	const dLat = toRad(lat2 - lat1)
	const dLon = toRad(lon2 - lon1)
	const a =
		Math.sin(dLat / 2) * Math.sin(dLat / 2) +
		Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
		Math.sin(dLon / 2) * Math.sin(dLon / 2)
	const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
	return R * c
}

const distance = computed(() => {
	const lat  = Number(location.latitude)
	const lon  = Number(location.longitude)
	const lat2 = Number(config.value?.latitude)
	const lon2 = Number(config.value?.longitude)

	if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(lat2) || !Number.isFinite(lon2)) return null
	return haversine(lat, lon, lat2, lon2)
})

const inScope = computed(() => {
	const d = distance.value
	const scope = Number(config.value?.scope || 0)
	if (d === null || !scope) return true
	return d <= scope
})

const distanceText = computed(() => {
	const d = distance.value
	if (d === null) return ''
	if (d < 1000) return `${Math.round(d)}m`
	return `${(d / 1000).toFixed(2)}km`
})

// 下一步动作
const nextAction = computed(() => {
	if (!isWorkday.value) return 'none'
	if (!today.on) return 'on'
	if (!today.off) return 'off'
	return 'done'
})

const doneCount = computed(() => (today.on ? 1 : 0) + (today.off ? 1 : 0))
const topStatusText = computed(() => {
	if (!config.value) return '暂无打卡'
	if (nextAction.value === 'done') return '今日已完成打卡'
	return `已打卡 ${doneCount.value}/2`
})

// 中央按钮文案（更贴近截图）
const bigLine1 = computed(() => {
	if (!config.value) return '加载中'
	if (!isWorkday.value) return '休息日'
	if (!inScope.value) return '外勤'
	return '正常'
})
const bigLine2 = computed(() => {
	if (nextAction.value === 'on') return '上班打卡'
	if (nextAction.value === 'off') return '下班打卡'
	if (nextAction.value === 'done') return '已完成'
	return '—'
})
const bigLine3 = computed(() => {
	const d = nowTime.value
	const hh = String(d.getHours()).padStart(2, '0')
	const mm = String(d.getMinutes()).padStart(2, '0')
	const ss = String(d.getSeconds()).padStart(2, '0')
	return `${hh}:${mm}:${ss}`
})

const canClock = computed(() => {
	if (!config.value) return false
	if (!isWorkday.value) return false
	return nextAction.value === 'on' || nextAction.value === 'off'
})

const btnStateClass = computed(() => {
	if (!config.value) return 'btn-loading'
	if (!canClock.value) return 'btn-disabled'
	if (!inScope.value) return 'btn-warn'
	return 'btn-ok'
})

// ---------- location ----------
function getLocation() {
	return new Promise((resolve, reject) => {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				location.latitude = res.latitude
				location.longitude = res.longitude
				resolve(res)
			},
			fail: reject
		})
	})
}

function chooseLocation() {
	uni.chooseLocation({
		success: (res) => {
			location.address = res.address || res.name || ''
			location.latitude = res.latitude
			location.longitude = res.longitude
		}
	})
}

// ---------- API ----------

// 16.clockInConfigShow 打卡配置
async function fetchConfig() {
	loadingConfig.value = true
	configError.value = ''
	try {
		const res = await ajax.post({
			url: 'clockInConfigShow',
			method: 'post',
			data: {
				castingTeamId: String(castingTeamId.value),
				consumerId: String(consumerId.value)
			}
		})
		if (!isSuccess(res)) {
			configError.value = respMsg(res) || '获取打卡配置失败'
			config.value = null
			return
		}
		const d = respData(res)
		config.value = d?.data || d
	} catch (e) {
		configError.value = '获取打卡配置失败'
		config.value = null
	} finally {
		loadingConfig.value = false
	}
}

// 42.timekeeping 当月考勤（用于回显“今天上/下班”）
async function fetchTodayRecords() {
	// 先尝试从后端拉
	try {
		const now = new Date()
		const year = now.getFullYear()
		const month = now.getMonth() + 1

		const res = await ajax.post({
			url: 'timekeeping',
			method: 'post',
			data: {
				consumerId: String(consumerId.value),
				castingTeamId: String(castingTeamId.value),
				year,
				month
			}
		})

		if (isSuccess(res)) {
			const d = respData(res)
			const arr = d?.timekeepingArray || d?.data?.timekeepingArray || d?.data || d || []
			const todayStr = now.toISOString().slice(0, 10)

			// 找到今日记录
			const one = Array.isArray(arr)
				? arr.find(x => String(x?.date || '').slice(0, 10) === todayStr)
				: null

			// reset
			today.on = null
			today.off = null

			const clockArr = one?.clockInArray || []
			// type: 0正常上班 1外勤上班 2正常下班 3外勤下班 4补卡
			for (const r of clockArr) {
				const t = Number(r?.type)
				if (t === 0 || t === 1) {
					// 若有多个，取最早一次作为“上班”
					if (!today.on || new Date(r.clockTime).getTime() < new Date(today.on.clockTime).getTime()) {
						today.on = r
					}
				}
				if (t === 2 || t === 3) {
					// 若有多个，取最晚一次作为“下班”
					if (!today.off || new Date(r.clockTime).getTime() > new Date(today.off.clockTime).getTime()) {
						today.off = r
					}
				}
			}

			saveTodayCache()
			return
		}
	} catch (e) {
		// ignore，走缓存兜底
	}

	// 兜底：读本地缓存
	try {
		const key = todayCacheKey()
		const cache = uni.getStorageSync(key)
		if (cache) {
			const obj = JSON.parse(cache)
			today.on = obj.on || null
			today.off = obj.off || null
		}
	} catch {}
}

function todayCacheKey() {
	return `clockin_today_${consumerId.value}_${castingTeamId.value}_${new Date().toISOString().slice(0, 10)}`
}
function saveTodayCache() {
	uni.setStorageSync(todayCacheKey(), JSON.stringify({ on: today.on, off: today.off }))
}

// 点击刷新
async function refreshAll() {
	uni.vibrateShort?.()
	await Promise.all([fetchConfig(), fetchTodayRecords()])
	try { await getLocation() } catch {}
}

// 4.clockIn 打卡/补卡
async function clockIn(type) {
	clocking.value = true
	showSuccess.value = false

	const now = new Date()
	const payload = {
		id: config.value?.id, // 打卡设置id
		consumerId: String(consumerId.value),
		castingTeamId: String(castingTeamId.value),
		address: location.address || config.value?.address || '',
		clockTime: formatDateTime(now), // 用字符串更稳
		longitude: String(location.longitude ?? ''),
		latitude: String(location.latitude ?? ''),
		type, // 0/1/2/3/4
		remark: '',
		state: 0,
		confirmConsumerId: ''
	}

	try {
		const res = await ajax.post({
			url: 'clockIn',
			method: 'post',
			data: payload
		})

		if (!isSuccess(res)) {
			uni.showToast({ title: respMsg(res) || '打卡失败', icon: 'none' })
			shakeBtn()
			return
		}

		// 成功回显（本地先顶上）
		const record = {
			clockTime: payload.clockTime,
			type,
			address: payload.address,
			longitude: payload.longitude,
			latitude: payload.latitude
		}

		if (type === 0 || type === 1) today.on = record
		if (type === 2 || type === 3) today.off = record
		saveTodayCache()

		showSuccess.value = true
		uni.showToast({ title: '打卡成功', icon: 'success' })
		setTimeout(() => (showSuccess.value = false), 1200)
	} catch (e) {
		uni.showToast({ title: '打卡失败', icon: 'none' })
		shakeBtn()
	} finally {
		clocking.value = false
	}
}

function shakeBtn() {
	shakeFlag.value = true
	setTimeout(() => (shakeFlag.value = false), 420)
}

// 大按钮点击
async function onBigClockClick() {
	if (!config.value) return
	if (!isWorkday.value) {
		uni.showToast({ title: '今天非工作日', icon: 'none' })
		return
	}
	if (!canClock.value || clocking.value) return

	// 确保有定位
	try {
		await getLocation()
	} catch {
		uni.showToast({ title: '定位失败，请授权或手动选点', icon: 'none' })
		return
	}

	const act = nextAction.value
	const scopeOk = inScope.value

	// 类型映射：范围内 -> 正常上/下班；范围外 -> 外勤上/下班
	if (act === 'on') {
		await clockIn(scopeOk ? 0 : 1)
	} else if (act === 'off') {
		await clockIn(scopeOk ? 2 : 3)
	}
}

// 补卡
function openMakeup() {
	makeup.visible = true
}

async function submitMakeup() {
	if (clocking.value) return
	if (!config.value) return

	const dt = new Date(`${makeup.date} ${makeup.time}:00`)
	if (Number.isNaN(dt.getTime())) {
		uni.showToast({ title: '时间不合法', icon: 'none' })
		return
	}

	clocking.value = true
	try {
		const payload = {
			id: config.value?.id,
			consumerId: String(consumerId.value),
			castingTeamId: String(castingTeamId.value),
			address: location.address || config.value?.address || '',
			clockTime: formatDateTime(dt),
			longitude: String(location.longitude ?? ''),
			latitude: String(location.latitude ?? ''),
			type: 4, // 补卡
			remark: makeup.remark || '',
			state: 0,
			confirmConsumerId: makeup.confirmConsumerId || ''
		}

		const res = await ajax.post({
			url: 'clockIn',
			method: 'post',
			data: payload
		})

		if (!isSuccess(res)) {
			uni.showToast({ title: respMsg(res) || '补卡失败', icon: 'none' })
			return
		}

		uni.showToast({ title: '补卡已提交', icon: 'success' })
		makeup.visible = false
		makeup.remark = ''
		// 补卡是否要回显进 today.on/off，建议以你们后端返回的 type/规则为准再写入
	} catch (e) {
		uni.showToast({ title: '补卡失败', icon: 'none' })
	} finally {
		clocking.value = false
	}
}

// 底部入口（按你项目路由改）
function goApprove() {
	uni.navigateTo({ url: '/pages/xxx/approve' })
}
function goLeave() {
	uni.navigateTo({ url: '/pages/xxx/leave' })
}
function goStats() {
	uni.navigateTo({ url: '/pages/xxx/stats' })
}

// ---------- lifecycle ----------
async function init(option) {
	consumerId.value = uni.getStorageSync('consumerId') || ''
	castingTeamId.value = option?.castingTeamId ? decodeURIComponent(option.castingTeamId) : ''

	userName.value = uni.getStorageSync('nickName') || '用户名'
	userAvatar.value = uni.getStorageSync('avatarUrl') || userAvatar.value

	await fetchConfig()
	await fetchTodayRecords()
	try { await getLocation() } catch {}
}

onLoad((option) => {
	init(option || {})
	// 秒表动起来
	timer = setInterval(() => {
		nowTime.value = new Date()
	}, 1000)
})

// 页面回到前台时，顺手刷新一次（避免从设置页回来不更新）
onShow(() => {
	if (consumerId.value && castingTeamId.value) {
		fetchTodayRecords()
	}
})

onUnload(() => {
	if (timer) clearInterval(timer)
	timer = null
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/global.scss';

.content {
	min-height: 100vh;
	position: relative;
	background: #f2f2f2;
}
.overlay {
	position: absolute;
	inset: 0;
	background: #f2f2f2;
}

/* header */
.header { width: 94%; margin: 0 auto; }
.header-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.left-box, .right-box {
	position: absolute;
	top: 0; bottom: 0;
	width: 120rpx;
	display: flex;
	align-items: center;
}
.left-box { left: 0; justify-content: flex-start; }
.right-box { right: 0; justify-content: flex-end; }
.title-text {
	font-size: 32rpx;
	color: #111;
	font-weight: 600;
}

.page {
	width: 94%;
	margin: 0 auto;
	padding-top: 14rpx;
	padding-bottom: 40rpx;
}

/* user */
.user-row {
	display: flex;
	align-items: center;
	margin: 6rpx 0 14rpx;
}
.avatar {
	width: 84rpx;
	height: 84rpx;
	border-radius: 42rpx;
	background: #ddd;
}
.user-meta {
	margin-left: 16rpx;
	display: flex;
	flex-direction: row;
	align-items: baseline;
}
.username {
	font-size: 30rpx;
	color: #111;
	font-weight: 600;
}
.rules {
	font-size: 26rpx;
	color: #f0a23a;
	margin-left: 10rpx;
}

/* main card */
.main-card {
	background: #fff;
	border-radius: 18rpx;
	padding: 18rpx;
}
.card-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 0 8rpx;
}
.top-text { font-size: 28rpx; color: #444; }
.refresh {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	opacity: .9;
}
.skeleton { padding: 28rpx 10rpx; color: #避免; font-size: 26rpx; }

.row2 {
	display: flex;
	gap: 14rpx;
	margin-top: 10rpx;
}
.mini {
	flex: 1;
	background: #f2f2f2;
	border-radius: 14rpx;
	padding: 14rpx 14rpx 12rpx;
}
.mini-title { font-size: 26rpx; color: #333; }
.mini-sub { margin-top: 10rpx; font-size: 24rpx; }
.ok { color: #333; }
.muted { color: #777; }

/* center */
.center-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26rpx 0 10rpx;
}
.big-btn {
	width: 260rpx;
	height: 260rpx;
	border-radius: 130rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	transform: scale(1);
	transition: transform .12s ease, filter .12s ease;
	user-select: none;
	overflow: hidden;
}
.big-btn.pressed {
	transform: scale(0.97);
	filter: brightness(0.98);
}
.btn-ok { background: #f0a23a; }
.btn-warn { background: #f3b562; }
.btn-disabled, .btn-loading { background: #d8d8d8; }

.pulse {
	position: absolute;
	inset: -18rpx;
	border-radius: 999px;
	border: 2rpx solid rgba(240, 162, 58, .45);
	animation: pulse 1.35s ease-in-out infinite;
}
@keyframes pulse {
	0% { transform: scale(.92); opacity: .9; }
	70% { transform: scale(1.06); opacity: .1; }
	100% { transform: scale(1.06); opacity: 0; }
}

.big-line1 { font-size: 28rpx; color: #fff; font-weight: 600; }
.big-line2 { margin-top: 10rpx; font-size: 30rpx; color: #fff; font-weight: 700; }
.big-line3 { margin-top: 10rpx; font-size: 26rpx; color: rgba(255, 255, 255, .95); }

.success-badge {
	position: absolute;
	right: 18rpx;
	top: 18rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 24rpx;
	background: rgba(0, 0, 0, .16);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: pop .18s ease-out;
}
@keyframes pop {
	0% { transform: scale(.7); opacity: .2; }
	100% { transform: scale(1); opacity: 1; }
}

/* shake */
.big-btn.shake { animation: shake .42s ease; }
@keyframes shake {
	0% { transform: translateX(0); }
	15% { transform: translateX(-10rpx); }
	30% { transform: translateX(10rpx); }
	45% { transform: translateX(-8rpx); }
	60% { transform: translateX(8rpx); }
	75% { transform: translateX(-4rpx); }
	100% { transform: translateX(0); }
}

/* address row (center like screenshot) */
.addr-row {
	margin-top: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90%;
}
.dot {
	width: 14rpx;
	height: 14rpx;
	border-radius: 7rpx;
	margin-right: 10rpx;
}
.dot-ok { background: #38b000; }
.dot-warn { background: #ff7a00; }

.addr-text {
	font-size: 26rpx;
	color: #666;
	line-height: 34rpx;
	text-align: center;
}
.dist { color: #999; margin-left: 6rpx; }
.tip-warn { margin-top: 10rpx; font-size: 24rpx; color: #ff7a00; }

/* ✅ tool-card : like screenshot, moved up (not fixed) */
.tool-card {
	margin-top: 16rpx;
	background: #fff;
	border-radius: 18rpx;
	padding: 18rpx 10rpx;
	display: flex;
	justify-content: space-around;
}
.bar-item {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bar-ico {
	width: 70rpx;
	height: 70rpx;
	border-radius: 14rpx;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bar-txt {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #333;
}

/* modal */
.modal-mask {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	display: flex;
	align-items: flex-end;
	z-index: 1000;
}
.modal {
	width: 100%;
	background: #fff;
	border-top-left-radius: 22rpx;
	border-top-right-radius: 22rpx;
	padding: 20rpx 22rpx 26rpx;
}
.modal-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #111;
	margin-bottom: 14rpx;
}
.form-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-top: 12rpx;
}
.label { width: 140rpx; font-size: 26rpx; color: #333; }
.picker {
	padding: 14rpx 16rpx;
	background: #f2f2f2;
	border-radius: 12rpx;
	font-size: 26rpx;
	color: #333;
}
.input {
	flex: 1;
	padding: 14rpx 16rpx;
	background: #f2f2f2;
	border-radius: 12rpx;
	font-size: 26rpx;
}
.btn-row {
	display: flex;
	justify-content: flex-end;
	gap: 12rpx;
	margin-top: 18rpx;
}
.btn {
	padding: 14rpx 22rpx;
	border-radius: 12rpx;
	background: #f0a23a;
	color: #fff;
	font-size: 26rpx;
}
.btn.ghost { background: #eee; color: #333; }
.btn.disabled { opacity: .6; }
</style>

如果你还想把“审批/补卡”做得更完整（比如：补卡时弹出审批人列表，直接从 20.leaveAuditListt 拉 adminArray 供选择，而不是手填 confirmConsumerId），我也能顺着你这套接口把那块补齐。只要告诉我你们审批页/请假页/统计页的真实路由路径就行。