159 lines
2.8 KiB
Vue
159 lines
2.8 KiB
Vue
<script setup>
|
||
/**
|
||
* 关于页面
|
||
* 展示应用 Logo 和版本号
|
||
*/
|
||
import { ref, onMounted } from 'vue'
|
||
import { getAbout } from '@/api/system.js'
|
||
|
||
// 页面数据
|
||
const loading = ref(true)
|
||
const aboutInfo = ref({
|
||
logo: '/static/logo.png',
|
||
appName: '学业邑规划',
|
||
version: '1.0.0',
|
||
description: ''
|
||
})
|
||
|
||
/**
|
||
* 获取关于信息
|
||
*/
|
||
async function fetchAboutInfo() {
|
||
loading.value = true
|
||
try {
|
||
const res = await getAbout()
|
||
if (res.code === 0 && res.data) {
|
||
// 合并后端返回的数据
|
||
aboutInfo.value = {
|
||
...aboutInfo.value,
|
||
...res.data
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取关于信息失败:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 页面加载
|
||
*/
|
||
onMounted(() => {
|
||
fetchAboutInfo()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="about-page">
|
||
<!-- 内容区域 -->
|
||
<view class="about-content">
|
||
<!-- Logo 区域 -->
|
||
<view class="logo-section">
|
||
<image
|
||
class="logo"
|
||
:src="aboutInfo.logo || '/static/logo.png'"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 应用名称 -->
|
||
<view class="app-name">
|
||
<text>{{ aboutInfo.appName }}</text>
|
||
</view>
|
||
|
||
<!-- 版本号 -->
|
||
<view class="version">
|
||
<text>版本号 {{ aboutInfo.version }}</text>
|
||
</view>
|
||
|
||
<!-- 描述信息（如果有） -->
|
||
<view v-if="aboutInfo.description" class="description">
|
||
<text>{{ aboutInfo.description }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部版权信息 -->
|
||
<view class="footer">
|
||
<text class="copyright">© 2025 学业邑规划</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/variables.scss';
|
||
|
||
.about-page {
|
||
min-height: 100vh;
|
||
background-color: $bg-white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 内容区域
|
||
.about-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: $spacing-xl;
|
||
}
|
||
|
||
// Logo 区域
|
||
.logo-section {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
.logo {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: $border-radius-lg;
|
||
}
|
||
}
|
||
|
||
// 应用名称
|
||
.app-name {
|
||
margin-bottom: $spacing-md;
|
||
|
||
text {
|
||
font-size: $font-size-xl;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
|
||
// 版本号
|
||
.version {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
text {
|
||
font-size: $font-size-md;
|
||
color: $text-secondary;
|
||
}
|
||
}
|
||
|
||
// 描述信息
|
||
.description {
|
||
max-width: 600rpx;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: $font-size-sm;
|
||
color: $text-placeholder;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
// 底部版权
|
||
.footer {
|
||
padding: $spacing-xl;
|
||
padding-bottom: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
|
||
text-align: center;
|
||
|
||
.copyright {
|
||
font-size: $font-size-xs;
|
||
color: $text-placeholder;
|
||
}
|
||
}
|
||
</style>
|