111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<scroll-view class="page-body" scroll-y>
|
||
<view class="sync-container">
|
||
<view class="sync-icon">☁️</view>
|
||
<view class="sync-title">云端数据同步</view>
|
||
<view class="sync-desc">
|
||
同步内容：本地表单数据、人员数据、<br>设施数据上传至云端服务器
|
||
</view>
|
||
<view class="sync-warning">
|
||
⚠️ 同步前建议联系管理人员，<br>防止数据缺失或覆盖
|
||
</view>
|
||
<view class="sync-actions">
|
||
<button class="btn btn-outline" @click="handleCancel">取消</button>
|
||
<button class="btn btn-primary" @click="handleSync">继续同步</button>
|
||
</view>
|
||
<view class="sync-last">
|
||
<text class="last-label">上次同步时间</text>
|
||
<text class="last-time">2026-05-14 06:30:12</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
handleCancel() {
|
||
uni.showToast({ title: '已取消', icon: 'none' })
|
||
},
|
||
handleSync() {
|
||
uni.showLoading({ title: '同步中...' })
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '同步成功', icon: 'success' })
|
||
}, 1500)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.sync-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 48px $spacing-md;
|
||
}
|
||
|
||
.sync-icon {
|
||
font-size: 64px;
|
||
margin-bottom: $spacing-md;
|
||
}
|
||
|
||
.sync-title {
|
||
font-size: $font-size-xl;
|
||
font-weight: 600;
|
||
color: $text-primary;
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
|
||
.sync-desc {
|
||
font-size: $font-size-base;
|
||
color: $text-secondary;
|
||
text-align: center;
|
||
line-height: 1.8;
|
||
margin-bottom: $spacing-xl;
|
||
}
|
||
|
||
.sync-warning {
|
||
background: $tag-orange;
|
||
border-radius: $border-radius-md;
|
||
padding: 14px;
|
||
width: 100%;
|
||
margin-bottom: $spacing-xl;
|
||
font-size: $font-size-sm;
|
||
color: #d48806;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.sync-actions {
|
||
display: flex;
|
||
gap: $spacing-base;
|
||
width: 100%;
|
||
}
|
||
|
||
.sync-last {
|
||
margin-top: $spacing-xl;
|
||
text-align: center;
|
||
|
||
.last-label {
|
||
display: block;
|
||
font-size: $font-size-sm;
|
||
color: $text-placeholder;
|
||
}
|
||
|
||
.last-time {
|
||
display: block;
|
||
font-size: $font-size-md;
|
||
color: $text-primary;
|
||
font-weight: 500;
|
||
margin-top: $spacing-xs;
|
||
}
|
||
}
|
||
</style>
|