ss-tiku-manage-h5/src/pages/mine/about-us.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>