完善版本
This commit is contained in:
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<un-pages
|
||||
:show-nav-bar="true"
|
||||
nav-bar-title="关于我们"
|
||||
:show-back="true"
|
||||
:show-tab-bar="false"
|
||||
>
|
||||
<view class="about-container">
|
||||
<!-- Logo和应用信息 -->
|
||||
<view class="app-info">
|
||||
<view class="app-logo">
|
||||
<text class="logo-icon">📊</text>
|
||||
</view>
|
||||
<text class="app-name">家庭记账</text>
|
||||
<text class="app-version">版本 1.0.0</text>
|
||||
</view>
|
||||
|
||||
<!-- 功能介绍 -->
|
||||
<view class="feature-section">
|
||||
<view class="section-title">产品介绍</view>
|
||||
<view class="feature-card">
|
||||
<text class="feature-text">
|
||||
家庭记账是一款简单易用的个人及家庭财务管理应用。我们致力于帮助用户轻松记录每一笔收支，合理规划财务，实现财富增长。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 核心功能 -->
|
||||
<view class="feature-section">
|
||||
<view class="section-title">核心功能</view>
|
||||
<view class="feature-grid">
|
||||
<view class="feature-item">
|
||||
<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||
<uni-icons type="compose" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<text class="feature-name">快速记账</text>
|
||||
<text class="feature-desc">简单快捷记录每一笔收支</text>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||||
<uni-icons type="person" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<text class="feature-name">家庭共享</text>
|
||||
<text class="feature-desc">与家人共享财务数据</text>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);">
|
||||
<uni-icons type="chart" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<text class="feature-name">统计分析</text>
|
||||
<text class="feature-desc">多维度数据可视化分析</text>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
||||
<uni-icons type="download" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<text class="feature-name">数据导出</text>
|
||||
<text class="feature-desc">支持导出多种格式报表</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<view class="contact-section">
|
||||
<view class="section-title">联系我们</view>
|
||||
<view class="contact-list">
|
||||
<view class="contact-item">
|
||||
<view class="contact-left">
|
||||
<uni-icons type="email" size="20" color="#667eea"></uni-icons>
|
||||
<text class="contact-label">官方邮箱</text>
|
||||
</view>
|
||||
<text class="contact-value">support@familyaccount.com</text>
|
||||
</view>
|
||||
<view class="contact-item">
|
||||
<view class="contact-left">
|
||||
<uni-icons type="phone" size="20" color="#667eea"></uni-icons>
|
||||
<text class="contact-label">客服电话</text>
|
||||
</view>
|
||||
<text class="contact-value">400-XXX-XXXX</text>
|
||||
</view>
|
||||
<view class="contact-item">
|
||||
<view class="contact-left">
|
||||
<uni-icons type="chatbubble" size="20" color="#667eea"></uni-icons>
|
||||
<text class="contact-label">微信公众号</text>
|
||||
</view>
|
||||
<text class="contact-value">家庭记账助手</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 法律条款 -->
|
||||
<view class="legal-section">
|
||||
<view class="legal-item" @tap="navigateTo('/pages/ucenter/agreement/user')">
|
||||
<text class="legal-text">用户协议</text>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
<view class="legal-item" @tap="navigateTo('/pages/ucenter/agreement/privacy')">
|
||||
<text class="legal-text">隐私政策</text>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部版权信息 -->
|
||||
<view class="footer-section">
|
||||
<text class="copyright">© 2024 家庭记账 版权所有</text>
|
||||
<text class="icp">ICP备案号：京ICP备XXXXXXXX号</text>
|
||||
</view>
|
||||
</view>
|
||||
</un-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appName: '家庭记账',
|
||||
version: '1.0.0'
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// 获取应用版本信息（如果有）
|
||||
this.getAppInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取应用信息
|
||||
getAppInfo() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
|
||||
this.version = widgetInfo.version
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
|
||||
// 页面跳转
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.about-container {
|
||||
min-height: 100vh;
|
||||
background: #F8F8F8;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 80rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
|
||||
.app-logo {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
|
||||
|
||||
.logo-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
margin: 30rpx;
|
||||
animation: fadeInUp 0.6s ease-out 0.1s both;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.feature-text {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
|
||||
.feature-item {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.feature-icon-wrapper {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
margin: 30rpx;
|
||||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.contact-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.contact-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.legal-section {
|
||||
margin: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
animation: fadeInUp 0.6s ease-out 0.3s both;
|
||||
|
||||
.legal-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.legal-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
margin: 40rpx 30rpx 20rpx;
|
||||
text-align: center;
|
||||
animation: fadeInUp 0.6s ease-out 0.4s both;
|
||||
|
||||
.copyright {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.icp {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user