<script setup lang="ts"> import { ref } from 'vue' const downloadUrl = ref(sessionStorage.getItem('appdownload') || '') const handleDownload = () => { window.open(downloadUrl.value, '_blank') } </script> <template> <div class="page-container"> <div class="content"> <div class="download-section"> <div class="download-buttons"> <button class="download-btn android" @click="handleDownload"> <var-icon name="android" :size="24" /> <span>Android 下载</span> </button> <button class="download-btn ios" @click="handleDownload"> <var-icon name="apple" :size="24" /> <span>iOS 下载</span> </button> </div> </div> </div> </div> </template> <style lang="scss" scoped> .page-container { min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); padding-bottom: 40px; } .content { padding: 20px; } .app-preview { margin: 20px 0; text-align: center; } .download-section { background: white; border-radius: 16px; padding: 24px; margin: 20px 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .download-buttons { display: flex; gap: 12px; margin-top: 24px; .download-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; &.android { background: #4CAF50; color: white; } &.ios { background: #000; color: white; &:active { background: #333; } } } } </style>