581 lines
12 KiB
Vue
581 lines
12 KiB
Vue
<template>
|
||
<view class="about-us-container">
|
||
<!-- 页面标题 -->
|
||
<view class="page-header">
|
||
<view class="header-left" @click="goBack">
|
||
<view class="back-icon">←</view>
|
||
</view>
|
||
<view class="header-title">关于我们</view>
|
||
<view class="header-right"></view>
|
||
</view>
|
||
|
||
<!-- 公司信息 -->
|
||
<view class="company-section">
|
||
<view class="company-logo">
|
||
<view class="logo-icon">🏢</view>
|
||
</view>
|
||
<view class="company-info">
|
||
<view class="company-name">{{ config.appInfo.name }}</view>
|
||
<view class="company-slogan">专业的刷题小程序管理解决方案</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 版本信息 -->
|
||
<view class="version-section">
|
||
<view class="version-item">
|
||
<view class="version-label">当前版本</view>
|
||
<view class="version-value">{{ appVersion }}</view>
|
||
</view>
|
||
<view class="version-item">
|
||
<view class="version-label">更新时间</view>
|
||
<view class="version-value">{{ updateTime }}</view>
|
||
</view>
|
||
<view class="version-item">
|
||
<view class="version-label">系统状态</view>
|
||
<view class="version-value">
|
||
<view class="status-indicator"></view>
|
||
<view class="status-text">运行中</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能介绍 -->
|
||
<view class="features-section">
|
||
<view class="section-title">功能介绍</view>
|
||
<view class="features-list">
|
||
<view class="feature-item">
|
||
<view class="feature-icon">📊</view>
|
||
<view class="feature-info">
|
||
<view class="feature-title">统计分析</view>
|
||
<view class="feature-desc">实时查看运营数据，掌握业务动态</view>
|
||
</view>
|
||
</view>
|
||
<view class="feature-item">
|
||
<view class="feature-icon">👥</view>
|
||
<view class="feature-info">
|
||
<view class="feature-title">会员管理</view>
|
||
<view class="feature-desc">管理会员信息，支持会员赠送和续费</view>
|
||
</view>
|
||
</view>
|
||
<view class="feature-item">
|
||
<view class="feature-icon">📈</view>
|
||
<view class="feature-info">
|
||
<view class="feature-title">分销系统</view>
|
||
<view class="feature-desc">支持分销员管理，提高推广效率</view>
|
||
</view>
|
||
</view>
|
||
<view class="feature-item">
|
||
<view class="feature-icon">🏢</view>
|
||
<view class="feature-info">
|
||
<view class="feature-title">驾校管理</view>
|
||
<view class="feature-desc">管理驾校信息，配置自定义字段</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 联系信息 -->
|
||
<view class="contact-section">
|
||
<view class="section-title">联系我们</view>
|
||
<view class="contact-list">
|
||
<view class="contact-item">
|
||
<view class="contact-icon">📞</view>
|
||
<view class="contact-info">
|
||
<view class="contact-label">联系电话</view>
|
||
<view class="contact-value">{{ tentantInfo.contactPhone }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="contact-item">
|
||
<view class="contact-icon">👤</view>
|
||
<view class="contact-info">
|
||
<view class="contact-label">联系人</view>
|
||
<view class="contact-value">{{ tentantInfo.contactPerson }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="contact-item">
|
||
<view class="contact-icon">📍</view>
|
||
<view class="contact-info">
|
||
<view class="contact-label">公司地址</view>
|
||
<view class="contact-value">{{ tentantInfo.address }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 版权信息 -->
|
||
<view class="copyright-section">
|
||
<view class="copyright-text">© 2026 {{ tentantInfo.name }}</view>
|
||
<view class="copyright-desc">All Rights Reserved</view>
|
||
<!-- <view class="copyright-policy">
|
||
<view class="policy-item" @click="viewPrivacyPolicy">隐私政策</view>
|
||
<view class="policy-divider">|</view>
|
||
<view class="policy-item" @click="viewTermsOfService">服务条款</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue"
|
||
import { useTenantStore } from "@/store/modules/tenant"
|
||
import config from "@/config"
|
||
|
||
// 应用信息
|
||
const appVersion = ref(config.appInfo.version)
|
||
const updateTime = ref(config.appInfo.updateTime)
|
||
|
||
const tentantInfo = useTenantStore().tenantInfo
|
||
|
||
// 返回上一页
|
||
function goBack() {
|
||
uni.navigateBack({ delta: 1 })
|
||
}
|
||
|
||
// 查看隐私政策
|
||
function viewPrivacyPolicy() {
|
||
uni.showModal({
|
||
title: '隐私政策',
|
||
content: '隐私政策详情页面正在开发中',
|
||
showCancel: false
|
||
})
|
||
}
|
||
|
||
// 查看服务条款
|
||
function viewTermsOfService() {
|
||
uni.showModal({
|
||
title: '服务条款',
|
||
content: '服务条款详情页面正在开发中',
|
||
showCancel: false
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #f5f7fa;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
view {
|
||
font-size: 14px;
|
||
line-height: inherit;
|
||
}
|
||
/* #endif */
|
||
|
||
.about-us-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 120rpx;
|
||
background-color: #fff;
|
||
padding: 0 32rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header-left {
|
||
width: 60rpx;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 40rpx;
|
||
color: #303133;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
.header-right {
|
||
width: 60rpx;
|
||
}
|
||
|
||
/* 公司信息 */
|
||
.company-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60rpx 32rpx;
|
||
background-color: #fff;
|
||
margin: 16rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.company-logo {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 80rpx;
|
||
background-color: #409eff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.logo-icon {
|
||
font-size: 80rpx;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 16rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.company-slogan {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 版本信息 */
|
||
.version-section {
|
||
padding: 32rpx;
|
||
background-color: #fff;
|
||
margin: 0 16rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.version-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #e4e7ed;
|
||
}
|
||
|
||
.version-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.version-label {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
}
|
||
|
||
.version-value {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.status-indicator {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 6rpx;
|
||
background-color: #67c23a;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.status-text {
|
||
color: #67c23a;
|
||
}
|
||
|
||
/* 功能介绍 */
|
||
.features-section {
|
||
padding: 32rpx;
|
||
background-color: #fff;
|
||
margin: 0 16rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 32rpx;
|
||
padding-left: 12rpx;
|
||
border-left: 8rpx solid #409eff;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.features-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 24rpx;
|
||
border: 1rpx solid #e4e7ed;
|
||
border-radius: 12rpx;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 40rpx;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.feature-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 8rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 联系信息 */
|
||
.contact-section {
|
||
padding: 32rpx;
|
||
background-color: #fff;
|
||
margin: 0 16rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.contact-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border: 1rpx solid #e4e7ed;
|
||
border-radius: 12rpx;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 40rpx;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.contact-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.contact-label {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.contact-value {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
/* 版权信息 */
|
||
.copyright-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 32rpx;
|
||
background-color: #f0f2f5;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.copyright-text {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.copyright-desc {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.copyright-policy {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.policy-item {
|
||
font-size: 24rpx;
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.policy-divider {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
|
||
/* 大屏设备响应式 */
|
||
@media screen and (min-width: 1024px) {
|
||
.about-us-container {
|
||
max-width: 1000px;
|
||
}
|
||
|
||
.page-header {
|
||
height: 160rpx;
|
||
padding: 0 64rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 56rpx;
|
||
}
|
||
|
||
.company-section {
|
||
padding: 100rpx 50rpx;
|
||
}
|
||
|
||
.company-logo {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 100rpx;
|
||
margin-bottom: 48rpx;
|
||
}
|
||
|
||
.logo-icon {
|
||
font-size: 100rpx;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 48rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.company-slogan {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.version-section {
|
||
padding: 48rpx;
|
||
}
|
||
|
||
.version-item {
|
||
padding: 28rpx 0;
|
||
}
|
||
|
||
.version-label {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.version-value {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.features-section {
|
||
padding: 48rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 40rpx;
|
||
margin-bottom: 48rpx;
|
||
}
|
||
|
||
.features-list {
|
||
grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr));
|
||
gap: 40rpx;
|
||
}
|
||
|
||
.feature-item {
|
||
padding: 40rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 56rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 36rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.contact-section {
|
||
padding: 48rpx;
|
||
}
|
||
|
||
.contact-list {
|
||
gap: 40rpx;
|
||
}
|
||
|
||
.contact-item {
|
||
padding: 40rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 56rpx;
|
||
margin-right: 28rpx;
|
||
}
|
||
|
||
.contact-label {
|
||
font-size: 32rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.contact-value {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.copyright-section {
|
||
padding: 80rpx 50rpx;
|
||
}
|
||
|
||
.copyright-text {
|
||
font-size: 36rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.copyright-desc {
|
||
font-size: 32rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.policy-item {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.policy-divider {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
</style> |