380 lines
7.6 KiB
Vue
380 lines
7.6 KiB
Vue
<template>
|
|
<scroll-view class="about-page" scroll-y :scroll-with-animation="true">
|
|
<!-- 品牌区 -->
|
|
<view class="brand-section">
|
|
<view class="brand-logo-card">
|
|
<image class="brand-logo-img" src="/static/logo.jpg" mode="aspectFit" />
|
|
</view>
|
|
<text class="brand-name">毛球手账</text>
|
|
<text class="brand-slogan">让宠物健康管理像记账一样简单</text>
|
|
</view>
|
|
|
|
<!-- 版本信息 -->
|
|
<view class="info-card">
|
|
<view class="info-row">
|
|
<text class="info-label">当前版本</text>
|
|
<text class="info-value">v1.0.0</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">Build</text>
|
|
<text class="info-value">100</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 核心功能 -->
|
|
<view class="feature-section">
|
|
<view class="section-title">核心功能</view>
|
|
<view class="feature-grid">
|
|
<view v-for="f in features" :key="f.label" class="feature-item">
|
|
<view class="feature-icon-wrap" :style="{ background: f.bg }">
|
|
<TnIcon :name="f.icon" :size="40" :color="f.color" />
|
|
</view>
|
|
<text class="feature-name">{{ f.label }}</text>
|
|
<text class="feature-desc">{{ f.desc }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 技术信息 -->
|
|
<view class="tech-card">
|
|
<view class="section-title">关于我们</view>
|
|
<view class="tech-list">
|
|
<view class="tech-item">
|
|
<TnIcon name="copyright" :size="36" color="#F97316" />
|
|
<text class="tech-text">毛球手账 版权所有</text>
|
|
</view>
|
|
<view class="tech-item">
|
|
<TnIcon name="safe" :size="36" color="#14B8A6" />
|
|
<text class="tech-text">数据采用云端加密存储</text>
|
|
</view>
|
|
<view class="tech-item">
|
|
<TnIcon name="floral" :size="36" color="#8B5CF6" />
|
|
<text class="tech-text">用心关爱每一只毛孩子</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系与反馈 -->
|
|
<view class="contact-card">
|
|
<view class="contact-item" @click="handleFeedback">
|
|
<view class="contact-icon-wrap">
|
|
<TnIcon name="service" :size="40" color="#F97316" />
|
|
</view>
|
|
<text class="contact-text">帮助与反馈</text>
|
|
<TnIcon name="right" :size="28" color="#D1D5DB" />
|
|
</view>
|
|
<view class="contact-item" @click="handleAgreement">
|
|
<view class="contact-icon-wrap">
|
|
<TnIcon name="order" :size="40" color="#3B82F6" />
|
|
</view>
|
|
<text class="contact-text">用户协议与隐私政策</text>
|
|
<TnIcon name="right" :size="28" color="#D1D5DB" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部 -->
|
|
<view class="footer-section">
|
|
<text class="footer-text">Copyright 2024 FurBall Team</text>
|
|
<text class="footer-text">All Rights Reserved</text>
|
|
</view>
|
|
|
|
<view class="bottom-placeholder" />
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue'
|
|
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
|
|
|
|
const features = reactive([
|
|
{
|
|
icon: 'floral-fill',
|
|
label: '宠物档案',
|
|
desc: '记录宠物品种、年龄、体重等信息',
|
|
color: '#F97316',
|
|
bg: '#FFF7ED',
|
|
},
|
|
{
|
|
icon: 'write-fill',
|
|
label: '健康记录',
|
|
desc: '追踪疫苗接种、体检、用药历史',
|
|
color: '#14B8A6',
|
|
bg: '#F0FDFA',
|
|
},
|
|
{
|
|
icon: 'calendar-fill',
|
|
label: '日程提醒',
|
|
desc: '驱虫、洗澡、体检智能提醒',
|
|
color: '#8B5CF6',
|
|
bg: '#F5F3FF',
|
|
},
|
|
{
|
|
icon: 'cloud-fill',
|
|
label: '云端同步',
|
|
desc: '数据安全备份，多端共享',
|
|
color: '#3B82F6',
|
|
bg: '#EFF6FF',
|
|
},
|
|
{
|
|
icon: 'inventory-fill',
|
|
label: '养宠百科',
|
|
desc: '品种知识、常见病护理指南',
|
|
color: '#EC4899',
|
|
bg: '#FDF2F8',
|
|
},
|
|
{
|
|
icon: 'vip-fill',
|
|
label: '会员专享',
|
|
desc: '数据导出、高级分析等特权',
|
|
color: '#F59E0B',
|
|
bg: '#FFFBEB',
|
|
},
|
|
])
|
|
|
|
function handleFeedback() {
|
|
uni.navigateTo({ url: '/pages/mine/feedback' })
|
|
}
|
|
|
|
function handleAgreement() {
|
|
uni.showModal({
|
|
title: '用户协议与隐私政策',
|
|
content:
|
|
'我们仅收集用于提供宠物健康管理服务所必需的信息，包括你的微信昵称、头像以及宠物档案数据。我们承诺不向第三方出售你的数据。',
|
|
showCancel: false,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$primary: #F97316;
|
|
$primary-bg: #FFF7ED;
|
|
$text-dark: #431407;
|
|
$text-body: #7C2D12;
|
|
$text-muted: #9CA3AF;
|
|
$card-bg: #FFFFFF;
|
|
$border-color: #FED7AA;
|
|
$radius-xl: 36rpx;
|
|
$radius-lg: 28rpx;
|
|
$shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.08);
|
|
|
|
.about-page {
|
|
height: 100vh;
|
|
background-color: $primary-bg;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// === 品牌区 ===
|
|
.brand-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 80rpx 0 48rpx;
|
|
}
|
|
|
|
.brand-logo-card {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 40rpx;
|
|
background: $card-bg;
|
|
border: 4rpx solid $border-color;
|
|
box-shadow: 0 16rpx 40rpx rgba(249, 115, 22, 0.15);
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
|
|
.brand-logo-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 28rpx;
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 48rpx;
|
|
font-weight: 800;
|
|
color: $text-dark;
|
|
letter-spacing: 4rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.brand-slogan {
|
|
font-size: 26rpx;
|
|
color: $text-body;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
// === 版本信息 ===
|
|
.info-card {
|
|
margin: 0 24rpx 32rpx;
|
|
background: $card-bg;
|
|
border-radius: $radius-lg;
|
|
border: 2rpx solid $border-color;
|
|
box-shadow: $shadow;
|
|
padding: 28rpx 28rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14rpx 0;
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// === 核心功能 ===
|
|
.feature-section {
|
|
margin: 0 24rpx 32rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
margin-bottom: 20rpx;
|
|
padding-left: 8rpx;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.feature-item {
|
|
width: calc(50% - 8rpx);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
padding: 28rpx 16rpx;
|
|
background: $card-bg;
|
|
border-radius: $radius-lg;
|
|
border: 2rpx solid $border-color;
|
|
box-shadow: $shadow;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.feature-icon-wrap {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.feature-name {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 20rpx;
|
|
color: $text-muted;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// === 技术信息 ===
|
|
.tech-card {
|
|
margin: 0 24rpx 32rpx;
|
|
background: $card-bg;
|
|
border-radius: $radius-lg;
|
|
border: 2rpx solid $border-color;
|
|
box-shadow: $shadow;
|
|
padding: 28rpx 28rpx 20rpx;
|
|
}
|
|
|
|
.tech-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
padding-top: 8rpx;
|
|
}
|
|
|
|
.tech-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.tech-text {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: $text-body;
|
|
}
|
|
|
|
// === 联系与反馈 ===
|
|
.contact-card {
|
|
margin: 0 24rpx 32rpx;
|
|
background: $card-bg;
|
|
border-radius: $radius-lg;
|
|
border: 2rpx solid $border-color;
|
|
box-shadow: $shadow;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 28rpx;
|
|
border-bottom: 2rpx solid #FEF3C7;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.contact-icon-wrap {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 18rpx;
|
|
background: $primary-bg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.contact-text {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// === 底部 ===
|
|
.footer-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 40rpx 0 12rpx;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 22rpx;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 60rpx;
|
|
}
|
|
</style>
|