medical-mall/pages/mall/delivery/about.uvue

<template>
  <view class="about-container">
    <!-- 顶部导航栏 -->
    <view class="header-bar">
      <!-- 左侧：返回按钮 -->
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
      </view>

      <!-- 中部：页面标题 -->
      <text class="page-title">关于我们</text>

      <!-- 右侧：留空 -->
      <view class="nav-right"></view>
    </view>

    <!-- 主要内容 -->
    <view class="content-wrapper">
      <!-- Logo 区域 -->
      <view class="logo-section">
        <image src="/static/logo.png" class="app-logo" mode="aspectFit" />
      </view>

      <!-- 版本信息 -->
      <view class="version-info">
        <text class="version-text">版本: v2.1.5</text>
      </view>

      <!-- 应用介绍 -->
      <view class="app-intro">
        <text class="intro-title">快递配送助手</text>
        <text class="intro-desc">专为配送员打造的一站式智能配送平台，提升效率，优化服务体验</text>
      </view>

      <!-- 功能亮点 -->
      <view class="feature-section">
        <text class="section-header">核心功能</text>
        <view class="features">
          <view class="feature-item">
            <text class="feature-icon">📍</text>
            <text class="feature-text">智能路线规划</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📱</text>
            <text class="feature-text">实时订单管理</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">💰</text>
            <text class="feature-text">在线结算系统</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">⭐</text>
            <text class="feature-text">客户评价反馈</text>
          </view>
        </view>
      </view>

      <!-- 公司信息 -->
      <view class="company-info">
        <text class="section-header">公司信息</text>
        <text class="info-item">公司名称: 快递科技有限公司</text>
        <text class="info-item">成立时间: 2020年</text>
        <text class="info-item">总部地点: 深圳市南山区科技园</text>
        <text class="info-item">联系电话: 400-123-4567</text>
        <text class="info-item">邮箱: support@delivery.com</text>
      </view>

      <!-- 更新日志 -->
      <view class="update-log">
        <text class="section-header">近期更新</text>
        <view class="log-item">
          <text class="log-version">v2.1.5 (2026-01-27)</text>
          <text class="log-desc">• 修复了地图定位精度问题\n• 优化了任务分配算法\n• 提升了语音播报稳定性</text>
        </view>
        <view class="log-item">
          <text class="log-version">v2.1.4 (2026-01-15)</text>
          <text class="log-desc">• 新增智能语音助手功能\n• 改进了路线导航算法\n• 修复了部分UI显示异常</text>
        </view>
        <view class="log-item">
          <text class="log-version">v2.1.3 (2025-12-28)</text>
          <text class="log-desc">• 新增客户满意度评价\n• 优化了离线地图功能\n• 增强了数据同步机制</text>
        </view>
      </view>

      <!-- 版权信息 -->
      <view class="copyright">
        <text class="copyright-text">© 2020-2026 快递科技有限公司 版权所有</text>
      </view>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.about-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-bar {
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #e9ecef;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.nav-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
}

.nav-left:hover {
  background-color: #f0f0f0;
}

.nav-left:active {
  background-color: #e0e0e0;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  flex: 1; /* 让标题占据中间剩余空间 */
}

.nav-right {
  width: 60rpx; /* 与左侧箭头区域宽度一致 */
  height: 1rpx;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40rpx 30rpx;
  gap: 40rpx;
}

.logo-section {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.app-logo {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
  background-color: #e3f2fd;
  padding: 20rpx;
}

.version-info {
  text-align: center;
}

.version-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  background-color: #e8f4fd;
  padding: 10rpx 20rpx;
  border-radius: 15rpx;
}

.app-intro {
  text-align: center;
  padding: 30rpx 0;
}

.intro-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.intro-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.feature-section, .company-info, .update-log {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feature-item {
  display: flex;
  align-items: center;
}

.feature-icon {
  font-size: 32rpx;
  margin-right: 15rpx;
  width: 40rpx;
}

.feature-text {
  font-size: 26rpx;
  color: #555;
}

.company-info .info-item {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  line-height: 1.5;
}

.update-log {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.log-item {
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 20rpx;
}

.log-item:last-child {
  border-bottom: none;
}

.log-version {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.log-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  white-space: pre-line;
}

.copyright {
  text-align: center;
  padding: 30rpx 0;
}

.copyright-text {
  font-size: 22rpx;
  color: #999;
}
</style>